feat(web): bind the HUD health bar to the locally-ticking HP value

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

@@ -8,11 +8,13 @@ import { routes } from './app.routes';
 
 describe('App', () => {
   let character: WritableSignal<CharacterResponse | null>;
+  let displayedCharacter: WritableSignal<CharacterResponse | null>;
   let currentLocation: WritableSignal<null>;
   let selectedConnection: WritableSignal<null>;
 
   beforeEach(async () => {
     character = signal<CharacterResponse | null>(null);
+    displayedCharacter = signal<CharacterResponse | null>(null);
     currentLocation = signal(null);
     selectedConnection = signal(null);
 
@@ -27,7 +29,7 @@ describe('App', () => {
         ]),
         {
           provide: WorldStore,
-          useValue: { character, currentLocation, selectedConnection },
+          useValue: { character, displayedCharacter, currentLocation, selectedConnection },
         },
       ],
     }).compileComponents();
@@ -149,7 +151,20 @@ describe('App', () => {
   });
 
   it('renders loaded character values supplied by the WorldStore', () => {
-    character.set({
+    const decoy: CharacterResponse = {
+      id: 'stale-id',
+      name: 'Stale Decoy',
+      level: 1,
+      experience: 0,
+      silver: 0,
+      currentHp: 1,
+      maxHp: 1,
+      attack: 1,
+      hpRegenPerSecond: 1,
+      hpRegenSince: null,
+      currentLocation: { id: 'location-id', key: 'south-gate', name: 'Südtor von Graufurt' },
+    };
+    const value: CharacterResponse = {
       id: 'character-id',
       name: 'Mara Ashfall',
       level: 7,
@@ -161,7 +176,9 @@ describe('App', () => {
       hpRegenPerSecond: 1,
       hpRegenSince: null,
       currentLocation: { id: 'location-id', key: 'south-gate', name: 'Südtor von Graufurt' },
-    });
+    };
+    character.set(decoy);
+    displayedCharacter.set(value);
     const fixture = TestBed.createComponent(AppShellComponent);
     fixture.detectChanges();
 

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

@@ -1,5 +1,5 @@
 <div class="app-shell">
-  <app-top-bar [character]="worldStore.character()" />
+  <app-top-bar [character]="worldStore.displayedCharacter()" />
 
   <div class="app-shell__content" [class.app-shell__content--no-context]="!showContextPanel()">
     <app-side-navigation />