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,146 @@
|
||||
// Unit tests for the BattleViewer's pure helpers: radial layout and
|
||||
// the timeline frame builder. Both are pure functions and don't
|
||||
// require DOM mounting, so they exercise the playback semantics in
|
||||
// isolation.
|
||||
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import type { BattleReport } from "../src/api/battle-fetch";
|
||||
import { layoutRaces } from "../src/lib/battle-player/radial-layout";
|
||||
import {
|
||||
buildFrames,
|
||||
buildGroupRaceMap,
|
||||
normaliseGroups,
|
||||
} from "../src/lib/battle-player/timeline";
|
||||
|
||||
describe("layoutRaces", () => {
|
||||
const center = { x: 100, y: 100 };
|
||||
const radius = 50;
|
||||
|
||||
it("returns no anchors for an empty input", () => {
|
||||
expect(layoutRaces([], { center, radius })).toEqual([]);
|
||||
});
|
||||
|
||||
it("places one race at the 12 o'clock position", () => {
|
||||
const result = layoutRaces([0], { center, radius });
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].raceId).toBe(0);
|
||||
expect(result[0].x).toBeCloseTo(center.x, 5);
|
||||
expect(result[0].y).toBeCloseTo(center.y - radius, 5);
|
||||
});
|
||||
|
||||
it("places two races at opposite poles (180° apart)", () => {
|
||||
const result = layoutRaces([0, 1], { center, radius });
|
||||
expect(result).toHaveLength(2);
|
||||
expect(result[0].x).toBeCloseTo(center.x, 5);
|
||||
expect(result[0].y).toBeCloseTo(center.y - radius, 5);
|
||||
expect(result[1].x).toBeCloseTo(center.x, 5);
|
||||
expect(result[1].y).toBeCloseTo(center.y + radius, 5);
|
||||
});
|
||||
|
||||
it("places three races at 120° intervals", () => {
|
||||
const result = layoutRaces([0, 1, 2], { center, radius });
|
||||
expect(result).toHaveLength(3);
|
||||
expect(result[0].angle).toBeCloseTo(-Math.PI / 2, 5);
|
||||
expect(result[1].angle - result[0].angle).toBeCloseTo((2 * Math.PI) / 3, 5);
|
||||
expect(result[2].angle - result[1].angle).toBeCloseTo((2 * Math.PI) / 3, 5);
|
||||
});
|
||||
|
||||
it("preserves the input race order", () => {
|
||||
const result = layoutRaces([7, 2, 5], { center, radius });
|
||||
expect(result.map((a) => a.raceId)).toEqual([7, 2, 5]);
|
||||
});
|
||||
});
|
||||
|
||||
const TWO_RACE_BATTLE: BattleReport = {
|
||||
id: "battle-1",
|
||||
planet: 4,
|
||||
planetName: "Test",
|
||||
races: { "0": "race-A-uuid", "1": "race-B-uuid" },
|
||||
ships: {
|
||||
"10": {
|
||||
race: "Alpha",
|
||||
className: "Drone",
|
||||
tech: {},
|
||||
num: 3,
|
||||
numLeft: 1,
|
||||
loadType: "EMP",
|
||||
loadQuantity: 0,
|
||||
inBattle: true,
|
||||
},
|
||||
"20": {
|
||||
race: "Beta",
|
||||
className: "Spy",
|
||||
tech: {},
|
||||
num: 2,
|
||||
numLeft: 0,
|
||||
loadType: "EMP",
|
||||
loadQuantity: 0,
|
||||
inBattle: true,
|
||||
},
|
||||
"99": {
|
||||
race: "Gamma",
|
||||
className: "Observer",
|
||||
tech: {},
|
||||
num: 4,
|
||||
numLeft: 4,
|
||||
loadType: "EMP",
|
||||
loadQuantity: 0,
|
||||
inBattle: false,
|
||||
},
|
||||
},
|
||||
protocol: [
|
||||
{ a: 0, sa: 10, d: 1, sd: 20, x: false },
|
||||
{ a: 1, sa: 20, d: 0, sd: 10, x: true },
|
||||
{ a: 0, sa: 10, d: 1, sd: 20, x: true },
|
||||
{ a: 0, sa: 10, d: 1, sd: 20, x: true },
|
||||
],
|
||||
};
|
||||
|
||||
describe("buildGroupRaceMap", () => {
|
||||
it("derives group → race from protocol entries", () => {
|
||||
const map = buildGroupRaceMap(TWO_RACE_BATTLE.protocol);
|
||||
expect(map.get(10)).toBe(0);
|
||||
expect(map.get(20)).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("normaliseGroups", () => {
|
||||
it("returns only in-battle groups with race index attached", () => {
|
||||
const groups = normaliseGroups(TWO_RACE_BATTLE);
|
||||
expect(groups.map((g) => g.key).sort((a, b) => a - b)).toEqual([10, 20]);
|
||||
expect(groups.every((g) => g.group.inBattle)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buildFrames", () => {
|
||||
it("produces protocol.length + 1 frames", () => {
|
||||
const frames = buildFrames(TWO_RACE_BATTLE);
|
||||
expect(frames).toHaveLength(TWO_RACE_BATTLE.protocol.length + 1);
|
||||
});
|
||||
|
||||
it("frame 0 reports initial ship counts and all active races", () => {
|
||||
const [first] = buildFrames(TWO_RACE_BATTLE);
|
||||
expect(first.shotIndex).toBe(0);
|
||||
expect(first.lastAction).toBeNull();
|
||||
expect(first.remaining.get(10)).toBe(3);
|
||||
expect(first.remaining.get(20)).toBe(2);
|
||||
expect(first.activeRaceIds).toEqual([0, 1]);
|
||||
});
|
||||
|
||||
it("decrements destroyed defenders only on x === true", () => {
|
||||
const frames = buildFrames(TWO_RACE_BATTLE);
|
||||
// Action 1: x=false → no decrement on defender 20.
|
||||
expect(frames[1].remaining.get(20)).toBe(2);
|
||||
// Action 2: x=true → attacker is race 1 group 20, defender
|
||||
// is race 0 group 10 → group 10 drops 3→2.
|
||||
expect(frames[2].remaining.get(10)).toBe(2);
|
||||
});
|
||||
|
||||
it("drops a race from activeRaceIds once its last in-battle group reaches zero", () => {
|
||||
const frames = buildFrames(TWO_RACE_BATTLE);
|
||||
// After the 4-th action both Beta ships have been destroyed.
|
||||
expect(frames[4].remaining.get(20)).toBe(0);
|
||||
expect(frames[4].activeRaceIds).toEqual([0]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user