feat: render interactive ashen fields world

This commit is contained in:
Bastian Wagner
2026-08-19 08:25:42 +02:00
parent fce03e220d
commit 1e2bfe6e4b
21 changed files with 1933 additions and 17 deletions

View File

@@ -0,0 +1,36 @@
# 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.
## 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.
## 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.