developer/galaxy-game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ui/phase-19: read-only ship-group inspector + sheet + tab dispatch

Browse Source 
Closes Phase 19's UI surface. The inspector dispatches on the
selection variant: local / other groups render class, count, the
four tech levels, mass, cargo (type + amount when loaded),
location (planet name on-orbit, from/to/distance in hyperspace),
and — for local groups only — fleet membership + state. Incoming
groups surface origin / destination / distance / speed and the
inline ETA = ceil(distance / speed); zero speed collapses to the
designer's existing "—" placeholder. Unidentified groups render
just the (x, y) coordinates and the no-data hint, mirroring the
unidentified planet treatment.

Layout / inspector-tab plumbing:
  - inspector-tab.svelte derives selectedShipGroup against the
    rendered report and mounts <ShipGroup /> when the planet
    branch doesn't match. Stale refs (an index that no longer
    resolves after a turn refresh) collapse cleanly to the empty
    state.
  - +layout.svelte mounts <ShipGroupSheet /> alongside the
    existing planet sheet on mobile; both share the
    `effectiveTool === "map"` guard and clear-on-close.

i18n: en + ru both grow ~30 keys under
`game.inspector.ship_group.*`. Adding a key to one without the
other is a TS error (TranslationKey is `keyof typeof en`), so the
Russian mirror stays mandatory.

Tests:
  - inspector-ship-group.test.ts exercises every variant —
    on-planet local, in-hyperspace local, cargo-loaded local,
    foreign, incoming with ETA, incoming with zero speed,
    unidentified, plus the missing-planet `#NN` fallback.
  - tests/e2e/inspector-ship-group.spec.ts is a smoke spec that
    drives the DEV-only synthetic-report loader from /lobby
    through navigation to /games/synthetic-XXX/map.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-10 13:24:17 +02:00
parent 676556db4e
commit 86e77efe39
8 changed files with 843 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/frontend/tests/e2e/inspector-ship-group.spec.ts
+134
View File
@@ -0,0 +1,134 @@
// Phase 19 end-to-end smoke against the synthetic-report path. Loads
// a hand-crafted JSON with a Tancordia-style mix of planets and ship
// groups through the DEV-only file picker on `/lobby`, lets the
// in-game shell layout swap into synthetic mode, and asserts the map
// canvas mounts. Detailed click / hit-test fidelity for ship-group
// variants lives in the unit tests (`tests/state-binding-groups.test.ts`
// and `tests/inspector-ship-group.test.ts`); this spec catches the
// glue: lobby loader → in-memory registry → layout bypass → renderer
// boot.
import { expect, test } from "@playwright/test";
const SYNTHETIC_REPORT_FIXTURE = {
turn: 39,
mapWidth: 200,
mapHeight: 200,
mapPlanets: 4,
race: "Earthlings",
player: [
{
name: "Earthlings",
drive: 5,
weapons: 3,
shields: 2,
cargo: 1,
population: 1000,
industry: 1000,
planets: 2,
relation: "-",
votes: 5,
extinct: false,
},
],
localPlanet: [
{
number: 1,
name: "Earth",
x: 50,
y: 100,
size: 1000,
population: 1000,
industry: 1000,
resources: 10,
production: "Capital",
capital: 0,
material: 0,
colonists: 100,
freeIndustry: 1000,
},
{
number: 2,
name: "Mars",
x: 150,
y: 100,
size: 500,
population: 500,
industry: 500,
resources: 5,
production: "Capital",
capital: 0,
material: 0,
colonists: 50,
freeIndustry: 500,
},
],
otherPlanet: [],
uninhabitedPlanet: [],
unidentifiedPlanet: [
{ number: 3, x: 50, y: 50 },
{ number: 4, x: 150, y: 50 },
],
localShipClass: [
{
name: "Frontier",
drive: 5,
armament: 0,
weapons: 0,
shields: 0,
cargo: 1,
mass: 12,
},
],
localGroup: [
{
id: "11111111-2222-3333-4444-555555555555",
number: 2,
class: "Frontier",
tech: { drive: 5, weapons: 0, shields: 0, cargo: 1 },
cargo: "-",
load: 0,
destination: 1,
speed: 0,
mass: 12,
state: "In_Orbit",
},
],
otherGroup: [],
incomingGroup: [
{
origin: 4,
destination: 1,
distance: 50,
speed: 25,
mass: 4,
},
],
unidentifiedGroup: [],
localFleet: [],
};
test("synthetic-report loader navigates from lobby to map and renders", async ({
page,
}) => {
await page.goto("/lobby");
await expect(page.getByTestId("lobby-synthetic-section")).toBeVisible();
const file = page.getByTestId("lobby-synthetic-file");
await file.setInputFiles({
name: "phase19.json",
mimeType: "application/json",
buffer: Buffer.from(JSON.stringify(SYNTHETIC_REPORT_FIXTURE)),
});
await page.waitForURL(/\/games\/synthetic-[^/]+\/map$/, {
timeout: 5_000,
});
// The renderer canvas mounts inside the active-view host. Even if
// the WebGL/WebGPU backend is unavailable in CI, the layout still
// reaches `ready` once the report is loaded — the assertion is
// gentle on purpose so the spec doesn't flake on headless renders.
const canvas = page.locator("canvas");
await expect(canvas.first()).toBeVisible({ timeout: 10_000 });
});
ui/frontend/tests/inspector-ship-group.test.ts
+231
View File
@@ -0,0 +1,231 @@
// Vitest component coverage for the Phase 19 read-only ship-group
// inspector. The inspector dispatches on the selection variant —
// local / other / incoming / unidentified — and renders a fixed set
// of fields per branch. The tests assert each branch surfaces the
// fields the acceptance criteria call out, plus the
// "no destination resolution" fallback.
import "@testing-library/jest-dom/vitest";
import { render } from "@testing-library/svelte";
import { beforeEach, describe, expect, test } from "vitest";
import { i18n } from "../src/lib/i18n/index.svelte";
import type {
ReportIncomingShipGroup,
ReportLocalShipGroup,
ReportOtherShipGroup,
ReportPlanet,
ReportUnidentifiedShipGroup,
} from "../src/api/game-state";
import ShipGroup, {
type ShipGroupSelection,
} from "../src/lib/inspectors/ship-group.svelte";
const PLANETS: ReportPlanet[] = [
{
number: 17,
name: "Castle",
x: 100,
y: 100,
kind: "local",
owner: null,
size: 1000,
resources: 10,
industryStockpile: 0,
materialsStockpile: 0,
industry: 1000,
population: 1000,
colonists: 0,
production: "Capital",
freeIndustry: 1000,
},
{
number: 99,
name: "Outpost",
x: 200,
y: 200,
kind: "other",
owner: "Foreign",
size: 500,
resources: 5,
industryStockpile: 0,
materialsStockpile: 0,
industry: 500,
population: 500,
colonists: 0,
production: "Capital",
freeIndustry: 500,
},
];
beforeEach(() => {
i18n.resetForTests("en");
});
function localGroup(
overrides: Partial<ReportLocalShipGroup> = {},
): ReportLocalShipGroup {
return {
id: "uuid-1",
count: 2,
class: "Frontier",
tech: { drive: 5, weapons: 0, shields: 0, cargo: 1 },
cargo: "NONE",
load: 0,
destination: 17,
origin: null,
range: null,
speed: 0,
mass: 12,
state: "In_Orbit",
fleet: null,
...overrides,
};
}
describe("ship-group inspector", () => {
test("renders the on-planet local group with all required fields", () => {
const selection: ShipGroupSelection = {
variant: "local",
group: localGroup(),
};
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
expect(ui.getByTestId("inspector-ship-group-class")).toHaveTextContent(
"Frontier",
);
expect(ui.getByTestId("inspector-ship-group-field-count")).toHaveTextContent(
"2",
);
expect(ui.getByTestId("inspector-ship-group-field-drive")).toHaveTextContent(
"5",
);
expect(
ui.getByTestId("inspector-ship-group-field-location"),
).toHaveTextContent("Castle");
expect(ui.getByTestId("inspector-ship-group-field-state")).toHaveTextContent(
"In_Orbit",
);
expect(
ui.queryByTestId("inspector-ship-group-field-distance"),
).toBeNull();
});
test("renders the in-hyperspace local group with from / to / distance", () => {
const selection: ShipGroupSelection = {
variant: "local",
group: localGroup({
origin: 17,
range: 4.5,
destination: 99,
state: "In_Space",
}),
};
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
expect(ui.getByTestId("inspector-ship-group-field-from")).toHaveTextContent(
"Castle",
);
expect(ui.getByTestId("inspector-ship-group-field-to")).toHaveTextContent(
"Outpost",
);
expect(
ui.getByTestId("inspector-ship-group-field-distance"),
).toHaveTextContent("4.5");
expect(
ui.queryByTestId("inspector-ship-group-field-location"),
).toBeNull();
});
test("renders cargo type and amount when the group is loaded", () => {
const selection: ShipGroupSelection = {
variant: "local",
group: localGroup({ cargo: "COL", load: 1.05 }),
};
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
const cargo = ui.getByTestId("inspector-ship-group-field-cargo-load");
expect(cargo).toHaveTextContent("colonists");
expect(cargo).toHaveTextContent("1.05");
});
test("renders foreign group without fleet/state but with full tech", () => {
const group: ReportOtherShipGroup = {
count: 5,
class: "Cruiser",
tech: { drive: 8, weapons: 4, shields: 3, cargo: 1 },
cargo: "NONE",
load: 0,
destination: 99,
origin: null,
range: null,
speed: 0,
mass: 50,
};
const selection: ShipGroupSelection = { variant: "other", group };
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
expect(ui.getByTestId("inspector-ship-group-class")).toHaveTextContent(
"Cruiser",
);
expect(ui.queryByTestId("inspector-ship-group-field-fleet")).toBeNull();
expect(ui.queryByTestId("inspector-ship-group-field-state")).toBeNull();
});
test("incoming group surfaces ETA and trajectory fields", () => {
const group: ReportIncomingShipGroup = {
origin: 99,
destination: 17,
distance: 80,
speed: 25,
mass: 4,
};
const selection: ShipGroupSelection = { variant: "incoming", group };
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
expect(ui.getByTestId("inspector-ship-group-field-from")).toHaveTextContent(
"Outpost",
);
expect(ui.getByTestId("inspector-ship-group-field-to")).toHaveTextContent(
"Castle",
);
// ETA = ceil(80 / 25) = 4.
expect(ui.getByTestId("inspector-ship-group-field-eta")).toHaveTextContent(
"4",
);
expect(
ui.getByTestId("inspector-ship-group-field-distance"),
).toHaveTextContent("80");
});
test("incoming group with zero speed renders ETA as the dash placeholder", () => {
const group: ReportIncomingShipGroup = {
origin: 99,
destination: 17,
distance: 80,
speed: 0,
mass: 4,
};
const selection: ShipGroupSelection = { variant: "incoming", group };
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
expect(ui.getByTestId("inspector-ship-group-field-eta")).toHaveTextContent(
"—",
);
});
test("unidentified group renders coordinates and the no-data hint", () => {
const group: ReportUnidentifiedShipGroup = { x: 555.5, y: 222.25 };
const selection: ShipGroupSelection = { variant: "unidentified", group };
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
const coords = ui.getByTestId("inspector-ship-group-field-coordinates");
expect(coords).toHaveTextContent("555.5");
expect(coords).toHaveTextContent("222.25");
expect(ui.getByTestId("inspector-ship-group-no-data")).toBeInTheDocument();
});
test("planet name resolves to '#NN' when missing from the planet list", () => {
const selection: ShipGroupSelection = {
variant: "local",
group: localGroup({ destination: 999 }),
};
const ui = render(ShipGroup, { props: { selection, planets: PLANETS } });
expect(
ui.getByTestId("inspector-ship-group-field-location"),
).toHaveTextContent("#999");
});
});