Rotate

js/baseclasses.js

@@ -12,7 +12,7 @@ class Tile {
   }
 
   getTexture(fulltime, layer) {
-    if (this.texture[layer].length==0)
+    if (this.texture[layer].length == 0)
       return "0"
     return "images/tiles/" + this.texture[layer][(fulltime % this.texture[layer].length)] + ".png";
   }
@@ -24,6 +24,23 @@ class Tile {
       item.setDFromDirection(this.direction)
     }
   }
+
+  rotate() {
+    switch (this.direction) {
+      case "right":
+        this.direction = "down"
+        break;
+      case "down":
+        this.direction = "left"
+        break;
+      case "left":
+        this.direction = "up"
+        break;
+      case "up":
+        this.direction = "right"
+        break;
+    }
+  }
 }
 
 

js/game.js

@@ -116,6 +116,13 @@ function render() {
       img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
+    if(mode == "rotate"){
+      var img2 = new Image
+      img2.src = "images/ui/rotationOverlay.png"
+      ctx.globalAlpha = 0.4
+      drawRotatedImage(img2, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
+      ctx.globalAlpha = 1
+    }
   }
   //DRAW CURSOR BOX
   if (isCursorInScreen) {
@@ -199,10 +206,12 @@ function drawInfoBar() {
     selectedX = 0
   } else if(mode=="move"){
     selectedX = 1
+  } else if(mode=="rotate"){
+    selectedX = 2
   }
 
   if (selectedX != -1) {
-    infoCtx.globalAlpha = infoGlowOpacity + 0.2
+    infoCtx.globalAlpha = infoGlowOpacity + 0.25
     infoCtx.beginPath();
     infoCtx.arc(selectedX * 48 + 24, 24, 24, 0, 2 * Math.PI);
     infoCtx.fillStyle = "orange"
@@ -210,7 +219,7 @@ function drawInfoBar() {
     if (infoGlowOpacity < 0) {
       infoGlowOpacityD = +0.02
     }
-    if (infoGlowOpacity > 0.4) {
+    if (infoGlowOpacity > 0.45) {
       infoGlowOpacityD = -0.02
     }
     infoGlowOpacity += infoGlowOpacityD

js/userinterface.js

@@ -114,8 +114,7 @@ function clickEvents() {
             $('#buildselect').fadeIn(200)
             mode = "selectbuilding"
           } else {
-            $('#buildselect').fadeOut(200)
+            closeUi()
-            mode = "none"
           }
           break
         case 1:
@@ -123,7 +122,15 @@ function clickEvents() {
           if (mode == "none") {
             mode = "move"
           } else {
-            mode = "none"
+            closeUi()
+          }
+          break
+        case 2:
+          //ROTATE BUTTON
+          if (mode == "none") {
+            mode = "rotate"
+          } else {
+            closeUi()
           }
           break
       }
@@ -148,6 +155,11 @@ function buildEvents() {
     }
   })
   $('#screen').click(function() {
+    if(mode == "rotate"){
+      if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] != 0) {
+        factorys[currentFactory].tiles[cursorScreenX][cursorScreenY].rotate()
+      }
+    }
     if (mode == "build") {
       if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) {
         factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY)
@@ -203,18 +215,26 @@ function buildEvents() {
   })
 
   $('body').on("contextmenu", function() {
-    if (mode == "build") {
+    closeUi()
-      mode = "none"
-      return false
-    }
-    if (mode == "selectbuilding") {
-      mode = "none"
-      $('#buildselect').fadeOut(200)
-      return false
-    }
-    if (mode == "move") {
-      mode = "none"
-      return false
-    }
   })
 }
+
+function closeUi() {
+  if (mode == "build") {
+    mode = "none"
+    return false
+  }
+  if (mode == "selectbuilding") {
+    mode = "none"
+    $('#buildselect').fadeOut(200)
+    return false
+  }
+  if (mode == "move") {
+    mode = "none"
+    return false
+  }
+  if (mode == "rotate") {
+    mode = "none"
+    return false
+  }
+}