Task 8 report: reusable Angular application shell

Scope delivered

Replaced the Angular scaffold with a route-hosting root component and a reusable dark-fantasy shell.
Added focused standalone components for the app shell, store-driven top bar, side navigation, footer, and context-panel frame.
Added requested design tokens, spacing, motion, elevation, global reset, responsive shell grid, and reduced-motion protection.
Configured / and fallback routing to /world; the route lazy-loads a deliberately scene-free WorldPageComponent placeholder so Task 9 can add the world composition without changing the route contract.
Made Karte the only enabled active navigation entry. Jagd, Quests, Inventar, and Charakter are disabled buttons with accessible explanatory labels. Shop is not rendered.
Top-bar character identity, level, and hit points are rendered only from WorldStore.character; it has no hardcoded character statistics.

Preflight and asset evidence

Re-read the Task 8 brief, visible-slice implementation plan, progress ledger, prior task reports, and the full user-provided visual asset style guide.
Visually inspected combat-screen.png, hunting-screen.png, and world-travel-screen.png before editing.
Visually inspected the relevant user HUD assets before use. The shell uses only:
- apps/web/public/images/hud/CharacterIcon.png
- apps/web/public/images/hud/MapsIcon.png
- apps/web/public/images/hud/HuntIcon.png
- apps/web/public/images/hud/QuestsIcon.png
- apps/web/public/images/hud/InventoryIcon.png

TDD evidence

RED

npm test --workspace=@ashen-realms/web -- --watch=false failed as intended before production work: the new shell specification expected app-top-bar, but the scaffold only contained a router outlet. The existing two test files remained green (11 passing tests).

GREEN

npm test --workspace=@ashen-realms/web -- --watch=false passed with 3 test files and 12 tests. The added shell test asserts top bar, side navigation, semantic main content, footer, enabled active Karte, disabled future destinations, and Shop absence.

Final verification

npm test --workspace=@ashen-realms/web -- --watch=false: 3 files and 12 tests passing.
npm run build:web: production Angular build passed and emits a lazy world-page-component chunk.
npm exec --workspace=@ashen-realms/web -- prettier --check ...: all Task 8 files formatted.
git diff --check: no whitespace errors.

Visual QA limitation

The Browser plugin is not available in this session. The repository has no installed Playwright package, and a non-mutating npm exec --workspace=@ashen-realms/web -- playwright --version check could not resolve a local runner and timed out. No browser dependency was added outside task scope. Rendered browser verification remains for Task 11, which owns final browser workflow and fidelity captures.

Intentional limits

The world route placeholder contains no scene, nodes, API loading, or travel panel; Task 9 owns those surfaces.
The context panel is only a reusable framed shell until Task 9 supplies world data.

3.1 KiB Raw Blame History