From cb4eeb264054c09d6d11d6939f73c614bd864d88 Mon Sep 17 00:00:00 2001
From: yukirij <yukirij@yukiri.net>
Date: Sun, 1 Sep 2024 16:37:57 -0700
Subject: [PATCH] Add tile numbers.

---
 www/js/interface.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/www/js/interface.js b/www/js/interface.js
index 94611e9..efa22d8 100644
--- a/www/js/interface.js
+++ b/www/js/interface.js
@@ -9,7 +9,9 @@ const INTERFACE = {
 
     Color: {
         Background: "#101010",
+
         Text:       "#c0c0c0",
+        TextDark:   "#848484",
 
         TileBorder: "#606060",
         TileLight:  "#383838",
@@ -272,7 +274,7 @@ const INTERFACE = {
         let width = INTERFACE_DATA.canvas.width = INTERFACE_DATA.canvas.clientWidth;
         let height = INTERFACE_DATA.canvas.height = INTERFACE_DATA.canvas.clientHeight;
 
-        let margin = INTERFACE_DATA.Ui.margin = Math.floor(Math.min(width, height) / 100);
+        let margin = INTERFACE_DATA.Ui.margin = Math.floor(Math.min(width, height) / 96);
 
         let gui_width = width - (margin * 2);
         let gui_height = height - (margin * 2);
@@ -551,6 +553,43 @@ const INTERFACE = {
             ctx.fillText(message, gui_margin, height - gui_margin);
         }
 
+        // Draw tile numbers
+        let letters = [ "A", "B", "C", "D", "E", "F", "G", "H", "I"];
+        let numbers = [ "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+        if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate != 0) {
+            letters.reverse();
+            numbers.reverse();
+        }
+
+        ctx.fillStyle = INTERFACE.Color.TextDark;
+        ctx.textBaseline = "top";
+        ctx.textAlign = "center";
+        ctx.fillText(message, gui_margin, height - gui_margin);
+        for(let i = 0; i < 4; ++i) {
+            let x = basis_x + (1.5 * radius * i);
+            let y = basis_y + (gui_scale * (1.15 + i));
+            ctx.fillText(letters[i], x, y);
+        }
+        for(let i = 0; i < 4; ++i) {
+            let x = basis_x + (1.5 * radius * (5 + i));
+            let y = basis_y + (gui_scale * (4.15 - i));
+            ctx.fillText(letters[i + 5], x, y);
+        }
+
+        ctx.textAlign = "right";
+        for(let i = 0; i < 5; ++i) {
+            let x = basis_x - (0.85 * radius);
+            let y = basis_y - (gui_scale * (0.9 + (2 * i)));
+            ctx.fillText(numbers[i], x, y);
+        }
+        for(let i = 0; i < 4; ++i) {
+            let x = basis_x + (1.5 * radius * (i + 0.45));
+            let y = basis_y - (gui_scale * (9.9 + i));
+            ctx.fillText(numbers[i + 5], x, y);
+        }
+
+
         if(INTERFACE_DATA.Animate.play !== null) {
             let time = Math.min(1 - (INTERFACE_DATA.Animate.time - Date.now()) / 1000, 1);
             time = time * time;