bastian/ashen-realms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(combat): play the round a beat at a time with attack and hit frames

Browse Source 
The server resolves a whole round in one call, so both blows used to land
at the same instant. The page now keeps its own view of the combat and
plays the round back: the swing animates, the monster's HP and log line
land, then after a beat the monster strikes and the player recoils.

Both animations are six-frame sprite sheets driven by steps(6), which is
why the phase durations mirror the stylesheet.

The status row reflows on the stage's own width via a container query —
the side rails can squeeze it narrow while the viewport is still wide,
which previously overlapped the round marker with the player's name. The
component-style budget moves to 12kB to fit this screen's stylesheet.
This commit is contained in:
Bastian Wagner
2026-08-19 22:46:17 +02:00
parent 54f9d59ef4
commit 6c4b7d29d0
5 changed files with 265 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/app/features/combat/combat-page/combat-page.component.html
View File

@@ -1,5 +1,5 @@
<section class="combat" aria-label="Kampf">
@if (combatStore.combat(); as combat) {
@if (combat(); as combat) {
<div class="combat__stage">
<header class="combat__status">
<div class="fighter fighter--player">
@@ -49,9 +49,16 @@
</header>
<div class="combat__field">
<img class="sprite sprite--player" [src]="playerSprite" [alt]="combat.player.name" />
<div
class="sprite sprite--player"
[class.sprite--attacking]="phase() === 'attacking'"
[class.sprite--hit]="phase() === 'hit'"
role="img"
[attr.aria-label]="combat.player.name"
></div>
<img
class="sprite sprite--monster"
[style.--sprite-scale]="monsterSpriteScale(combat.monster.key)"
[src]="monsterSprite(combat.monster.key, combat.monster.artworkPath)"
[alt]="combat.monster.name"
/>
@@ -63,7 +70,7 @@
type="button"
class="action"
data-combat-attack
[disabled]="combatStore.actionPending()"
[disabled]="busy()"
(click)="attack()"
>
<img class="action__icon" src="/images/hud/runtime/AttackIcon-96.png" alt="" />

86
apps/web/src/app/features/combat/combat-page/combat-page.component.scss
View File

@@ -12,9 +12,12 @@
/* ---------- stage ---------- */
// The stage is a container so the status row reflows on its own width: the
// surrounding rails can squeeze it narrow while the viewport is still wide.
.combat__stage {
position: relative;
display: grid;
container-type: inline-size;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: var(--ar-space-4);
min-block-size: 26rem;
@@ -126,7 +129,7 @@
block-size: 1.25rem;
overflow: hidden;
border: 1px solid var(--ar-border);
background: linear-gradient(180deg, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.6));
background: rgb(0 0 0 / 0.72);
box-shadow: inset 0 0 0.6rem rgb(0 0 0 / 0.9);
}
@@ -186,21 +189,43 @@
.sprite {
display: block;
max-block-size: 100%;
max-inline-size: 100%;
inline-size: auto;
object-fit: contain;
filter: drop-shadow(0 1rem 1.5rem rgb(0 0 0 / 0.75));
object-position: bottom;
filter: drop-shadow(0 0.5rem 0.9rem rgb(0 0 0 / 0.7));
}
/* Six 384px frames laid out horizontally; frame 0 is the resting stance. */
.sprite--player {
justify-self: start;
block-size: clamp(11rem, 30vh, 19rem);
block-size: 80%;
aspect-ratio: 1;
transform: scaleX(-1);
background-image: url('/images/combat/sprites/warrior-attack-sheet-384.png');
background-repeat: no-repeat;
background-position: 0% 0;
background-size: 600% 100%;
}
.sprite--hit {
background-image: url('/images/combat/sprites/warrior-hit-sheet-384.png');
}
/* 6 frames across a 600%-wide sheet land on 0/20/40/60/80/100%. */
@keyframes warrior-frames {
from {
background-position: 0% 0;
}
to {
background-position: 120% 0;
}
}
.sprite--monster {
justify-self: end;
block-size: clamp(9rem, 24vh, 15rem);
block-size: calc(var(--sprite-scale, 0.6) * 100%);
}
/* ---------- action bar ---------- */
@@ -224,21 +249,23 @@
cursor: pointer;
}
.action__icon {
.action__icon,
.action__label,
.action__key {
position: absolute;
inset-block-start: 32%;
inset-inline-start: 50%;
inline-size: 34%;
translate: -50% -50%;
}
.action__icon {
inset-block-start: 32%;
inline-size: 34%;
border-radius: 50%;
opacity: 0.92;
}
.action__label {
position: absolute;
inset-block-start: 62%;
inset-inline-start: 50%;
translate: -50% -50%;
color: var(--ar-text);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(0.85rem, 1.2vw, 1rem);
@@ -247,10 +274,7 @@
}
.action__key {
position: absolute;
inset-block-start: 90%;
inset-inline-start: 50%;
translate: -50% -50%;
color: var(--ar-text-muted);
font-size: var(--ar-font-sm);
font-variant-numeric: tabular-nums;
@@ -317,8 +341,8 @@
font-style: italic;
}
.outcome__button {
margin-block-start: var(--ar-space-2);
.outcome__button,
.combat__notice--error button {
padding: var(--ar-space-2) var(--ar-space-5);
border: 1px solid var(--ar-border-highlight);
border-radius: var(--ar-radius-sm);
@@ -329,7 +353,12 @@
letter-spacing: 0.04em;
}
.outcome__button:hover {
.outcome__button {
margin-block-start: var(--ar-space-2);
}
.outcome__button:hover,
.combat__notice--error button:hover {
border-color: var(--ar-gold);
color: var(--ar-gold);
}
@@ -407,15 +436,14 @@
.combat__notice--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) {
.sprite--attacking,
.sprite--hit {
animation: warrior-frames 540ms steps(6) 1;
}
.bar__fill {
transition: inline-size var(--ar-motion-base);
}
@@ -444,7 +472,9 @@
}
}
@media (width < 40rem) {
// Below this the three-column status row cannot hold two names and two bars
// side by side, so the fighters stack under a centred round marker.
@container (width < 38rem) {
.combat__status {
grid-template-columns: minmax(0, 1fr);
gap: var(--ar-space-2);
@@ -469,11 +499,7 @@
inset-inline-end: auto;
}
.sprite--player {
block-size: clamp(8rem, 22vh, 12rem);
}
.sprite--monster {
block-size: clamp(7rem, 18vh, 10rem);
.fighter__meter {
max-inline-size: none;
}
}

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

@@ -25,6 +25,12 @@ const activeCombat: Combat = {
],
};
const monsterHitLine = 'Aschenratte trifft Aric Duskwalker für 5 Schaden.';
function countOccurrences(haystack: string | null, needle: string): number {
return haystack ? haystack.split(needle).length - 1 : 0;
}
describe('CombatPageComponent', () => {
let combatStore: {
combat: ReturnType<typeof signal<Combat | null>>;
@@ -63,9 +69,16 @@ describe('CombatPageComponent', () => {
const fixture = TestBed.createComponent(CombatPageComponent);
fixture.detectChanges();
// The route load resolves on the microtask queue before the combat renders.
await fixture.whenStable();
fixture.detectChanges();
return fixture;
}
afterEach(() => {
vi.useRealTimers();
});
it('loads the combat from the route param on init', async () => {
await setup(activeCombat);
@@ -101,6 +114,81 @@ describe('CombatPageComponent', () => {
expect(combatStore.attack).toHaveBeenCalledOnce();
});
it('plays the swing, reveals the monster damage, then the recoil a beat later', async () => {
const fixture = await setup(activeCombat);
const resolvedRound: Combat = {
...activeCombat,
round: 3,
player: { ...activeCombat.player, currentHp: 90 },
monster: { ...activeCombat.monster, currentHp: 17 },
events: [
...activeCombat.events,
{ round: 2, sequence: 3, type: 'DAMAGE', source: 'PLAYER', target: 'MONSTER', amount: 14 },
{ round: 2, sequence: 4, type: 'DAMAGE', source: 'MONSTER', target: 'PLAYER', amount: 5 },
],
};
combatStore.attack.mockImplementation(async () => {
combatStore.combat.set(resolvedRound);
});
vi.useFakeTimers();
const element = fixture.nativeElement as HTMLElement;
const sprite = element.querySelector('.sprite--player');
element.querySelector<HTMLButtonElement>('[data-combat-attack]')?.click();
fixture.detectChanges();
expect(sprite?.classList.contains('sprite--attacking')).toBe(true);
expect(element.textContent).toContain('31 / 45');
expect(element.textContent).toContain('95 / 100');
// Swing lands: the monster loses HP, the player's own loss is held back.
await vi.advanceTimersByTimeAsync(540);
fixture.detectChanges();
expect(sprite?.classList.contains('sprite--attacking')).toBe(false);
expect(element.textContent).toContain('17 / 45');
expect(element.textContent).toContain('95 / 100');
// Only round 1's identical line is logged so far, not round 2's.
expect(countOccurrences(element.textContent, monsterHitLine)).toBe(1);
// The monster strikes back after the beat.
await vi.advanceTimersByTimeAsync(260);
fixture.detectChanges();
expect(sprite?.classList.contains('sprite--hit')).toBe(true);
expect(element.textContent).toContain('90 / 100');
expect(countOccurrences(element.textContent, monsterHitLine)).toBe(2);
await vi.advanceTimersByTimeAsync(540);
fixture.detectChanges();
expect(sprite?.classList.contains('sprite--hit')).toBe(false);
});
it('skips the recoil when the round ends without the monster striking back', async () => {
const fixture = await setup(activeCombat);
const won: Combat = {
...activeCombat,
status: 'WON',
monster: { ...activeCombat.monster, currentHp: 0 },
events: [
...activeCombat.events,
{ round: 2, sequence: 3, type: 'DAMAGE', source: 'PLAYER', target: 'MONSTER', amount: 31 },
{ round: 2, sequence: 4, type: 'COMBAT_WON', source: 'PLAYER', target: 'MONSTER' },
],
};
combatStore.attack.mockImplementation(async () => {
combatStore.combat.set(won);
});
vi.useFakeTimers();
const element = fixture.nativeElement as HTMLElement;
element.querySelector<HTMLButtonElement>('[data-combat-attack]')?.click();
await vi.advanceTimersByTimeAsync(540);
fixture.detectChanges();
expect(element.querySelector('.sprite--player')?.classList.contains('sprite--hit')).toBe(false);
expect(element.querySelector('[data-combat-result="WON"]')).toBeTruthy();
expect(element.textContent).toContain('0 / 45');
});
it('disables Angriff while an action is pending', async () => {
const fixture = await setup(activeCombat);
combatStore.actionPending.set(true);

128
apps/web/src/app/features/combat/combat-page/combat-page.component.ts
View File

@@ -1,9 +1,10 @@
import { Component, OnInit, inject } from '@angular/core';
import { Component, DestroyRef, OnInit, computed, inject, signal } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import type { CombatEvent } from '../../../core/api/game-api.models';
import type { Combat, CombatEvent } from '../../../core/api/game-api.models';
import {
combatMonsterIconPath,
combatMonsterSpritePath,
combatMonsterSpriteScale,
runtimeMonsterArtworkPath,
} from '../../../shared/monster-artwork';
import { CombatStore } from '../combat.store';
@@ -13,9 +14,17 @@ interface CombatLogRound {
events: CombatEvent[];
}
const PLAYER_SPRITE = '/images/combat/sprites/warrior-attack-512.png';
type CombatPhase = 'idle' | 'attacking' | 'hit';
const PLAYER_ICON = '/images/hud/runtime/CharacterIcon-128.png';
// Must stay in step with the sprite-sheet animations in the stylesheet: the
// swing and the recoil each run six frames over these durations.
const SWING_MS = 540;
const RECOIL_MS = 540;
// Beat between the player's blow landing and the monster striking back.
const RIPOSTE_DELAY_MS = 260;
@Component({
selector: 'app-combat-page',
templateUrl: './combat-page.component.html',
@@ -25,46 +34,120 @@ export class CombatPageComponent implements OnInit {
protected readonly combatStore = inject(CombatStore);
private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router);
private readonly destroyRef = inject(DestroyRef);
private destroyed = false;
ngOnInit(): void {
this.loadFromRoute();
// The server resolves a whole round at once. `combat` is what the screen is
// currently showing, so the round can be played back a beat at a time
// instead of both blows landing together.
private readonly displayed = signal<Combat | null>(null);
private readonly replaying = signal(false);
protected readonly combat = this.displayed.asReadonly();
protected readonly phase = signal<CombatPhase>('idle');
protected readonly busy = computed(() => this.replaying() || this.combatStore.actionPending());
protected readonly playerIcon = PLAYER_ICON;
constructor() {
this.destroyRef.onDestroy(() => {
this.destroyed = true;
});
}
protected attack(): void {
void this.combatStore.attack();
ngOnInit(): void {
void this.loadFromRoute();
}
protected async attack(): Promise<void> {
const before = this.displayed();
if (!before || this.busy()) {
return;
}
this.replaying.set(true);
try {
this.phase.set('attacking');
const swing = this.wait(SWING_MS);
await this.combatStore.attack();
await swing;
if (this.destroyed) {
return;
}
this.phase.set('idle');
const after = this.combatStore.combat();
if (!after) {
return;
}
const riposte = after.events.find(
(event) =>
event.round === before.round && event.type === 'DAMAGE' && event.source === 'MONSTER',
);
if (!riposte) {
this.displayed.set(after);
return;
}
// Show the blow the player just landed, holding back the monster's reply.
this.displayed.set({
...after,
player: before.player,
events: after.events.filter((event) => event.sequence < riposte.sequence),
});
await this.wait(RIPOSTE_DELAY_MS);
if (this.destroyed) {
return;
}
this.phase.set('hit');
this.displayed.set(after);
await this.wait(RECOIL_MS);
if (this.destroyed) {
return;
}
this.phase.set('idle');
} finally {
if (!this.destroyed) {
this.replaying.set(false);
}
}
}
protected retry(): void {
this.loadFromRoute();
void this.loadFromRoute();
}
protected goToHunt(): void {
void this.router.navigate(['/hunt']);
}
protected readonly playerSprite = PLAYER_SPRITE;
protected readonly playerIcon = PLAYER_ICON;
protected monsterSprite(monsterKey: string, artworkPath: string): string {
return combatMonsterSpritePath(monsterKey) ?? runtimeMonsterArtworkPath(artworkPath) ?? artworkPath;
}
protected monsterSpriteScale(monsterKey: string): number {
return combatMonsterSpriteScale(monsterKey);
}
protected monsterIcon(monsterKey: string, artworkPath: string): string {
return combatMonsterIconPath(monsterKey) ?? runtimeMonsterArtworkPath(artworkPath) ?? artworkPath;
}
protected playerHpPercent(): number {
const combat = this.combatStore.combat();
const combat = this.displayed();
return combat ? (combat.player.currentHp / combat.player.maxHp) * 100 : 0;
}
protected monsterHpPercent(): number {
const combat = this.combatStore.combat();
const combat = this.displayed();
return combat ? (combat.monster.currentHp / combat.monster.maxHp) * 100 : 0;
}
protected logRounds(): CombatLogRound[] {
const combat = this.combatStore.combat();
const combat = this.displayed();
if (!combat) {
return [];
}
@@ -80,7 +163,7 @@ export class CombatPageComponent implements OnInit {
}
protected formatEvent(event: CombatEvent): string {
const combat = this.combatStore.combat();
const combat = this.displayed();
const playerName = combat?.player.name ?? 'Du';
const monsterName = combat?.monster.name ?? 'Der Gegner';
@@ -97,10 +180,19 @@ export class CombatPageComponent implements OnInit {
return `${playerName} wurde im Kampf besiegt.`;
}
private loadFromRoute(): void {
private wait(ms: number): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, ms));
}
private async loadFromRoute(): Promise<void> {
const combatId = this.route.snapshot.paramMap.get('combatId');
if (combatId) {
void this.combatStore.loadCombat(combatId);
if (!combatId) {
return;
}
await this.combatStore.loadCombat(combatId);
if (!this.destroyed) {
this.displayed.set(this.combatStore.combat());
}
}
}