50 lines
4.3 KiB
Markdown
50 lines
4.3 KiB
Markdown
# 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.
|
|
|
|
## 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.
|
|
|
|
## 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.
|