Feat: Alphanumeric Coordinate Grid on Alternate View

resources/lang/en.json

@@ -90,6 +90,7 @@
     "table_key": "Key",
     "table_action": "Action",
     "action_alt_view": "Alternate view (terrain/countries)",
+    "action_coordinate_grid": "Toggle coordinate grid overlay",
     "action_attack_altclick": "Attack (when left click is set to open menu)",
     "action_build": "Open build menu",
     "action_emote": "Open emote menu",
@@ -503,6 +504,8 @@
     "attack_ratio_desc": "What percentage of your troops to send in an attack (1–100%)",
     "territory_patterns_label": "🏳️ Territory Skins",
     "territory_patterns_desc": "Choose whether to display territory skin designs in game",
+    "coordinate_grid_label": "Coordinate Grid",
+    "coordinate_grid_desc": "Toggle the alphanumeric grid overlay",
     "performance_overlay_label": "Performance Overlay",
     "performance_overlay_desc": "Toggle the performance overlay. When enabled, the performance overlay will be displayed. Press shift-D during game to toggle.",
     "easter_writing_speed_label": "Writing Speed Multiplier",

src/client/HelpModal.ts

@@ -42,6 +42,7 @@ export class HelpModal extends BaseModal {
     const isMac = /Mac/.test(navigator.userAgent);
     return {
       toggleView: "Space",
+      coordinateGrid: "KeyM",
       centerCamera: "KeyC",
       moveUp: "KeyW",
       moveDown: "KeyS",
@@ -269,6 +270,14 @@ export class HelpModal extends BaseModal {
                       ${translateText("help_modal.action_alt_view")}
                     </td>
                   </tr>
+                  <tr class="hover:bg-white/5 transition-colors">
+                    <td class="py-3 pl-4 border-b border-white/5">
+                      ${this.renderKey(keybinds.coordinateGrid)}
+                    </td>
+                    <td class="py-3 border-b border-white/5 text-white/70">
+                      ${translateText("help_modal.action_coordinate_grid")}
+                    </td>
+                  </tr>
                   <tr class="hover:bg-white/5 transition-colors">
                     <td class="py-3 pl-4 border-b border-white/5">
                       ${this.renderKey(keybinds.swapDirection)}

src/client/InputHandler.ts

@@ -129,6 +129,10 @@ export class AutoUpgradeEvent implements GameEvent {
   ) {}
 }
 
+export class ToggleCoordinateGridEvent implements GameEvent {
+  constructor(public readonly enabled: boolean) {}
+}
+
 export class TickMetricsEvent implements GameEvent {
   constructor(
     public readonly tickExecutionDuration?: number,
@@ -154,6 +158,7 @@ export class InputHandler {
   private moveInterval: NodeJS.Timeout | null = null;
   private activeKeys = new Set<string>();
   private keybinds: Record<string, string> = {};
+  private coordinateGridEnabled = false;
 
   private readonly PAN_SPEED = 5;
   private readonly ZOOM_SPEED = 10;
@@ -201,6 +206,7 @@ export class InputHandler {
 
     this.keybinds = {
       toggleView: "Space",
+      coordinateGrid: "KeyM",
       centerCamera: "KeyC",
       moveUp: "KeyW",
       moveDown: "KeyS",
@@ -316,6 +322,14 @@ export class InputHandler {
         }
       }
 
+      if (e.code === this.keybinds.coordinateGrid && !e.repeat) {
+        e.preventDefault();
+        this.coordinateGridEnabled = !this.coordinateGridEnabled;
+        this.eventBus.emit(
+          new ToggleCoordinateGridEvent(this.coordinateGridEnabled),
+        );
+      }
+
       if (e.code === "Escape") {
         e.preventDefault();
         this.eventBus.emit(new CloseViewEvent());

src/client/UserSettingModal.ts

@@ -21,6 +21,7 @@ const isMac =
 
 const DefaultKeybinds: Record<string, string> = {
   toggleView: "Space",
+  coordinateGrid: "KeyM",
   buildCity: "Digit1",
   buildFactory: "Digit2",
   buildPort: "Digit3",
@@ -475,6 +476,16 @@ export class UserSettingModal extends BaseModal {
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
+      <setting-keybind
+        action="coordinateGrid"
+        label=${translateText("user_setting.coordinate_grid_label")}
+        description=${translateText("user_setting.coordinate_grid_desc")}
+        defaultKey=${DefaultKeybinds.coordinateGrid}
+        .value=${this.getKeyValue("coordinateGrid")}
+        .display=${this.getKeyChar("coordinateGrid")}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
       <h2
         class="text-blue-200 text-xl font-bold mt-8 mb-3 border-b border-white/10 pb-2"
       >

src/client/graphics/GameRenderer.ts

@@ -12,6 +12,7 @@ import { BuildMenu } from "./layers/BuildMenu";
 import { ChatDisplay } from "./layers/ChatDisplay";
 import { ChatModal } from "./layers/ChatModal";
 import { ControlPanel } from "./layers/ControlPanel";
+import { CoordinateGridLayer } from "./layers/CoordinateGridLayer";
 import { DynamicUILayer } from "./layers/DynamicUILayer";
 import { EmojiTable } from "./layers/EmojiTable";
 import { EventsDisplay } from "./layers/EventsDisplay";
@@ -282,6 +283,7 @@ export function createRenderer(
     new TerrainLayer(game, transformHandler),
     new TerritoryLayer(game, eventBus, transformHandler, userSettings),
     new RailroadLayer(game, eventBus, transformHandler, uiState),
+    new CoordinateGridLayer(game, eventBus, transformHandler),
     structureLayer,
     samRadiusLayer,
     new UnitLayer(game, eventBus, transformHandler),