Update play, animation, and check hints.

www/js/interface.js

@@ -18,13 +18,15 @@ const INTERFACE = {
         TileMedium: "#242424",
         TileDark:   "#101010",
 
-        Dawn:       "#ffe082",
+        Dawn:        "#ffe082",
-        DawnMedium: "#fca03f",
+        DawnMedium:  "#fca03f",
-        DawnDark:   "#ff6d00",
+        DawnDark:    "#ff6d00",
+        DawnDarkest: "#3f1b00",
 
-        Dusk:       "#f6a1bd",
+        Dusk:        "#f6a1bd",
-        DuskMedium: "#e84a79",
+        DuskMedium:  "#e84a79",
-        DuskDark:   "#c51162",
+        DuskDark:    "#c51162",
+        DuskDarkest: "#3f051f",
 
         HintHover:        "#71a1e8",
         HintSelect:       "#4a148c",
@@ -36,7 +38,7 @@ const INTERFACE = {
         HintOpponentDark: "#2a0b3f",
         HintInvalid:      "#b71c1c",
         HintInvalidDark:  "#3f0808",
-        HintPlay:         "#004966",
+        HintPlay:         "#307c7f",
         HintCheck:        "#C62828",
     },
     
@@ -305,7 +307,7 @@ const INTERFACE = {
         INTERFACE.draw();
     },
 
-    contextmenu(event) {
+    contextmenu() {
         INTERFACE_DATA.select = null;
         return false;
     },
@@ -319,7 +321,7 @@ const INTERFACE = {
                 INTERFACE_DATA.alt_mode = false;
                 INTERFACE.draw();
             } else {
-                INTERFACE.click();
+                INTERFACE.click({button:0});
             }
         }
         INTERFACE_DATA.clicked = null;
@@ -405,6 +407,9 @@ const INTERFACE = {
             let is_hover = INTERFACE.Ui.tile_is_hover(0, i);
             let is_select = INTERFACE.Ui.tile_is_select(0, i);
 
+            let is_play = GAME_DATA.turn > 0 && (play.source < 2 || play.source == 3) && (play.to == i || ((play.source == 0 || play.source == 3) && play.from == i));
+            let is_check = GAME_DATA.state.check != 0 && piece !== null && piece.piece == GAME.Const.PieceId.Heart && piece.player == (GAME_DATA.turn & 1);
+
             let tile_state = INTERFACE_DATA.board_state[i][1];
             let hover_state = INTERFACE_DATA.board_state[i][0];
 
@@ -430,48 +435,67 @@ const INTERFACE = {
             let piece = null;
             if(tile.piece !== null) { piece = GAME_DATA.board.pieces[tile.piece]; }
 
-            // Draw border
+            let background_color = null;
-            ctx.fillStyle = INTERFACE.Color.TileBorder;
+            let border_color = null;
+            let background_scale = 0.94;
+
+            // Get background color
+            switch(hover_state) {
+                case INTERFACE.TileStatus.Valid:    background_color = INTERFACE.Color.HintValidDark; break;
+                case INTERFACE.TileStatus.Threat:   background_color = INTERFACE.Color.HintThreatDark; break;
+                case INTERFACE.TileStatus.Invalid:  background_color = INTERFACE.Color.HintInvalidDark; break;
+                case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponentDark; break;
+            }
+            switch(tile_state) {
+                case INTERFACE.TileStatus.Valid:    background_color = INTERFACE.Color.HintValid; break;
+                case INTERFACE.TileStatus.Threat:   background_color = INTERFACE.Color.HintThreat; break;
+                case INTERFACE.TileStatus.Invalid:  background_color = INTERFACE.Color.HintInvalid; break;
+                case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponent; break;
+            }
+            if(is_select) {
+                background_color = INTERFACE.Color.HintSelect;
+            }
+
+            // Get border color
             if(draw_piece && tile.piece !== null) {
-                if(GAME_DATA.board.pieces[tile.piece].player == GAME.Const.Player.Dawn) { ctx.fillStyle = INTERFACE.Color.DawnDark; }
+                if(GAME_DATA.board.pieces[tile.piece].player == GAME.Const.Player.Dawn) { border_color = INTERFACE.Color.DawnDark; }
-                else { ctx.fillStyle = INTERFACE.Color.DuskDark; }
+                else { border_color = INTERFACE.Color.DuskDark; }
             }
             if(is_hover) {
-                ctx.fillStyle = INTERFACE.Color.HintHover;
+                border_color = INTERFACE.Color.HintHover;
+            } else if(background_color == null) {
+                if(is_play) {
+                    if((GAME_DATA.turn & 1) != GAME.Const.Player.Dawn) { border_color = INTERFACE.Color.DawnDark; }
+                    else { border_color = INTERFACE.Color.DuskDark; }
+                    background_scale = 0.85;
+                } else if(is_check) {
+                    border_color = INTERFACE.Color.HintCheck;
+                    background_scale = 0.8;
+                }
             }
+
+            // Get default colors
+            if(background_color === null) {
+                switch(MATH.mod(coord.x + coord.y, 3)) {
+                    case 0: background_color = INTERFACE.Color.TileMedium; break;
+                    case 1: background_color = INTERFACE.Color.TileLight; break;
+                    case 2: background_color = INTERFACE.Color.TileDark; break;
+                }
+            }
+            if(border_color === null) {
+                border_color = INTERFACE.Color.TileBorder;
+            }
+
+            // Draw border
+            ctx.fillStyle = border_color;
             ctx.beginPath();
             draw.hex();
             ctx.fill();
 
-            // Draw background.
+            // Draw background
-            // Select indicator color or default to tile color.
+            ctx.fillStyle = background_color;
-            switch(MATH.mod(coord.x + coord.y, 3)) {
-                case 0: ctx.fillStyle = INTERFACE.Color.TileMedium; break;
-                case 1: ctx.fillStyle = INTERFACE.Color.TileLight; break;
-                case 2: ctx.fillStyle = INTERFACE.Color.TileDark; break;
-            }
-            if(GAME_DATA.turn > 0 && (play.source < 2 || play.source == 3) && (play.to == i || ((play.source == 0 || play.source == 3) && play.from == i))) {
-                ctx.fillStyle = INTERFACE.Color.HintPlay;
-            } else if(GAME_DATA.state.check != 0 && piece !== null && piece.piece == GAME.Const.PieceId.Heart && piece.player == (GAME_DATA.turn & 1)) {
-                ctx.fillStyle = INTERFACE.Color.HintCheck;
-            }
-            switch(hover_state) {
-                case INTERFACE.TileStatus.Valid: ctx.fillStyle = INTERFACE.Color.HintValidDark; break;
-                case INTERFACE.TileStatus.Threat: ctx.fillStyle = INTERFACE.Color.HintThreatDark; break;
-                case INTERFACE.TileStatus.Invalid: ctx.fillStyle = INTERFACE.Color.HintInvalidDark; break;
-                case INTERFACE.TileStatus.Opponent: ctx.fillStyle = INTERFACE.Color.HintOpponentDark; break;
-            }
-            switch(tile_state) {
-                case INTERFACE.TileStatus.Valid: ctx.fillStyle = INTERFACE.Color.HintValid; break;
-                case INTERFACE.TileStatus.Threat: ctx.fillStyle = INTERFACE.Color.HintThreat; break;
-                case INTERFACE.TileStatus.Invalid: ctx.fillStyle = INTERFACE.Color.HintInvalid; break;
-                case INTERFACE.TileStatus.Opponent: ctx.fillStyle = INTERFACE.Color.HintOpponent; break;
-            }
-            if(is_select) {
-                ctx.fillStyle = INTERFACE.Color.HintSelect;
-            }
             ctx.beginPath();
-            draw.hex(0.94);
+            draw.hex(background_scale);
             ctx.fill();
 
             // Draw tile content
@@ -830,9 +854,10 @@ const INTERFACE = {
             this.ctx.fill();
 
             // Draw background.
-            this.ctx.fillStyle = INTERFACE.Color.HintPlay;
+            if(piece.player == GAME.Const.Player.Dawn) { this.ctx.fillStyle = INTERFACE.Color.DawnDarkest; }
+            else { this.ctx.fillStyle = INTERFACE.Color.DuskDarkest; }
             this.ctx.beginPath();
-            this.hex(0.94);
+            this.hex(0.85);
             this.ctx.fill();
 
             // Draw tile content