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
parent 4ffcac00d0
commit 969c0480ba
81 changed files with 2911 additions and 230 deletions
@@ -0,0 +1,252 @@
+// Phase 27 — Playwright coverage for the Battle Viewer.
+//
+// Mocks both the Connect-RPC `user.games.report` (so the report
+// renders battles + bombings) and the REST forwarder
+// `/api/v1/user/games/{game_id}/battles/{turn}/{battle_id}` (so the
+// viewer page loads its `BattleReport` without an engine).
+// Drives three flows:
+//   1. Reports view → click battle UUID → viewer renders.
+//   2. Playback controls: play / step back.
+//   3. Reports view → click bombing marker proxy → row scrolls
+//      (here approximated by clicking the link in Reports — the
+//      map e2e flow is exercised separately by `map-roundtrip`).
+
+import { fromJson, type JsonValue } from "@bufbuild/protobuf";
+import { ByteBuffer } from "flatbuffers";
+import { expect, test, type Page } from "@playwright/test";
+
+import { ExecuteCommandRequestSchema } from "../../src/proto/galaxy/gateway/v1/edge_gateway_pb";
+import { UUID } from "../../src/proto/galaxy/fbs/common";
+import { GameReportRequest } from "../../src/proto/galaxy/fbs/report";
+
+import {
+	buildOrderResponsePayload,
+	buildOrderGetResponsePayload,
+} from "./fixtures/order-fbs";
+import { buildMyGamesListPayload, type GameFixture } from "./fixtures/lobby-fbs";
+import { buildReportPayload } from "./fixtures/report-fbs";
+import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
+
+const GAME_ID = "00000000-0000-0000-0000-000000000010";
+const BATTLE_ID = "11111111-1111-1111-1111-111111111111";
+const SESSION_ID = "device-session-battle";
+const RACE_A = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa";
+const RACE_B = "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb";
+
+const SAMPLE_BATTLE = {
+	id: BATTLE_ID,
+	planet: 1,
+	planetName: "Earth",
+	races: { "0": RACE_A, "1": RACE_B },
+	ships: {
+		"10": {
+			race: "Earthlings",
+			className: "Cruiser",
+			tech: { WEAPONS: 1 },
+			num: 3,
+			numLeft: 2,
+			loadType: "EMP",
+			loadQuantity: 0,
+			inBattle: true,
+		},
+		"20": {
+			race: "Bajori",
+			className: "Hawk",
+			tech: { SHIELDS: 1 },
+			num: 2,
+			numLeft: 0,
+			loadType: "EMP",
+			loadQuantity: 0,
+			inBattle: true,
+		},
+	},
+	protocol: [
+		{ a: 0, sa: 10, d: 1, sd: 20, x: false },
+		{ a: 0, sa: 10, d: 1, sd: 20, x: true },
+		{ a: 1, sa: 20, d: 0, sd: 10, x: true },
+		{ a: 0, sa: 10, d: 1, sd: 20, x: true },
+	],
+};
+
+async function mockGatewayAndBattle(page: Page): Promise<void> {
+	const game: GameFixture = {
+		gameId: GAME_ID,
+		gameName: "Phase 27 Game",
+		gameType: "private",
+		status: "running",
+		ownerUserId: "user-1",
+		minPlayers: 2,
+		maxPlayers: 8,
+		enrollmentEndsAtMs: BigInt(Date.now() + 86_400_000),
+		createdAtMs: BigInt(Date.now() - 86_400_000),
+		updatedAtMs: BigInt(Date.now()),
+		currentTurn: 1,
+	};
+
+	await page.route(
+		"**/galaxy.gateway.v1.EdgeGateway/ExecuteCommand",
+		async (route) => {
+			const reqText = route.request().postData();
+			if (reqText === null) {
+				await route.fulfill({ status: 400 });
+				return;
+			}
+			const req = fromJson(
+				ExecuteCommandRequestSchema,
+				JSON.parse(reqText) as JsonValue,
+			);
+
+			let resultCode = "ok";
+			let payload: Uint8Array;
+			switch (req.messageType) {
+				case "lobby.my.games.list":
+					payload = buildMyGamesListPayload([game]);
+					break;
+				case "user.games.report": {
+					GameReportRequest.getRootAsGameReportRequest(
+						new ByteBuffer(req.payloadBytes),
+					).gameId(new UUID());
+					payload = buildReportPayload({
+						turn: 1,
+						mapWidth: 4000,
+						mapHeight: 4000,
+						race: "Earthlings",
+						localPlanets: [
+							{
+								number: 1,
+								name: "Earth",
+								x: 2000,
+								y: 2000,
+								size: 1000,
+								resources: 5,
+								population: 4000,
+								industry: 3000,
+								capital: 0,
+								material: 0,
+								colonists: 100,
+								freeIndustry: 800,
+								production: "Cruiser",
+							},
+						],
+						battles: [{ id: BATTLE_ID, planet: 1, shots: 4 }],
+					});
+					break;
+				}
+				case "user.games.order":
+					payload = buildOrderResponsePayload(GAME_ID, [], Date.now());
+					break;
+				case "user.games.order.get":
+					payload = buildOrderGetResponsePayload(GAME_ID, [], Date.now(), false);
+					break;
+				default:
+					resultCode = "internal_error";
+					payload = new Uint8Array();
+			}
+
+			const body = await forgeExecuteCommandResponseJson({
+				requestId: req.requestId,
+				timestampMs: BigInt(Date.now()),
+				resultCode,
+				payloadBytes: payload,
+			});
+			await route.fulfill({
+				status: 200,
+				headers: { "content-type": "application/json" },
+				body,
+			});
+		},
+	);
+
+	await page.route(
+		`**/api/v1/user/games/${GAME_ID}/battles/1/${BATTLE_ID}`,
+		async (route) => {
+			await route.fulfill({
+				status: 200,
+				contentType: "application/json",
+				body: JSON.stringify(SAMPLE_BATTLE),
+			});
+		},
+	);
+
+	await page.route(
+		`**/api/v1/user/games/${GAME_ID}/battles/1/missing-uuid`,
+		async (route) => {
+			await route.fulfill({ status: 404 });
+		},
+	);
+}
+
+async function bootSession(page: Page): Promise<void> {
+	await page.goto("/__debug/store");
+	await expect(page.getByTestId("debug-store-ready")).toBeVisible();
+	await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
+	await page.evaluate(() => window.__galaxyDebug!.clearSession());
+	await page.evaluate(
+		(id) => window.__galaxyDebug!.setDeviceSessionId(id),
+		SESSION_ID,
+	);
+}
+
+test.describe("Phase 27 battle viewer", () => {
+	test("Reports UUID link opens the battle viewer", async ({ page }, testInfo) => {
+		test.skip(
+			testInfo.project.name.startsWith("chromium-mobile"),
+			"desktop variant covers the link flow",
+		);
+
+		await mockGatewayAndBattle(page);
+		await bootSession(page);
+		await page.goto(`/games/${GAME_ID}/report`);
+
+		await expect(page.getByTestId("active-view-report")).toBeVisible();
+		const row = page.getByTestId("report-battle-row").first();
+		await expect(row).toBeVisible();
+		await row.click();
+
+		await expect(page).toHaveURL(
+			new RegExp(`/games/${GAME_ID}/battle/${BATTLE_ID}\\?turn=1`),
+		);
+		await expect(page.getByTestId("battle-viewer")).toBeVisible();
+		await expect(page.getByTestId("battle-scene")).toBeVisible();
+		await expect(page.getByTestId("battle-frame-index")).toContainText("0 / 4");
+	});
+
+	test("playback play + step back updates the frame counter", async ({
+		page,
+	}, testInfo) => {
+		test.skip(
+			testInfo.project.name.startsWith("chromium-mobile"),
+			"desktop variant covers playback controls",
+		);
+
+		await mockGatewayAndBattle(page);
+		await bootSession(page);
+		await page.goto(`/games/${GAME_ID}/battle/${BATTLE_ID}?turn=1`);
+
+		await expect(page.getByTestId("battle-viewer")).toBeVisible();
+		await expect(page.getByTestId("battle-frame-index")).toContainText("0 / 4");
+
+		// Step forward once → 1 / 4.
+		await page.getByTestId("battle-control-step-forward").click();
+		await expect(page.getByTestId("battle-frame-index")).toContainText("1 / 4");
+
+		// Step back to 0 / 4.
+		await page.getByTestId("battle-control-step-back").click();
+		await expect(page.getByTestId("battle-frame-index")).toContainText("0 / 4");
+	});
+
+	test("missing battle id surfaces the not-found state", async ({
+		page,
+	}, testInfo) => {
+		test.skip(
+			testInfo.project.name.startsWith("chromium-mobile"),
+			"desktop variant covers the negative path",
+		);
+
+		await mockGatewayAndBattle(page);
+		await bootSession(page);
+		await page.goto(`/games/${GAME_ID}/battle/missing-uuid?turn=1`);
+
+		await expect(page.getByTestId("battle-not-found")).toBeVisible();
+	});
+});