fix: avoid duplicate world map background loads

This commit is contained in:
Bastian Wagner
2026-08-19 09:02:14 +02:00
parent 1a30eb3491
commit 8e6e77b027
5 changed files with 18 additions and 10 deletions

View File

@@ -1,10 +1,6 @@
<section class="world-page" aria-label="Weltansicht">
@if (worldStore.currentLocation(); as location) {
<section
class="world-page__scene"
[style.background-image]="mapBackground"
[attr.aria-label]="'Weltkarte bei ' + location.name"
>
<section class="world-page__scene" [attr.aria-label]="'Weltkarte bei ' + location.name">
<div class="world-page__atmosphere" aria-hidden="true"></div>
<p class="world-page__location-title">{{ location.name }}</p>

View File

@@ -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;

View File

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

View File

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