From ab6227881e3373465a6b1795ebbcf42011e9df18 Mon Sep 17 00:00:00 2001
From: Bastian Wagner <bastian.wagner@softconcis.de>
Date: Fri, 21 Aug 2026 16:12:55 +0200
Subject: [PATCH] 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                  | 23 ++++++++++++++++---
 .../layout/app-shell/app-shell.component.html |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/app.spec.ts b/apps/web/src/app/app.spec.ts
index 0ca6613..bb6ab46 100644
--- a/apps/web/src/app/app.spec.ts
+++ b/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();
 
diff --git a/apps/web/src/app/layout/app-shell/app-shell.component.html b/apps/web/src/app/layout/app-shell/app-shell.component.html
index b8ae48c..d0dd1be 100644
--- a/apps/web/src/app/layout/app-shell/app-shell.component.html
+++ b/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 />