developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

feat(ui): map canvas follows light/dark theme; fix invisible gear control
Tests · UI / test (push) Waiting to run
Details
Tests · UI / test (pull_request) Successful in 2m45s
Details

Browse Source 
The map view now selects a DARK_THEME or LIGHT_THEME palette from the
resolved app theme and threads it through every primitive builder, so
the canvas, planets, ship groups, cargo routes, battle/bombing markers,
fog, reach + selection rings, pending-Send tracks, and the pick overlay
all switch with the rest of the chrome. A theme flip remounts the
renderer preserving the camera — Pixi bakes the background at init and
every primitive bakes its colour at build, so a live re-tint is not
possible on the same instance.

This also fixes the reported bug: the gear-popover trigger and the
loading overlay hardcoded a dark navy background, so in light theme the
gear was invisible (dark icon on dark chip) until hover flipped it to a
white chip. Both now use the --color-surface-overlay token and read
correctly in both themes.

The light palette mirrors the dark one role-for-role, darkened /
saturated for contrast on a light background while keeping the incoming,
battle, and bombing accents vivid. The values are a first pass meant to
be refined during the F8 manual-QA loop.

Removes the now-dead "Phase 35" references from the code and lifts the
map-recoloring prohibition from the design-system / renderer docs; the
battle scene stays a fixed-palette data-viz surface.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-24 08:49:37 +02:00
parent d44ad9b6eb
commit f6e4a4f6bd
27 changed files with 631 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/frontend/tests/fog-paint-ops.test.ts
+7 -2
View File
@@ -15,9 +15,14 @@
import { describe, expect, test } from "vitest";
import { FOG_COLOR, fogPaintOps } from "../src/map/render";
import { fogPaintOps } from "../src/map/render";
import { DARK_THEME } from "../src/map/world";
const BG_COLOR = 0x0a0e1a;
// The fog colour now lives on the theme; the renderer passes
// `theme.fog` to `fogPaintOps`. These ops tests pin the pure
// projection, so they reference the dark palette's value directly.
const FOG_COLOR = DARK_THEME.fog;
const BG_COLOR = DARK_THEME.background;
const WORLD = { width: 1000, height: 800 };
describe("fogPaintOps — no-wrap mode", () => {