galaxy-game/ui/frontend/tests/e2e/game-shell-inspector.spec.ts

// Phase 13 end-to-end coverage for the planet inspector. Boots an
// authenticated session and a mocked gateway with a single local
// planet placed at the world centre, navigates to the map view, and
// drives a real canvas click into the renderer's `clicked` event.
// On desktop the sidebar inspector tab swaps from the empty state to
// the planet view; on the mobile project the bottom-sheet appears
// and the close button clears it.

import { fromJson, type JsonValue } from "@bufbuild/protobuf";
import { expect, test, type Page } from "@playwright/test";
import { ByteBuffer } from "flatbuffers";

import { ExecuteCommandRequestSchema } from "../../src/proto/edge/v1/edge_gateway_pb";
import { UUID } from "../../src/proto/galaxy/fbs/common";
import { GameReportRequest } from "../../src/proto/galaxy/fbs/report";
import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
import {
	buildMyGamesListPayload,
	type GameFixture,
} from "./fixtures/lobby-fbs";
import { buildReportPayload } from "./fixtures/report-fbs";

const SESSION_ID = "phase-13-inspector-session";
const GAME_ID = "13131313-1313-1313-1313-131313131313";
const WORLD = 4000;
const CENTRE = WORLD / 2;

interface MockOpts {
	currentTurn: number;
	report: Parameters<typeof buildReportPayload>[0];
}

async function mockGateway(page: Page, opts: MockOpts): Promise<void> {
	const game: GameFixture = {
		gameId: GAME_ID,
		gameName: "Phase 13 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: opts.currentTurn,
	};

	await page.route(
		"**/edge.v1.Gateway/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": {
					// Drain the request to keep the decoder happy even though
					// we ignore the turn — the fixture serves a single snapshot.
					GameReportRequest.getRootAsGameReportRequest(
						new ByteBuffer(req.payloadBytes),
					).gameId(new UUID());
					payload = buildReportPayload(opts.report);
					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,
				contentType: "application/json",
				body,
			});
		},
	);

	await page.route(
		"**/edge.v1.Gateway/SubscribeEvents",
		async () => {
			await new Promise<void>(() => {});
		},
	);
}

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,
	);
}

async function setupShell(page: Page): Promise<void> {
	await mockGateway(page, {
		currentTurn: 4,
		report: {
			turn: 4,
			mapWidth: WORLD,
			mapHeight: WORLD,
			localPlanets: [
				{
					number: 17,
					name: "Galactica",
					x: CENTRE,
					y: CENTRE,
					size: 1000,
					resources: 10,
					capital: 0,
					material: 0,
					population: 850,
					colonists: 25,
					industry: 700,
					production: "drive",
					freeIndustry: 175,
				},
			],
		},
	});
	await bootSession(page);
	await page.goto("/");
	await page.waitForFunction(() => window.__galaxyNav !== undefined);
	await page.evaluate(
		(id) => window.__galaxyNav!.enterGame(id, "map", {}),
		GAME_ID,
	);
	await expect(page.getByTestId("active-view-map")).toHaveAttribute(
		"data-status",
		"ready",
	);
	await expect(page.getByTestId("map-canvas-wrap")).toHaveAttribute(
		"data-planet-count",
		"1",
	);
}

async function clickCanvasCentre(page: Page): Promise<void> {
	const canvas = page.locator("canvas");
	const box = await canvas.boundingBox();
	expect(box).not.toBeNull();
	if (box === null) throw new Error("canvas has no bounding box");
	const cx = box.x + box.width / 2;
	const cy = box.y + box.height / 2;
	await page.mouse.click(cx, cy);
}

test("clicking a planet on the map shows it in the desktop inspector tab", async ({
	page,
}, testInfo) => {
	test.skip(
		testInfo.project.name.startsWith("chromium-mobile"),
		"sidebar is hidden on mobile breakpoint",
	);
	await setupShell(page);

	// Empty state before any selection.
	const sidebar = page.getByTestId("sidebar-tool-inspector");
	await expect(sidebar).toContainText("select an object on the map");

	await clickCanvasCentre(page);

	// Both the sidebar inspector and the bottom-sheet receive the
	// same selection — the sheet is hidden by CSS at the desktop
	// breakpoint but still mounted in the DOM, so the assertions
	// scope explicitly to the sidebar to avoid the strict-mode
	// duplicate-locator trap.
	const inspector = sidebar.getByTestId("inspector-planet");
	await expect(inspector).toBeVisible();
	await expect(inspector).toHaveAttribute("data-planet-id", "17");
	await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText(
		"Galactica",
	);
	await expect(
		sidebar.getByTestId("inspector-planet-field-population"),
	).toContainText("850");
	await expect(
		sidebar.getByTestId("inspector-planet-field-industry"),
	).toContainText("700");
	// Phase 15: owned planets render the interactive production component
	// in place of the static "current production" row; the read-only
	// row is now scoped to non-local planets.
	await expect(
		sidebar.getByTestId("inspector-planet-production"),
	).toBeVisible();
	await expect(
		sidebar.getByTestId("inspector-planet-field-production"),
	).toHaveCount(0);
});

test("clicking a planet on mobile raises the bottom-sheet, close clears it", async ({
	page,
}, testInfo) => {
	test.skip(
		!testInfo.project.name.startsWith("chromium-mobile"),
		"sheet is mobile-only",
	);
	await setupShell(page);

	// No sheet before the click.
	await expect(page.getByTestId("inspector-planet-sheet")).toHaveCount(0);

	await clickCanvasCentre(page);

	const sheet = page.getByTestId("inspector-planet-sheet");
	await expect(sheet).toBeVisible();
	const inspector = sheet.getByTestId("inspector-planet");
	await expect(inspector).toHaveAttribute("data-planet-id", "17");
	await expect(sheet.getByTestId("inspector-planet-name")).toHaveText(
		"Galactica",
	);

	await page.getByTestId("inspector-planet-sheet-close").click();
	await expect(page.getByTestId("inspector-planet-sheet")).toHaveCount(0);
});

// Counts reach-circle primitives off the renderer debug surface. Reach
// circles use ids in [REACH_CIRCLE_ID_PREFIX, bombing-marker prefix) —
// 0xb0000000..0xc0000000 (see `map/reach-circles.ts`).
async function countReachCircles(page: Page): Promise<number> {
	return page.evaluate(() => {
		const surface = (
			window as unknown as {
				__galaxyDebug?: {
					getMapPrimitives?: () => readonly { id: number; kind: string }[];
				};
			}
		).__galaxyDebug;
		const prims = surface?.getMapPrimitives?.() ?? [];
		return prims.filter(
			(p) => p.kind === "circle" && p.id >= 0xb0000000 && p.id < 0xc0000000,
		).length;
	});
}

test("calculator draws reach circles for the selected planet", async ({
	page,
}, testInfo) => {
	test.skip(
		testInfo.project.name.startsWith("chromium-mobile"),
		"calculator + reach circles are a desktop-sidebar flow",
	);
	await setupShell(page);

	// No reach circles before a planet is selected and a design exists.
	expect(await countReachCircles(page)).toBe(0);

	// Select the planet, then switch the sidebar to the calculator.
	await clickCanvasCentre(page);
	await page.getByTestId("sidebar-tab-calculator").click();
	const calc = page.getByTestId("sidebar-tool-calculator");
	await expect(calc).toBeVisible();

	// A valid design with a positive drive tech override yields a
	// positive loaded speed, which the calculator publishes to the map.
	await calc.getByTestId("calculator-block-drive").fill("10");
	await calc.getByTestId("calculator-block-shields").fill("5");
	await calc.getByTestId("calculator-block-cargo").fill("5");
	await calc.getByTestId("calculator-tech-drive").fill("1.2");

	await expect.poll(() => countReachCircles(page)).toBeGreaterThan(0);

	// Leaving ship mode clears the published reach, so the rings drop.
	await calc.getByTestId("calculator-mode-modernization").click();
	await expect.poll(() => countReachCircles(page)).toBe(0);
});

test("calculator stays put on a planet click and keeps state across tab switches", async ({
	page,
}, testInfo) => {
	test.skip(
		testInfo.project.name.startsWith("chromium-mobile"),
		"calculator is a desktop-sidebar flow",
	);
	await setupShell(page);

	// Open the calculator and enter a design.
	await page.getByTestId("sidebar-tab-calculator").click();
	await page.getByTestId("calculator-block-drive").fill("10");

	// Clicking a planet must NOT eject us to the inspector; it feeds the
	// calculator's planet area instead, and the design is untouched.
	await clickCanvasCentre(page);
	await expect(page.getByTestId("sidebar")).toHaveAttribute(
		"data-active-tab",
		"calculator",
	);
	await expect(page.getByTestId("calculator-planet-name")).toContainText(
		"Galactica",
	);
	await expect(page.getByTestId("calculator-block-drive")).toHaveValue("10");

	// Switching to the inspector and back keeps the design (long-lived
	// tool state survives the tab unmount/remount).
	await page.getByTestId("sidebar-tab-inspector").click();
	await expect(page.getByTestId("sidebar")).toHaveAttribute(
		"data-active-tab",
		"inspector",
	);
	await page.getByTestId("sidebar-tab-calculator").click();
	await expect(page.getByTestId("calculator-block-drive")).toHaveValue("10");
});