{{ 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();