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,223 @@
|
||||
<!--
|
||||
BattleScene — radial SVG visualisation of one battle frame.
|
||||
|
||||
Layout: planet at the centre, race anchors equally spaced on an
|
||||
outer ring, each race rendered as a cluster of small class circles
|
||||
labelled `<className>:<numLeft>` underneath. The shot line for the
|
||||
current frame's `lastAction` is drawn from attacker group to
|
||||
defender group; red when the shot destroyed the defender, green
|
||||
otherwise. Observer groups (`inBattle === false`) are filtered out
|
||||
by `buildFrames`, so they never appear here.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { BattleReport } from "../../api/battle-fetch";
|
||||
import { layoutRaces } from "./radial-layout";
|
||||
import {
|
||||
buildGroupRaceMap,
|
||||
normaliseGroups,
|
||||
type Frame,
|
||||
} from "./timeline";
|
||||
|
||||
let {
|
||||
report,
|
||||
frame,
|
||||
}: {
|
||||
report: BattleReport;
|
||||
frame: Frame;
|
||||
} = $props();
|
||||
|
||||
const VIEW_BOX = 800;
|
||||
const CENTER = { x: VIEW_BOX / 2, y: VIEW_BOX / 2 };
|
||||
const PLANET_RADIUS = 60;
|
||||
const RACE_RING_RADIUS = 280;
|
||||
const CLASS_CIRCLE_RADIUS = 24;
|
||||
const CLASS_SPACING = 64;
|
||||
|
||||
const groupRace = $derived(buildGroupRaceMap(report.protocol));
|
||||
const allGroups = $derived(normaliseGroups(report));
|
||||
|
||||
type ClusterEntry = {
|
||||
key: number;
|
||||
className: string;
|
||||
numLeft: number;
|
||||
};
|
||||
|
||||
const clustersByRace = $derived.by(() => {
|
||||
const out = new Map<number, ClusterEntry[]>();
|
||||
for (const g of allGroups) {
|
||||
const numLeft = frame.remaining.get(g.key) ?? 0;
|
||||
const list = out.get(g.raceId) ?? [];
|
||||
list.push({
|
||||
key: g.key,
|
||||
className: g.group.className,
|
||||
numLeft,
|
||||
});
|
||||
out.set(g.raceId, list);
|
||||
}
|
||||
// Stable cluster order: by classname then key.
|
||||
for (const list of out.values()) {
|
||||
list.sort((a, b) => {
|
||||
const byName = a.className.localeCompare(b.className);
|
||||
if (byName !== 0) return byName;
|
||||
return a.key - b.key;
|
||||
});
|
||||
}
|
||||
return out;
|
||||
});
|
||||
|
||||
const raceLayout = $derived(
|
||||
layoutRaces(frame.activeRaceIds, {
|
||||
center: CENTER,
|
||||
radius: RACE_RING_RADIUS,
|
||||
}),
|
||||
);
|
||||
|
||||
function classCircleX(index: number, count: number): number {
|
||||
const span = (count - 1) * CLASS_SPACING;
|
||||
return -span / 2 + index * CLASS_SPACING;
|
||||
}
|
||||
|
||||
function findClassCircleCenter(groupKey: number) {
|
||||
const raceId = groupRace.get(groupKey);
|
||||
if (raceId === undefined) return null;
|
||||
const anchor = raceLayout.find((a) => a.raceId === raceId);
|
||||
if (!anchor) return null;
|
||||
const cluster = clustersByRace.get(raceId) ?? [];
|
||||
const idx = cluster.findIndex((c) => c.key === groupKey);
|
||||
if (idx === -1) return null;
|
||||
return {
|
||||
x: anchor.x + classCircleX(idx, cluster.length),
|
||||
y: anchor.y,
|
||||
};
|
||||
}
|
||||
|
||||
const shotLine = $derived.by(() => {
|
||||
const action = frame.lastAction;
|
||||
if (!action) return null;
|
||||
const from = findClassCircleCenter(action.sa);
|
||||
const to = findClassCircleCenter(action.sd);
|
||||
if (!from || !to) return null;
|
||||
return { from, to, destroyed: action.x };
|
||||
});
|
||||
|
||||
const raceLabelById = $derived.by(() => {
|
||||
const out = new Map<number, string>();
|
||||
for (const g of allGroups) {
|
||||
out.set(g.raceId, g.group.race);
|
||||
}
|
||||
return out;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="battle-scene"
|
||||
viewBox="0 0 {VIEW_BOX} {VIEW_BOX}"
|
||||
role="img"
|
||||
aria-label="battle scene"
|
||||
data-testid="battle-scene"
|
||||
>
|
||||
<circle
|
||||
cx={CENTER.x}
|
||||
cy={CENTER.y}
|
||||
r={PLANET_RADIUS}
|
||||
class="planet"
|
||||
data-testid="battle-scene-planet"
|
||||
/>
|
||||
<text
|
||||
x={CENTER.x}
|
||||
y={CENTER.y + PLANET_RADIUS + 24}
|
||||
text-anchor="middle"
|
||||
class="planet-label"
|
||||
>{report.planetName} (#{report.planet})</text>
|
||||
|
||||
{#each raceLayout as anchor (anchor.raceId)}
|
||||
{@const cluster = clustersByRace.get(anchor.raceId) ?? []}
|
||||
<g
|
||||
class="race-cluster"
|
||||
data-testid="battle-race-cluster"
|
||||
data-race-id={anchor.raceId}
|
||||
>
|
||||
<text
|
||||
x={anchor.x}
|
||||
y={anchor.y - CLASS_CIRCLE_RADIUS - 12}
|
||||
text-anchor="middle"
|
||||
class="race-label"
|
||||
>{raceLabelById.get(anchor.raceId) ?? `race ${anchor.raceId}`}</text>
|
||||
{#each cluster as entry, i (entry.key)}
|
||||
{@const cx = anchor.x + classCircleX(i, cluster.length)}
|
||||
<g
|
||||
class="class-marker"
|
||||
data-testid="battle-class-marker"
|
||||
data-group-key={entry.key}
|
||||
>
|
||||
<circle
|
||||
cx={cx}
|
||||
cy={anchor.y}
|
||||
r={CLASS_CIRCLE_RADIUS}
|
||||
/>
|
||||
<text
|
||||
x={cx}
|
||||
y={anchor.y + CLASS_CIRCLE_RADIUS + 16}
|
||||
text-anchor="middle"
|
||||
class="class-label"
|
||||
>{entry.className}:{entry.numLeft}</text>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
{/each}
|
||||
|
||||
{#if shotLine}
|
||||
<line
|
||||
x1={shotLine.from.x}
|
||||
y1={shotLine.from.y}
|
||||
x2={shotLine.to.x}
|
||||
y2={shotLine.to.y}
|
||||
class="shot"
|
||||
class:destroyed={shotLine.destroyed}
|
||||
data-testid="battle-shot"
|
||||
data-destroyed={shotLine.destroyed ? "true" : "false"}
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.battle-scene {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #0a0d1a;
|
||||
display: block;
|
||||
}
|
||||
.planet {
|
||||
fill: #2a345f;
|
||||
stroke: #5b6aa3;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.planet-label {
|
||||
fill: #c4caea;
|
||||
font-size: 18px;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.race-label {
|
||||
fill: #e2e6ff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.class-marker circle {
|
||||
fill: #1a2042;
|
||||
stroke: #6d7bb5;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
.class-label {
|
||||
fill: #b8c0e6;
|
||||
font-size: 12px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
.shot {
|
||||
stroke: #44dd66;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.shot.destroyed {
|
||||
stroke: #ee3344;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user