Feature/colorblind mode (#4150)

**Add approved & assigned issue number here:**

Resolves #2549

## Description:

Adds colorblind mode. Similar to dark mode, it exists as a toggle in
settings. When enabled, it swaps the game's theme (which is refactored
to extend from a theme base class) to use more colorblind-friendly
colors and brightness variations. Borders are darkened, and terrarin is
separated by lightness. Friendly/Foe colors and switched to blue/orange
instead of red/green.

The theme refactor supports adding new themes without having to
reimplement the color distribution system. New themes can extend the
BaseTheme and supply the data, such as palettes, team-color variations,
and terrain.

New setting:
<img width="880" height="273" alt="Screenshot 2026-06-04 at 11 30 27 AM"
src="https://github.com/user-attachments/assets/d5d573d5-cc64-4ac1-95c2-00627faf17cc"
/>

New color palette:
<img width="1119" height="757" alt="Screenshot 2026-06-04 at 11 30
59 AM"
src="https://github.com/user-attachments/assets/2bb15bc9-992b-41ae-ab0e-b01fe0c3c6bb"
/>

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory

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

jetaviz
This commit is contained in:
noahschmal
2026-06-11 10:53:03 -07:00
committed by GitHub
parent 7137347b7d
commit 21776e81af
16 changed files with 723 additions and 304 deletions
+11 -1
View File
@@ -497,10 +497,20 @@ async function createClientGame(
applyGraphicsOverrides(live, userSettings.graphicsOverrides());
applyDarkModeOverride(live, userSettings.darkMode());
};
// Re-apply render settings, then re-theme and recolor players, on a
// graphics-override change (covers a theme switch such as colorblind mode).
const onGraphicsChanged = (): void => {
regenerateRenderSettings();
// A graphics override can switch the active theme (e.g. colorblind mode),
// so re-theme existing players and re-upload the palette to recolor their
// territory fills/borders live.
gameView.refreshPlayerColors();
webglBuilder.refreshPalette(gameView);
};
regenerateRenderSettings();
globalThis.addEventListener(
`${USER_SETTINGS_CHANGED_EVENT}:${GRAPHICS_KEY}`,
regenerateRenderSettings,
onGraphicsChanged,
{ signal: graphicsListenerAbort.signal },
);
globalThis.addEventListener(