ui/phase-27: battle viewer (radial scene, playback, map markers)
Engine wire change: Report.battle switched from []uuid.UUID to
[]BattleSummary{id, planet, shots} so the map can place battle
markers without N extra fetches. FBS schema + generated Go/TS
regenerated; transcoder + report controller updated; openapi
adds the BattleSummary schema with a freeze test.
Backend gateway forwards engine GET /api/v1/battle/:turn/:uuid as
/api/v1/user/games/{game_id}/battles/{turn}/{battle_id} (handler
plus engineclient.FetchBattle, contract test stub, openapi spec).
UI:
- BattleViewer (lib/battle-player/) is a logically isolated SVG
radial scene that consumes a BattleReport prop. Planet at the
centre, races on the outer ring at equal angular spacing, race
clusters by (race, className) with <class>:<numLeft> labels;
observer groups (inBattle: false) are not drawn; eliminated
races drop out and survivors re-distribute on the next frame.
- Shot line per frame: red on destroyed, green otherwise; erased
on the next frame. Playback controls: play/pause + step ± +
rewind + 1x/2x/4x speed (400/200/100 ms per frame).
- Page wrapper (lib/active-view/battle.svelte) loads BattleReport
via api/battle-fetch.ts; synthetic-gameId prefix routes to a
fixture loader, otherwise REST through the gateway. Always-
visible <ol> text protocol satisfies the accessibility ask.
- section-battles.svelte links every battle UUID into the viewer.
- map/battle-markers.ts: yellow X cross of 2 LinePrim through the
corners of the planet's circumscribed square (stroke width
clamps from 1 px at 1 shot to 5 px at 100+ shots); bombing
marker is a stroke-only ring (yellow when damaged, red when
wiped). Wired into state-binding.ts; click handler dispatches
battle clicks to the viewer and bombing clicks to the matching
Reports row.
- i18n keys for the viewer in en + ru.
Docs: ui/docs/battle-viewer-ux.md, FUNCTIONAL.md §6.5 + ru
mirror, ui/PLAN.md Phase 27 decisions + deferred TODOs (push
event, richer class visuals, animated re-distribution).
Tests: Vitest unit (radial layout + timeline frame builder +
marker stroke formula + marker primitives), Playwright e2e for
the viewer (Reports link → viewer, playback step, not-found),
backend engineclient FetchBattle (200 / 404 / bad input), engine
openapi freezes (BattleReport, BattleReportGroup,
BattleActionReport, BattleSummary, Report.battle items).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,145 @@
|
||||
<!--
|
||||
PlaybackControls — rewind / step-back / play-pause / step-forward
|
||||
plus a 1x/2x/4x speed switch. Owns no playback state; bind `playing`,
|
||||
`frameIndex`, and `speed` from the orchestrator. Disables step/rewind
|
||||
when there's nowhere to go and disables forward when the timeline is
|
||||
already at its end.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
|
||||
let {
|
||||
playing = $bindable(),
|
||||
frameIndex = $bindable(),
|
||||
speed = $bindable(),
|
||||
frameCount,
|
||||
}: {
|
||||
playing: boolean;
|
||||
frameIndex: number;
|
||||
speed: 1 | 2 | 4;
|
||||
frameCount: number;
|
||||
} = $props();
|
||||
|
||||
function rewind() {
|
||||
playing = false;
|
||||
frameIndex = 0;
|
||||
}
|
||||
function stepBack() {
|
||||
playing = false;
|
||||
if (frameIndex > 0) frameIndex = frameIndex - 1;
|
||||
}
|
||||
function togglePlay() {
|
||||
if (frameIndex >= frameCount - 1) {
|
||||
frameIndex = 0;
|
||||
}
|
||||
playing = !playing;
|
||||
}
|
||||
function stepForward() {
|
||||
playing = false;
|
||||
if (frameIndex < frameCount - 1) frameIndex = frameIndex + 1;
|
||||
}
|
||||
function setSpeed(value: 1 | 2 | 4) {
|
||||
speed = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="controls" data-testid="battle-controls">
|
||||
<button
|
||||
type="button"
|
||||
onclick={rewind}
|
||||
disabled={frameIndex === 0}
|
||||
aria-label={i18n.t("game.battle.controls.rewind")}
|
||||
data-testid="battle-control-rewind"
|
||||
>⏮</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={stepBack}
|
||||
disabled={frameIndex === 0}
|
||||
aria-label={i18n.t("game.battle.controls.step_backward")}
|
||||
data-testid="battle-control-step-back"
|
||||
>◀︎</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={togglePlay}
|
||||
aria-label={playing
|
||||
? i18n.t("game.battle.controls.pause")
|
||||
: i18n.t("game.battle.controls.play")}
|
||||
data-testid="battle-control-play"
|
||||
data-playing={playing ? "true" : "false"}
|
||||
>{playing ? "⏸" : "▶︎"}</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={stepForward}
|
||||
disabled={frameIndex >= frameCount - 1}
|
||||
aria-label={i18n.t("game.battle.controls.step_forward")}
|
||||
data-testid="battle-control-step-forward"
|
||||
>▶︎▶︎</button>
|
||||
|
||||
<div class="spacer" aria-hidden="true"></div>
|
||||
|
||||
<span class="speed-label">{i18n.t("game.battle.controls.speed_label")}</span>
|
||||
<button
|
||||
type="button"
|
||||
class:active={speed === 1}
|
||||
onclick={() => setSpeed(1)}
|
||||
data-testid="battle-control-speed-1x"
|
||||
>{i18n.t("game.battle.controls.speed_1x")}</button>
|
||||
<button
|
||||
type="button"
|
||||
class:active={speed === 2}
|
||||
onclick={() => setSpeed(2)}
|
||||
data-testid="battle-control-speed-2x"
|
||||
>{i18n.t("game.battle.controls.speed_2x")}</button>
|
||||
<button
|
||||
type="button"
|
||||
class:active={speed === 4}
|
||||
onclick={() => setSpeed(4)}
|
||||
data-testid="battle-control-speed-4x"
|
||||
>{i18n.t("game.battle.controls.speed_4x")}</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #131934;
|
||||
border: 1px solid #1e264a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
button {
|
||||
appearance: none;
|
||||
background: #1f2748;
|
||||
color: #d6dcf2;
|
||||
border: 1px solid #2c3568;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
button:hover:not(:disabled) {
|
||||
background: #2a3463;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button.active {
|
||||
background: #3a4585;
|
||||
border-color: #5d6cb8;
|
||||
color: #ffffff;
|
||||
}
|
||||
.speed-label {
|
||||
color: #93a0d0;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user