# 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.

## 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.