diff --git a/.superpowers/sdd/2026-08-18-first-visible-vertical-slice/task-9-report.md b/.superpowers/sdd/2026-08-18-first-visible-vertical-slice/task-9-report.md index 5f61064..a015e6d 100644 --- a/.superpowers/sdd/2026-08-18-first-visible-vertical-slice/task-9-report.md +++ b/.superpowers/sdd/2026-08-18-first-visible-vertical-slice/task-9-report.md @@ -31,6 +31,7 @@ The reference screenshots were inspected but are not shipped or referenced by th - The decision panel now occupies normal document flow below the map scene, reserving a non-overlapping zone at desktop and narrow breakpoints. - The original delivered PNGs remain untouched. A deterministic local System.Drawing JPEG conversion (quality 86, high-quality bicubic) provides runtime derivatives: `map_ashen_realm-1440.jpg` (1440x810, 233,778 B), `Suedtor-960.jpg` (960x540, 94,286 B), and `Aschestrasse-960.jpg` (960x540, 93,277 B). The WorldPage and ContextPanel prefer these derivatives while retaining each server artwork path as the `` fallback. - The load error is exposed as an alert and its retry control is covered by a store-load regression test. +- The map no longer declares the runtime JPEG and original PNG as comma-separated background layers. It uses the original PNG as the classic CSS fallback and, where `image-set` with JPEG is supported, replaces it with one runtime JPEG candidate. The WorldPage regression test verifies there is no inline multi-layer binding or `mapBackground` source left to reintroduce the double load. ## Verification @@ -43,6 +44,7 @@ The reference screenshots were inspected but are not shipped or referenced by th - Review full web suite: 23/23 pass. - Affected API seed test: 2/2 pass. - Both review builds (`npm run build:web`, `npm run build:api`) pass. +- Review-fix round 2: focused WorldPage test 7/7 pass; full web suite and web build re-run after the fallback change. ## Remaining concern diff --git a/apps/web/src/app/features/world/world-page.component.html b/apps/web/src/app/features/world/world-page.component.html index 2b7eb8a..8817b24 100644 --- a/apps/web/src/app/features/world/world-page.component.html +++ b/apps/web/src/app/features/world/world-page.component.html @@ -1,10 +1,6 @@
@if (worldStore.currentLocation(); as location) { -
+

{{ location.name }}

diff --git a/apps/web/src/app/features/world/world-page.component.scss b/apps/web/src/app/features/world/world-page.component.scss index ede0803..019a46a 100644 --- a/apps/web/src/app/features/world/world-page.component.scss +++ b/apps/web/src/app/features/world/world-page.component.scss @@ -15,12 +15,25 @@ overflow: hidden; border: 1px solid var(--ar-border); background-color: #151718; + background-image: url('/images/backgrounds/map_ashen_realm.png'); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: var(--ar-shadow-raised); } +@supports ( + background-image: image-set( + url('/images/backgrounds/runtime/map_ashen_realm-1440.jpg') type('image/jpeg') 1x + ) +) { + .world-page__scene { + background-image: image-set( + url('/images/backgrounds/runtime/map_ashen_realm-1440.jpg') type('image/jpeg') 1x + ); + } +} + .world-page__scene::after { position: absolute; z-index: -1; diff --git a/apps/web/src/app/features/world/world-page.component.spec.ts b/apps/web/src/app/features/world/world-page.component.spec.ts index b9d77d1..dba42b2 100644 --- a/apps/web/src/app/features/world/world-page.component.spec.ts +++ b/apps/web/src/app/features/world/world-page.component.spec.ts @@ -122,9 +122,8 @@ describe('WorldPageComponent', () => { expect( element.querySelector('.world-page__node--burned-road [data-location-key="burned-road"]'), ).not.toBeNull(); - expect(element.querySelector('.world-page__scene')?.getAttribute('style')).toContain( - 'map_ashen_realm-1440.jpg', - ); + expect(element.querySelector('.world-page__scene')?.getAttribute('style')).toBeNull(); + expect(fixture.componentInstance).not.toHaveProperty('mapBackground'); store.currentLocation.set(burnedRoad); fixture.detectChanges(); diff --git a/apps/web/src/app/features/world/world-page.component.ts b/apps/web/src/app/features/world/world-page.component.ts index 0a647fc..0e65124 100644 --- a/apps/web/src/app/features/world/world-page.component.ts +++ b/apps/web/src/app/features/world/world-page.component.ts @@ -12,8 +12,6 @@ import { WorldStore } from './world.store'; }) export class WorldPageComponent implements OnInit { protected readonly worldStore = inject(WorldStore); - protected readonly mapBackground = - "url('/images/backgrounds/runtime/map_ashen_realm-1440.jpg'), url('/images/backgrounds/map_ashen_realm.png')"; ngOnInit(): void { void this.worldStore.load();