From 9c25f658207193642b16231e4c49c829a326feb3 Mon Sep 17 00:00:00 2001
From: yukirij <yukirij@yukiri.net>
Date: Sun, 18 Aug 2024 02:04:54 -0700
Subject: [PATCH] Update hover with dark background instead of border.

---
 www/js/interface.js | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/www/js/interface.js b/www/js/interface.js
index 708ca65..34a25a5 100644
--- a/www/js/interface.js
+++ b/www/js/interface.js
@@ -16,14 +16,18 @@ const INTERFACE = {
         Dusk:     "#f6a1bd",
         DuskDark: "#c51162",
 
-        HintHover:    "#71a1e8",
-        HintSelect:   "#4a148c",
-        HintValid:    "#1a237e", HintValidBorder:    "#5558fc",
-        HintThreat:   "#054719", HintThreatBorder:   "#22b54e",
-        HintOpponent: "#49136b", HintOpponentBorder: "#d74cef",
-        HintInvalid:  "#b71c1c", HintInvalidBorder:  "#ed3636",
-        HintPlay:     "#083242",
-        HintCheck:    "#C62828",
+        HintHover:        "#71a1e8",
+        HintSelect:       "#4a148c",
+        HintValid:        "#1a237e",
+        HintValidDark:    "#0d113f",
+        HintThreat:       "#054719",
+        HintThreatDark:   "#02260d",
+        HintOpponent:     "#49136b",
+        HintOpponentDark: "#220933",
+        HintInvalid:      "#b71c1c",
+        HintInvalidDark:  "#330707",
+        HintPlay:         "#083242",
+        HintCheck:        "#C62828",
     },
     
     TileStatus: {
@@ -323,7 +327,7 @@ const INTERFACE = {
             let is_select = INTERFACE.Ui.tile_is_select(0, i);
 
             let tile_state = INTERFACE_DATA.board_state[i][1];
-            let border_state = INTERFACE_DATA.board_state[i][0];
+            let hover_state = INTERFACE_DATA.board_state[i][0];
 
             let coord = HEX.tile_to_hex(i);
             if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate == 1) {
@@ -346,12 +350,6 @@ const INTERFACE = {
                 if(GAME_DATA.board.pieces[tile.piece].player == GAME.Const.Player.Dawn) { ctx.fillStyle = INTERFACE.Color.DawnDark; }
                 else { ctx.fillStyle = INTERFACE.Color.DuskDark; }
             }
-            switch(border_state) {
-                case INTERFACE.TileStatus.Valid: ctx.fillStyle = INTERFACE.Color.HintValidBorder; break;
-                case INTERFACE.TileStatus.Threat: ctx.fillStyle = INTERFACE.Color.HintThreatBorder; break;
-                case INTERFACE.TileStatus.Invalid: ctx.fillStyle = INTERFACE.Color.HintInvalidBorder; break;
-                case INTERFACE.TileStatus.Opponent: ctx.fillStyle = INTERFACE.Color.HintOpponentBorder; break;
-            }
             if(is_hover) {
                 ctx.fillStyle = INTERFACE.Color.HintHover;
             }
@@ -371,6 +369,12 @@ const INTERFACE = {
             } else if(GAME_DATA.state.check && piece !== null && piece.piece == GAME.Const.PieceId.Omen && 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;
@@ -387,7 +391,7 @@ const INTERFACE = {
             // Draw tile content
             if(piece !== null) {
                 // Draw border hints
-                if(!is_hover && border_state == 0) { draw.hints(piece); }
+                if(!is_hover && hover_state == 0) { draw.hints(piece); }
 
                 // Draw piece icon
                 if(piece.promoted) { ctx.drawImage(GAME_ASSET.Image.Promote, -icon_radius, -icon_radius, icon_radius * 2., icon_radius * 2.); }