fix: optimize shell accessibility and assets

apps/web/src/app/app.spec.ts

@@ -1,18 +1,24 @@
-import { signal } from '@angular/core';
+import { signal, WritableSignal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
+import { CharacterResponse } from './core/api/game-api.models';
 import { WorldStore } from './features/world/world.store';
 import { AppShellComponent } from './layout/app-shell/app-shell.component';
+import { routes } from './app.routes';
 
 describe('App', () => {
+  let character: WritableSignal<CharacterResponse | null>;
+
   beforeEach(async () => {
+    character = signal<CharacterResponse | null>(null);
+
     await TestBed.configureTestingModule({
       imports: [AppShellComponent],
       providers: [
         provideRouter([]),
         {
           provide: WorldStore,
-          useValue: { character: signal(null) },
+          useValue: { character },
         },
       ],
     }).compileComponents();
@@ -32,6 +38,7 @@ describe('App', () => {
     expect(mapButton).not.toBeNull();
     expect(mapButton?.disabled).toBe(false);
     expect(mapButton?.getAttribute('aria-current')).toBe('page');
+    expect(mapButton?.getAttribute('aria-label')).toBe('Karte');
 
     for (const destination of ['hunt', 'quests', 'inventory', 'character']) {
       expect(
@@ -41,4 +48,33 @@ describe('App', () => {
 
     expect(element.textContent).not.toContain('Shop');
   });
+
+  it('renders loaded character values supplied by the WorldStore', () => {
+    character.set({
+      id: 'character-id',
+      name: 'Mara Ashfall',
+      level: 7,
+      experience: 320,
+      currentHp: 52,
+      maxHp: 80,
+      attack: 12,
+      currentLocation: { id: 'location-id', key: 'south-gate', name: 'Südtor von Graufurt' },
+    });
+    const fixture = TestBed.createComponent(AppShellComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('app-top-bar')?.textContent).toContain(
+      'Mara Ashfall',
+    );
+    expect(fixture.nativeElement.querySelector('app-top-bar')?.textContent).toContain('Stufe 7');
+    expect(fixture.nativeElement.querySelector('app-top-bar')?.textContent).toContain('52 / 80');
+  });
+
+  it('redirects root and unknown routes to the world shell', () => {
+    expect(routes.find((route) => route.path === '')).toMatchObject({
+      pathMatch: 'full',
+      redirectTo: 'world',
+    });
+    expect(routes.find((route) => route.path === '**')).toMatchObject({ redirectTo: 'world' });
+  });
 });

apps/web/src/app/layout/app-shell/app-shell.component.scss

@@ -27,11 +27,22 @@
 
 @media (width < 900px) {
   .app-shell__content {
-    grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr);
+    grid-template:
+      'navigation main' minmax(0, 1fr)
+      'context context' auto / minmax(8.5rem, 10rem) minmax(0, 1fr);
+  }
+
+  app-side-navigation {
+    grid-area: navigation;
+  }
+
+  .app-shell__main {
+    grid-area: main;
   }
 
   app-context-panel {
-    display: none;
+    display: block;
+    grid-area: context;
   }
 }
 

apps/web/src/app/layout/side-navigation/side-navigation.component.html

@@ -5,8 +5,9 @@
     routerLink="/world"
     data-navigation="world"
     aria-current="page"
+    aria-label="Karte"
   >
-    <img src="/images/hud/MapsIcon.png" alt="" />
+    <img src="/images/hud/runtime/MapsIcon-128.png" alt="" />
     <span>Karte</span>
   </button>
 
@@ -17,7 +18,7 @@
     disabled
     aria-label="Jagd ist noch nicht verfügbar"
   >
-    <img src="/images/hud/HuntIcon.png" alt="" />
+    <img src="/images/hud/runtime/HuntIcon-128.png" alt="" />
     <span>Jagd</span>
   </button>
   <button
@@ -27,7 +28,7 @@
     disabled
     aria-label="Quests sind noch nicht verfügbar"
   >
-    <img src="/images/hud/QuestsIcon.png" alt="" />
+    <img src="/images/hud/runtime/QuestsIcon-128.png" alt="" />
     <span>Quests</span>
   </button>
   <button
@@ -37,7 +38,7 @@
     disabled
     aria-label="Inventar ist noch nicht verfügbar"
   >
-    <img src="/images/hud/InventoryIcon.png" alt="" />
+    <img src="/images/hud/runtime/InventoryIcon-128.png" alt="" />
     <span>Inventar</span>
   </button>
   <button
@@ -47,7 +48,7 @@
     disabled
     aria-label="Charakter ist noch nicht verfügbar"
   >
-    <img src="/images/hud/CharacterIcon.png" alt="" />
+    <img src="/images/hud/runtime/CharacterIcon-128.png" alt="" />
     <span>Charakter</span>
   </button>
 </nav>

apps/web/src/app/layout/top-bar/top-bar.component.html

@@ -1,6 +1,6 @@
 <header class="top-bar">
   <div class="top-bar__character">
-    <img class="top-bar__portrait" src="/images/hud/CharacterIcon.png" alt="" />
+    <img class="top-bar__portrait" src="/images/hud/runtime/CharacterIcon-128.png" alt="" />
     @if (character(); as character) {
       <div class="top-bar__identity">
         <span class="top-bar__name">{{ character.name }}</span>