Files
galaxy-game/ui/frontend/tests/battle-markers.test.ts
T
Ilia Denisov 969c0480ba 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>
2026-05-13 12:24:20 +02:00

191 lines
4.6 KiB
TypeScript

// Phase 27 unit tests for battle and bombing map markers.
import { describe, expect, it } from "vitest";
import type { GameReport } from "../src/api/game-state";
import {
battleMarkerStrokeWidth,
BATTLE_MARKER_COLOR,
BOMBING_MARKER_COLOR_DAMAGED,
BOMBING_MARKER_COLOR_WIPED,
buildBattleAndBombingMarkers,
} from "../src/map/battle-markers";
import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
describe("battleMarkerStrokeWidth", () => {
it("clamps to 1 px at one shot", () => {
expect(battleMarkerStrokeWidth(1)).toBe(1);
});
it("clamps to 5 px at 100 shots", () => {
expect(battleMarkerStrokeWidth(100)).toBe(5);
});
it("caps above 100 shots at 5 px", () => {
expect(battleMarkerStrokeWidth(250)).toBe(5);
});
it("interpolates linearly between 1 and 100 shots", () => {
// ~halfway: 50 shots → 1 + 49 * 4 / 99 ≈ 2.98
expect(battleMarkerStrokeWidth(50)).toBeCloseTo(2.98, 2);
});
});
function makeReport(overrides: Partial<GameReport>): GameReport {
return {
turn: 1,
mapWidth: 200,
mapHeight: 200,
planetCount: 0,
race: "Earthlings",
planets: [],
localShipClass: [],
routes: [],
localPlayerDrive: 0,
localPlayerWeapons: 0,
localPlayerShields: 0,
localPlayerCargo: 0,
...EMPTY_SHIP_GROUPS,
...overrides,
};
}
describe("buildBattleAndBombingMarkers", () => {
it("returns no primitives when both battles and bombings are empty", () => {
const report = makeReport({});
const out = buildBattleAndBombingMarkers(report);
expect(out.primitives).toEqual([]);
expect(out.lookup.size).toBe(0);
});
it("emits two yellow lines through opposite corners of the planet square per battle", () => {
const report = makeReport({
planets: [
{
number: 4,
name: "Test",
kind: "local",
x: 10,
y: 20,
size: 50,
resources: 0,
industryStockpile: 0,
materialsStockpile: 0,
population: 0,
colonists: 0,
industry: 0,
freeIndustry: 0,
production: "MAT",
owner: null,
},
],
battles: [
{ id: "11111111-1111-1111-1111-111111111111", planet: 4, shots: 100 },
],
});
const out = buildBattleAndBombingMarkers(report);
const lines = out.primitives.filter((p) => p.kind === "line");
expect(lines).toHaveLength(2);
// Same yellow colour, 5 px wide for a 100-shot battle.
for (const l of lines) {
expect(l.style.strokeColor).toBe(BATTLE_MARKER_COLOR);
expect(l.style.strokeWidthPx).toBe(5);
}
// First line: top-left → bottom-right corner of the planet square.
const [a, b] = lines as Array<typeof lines[number] & { x1: number; y1: number; x2: number; y2: number }>;
expect(a.x1).toBeLessThan(a.x2);
expect(a.y1).toBeLessThan(a.y2);
// Second line: top-right → bottom-left.
expect(b.x1).toBeLessThan(b.x2);
expect(b.y1).toBeGreaterThan(b.y2);
});
it("skips battles whose planet is not in the planet list", () => {
const report = makeReport({
battles: [
{ id: "11111111-1111-1111-1111-111111111111", planet: 99, shots: 4 },
],
});
const out = buildBattleAndBombingMarkers(report);
expect(out.primitives).toHaveLength(0);
});
it("emits one yellow ring per damaged bombing and red per wiped", () => {
const report = makeReport({
planets: [
{
number: 1,
name: "A",
kind: "local",
x: 1,
y: 2,
size: 50,
resources: 0,
industryStockpile: 0,
materialsStockpile: 0,
population: 0,
colonists: 0,
industry: 0,
freeIndustry: 0,
production: "MAT",
owner: null,
},
{
number: 2,
name: "B",
kind: "local",
x: 5,
y: 6,
size: 50,
resources: 0,
industryStockpile: 0,
materialsStockpile: 0,
population: 0,
colonists: 0,
industry: 0,
freeIndustry: 0,
production: "MAT",
owner: null,
},
],
bombings: [
{
planetNumber: 1,
planet: "A",
owner: "X",
attacker: "Y",
production: "MAT",
industry: 0,
population: 0,
colonists: 0,
industryStockpile: 0,
materialsStockpile: 0,
attackPower: 1,
wiped: false,
},
{
planetNumber: 2,
planet: "B",
owner: "X",
attacker: "Y",
production: "MAT",
industry: 0,
population: 0,
colonists: 0,
industryStockpile: 0,
materialsStockpile: 0,
attackPower: 1,
wiped: true,
},
],
});
const out = buildBattleAndBombingMarkers(report);
const rings = out.primitives.filter((p) => p.kind === "circle");
expect(rings).toHaveLength(2);
expect(rings[0].style.strokeColor).toBe(BOMBING_MARKER_COLOR_DAMAGED);
expect(rings[1].style.strokeColor).toBe(BOMBING_MARKER_COLOR_WIPED);
});
});