feat(web): show monster guard and rage on the combat screen

apps/web/src/app/features/combat/combat-page/combat-page.component.spec.ts

@@ -37,6 +37,8 @@ const activeCombat: Combat = {
     currentHp: 31,
     artworkPath: '/images/monsters/ash-rat.png',
     pendingIntent: null,
+    guardRemainingRounds: null,
+    enraged: false,
   },
   events: [
     { round: 1, sequence: 1, type: 'DAMAGE', source: 'PLAYER', target: 'MONSTER', amount: 14 },
@@ -197,6 +199,61 @@ describe('CombatPageComponent', () => {
     expect(element.querySelector('[data-combat-telegraph]')).toBeNull();
   });
 
+  const veteran: Combat = {
+    ...activeCombat,
+    monster: { ...activeCombat.monster, name: 'Raider Veteran' },
+  };
+
+  it('announces a raised guard with the rounds it still covers', async () => {
+    const fixture = await setup({
+      ...veteran,
+      monster: { ...veteran.monster, guardRemainingRounds: 2 },
+    });
+
+    const banner: HTMLElement | null = fixture.nativeElement.querySelector(
+      '[data-combat-guard]',
+    );
+    expect(banner?.textContent).toContain('Raider Veteran');
+    expect(banner?.textContent).toContain('2');
+  });
+
+  it('says nothing about a guard when the monster is open', async () => {
+    const fixture = await setup(activeCombat);
+
+    expect(
+      fixture.nativeElement.querySelector('[data-combat-guard]'),
+    ).toBeNull();
+  });
+
+  it('marks an enraged monster', async () => {
+    const fixture = await setup({
+      ...activeCombat,
+      monster: { ...activeCombat.monster, enraged: true },
+    });
+
+    expect(
+      fixture.nativeElement.querySelector('[data-combat-enraged]'),
+    ).not.toBeNull();
+  });
+
+  it('reads the new events back in the log', async () => {
+    const fixture = await setup({
+      ...veteran,
+      events: [
+        { round: 1, sequence: 1, type: 'GUARD_RAISED', source: 'MONSTER', target: 'MONSTER', amount: 2 },
+        { round: 1, sequence: 2, type: 'ENRAGED', source: 'MONSTER', target: 'MONSTER' },
+        { round: 2, sequence: 1, type: 'GUARD_ENDED', source: 'MONSTER', target: 'MONSTER' },
+      ],
+    });
+
+    const log = (
+      fixture.nativeElement as HTMLElement
+    ).querySelector('.combat__log')?.textContent;
+    expect(log).toContain('Raider Veteran raises its guard.');
+    expect(log).toContain('Raider Veteran turns savage.');
+    expect(log).toContain("Raider Veteran's guard drops.");
+  });
+
   it('renders HEAL, DEFEND, TELEGRAPH, and INTERRUPT log lines', async () => {
     const fixture = await setup({
       ...activeCombat,