diff --git a/images/ui/rotationOverlay.png b/images/ui/rotationOverlay.png new file mode 100644 index 0000000..c52b2a2 Binary files /dev/null and b/images/ui/rotationOverlay.png differ diff --git a/js/baseclasses.js b/js/baseclasses.js index 38ba8c4..c3b757a 100644 --- a/js/baseclasses.js +++ b/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; + } + } } diff --git a/js/game.js b/js/game.js index 9db0f79..05baab3 100644 --- a/js/game.js +++ b/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 diff --git a/js/userinterface.js b/js/userinterface.js index 5302ce4..ae7f779 100644 --- a/js/userinterface.js +++ b/js/userinterface.js @@ -114,8 +114,7 @@ function clickEvents() { $('#buildselect').fadeIn(200) mode = "selectbuilding" } else { - $('#buildselect').fadeOut(200) - mode = "none" + closeUi() } 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") { - mode = "none" - return false - } - if (mode == "selectbuilding") { - mode = "none" - $('#buildselect').fadeOut(200) - return false - } - if (mode == "move") { - mode = "none" - return false - } + closeUi() }) } + +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 + } +}