new Mode Build

css/main.css

@@ -32,8 +32,8 @@ body {
   border: solid;
   border-color: yellow;
   background-image: url(../images/infobg.png);
-  width: 1200;
+  width: 1192;
-  height: 576;
+  height: 568;
   overflow-y: scroll;
   padding: 4;
 }

js/game.js

@@ -119,9 +119,27 @@ function render() {
   }
   //DRAW CURSOR BOX
   if (isCursorInScreen) {
-    ctx.globalAlpha = 0.4
+    if (mode == "build") {
-    ctx.fillRect(cursorScreenX * 48, cursorScreenY * 48, 48, 48)
+      ctx.globalAlpha = 0.6
-    ctx.globalAlpha = 1
+      var tile = new toBuild()
+      var img = new Image
+      var tmp = tile.getTexture(fulltime, 0)
+      if (tmp != "0") {
+        img.src = tmp
+        drawRotatedImage(img, cursorScreenX * 48 + 24, cursorScreenY * 48 + 24, 0)
+      }
+      img = new Image
+      tmp = tile.getTexture(fulltime, 1)
+      if (tmp != "0") {
+        img.src = tmp
+        drawRotatedImage(img, cursorScreenX * 48 + 24, cursorScreenY * 48 + 24, 0)
+      }
+      ctx.globalAlpha = 1
+    } else {
+      ctx.globalAlpha = 0.4
+      ctx.fillRect(cursorScreenX * 48, cursorScreenY * 48, 48, 48)
+      ctx.globalAlpha = 1
+    }
   }
   //DRAW INFO BAR
   drawInfoBar()
@@ -148,20 +166,25 @@ function prepairRender() {
   canvas.height = 240
   infoCtx = canvas.getContext('2d')
   //tileClasses
-  for(var i=0;i<tileClasses.length;i++){
+  var tilesLoaded = 0
+  console.log("Building Tileselection-Menu...")
+  for (var i = 0; i < tileClasses.length; i++) {
     var tmp = new tileClasses[i]()
     var src = ""
-    if(tmp.texture[1].length>0){
+    if (tmp.texture[1].length > 0) {
-      src = ' src="images/tiles/'+tmp.texture[1][0]+'.png"'
+      src = ' src="images/tiles/' + tmp.texture[1][0] + '.png"'
     }
     var style = ''
-    if(tmp.texture[0].length>0){
+    if (tmp.texture[0].length > 0) {
-      style = ' style="background-image: url(images/tiles/'+tmp.texture[0][0]+'.png)"'
+      style = ' style="background-image: url(images/tiles/' + tmp.texture[0][0] + '.png)"'
     }
-    var tag = '<img class="buildtile"'+src+style+'>'
+    var tag = '<img id="build_' + i + '" draggable="false" class="buildtile"' + src + style + '>'
-    console.log(tag)
     $('#buildselect').append(tag)
+    tilesLoaded++
   }
+  console.log(tilesLoaded + "/" + tileClasses.length + " Tiles Loaded!")
+  $('#buildselect').hide()
+  buildEvents()
 }
 
 var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "upgrade.png", "info.png", null, "rocket.png"]

js/modes.txt

@@ -0,0 +1,3 @@
+none
+selectbuilding
+building

js/userinterface.js

@@ -8,6 +8,7 @@ $(document).ready(function() {
   $('body').on("contextmenu", function() {
     return false;
   })
+  clickEvents()
 })
 
 function style() {
@@ -102,3 +103,36 @@ function onDocumentMouseMove(event) {
     isCursorInInfo = false
   }
 }
+
+function clickEvents() {
+  $('#info').click(function() {
+    if (cursorInfoY == 0) {
+      switch (cursorInfoX) {
+        case 0:
+          //BUILD BUTTON
+          if (mode == "none") {
+            $('#buildselect').fadeIn(200)
+            mode = "selectbuilding"
+          } else {
+            $('#buildselect').fadeOut(200)
+            mode = "none"
+          }
+          break
+      }
+    }
+  })
+}
+
+var toBuild = {}
+
+function buildEvents(){
+  $('img').click(function() {
+    var id = $(this).attr("id");
+    if(id.startsWith("build_")){
+      id = parseInt(id.substr(6))
+      toBuild = tileClasses[id]
+      mode = "build"
+      $('#buildselect').fadeOut(200)
+    }
+  })
+}