Task 9 Report: World UI

Reference inventory

world-travel-screen.png: persistent top bar and left navigation, a dominant central map, labelled current/reachable nodes with a dotted path, dense right context, and a bottom-centred travel decision panel.
hunting-screen.png: confirms the shared dark iron/bronze material treatment, restrained gold highlights, readable serif display hierarchy, and dense information without white cards or modern pills.
combat-screen.png: confirms the same persistent shell, dark desaturated palette, thin ornate borders, and blue only as a controlled active-state accent.

The reference screenshots were inspected but are not shipped or referenced by the application.

Artwork and layout decision

No ImageGen was used: the controller ruling makes the delivered user artwork final.
/images/backgrounds/map_ashen_realm.png is the dominant WorldPage scene. Its wide path, city, watchtower, and ash-field composition provides a clearer interactive map than either location image.
The server-delivered location paths are /images/backgrounds/Suedtor.png and /images/backgrounds/Aschestrasse.png; the ContextPanel renders the authoritative current-location image, so it changes only after server-confirmed arrival.
This deliberately supersedes the older brief wording that asked for generated assets and API artwork as the main scene background. It preserves the binding controller ruling while retaining the server-provided artwork as context.

Delivered behavior

WorldPageComponent loads WorldStore on init, renders a code-native SVG connection and two code-native location buttons, shows loading/error/retry states, and never advances location locally.
LocationNodeComponent exposes current, selected, reachable, disabled, hover, and focus states with textual labels.
TravelPanelComponent presents no-selection guidance, selected target/travel-time/danger with Reise beginnen, and an arrivesAt-derived travelling countdown with disabled action.
ContextPanelComponent renders the current/selected location, description, recommended level, safe status, hunting status, and server artwork.
Seed paths now match the delivered assets and are covered by the API seed test.

Review-fix round

Map-node geography is now anchored to the stable location keys (south-gate and burned-road). Current, reachable, and selected state only changes presentation; a regression test swaps the authoritative current location without moving either node.
On a server COMPLETED response, the selected connection is cleared and the store stays loading until the authoritative character/location/travel reload completes. All travel actions are disabled in that interval; no local arrival or location update is performed.
The moving countdown is a <time role="timer"> without a broad live region. The selected and travelling mode headings remain labelled for assistive technology.
The decision panel now occupies normal document flow below the map scene, reserving a non-overlapping zone at desktop and narrow breakpoints.
The original delivered PNGs remain untouched. A deterministic local System.Drawing JPEG conversion (quality 86, high-quality bicubic) provides runtime derivatives: map_ashen_realm-1440.jpg (1440x810, 233,778 B), Suedtor-960.jpg (960x540, 94,286 B), and Aschestrasse-960.jpg (960x540, 93,277 B). The WorldPage and ContextPanel prefer these derivatives while retaining each server artwork path as the <img> fallback.
The load error is exposed as an alert and its retry control is covered by a store-load regression test.
The map no longer declares the runtime JPEG and original PNG as comma-separated background layers. It uses the original PNG as the classic CSS fallback and, where image-set with JPEG is supported, replaces it with one runtime JPEG candidate. The WorldPage regression test verifies there is no inline multi-layer binding or mapBackground source left to reintroduce the double load.

Verification

RED confirmed: four new WorldPage contracts failed against the empty placeholder; seed artwork-path assertion failed against the former WebP paths.
Focused WorldPage test: 4/4 pass.
Full web tests: 18/18 pass.
Affected API seed tests: 2/2 pass.
npm run build:web and npm run build:api pass.
Review focused World/Store/Context tests: 19 pass (4 files; 4 pre-existing skips).
Review full web suite: 23/23 pass.
Affected API seed test: 2/2 pass.
Both review builds (npm run build:web, npm run build:api) pass.
Review-fix round 2: focused WorldPage test 7/7 pass; full web suite and web build re-run after the fallback change.

Remaining concern

Rendered browser fidelity QA is intentionally deferred to Task 11, as instructed. The Browser plugin is unavailable and no Playwright fallback was started for this task.

4.8 KiB Raw Blame History