sprites

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

@@ -1,5 +1,7 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { Router, RouterOutlet, isActive } from '@angular/router';
+import type { CharacterResponse } from '../../core/api/game-api.models';
+import { CombatStore } from '../../features/combat/combat.store';
 import { WorldStore } from '../../features/world/world.store';
 import { ContextPanelComponent } from '../context-panel/context-panel.component';
 import { GameFooterComponent } from '../game-footer/game-footer.component';
@@ -22,11 +24,30 @@ export class AppShellComponent {
   private readonly router = inject(Router);
 
   protected readonly worldStore = inject(WorldStore);
+  private readonly combatStore = inject(CombatStore);
 
   // The fight has its own log rail and wants the width, and the area info
   // belongs to the world view anyway, so the rail is dropped during combat.
   private readonly inCombat = isActive('/combat', this.router);
 
+  // Outside a fight the HUD shows WorldStore's regen-ticked HP. Mid-fight,
+  // regen is paused server-side and the only HP that moves is the combat's --
+  // the world snapshot is stale, so it must not drive the bar.
+  protected readonly topBarCharacter = computed<CharacterResponse | null>(() => {
+    const character = this.worldStore.displayedCharacter();
+    const combat = this.inCombat() ? this.combatStore.combat() : null;
+    if (!character || !combat) {
+      return character;
+    }
+
+    return {
+      ...character,
+      currentHp: combat.player.currentHp,
+      maxHp: combat.player.maxHp,
+      hpRegenSince: null,
+    };
+  });
+
   // The location view brings its own, far richer context sidebar. Showing the
   // shell's generic area panel next to it would say the same thing twice and
   // squeeze the artwork the screen is built around.