75 lines
4.5 KiB
Markdown
75 lines
4.5 KiB
Markdown
# 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.
|