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>
This commit is contained in:
Bastian Wagner
@@ -22,10 +22,10 @@ export const routes: Routes = [
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'combat/new',
|
||||
path: 'combat/:combatId',
|
||||
loadComponent: () =>
|
||||
import('./features/combat/combat-placeholder-page.component').then(
|
||||
(module) => module.CombatPlaceholderPageComponent,
|
||||
import('./features/combat/combat-page/combat-page.component').then(
|
||||
(module) => module.CombatPageComponent,
|
||||
),
|
||||
},
|
||||
],
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<section class="combat-page" aria-label="Kampf">
|
||||
@if (combatStore.combat(); as combat) {
|
||||
<div class="combat-page__scene">
|
||||
<div class="combat-page__combatant combat-page__combatant--player">
|
||||
<img
|
||||
class="combat-page__portrait"
|
||||
src="/images/hud/runtime/CharacterIcon-128.png"
|
||||
[alt]="combat.player.name"
|
||||
/>
|
||||
<div class="combat-page__info">
|
||||
<span class="combat-page__name">{{ combat.player.name }}</span>
|
||||
<div class="combat-page__hp" aria-label="Lebenspunkte">
|
||||
<span>{{ combat.player.currentHp }} / {{ combat.player.maxHp }}</span>
|
||||
<span class="combat-page__hp-track" aria-hidden="true">
|
||||
<span class="combat-page__hp-value" [style.inline-size.%]="playerHpPercent()"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="combat-page__round" data-combat-round>Runde {{ combat.round }}</div>
|
||||
|
||||
<div class="combat-page__combatant combat-page__combatant--monster">
|
||||
<picture>
|
||||
@if (runtimeMonsterArtwork(combat.monster.artworkPath); as runtimeArtwork) {
|
||||
<source [srcset]="runtimeArtwork" type="image/jpeg" />
|
||||
}
|
||||
<img
|
||||
class="combat-page__portrait"
|
||||
[src]="combat.monster.artworkPath"
|
||||
[alt]="combat.monster.name"
|
||||
/>
|
||||
</picture>
|
||||
<div class="combat-page__info">
|
||||
<span class="combat-page__name">{{ combat.monster.name }}</span>
|
||||
<span class="combat-page__level">Stufe {{ combat.monster.level }}</span>
|
||||
<div class="combat-page__hp" aria-label="Lebenspunkte des Gegners">
|
||||
<span>{{ combat.monster.currentHp }} / {{ combat.monster.maxHp }}</span>
|
||||
<span class="combat-page__hp-track" aria-hidden="true">
|
||||
<span
|
||||
class="combat-page__hp-value combat-page__hp-value--monster"
|
||||
[style.inline-size.%]="monsterHpPercent()"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="combat-page__actions">
|
||||
@if (combat.status === 'ACTIVE') {
|
||||
<button
|
||||
type="button"
|
||||
class="combat-page__attack"
|
||||
data-combat-attack
|
||||
[disabled]="combatStore.actionPending()"
|
||||
(click)="attack()"
|
||||
>
|
||||
Angriff
|
||||
</button>
|
||||
} @else if (combat.status === 'WON') {
|
||||
<section class="combat-page__result combat-page__result--won" data-combat-result="WON">
|
||||
<h2>Sieg</h2>
|
||||
<p>{{ combat.monster.name }} wurde besiegt.</p>
|
||||
<p class="combat-page__result-hint">Belohnungen werden im nächsten Schritt verarbeitet.</p>
|
||||
<button type="button" data-combat-to-hunt (click)="goToHunt()">Zur Jagd</button>
|
||||
</section>
|
||||
} @else {
|
||||
<section class="combat-page__result combat-page__result--lost" data-combat-result="LOST">
|
||||
<h2>Niederlage</h2>
|
||||
<p>{{ combat.player.name }} wurde im Kampf besiegt.</p>
|
||||
<button type="button" data-combat-to-hunt (click)="goToHunt()">Zur Jagd</button>
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
|
||||
<aside class="combat-page__log" aria-label="Kampfprotokoll">
|
||||
@for (round of logRounds(); track round.round) {
|
||||
<p class="combat-page__log-round">Runde {{ round.round }}</p>
|
||||
@for (event of round.events; track event.sequence) {
|
||||
<p class="combat-page__log-entry">{{ formatEvent(event) }}</p>
|
||||
}
|
||||
}
|
||||
</aside>
|
||||
} @else if (combatStore.loading()) {
|
||||
<p class="combat-page__loading" role="status">Kampf wird geladen…</p>
|
||||
}
|
||||
|
||||
@if (combatStore.error(); as error) {
|
||||
<section class="combat-page__error" role="alert">
|
||||
<p>{{ error }}</p>
|
||||
<button type="button" data-combat-retry (click)="retry()">Erneut versuchen</button>
|
||||
</section>
|
||||
}
|
||||
</section>
|
||||
@@ -0,0 +1,263 @@
|
||||
:host {
|
||||
display: block;
|
||||
min-block-size: 100%;
|
||||
}
|
||||
|
||||
.combat-page {
|
||||
display: grid;
|
||||
gap: var(--ar-space-4);
|
||||
}
|
||||
|
||||
.combat-page__scene {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: end;
|
||||
gap: var(--ar-space-4);
|
||||
min-block-size: clamp(18rem, 40vh, 26rem);
|
||||
padding: var(--ar-space-5);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ar-border);
|
||||
background-color: #151718;
|
||||
background-image: url('/images/backgrounds/Aschestrasse.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
@supports (
|
||||
background-image: image-set(
|
||||
url('/images/backgrounds/runtime/Aschestrasse-960.jpg') type('image/jpeg') 1x
|
||||
)
|
||||
) {
|
||||
.combat-page__scene {
|
||||
background-image: image-set(
|
||||
url('/images/backgrounds/runtime/Aschestrasse-960.jpg') type('image/jpeg') 1x
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.combat-page__scene::before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(180deg, rgb(4 6 8 / 0.15), rgb(4 6 8 / 0.6));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.combat-page__combatant {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: var(--ar-space-2);
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-page__combatant--player {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.combat-page__combatant--monster {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.combat-page__portrait {
|
||||
inline-size: clamp(6rem, 14vw, 10rem);
|
||||
block-size: clamp(6rem, 14vw, 10rem);
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-md);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
.combat-page__info {
|
||||
display: grid;
|
||||
gap: var(--ar-space-1);
|
||||
min-inline-size: 10rem;
|
||||
color: var(--ar-text);
|
||||
text-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 0.85);
|
||||
}
|
||||
|
||||
.combat-page__name {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.combat-page__level {
|
||||
color: var(--ar-gold);
|
||||
font-size: var(--ar-font-sm);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-page__hp {
|
||||
display: grid;
|
||||
gap: var(--ar-space-1);
|
||||
font-size: var(--ar-font-sm);
|
||||
}
|
||||
|
||||
.combat-page__hp-track {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
block-size: 0.5rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ar-border);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
background: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
.combat-page__hp-value {
|
||||
display: block;
|
||||
block-size: 100%;
|
||||
background: var(--ar-success);
|
||||
}
|
||||
|
||||
.combat-page__hp-value--monster {
|
||||
background: var(--ar-danger);
|
||||
}
|
||||
|
||||
.combat-page__round {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: start;
|
||||
justify-self: center;
|
||||
padding: var(--ar-space-1) var(--ar-space-3);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
color: var(--ar-gold);
|
||||
background: rgb(9 11 13 / 0.75);
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-page__actions {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.combat-page__attack {
|
||||
padding: var(--ar-space-3) var(--ar-space-6);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
color: var(--ar-text);
|
||||
background: linear-gradient(180deg, #263b4b, #17232d);
|
||||
cursor: pointer;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.combat-page__attack:hover:not(:disabled) {
|
||||
border-color: #d6b26b;
|
||||
background: linear-gradient(180deg, #315067, #1a2c3a);
|
||||
}
|
||||
|
||||
.combat-page__attack:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.combat-page__result {
|
||||
display: grid;
|
||||
gap: var(--ar-space-2);
|
||||
max-inline-size: 30rem;
|
||||
padding: var(--ar-space-5);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
background: var(--ar-panel);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-page__result h2 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.combat-page__result--won h2 {
|
||||
color: var(--ar-success);
|
||||
}
|
||||
|
||||
.combat-page__result--lost h2 {
|
||||
color: var(--ar-danger);
|
||||
}
|
||||
|
||||
.combat-page__result-hint {
|
||||
color: var(--ar-text-muted);
|
||||
font-size: var(--ar-font-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.combat-page__log {
|
||||
display: grid;
|
||||
gap: var(--ar-space-1);
|
||||
max-block-size: 16rem;
|
||||
padding: var(--ar-space-4);
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--ar-border);
|
||||
background: var(--ar-panel-muted);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
.combat-page__log-round {
|
||||
margin: var(--ar-space-2) 0 0;
|
||||
color: var(--ar-gold);
|
||||
font-size: var(--ar-font-sm);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-page__log-entry {
|
||||
margin: 0;
|
||||
color: var(--ar-text-muted);
|
||||
}
|
||||
|
||||
.combat-page__loading,
|
||||
.combat-page__error {
|
||||
padding: var(--ar-space-4);
|
||||
border: 1px solid var(--ar-border);
|
||||
background: var(--ar-panel);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
.combat-page__error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--ar-space-4);
|
||||
border-color: var(--ar-danger);
|
||||
}
|
||||
|
||||
.combat-page__error button {
|
||||
flex: 0 0 auto;
|
||||
padding: var(--ar-space-2) var(--ar-space-3);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
color: var(--ar-text);
|
||||
background: #1a2023;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.combat-page__hp-value {
|
||||
transition: inline-size var(--ar-motion-base);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 720px) {
|
||||
.combat-page__scene {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-page__combatant--player,
|
||||
.combat-page__combatant--monster {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import type { CombatEvent } from '../../../core/api/game-api.models';
|
||||
import { runtimeMonsterArtworkPath } from '../../../shared/monster-artwork';
|
||||
import { CombatStore } from '../combat.store';
|
||||
|
||||
interface CombatLogRound {
|
||||
round: number;
|
||||
events: CombatEvent[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-combat-page',
|
||||
templateUrl: './combat-page.component.html',
|
||||
styleUrl: './combat-page.component.scss',
|
||||
})
|
||||
export class CombatPageComponent implements OnInit {
|
||||
protected readonly combatStore = inject(CombatStore);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadFromRoute();
|
||||
}
|
||||
|
||||
protected attack(): void {
|
||||
void this.combatStore.attack();
|
||||
}
|
||||
|
||||
protected retry(): void {
|
||||
this.loadFromRoute();
|
||||
}
|
||||
|
||||
protected goToHunt(): void {
|
||||
void this.router.navigate(['/hunt']);
|
||||
}
|
||||
|
||||
protected runtimeMonsterArtwork(artworkPath: string): string | undefined {
|
||||
return runtimeMonsterArtworkPath(artworkPath);
|
||||
}
|
||||
|
||||
protected playerHpPercent(): number {
|
||||
const combat = this.combatStore.combat();
|
||||
return combat ? (combat.player.currentHp / combat.player.maxHp) * 100 : 0;
|
||||
}
|
||||
|
||||
protected monsterHpPercent(): number {
|
||||
const combat = this.combatStore.combat();
|
||||
return combat ? (combat.monster.currentHp / combat.monster.maxHp) * 100 : 0;
|
||||
}
|
||||
|
||||
protected logRounds(): CombatLogRound[] {
|
||||
const combat = this.combatStore.combat();
|
||||
if (!combat) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const rounds = new Map<number, CombatEvent[]>();
|
||||
for (const event of combat.events) {
|
||||
const events = rounds.get(event.round) ?? [];
|
||||
events.push(event);
|
||||
rounds.set(event.round, events);
|
||||
}
|
||||
|
||||
return [...rounds.entries()].sort(([a], [b]) => a - b).map(([round, events]) => ({ round, events }));
|
||||
}
|
||||
|
||||
protected formatEvent(event: CombatEvent): string {
|
||||
const combat = this.combatStore.combat();
|
||||
const playerName = combat?.player.name ?? 'Du';
|
||||
const monsterName = combat?.monster.name ?? 'Der Gegner';
|
||||
|
||||
if (event.type === 'DAMAGE') {
|
||||
const attacker = event.source === 'PLAYER' ? playerName : monsterName;
|
||||
const defender = event.target === 'PLAYER' ? playerName : monsterName;
|
||||
return `${attacker} trifft ${defender} für ${event.amount} Schaden.`;
|
||||
}
|
||||
|
||||
if (event.type === 'COMBAT_WON') {
|
||||
return `${monsterName} wurde besiegt.`;
|
||||
}
|
||||
|
||||
return `${playerName} wurde im Kampf besiegt.`;
|
||||
}
|
||||
|
||||
private loadFromRoute(): void {
|
||||
const combatId = this.route.snapshot.paramMap.get('combatId');
|
||||
if (combatId) {
|
||||
void this.combatStore.loadCombat(combatId);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-combat-placeholder-page',
|
||||
template: `
|
||||
<section class="combat-placeholder" aria-label="Kampfvorbereitung">
|
||||
<span class="combat-placeholder__eyebrow">KAMPF</span>
|
||||
<h2>Vorbereitung auf den Kampf</h2>
|
||||
<p>
|
||||
Die Klinge ist gezogen, der Gegner steht bereit – doch das eigentliche Gefecht liegt noch
|
||||
vor dir. Diese Ansicht ist ein Zwischenhalt auf dem Weg in den Kampf, der in einem
|
||||
späteren Schritt folgt.
|
||||
</p>
|
||||
@if (encounterId) {
|
||||
<p class="combat-placeholder__id" data-encounter-id>
|
||||
Vorbereitung auf den Kampf gegen Begegnung {{ encounterId }}…
|
||||
</p>
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.combat-placeholder {
|
||||
display: grid;
|
||||
gap: var(--ar-space-3);
|
||||
max-inline-size: 40rem;
|
||||
margin: var(--ar-space-6) auto;
|
||||
padding: var(--ar-space-5);
|
||||
border: 1px solid var(--ar-border);
|
||||
background: var(--ar-panel);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-placeholder__eyebrow {
|
||||
color: var(--ar-gold);
|
||||
font-size: var(--ar-font-sm);
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-placeholder h2 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.combat-placeholder p {
|
||||
margin: 0;
|
||||
color: var(--ar-text-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.combat-placeholder__id {
|
||||
color: var(--ar-text-muted);
|
||||
font-size: var(--ar-font-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
`,
|
||||
],
|
||||
})
|
||||
export class CombatPlaceholderPageComponent {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
|
||||
protected readonly encounterId = this.route.snapshot.queryParamMap.get('encounterId');
|
||||
}
|
||||
Reference in New Issue
Block a user