feat(combat): add CombatPageComponent and replace the combat/new placeholder route

Wires up the Slice 0.3 combat screen (player/monster HP bars, round
display, Angriff action, grouped German combat log, victory/defeat
panels) and replaces the Slice 0.2 combat/new placeholder route with
combat/:combatId loading CombatPageComponent.

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

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

@@ -0,0 +1,153 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute, convertToParamMap, Router, provideRouter } from '@angular/router';
+import { vi } from 'vitest';
+import type { Combat } from '../../../core/api/game-api.models';
+import { CombatStore } from '../combat.store';
+import { CombatPageComponent } from './combat-page.component';
+
+const activeCombat: Combat = {
+  id: 'combat-1',
+  status: 'ACTIVE',
+  round: 2,
+  player: { name: 'Aric Duskwalker', maxHp: 100, currentHp: 95 },
+  monster: {
+    key: 'ash-rat',
+    name: 'Aschenratte',
+    level: 1,
+    maxHp: 45,
+    currentHp: 31,
+    artworkPath: '/images/monsters/ash-rat.png',
+  },
+  events: [
+    { round: 1, sequence: 1, type: 'DAMAGE', source: 'PLAYER', target: 'MONSTER', amount: 14 },
+    { round: 1, sequence: 2, type: 'DAMAGE', source: 'MONSTER', target: 'PLAYER', amount: 5 },
+  ],
+};
+
+describe('CombatPageComponent', () => {
+  let combatStore: {
+    combat: ReturnType<typeof signal<Combat | null>>;
+    loading: ReturnType<typeof signal<boolean>>;
+    actionPending: ReturnType<typeof signal<boolean>>;
+    error: ReturnType<typeof signal<string | null>>;
+    loadCombat: ReturnType<typeof vi.fn>;
+    attack: ReturnType<typeof vi.fn>;
+  };
+  let router: Router;
+
+  async function setup(combat: Combat | null) {
+    combatStore = {
+      combat: signal(combat),
+      loading: signal(false),
+      actionPending: signal(false),
+      error: signal<string | null>(null),
+      loadCombat: vi.fn(() => Promise.resolve()),
+      attack: vi.fn(() => Promise.resolve()),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CombatPageComponent],
+      providers: [
+        provideRouter([]),
+        { provide: CombatStore, useValue: combatStore },
+        {
+          provide: ActivatedRoute,
+          useValue: { snapshot: { paramMap: convertToParamMap({ combatId: 'combat-1' }) } },
+        },
+      ],
+    }).compileComponents();
+
+    router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate').mockResolvedValue(true);
+
+    const fixture = TestBed.createComponent(CombatPageComponent);
+    fixture.detectChanges();
+    return fixture;
+  }
+
+  it('loads the combat from the route param on init', async () => {
+    await setup(activeCombat);
+
+    expect(combatStore.loadCombat).toHaveBeenCalledWith('combat-1');
+  });
+
+  it('shows the player, monster, HP bars, round, and the Angriff action', async () => {
+    const fixture = await setup(activeCombat);
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain('Aric Duskwalker');
+    expect(element.textContent).toContain('95 / 100');
+    expect(element.textContent).toContain('Aschenratte');
+    expect(element.textContent).toContain('31 / 45');
+    expect(element.querySelector('[data-combat-round]')?.textContent).toContain('Runde 2');
+    expect(element.querySelector('[data-combat-attack]')).toBeTruthy();
+  });
+
+  it('renders the structured events as readable German combat-log entries', async () => {
+    const fixture = await setup(activeCombat);
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain('Aric Duskwalker trifft Aschenratte für 14 Schaden.');
+    expect(element.textContent).toContain('Aschenratte trifft Aric Duskwalker für 5 Schaden.');
+  });
+
+  it('calls combatStore.attack() when Angriff is clicked', async () => {
+    const fixture = await setup(activeCombat);
+    const element = fixture.nativeElement as HTMLElement;
+
+    element.querySelector<HTMLButtonElement>('[data-combat-attack]')?.click();
+
+    expect(combatStore.attack).toHaveBeenCalledOnce();
+  });
+
+  it('disables Angriff while an action is pending', async () => {
+    const fixture = await setup(activeCombat);
+    combatStore.actionPending.set(true);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    expect(element.querySelector<HTMLButtonElement>('[data-combat-attack]')?.disabled).toBe(true);
+  });
+
+  it('shows the victory state and hides Angriff when the combat is WON', async () => {
+    const fixture = await setup({ ...activeCombat, status: 'WON' });
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('[data-combat-result="WON"]')).toBeTruthy();
+    expect(element.textContent).toContain('Sieg');
+    expect(element.querySelector('[data-combat-attack]')).toBeNull();
+  });
+
+  it('shows the defeat state and hides Angriff when the combat is LOST', async () => {
+    const fixture = await setup({ ...activeCombat, status: 'LOST' });
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('[data-combat-result="LOST"]')).toBeTruthy();
+    expect(element.textContent).toContain('Niederlage');
+    expect(element.querySelector('[data-combat-attack]')).toBeNull();
+  });
+
+  it('navigates to /hunt from the victory screen', async () => {
+    const fixture = await setup({ ...activeCombat, status: 'WON' });
+    const element = fixture.nativeElement as HTMLElement;
+
+    element.querySelector<HTMLButtonElement>('[data-combat-to-hunt]')?.click();
+
+    expect(router.navigate).toHaveBeenCalledWith(['/hunt']);
+  });
+
+  it('shows an error and retries loading the combat', async () => {
+    const fixture = await setup(null);
+    combatStore.error.set('Dieser Kampf wurde nicht gefunden.');
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    expect(element.querySelector('[role="alert"]')?.textContent).toContain(
+      'Dieser Kampf wurde nicht gefunden.',
+    );
+    element.querySelector<HTMLButtonElement>('[data-combat-retry]')?.click();
+
+    expect(combatStore.loadCombat).toHaveBeenCalledTimes(2);
+  });
+});