boom! toolbar!

css/main.css

@@ -23,5 +23,40 @@ body {
   border: 1px, solid , black;
   border: solid;
   border-color: white;
-  background-image: url(../images/fliesen.png);
+  background-image: url(../images/infobg.png);
+}
+
+#buildselect {
+  position: fixed;
+  border: 1px, solid , black;
+  border: solid;
+  border-color: yellow;
+  background-image: url(../images/infobg.png);
+  width: 1200;
+  height: 576;
+  overflow-y: scroll;
+  padding: 4;
+}
+
+.buildtile {
+  width: 48;
+  height: 48;
+  margin: 4;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 24;
+}
+
+::-webkit-scrollbar-track {
+  background: #B0BEC5;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #78909C;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #546E7A;
 }

index.html

@@ -8,7 +8,7 @@
   <script src="js/libs/jquery.js"></script>
   <script src="js/libs/copyCSS.js"></script>
   <!-- Own scripts-->
-  <script src="js/resize.js"></script>
+  <script src="js/userinterface.js"></script>
   <script src="js/util.js"></script>
   <script src="js/baseclasses.js"></script>
   <script src="js/tiles.js"></script>
@@ -22,6 +22,8 @@
   </canvas>
   <canvas id="info">
   </canvas>
+  <div id="buildselect">
+  </div>
 </body>
 
 </html>

js/baseclasses.js

@@ -4,7 +4,6 @@ class Tile {
     this.y = y
     this.direction = "right"
     this.input = new Inventory()
-    this.frames = 1
     this.name = "base"
     this.texture = {
       "0": [],

js/game.js

@@ -7,9 +7,12 @@ var timestep = 1000 / 48
 var delta = 0
 var lastFrameTimeMs = 0
 var ctx = {}
+var infoCtx = {}
 var currentFactory = 0
 var fulltime = 0
 
+var mode = "none"
+
 $(document).ready(function() {
   loadGameData()
   loadItems()
@@ -90,8 +93,8 @@ function render() {
   for (var i = 0; i < tilesToRender.length; i++) {
     var tile = tilesToRender[i]
     var img = new Image
-    var tmp = tile.getTexture(fulltime,0)
-    if (tmp!="0") {
+    var tmp = tile.getTexture(fulltime, 0)
+    if (tmp != "0") {
       img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
@@ -108,18 +111,20 @@ function render() {
   for (var i = 0; i < tilesToRender.length; i++) {
     var tile = tilesToRender[i]
     var img = new Image
-    var tmp = tile.getTexture(fulltime,1)
-    if (tmp!="0") {
+    var tmp = tile.getTexture(fulltime, 1)
+    if (tmp != "0") {
       img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
   }
   //DRAW CURSOR BOX
-  if(isCursorInScreen){
+  if (isCursorInScreen) {
     ctx.globalAlpha = 0.4
-    ctx.fillRect(cursorScreenX*48,cursorScreenY*48,48,48)
+    ctx.fillRect(cursorScreenX * 48, cursorScreenY * 48, 48, 48)
     ctx.globalAlpha = 1
   }
+  //DRAW INFO BAR
+  drawInfoBar()
 }
 
 function getItemFormId(id) {
@@ -141,4 +146,38 @@ function prepairRender() {
   canvas = $('#info')[0];
   canvas.width = 432
   canvas.height = 240
+  infoCtx = canvas.getContext('2d')
+  //tileClasses
+  for(var i=0;i<tileClasses.length;i++){
+    var tmp = new tileClasses[i]()
+    var src = ""
+    if(tmp.texture[1].length>0){
+      src = ' src="images/tiles/'+tmp.texture[1][0]+'.png"'
+    }
+    var style = ''
+    if(tmp.texture[0].length>0){
+      style = ' style="background-image: url(images/tiles/'+tmp.texture[0][0]+'.png)"'
+    }
+    var tag = '<img class="buildtile"'+src+style+'>'
+    console.log(tag)
+    $('#buildselect').append(tag)
+  }
+}
+
+var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "upgrade.png", "info.png", null, "rocket.png"]
+
+function drawInfoBar() {
+  infoCtx.clearRect(0, 0, innerWidth, innerHeight)
+  for (var i = 0; i < infoBarIcons.length; i++) {
+    if (infoBarIcons[i] != null) {
+      var img = new Image;
+      img.src = "images/ui/" + infoBarIcons[i];
+      infoCtx.drawImage(img, i * 48, 0, 48, 48);
+    }
+  }
+}
+
+function buildselect() {
+  $('#buildselect').show()
+  mode = "build"
 }

js/tiles.js

@@ -1,3 +1,5 @@
+var tileClasses = []
+
 //Hier sind alle im Tiles welche im Spiel präsent sind
 
 class Conveyorbelt extends Tile {
@@ -10,3 +12,6 @@ class Conveyorbelt extends Tile {
     }
   }
 }
+for(var i=0;i<1000;i++){
+tileClasses.push(Conveyorbelt)
+}

js/userinterface.js

@@ -5,6 +5,9 @@ $(window).resize(function() {
 $(document).ready(function() {
   style();
   document.addEventListener('mousemove', onDocumentMouseMove, false);
+  $('body').on("contextmenu",function(){
+    return false;
+  })
 })
 
 var screenleftpos = 0
@@ -23,6 +26,8 @@ function style() {
 
   $('#screen').css('margin-top', screenMarginTop)
   $('#screen').css('margin-left', screenMarginLeft)
+  $('#buildselect').css('margin-top', screenMarginTop)
+  $('#buildselect').css('margin-left', screenMarginLeft)
   $('#info').css('margin-top', itemCountMarginTop)
   $('#info').css('margin-left', infoMarginLeft)
   $('#itemcount').css('margin-top', itemCountMarginTop)