Feat: Alphanumeric Coordinate Grid on Alternate View

[bijx]

Description:

Adds a coordinate grid to the Alternate View (holding spacebar) using numbers on the X-axis, and letters on the Y-axis. No more "he's attacking you in that—well, the little peninsula thing... next to the island! which island? uhh..." moments when playing with friends. Optimally maps have letters A-J (just like in the Battleships board game) but special maps like Amazon River dynamically resize to only have 2 letters so as to not have too many number columns. This feature overall can be toggled via the settings menu.

Also saw it requested on the official discord a couple times, thought it was a neat idea.

World Map

Scales correctly when zoomed in

Amazon River

Enable/Disable via settings

Screen.Recording.2026-01-17.034212.mp4

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

bijx

[coderabbitai]

Walkthrough

Adds a Coordinate Grid feature: two new translation keys, user-setting getter/toggler, UI toggles in user/settings modals, a new CoordinateGridLayer, and composition of that layer into the renderer to draw an alphanumeric overlay in Alternate View.

Changes

Cohort / File(s)	Summary
Translations resources/lang/en.json	Added coordinate_grid_label and coordinate_grid_desc keys.
User settings src/core/game/UserSettings.ts	Added coordinateGridEnabled() getter and toggleCoordinateGrid() method.
User settings UI src/client/UserSettingModal.ts	Added toggle handler toggleCoordinateGrid(e) and bound toggle control to settings.coordinateGridEnabled.
Settings modal UI src/client/graphics/layers/SettingsModal.ts	Added toggle button, onToggleCoordinateGridButtonClick() handler, and gridIcon import for modal control.
Rendering pipeline src/client/graphics/GameRenderer.ts	Imported and composed CoordinateGridLayer into the renderer's layer array.
Coordinate grid layer src/client/graphics/layers/CoordinateGridLayer.ts	New CoordinateGridLayer export implementing init(), shouldTransform(), and renderLayer(). Computes grid layout, maps world→screen via TransformHandler, draws alphanumeric labels and labeled backgrounds, subscribes to AlternateView events, and respects userSettings.coordinateGridEnabled.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant Modal as SettingsModal
    participant Settings as UserSettings
    participant Renderer as GameRenderer
    participant Layer as CoordinateGridLayer
    participant Canvas as Canvas

    User->>Modal: toggle Coordinate Grid
    Modal->>Settings: toggleCoordinateGrid()
    Settings->>Settings: update coordinateGridEnabled
    Renderer->>Layer: render cycle
    Layer->>Settings: coordinateGridEnabled()?
    alt enabled
        Layer->>Layer: compute grid bounds & labels
        Layer->>Canvas: draw grid lines
        Layer->>Canvas: draw labels
    else disabled
        Layer->>Canvas: skip drawing
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A tiny toggle wakes the view,
Letters, numbers paint the blue,
Settings switch, the grid appears,
Rows and columns calm and clear,
Canvas whispers: maps made true. 🧭

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Feat: Alphanumeric Coordinate Grid on Alternate View' accurately summarizes the main change: adding an alphanumeric coordinate grid feature to the Alternate View.
Description check	✅ Passed	The description comprehensively details the coordinate grid feature, its purpose, implementation details, and includes screenshots and videos demonstrating the functionality across different map types.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ryanbarlow97]

Already mentioned in the discord (and I know you reacted to it already) but going to repeat it here for anyone else:

It would be great to get the letters on the exact edge of the map (worried about ultrawide) and just being too far away from the map

[bijx]

Already mentioned in the discord (and I know you reacted to it already) but going to repeat it here for anyone else:

It would be great to get the letters on the exact edge of the map (worried about ultrawide) and just being too far away from the map

@ryanbarlow97 awesome suggestion, just added that in!

Screen.Recording.2026-01-18.172805.mp4

[ryanbarlow97]

do the lines need to go past the map?

can you do something like this instead

[bijx]

Put back into draft until #2946 is merged so we can make the grid view a hotkey instead of being part of Alternate View

[ryanbarlow97]

(update)