4.5 KiB
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-freeWorldPageComponentplaceholder 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, andworld-travel-screen.pngbefore editing. - Visually inspected the relevant user HUD assets before use. The shell uses only:
apps/web/public/images/hud/CharacterIcon.pngapps/web/public/images/hud/MapsIcon.pngapps/web/public/images/hud/HuntIcon.pngapps/web/public/images/hud/QuestsIcon.pngapps/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 lazyworld-page-componentchunk.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.
Review fix round 1
Accessibility and responsive behavior
- The active Karte button now has the explicit accessible name
Karte, so its label remains available when the compact viewport hides visible navigation text. - At widths below 900px, the context panel now reflows into a full-width row below main content instead of being hidden. At widths below 620px it remains in DOM order after main content.
Runtime HUD derivatives
The five original 1254 x 1254 user assets remain unmodified. The shell now loads deterministic 128 x 128 PNG derivatives from images/hud/runtime/; each was resized locally with high-quality bicubic interpolation and no creative image change.
| Asset | Original bytes | Runtime derivative bytes |
|---|---|---|
| CharacterIcon | 2,283,892 | 26,670 |
| MapsIcon | 2,144,772 | 27,774 |
| HuntIcon | 2,313,949 | 29,486 |
| QuestsIcon | 2,235,955 | 29,554 |
| InventoryIcon | 2,060,169 | 26,142 |
The combined persistent-icon payload is reduced from 11,038,737 bytes to 139,626 bytes (about 98.7%). The resized Maps icon was visually inspected after generation.
Regression evidence
RED: the added explicit accessible-name assertion failed before the fix because the active Karte control had no aria-label.
GREEN: npm test --workspace=@ashen-realms/web -- --watch=false passed with 3 test files and 14 tests. The added coverage verifies the explicit Karte name, non-null WorldStore character rendering, and root/wildcard /world route redirects.