mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-10 15:14:36 +00:00
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:
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user