From b7b9f52de9b3b6c32417311fff5067e58b1f8f12 Mon Sep 17 00:00:00 2001
From: yukirij <yukirij@yukiri.net>
Date: Sat, 12 Oct 2024 18:05:37 -0700
Subject: [PATCH] Improve visuals of piece hints.

---
 www/js/interface.js | 39 +++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/www/js/interface.js b/www/js/interface.js
index 633ee09..93dfc79 100644
--- a/www/js/interface.js
+++ b/www/js/interface.js
@@ -604,6 +604,9 @@ const INTERFACE = {
                 border_color = INTERFACE.Color.TileBorder;
             }
 
+            // Draw border hints
+            if(!is_hover && draw_piece && piece !== null) { draw.hints(piece); }
+
             // Draw border
             ctx.fillStyle = border_color;
             ctx.beginPath();
@@ -621,9 +624,6 @@ const INTERFACE = {
                 let piece_def = GAME.Const.Piece[piece.piece];
                 let piece_color = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk;
 
-                // Draw border hints
-                if(!is_hover) { draw.hints(piece); }
-
                 if(GAME_ASSET.Image[piece_def.name] !== undefined) {
                     // Draw piece icon
                     if(INTERFACE_DATA.mirror && (piece.player ^ (INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) != 0) {
@@ -922,7 +922,8 @@ const INTERFACE = {
         }
 
         hints(piece) {
-            let scale = INTERFACE.TileScale * this.scale;
+            let scale = 0.96 * this.scale;
+            let half_scale = scale * 0.5;
 
             let movement = piece.moves();
             if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) {
@@ -934,13 +935,16 @@ const INTERFACE = {
                 let move = BITWISE.ffs(mask);
                 let nmove = move % 12;
         
-                this.ctx.strokeStyle = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk;
+                this.ctx.fillStyle = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk;
                 this.ctx.beginPath();
         
                 // draw edge marker
                 if(nmove < 6) {
                     let fr = INTERFACE.HexVertex[nmove];
                     let to = INTERFACE.HexVertex[(nmove + 1) % 6];
+
+                    let ifr = INTERFACE.HexVertex[(nmove + 4) % 6];
+                    let ito = INTERFACE.HexVertex[(nmove + 3) % 6];
         
                     let dx = (to.x - fr.x) / 3.0;
                     let dy = (to.y - fr.y) / 3.0;
@@ -951,9 +955,12 @@ const INTERFACE = {
                     let tqx = fr.x + (2 * dx);
                     let tqy = fr.y + (2 * dy);
         
-                    this.ctx.moveTo(fqx * scale, fqy * scale);
+                    this.ctx.moveTo(ifr.x * half_scale, ifr.y * half_scale);
+                    this.ctx.lineTo(fqx * scale, fqy * scale);
                     this.ctx.lineTo(tqx * scale, tqy * scale);
-                    this.ctx.stroke();
+                    this.ctx.lineTo(ito.x * half_scale, ito.y * half_scale);
+                    this.ctx.lineTo(ifr.x * half_scale, ifr.y * half_scale);
+                    this.ctx.fill();
                 }
         
                 // draw vertex marker
@@ -961,6 +968,9 @@ const INTERFACE = {
                     let fr = INTERFACE.HexVertex[nmove % 6];
                     let mid = INTERFACE.HexVertex[(nmove + 1) % 6];
                     let to = INTERFACE.HexVertex[(nmove + 2) % 6];
+
+                    let ifr = INTERFACE.HexVertex[(nmove + 5) % 6];
+                    let ito = INTERFACE.HexVertex[(nmove + 3) % 6];
         
                     let dx1 = (mid.x - fr.x) / 3.0;
                     let dy1 = (mid.y - fr.y) / 3.0;
@@ -974,10 +984,13 @@ const INTERFACE = {
                     let tqx = mid.x + dx2;
                     let tqy = mid.y + dy2;
         
-                    this.ctx.moveTo(fqx * scale, fqy * scale);
+                    this.ctx.moveTo(ifr.x * half_scale, ifr.y * half_scale);
+                    this.ctx.lineTo(fqx * scale, fqy * scale);
                     this.ctx.lineTo(mid.x * scale, mid.y * scale);
                     this.ctx.lineTo(tqx * scale, tqy * scale);
-                    this.ctx.stroke();
+                    this.ctx.lineTo(ito.x * half_scale, ito.y * half_scale);
+                    this.ctx.lineTo(ifr.x * half_scale, ifr.y * half_scale);
+                    this.ctx.fill();
                 }
                 moves &= ~mask;
             }
@@ -990,6 +1003,11 @@ const INTERFACE = {
             this.ctx.save();
             this.ctx.translate(x, y);
 
+            // Draw hints
+            if(piece !== null) {
+                this.hints(piece);
+            }
+
             // Draw border
             if(piece.player == GAME.Const.Player.Dawn) { this.ctx.fillStyle = INTERFACE.Color.DawnDark; }
             else { this.ctx.fillStyle = INTERFACE.Color.DuskDark; }
@@ -1009,9 +1027,6 @@ const INTERFACE = {
             if(piece !== null) {
                 let piece_def = GAME.Const.Piece[piece.piece];
 
-                // Draw border hints
-                this.hints(piece);
-
                 // Draw piece icon
                 if(INTERFACE_DATA.mirror && (piece.player ^ (INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) != 0) {
                     this.ctx.rotate(Math.PI);