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

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
+5 -4
View File
@@ -4,14 +4,13 @@
// Ship-group selection is intentionally not ringed here — groups are
// addressed by report index and have no single stable map coordinate.
import type { CirclePrim } from "./world";
import { DARK_THEME, type CirclePrim, type Theme } from "./world";
/** Planet marker radius in world units; mirrors `battle-markers.ts`. */
const PLANET_RADIUS_WORLD = 6;
/** The ring sits just outside the marker (and the bombing ring at +3). */
const SELECTION_RING_RADIUS = PLANET_RADIUS_WORLD + 4;
export const SELECTION_RING_COLOR = 0x6d8cff;
/** High-bit prefix so the ring id never collides with planet numbers,
* route lines, reach rings (`0xb…`), or battle markers. */
export const SELECTION_RING_ID = 0xc0000000;
@@ -21,11 +20,13 @@ const SELECTION_RING_PRIORITY = 0;
/**
* computeSelectionRing returns one ring primitive centred on the selected
* planet, or `null` when nothing (or a non-planet) is selected or the
* planet is absent from the current report.
* planet is absent from the current report. `theme` supplies the ring
* colour and defaults to `DARK_THEME`.
*/
export function computeSelectionRing(
planets: ReadonlyArray<{ number: number; x: number; y: number }>,
selectedPlanetId: number | null,
theme: Theme = DARK_THEME,
): CirclePrim | null {
if (selectedPlanetId === null) return null;
const planet = planets.find((p) => p.number === selectedPlanetId);
@@ -39,7 +40,7 @@ export function computeSelectionRing(
y: planet.y,
radius: SELECTION_RING_RADIUS,
style: {
strokeColor: SELECTION_RING_COLOR,
strokeColor: theme.selectionRing,
strokeAlpha: 0.95,
strokeWidthPx: 1.5,
},