ui/phase-18: ship-class calc bridge with live designer preview
Wires pkg/calc/ship.go into the WASM Core boundary as seven thin
wrappers (DriveEffective, EmptyMass, WeaponsBlockMass, FullMass,
Speed, CargoCapacity, CarryingMass). The ship-class designer reads
Core through a new CORE_CONTEXT_KEY populated by the in-game layout
and renders a five-row preview pane (mass, full-load mass, max
speed, range at full load, cargo capacity) that updates reactively
on every form edit and on the player's localPlayer{Drive,Weapons,
Shields,Cargo} tech levels — three of which are now decoded from
the report's Player block alongside the existing localPlayerDrive.
CarryingMass is the seventh wrapper added to the original six-function
list so that "full-load mass" composes through pkg/calc/ functions
without putting math in TypeScript.
This commit is contained in:
Ilia Denisov
@@ -25,6 +25,12 @@ import {
|
||||
OrderDraftStore,
|
||||
} from "../src/sync/order-draft.svelte";
|
||||
import { RENDERED_REPORT_CONTEXT_KEY } from "../src/lib/rendered-report.svelte";
|
||||
import {
|
||||
CORE_CONTEXT_KEY,
|
||||
type CoreHandle,
|
||||
} from "../src/lib/core-context.svelte";
|
||||
import { loadWasmCoreForTest } from "./setup-wasm";
|
||||
import type { Core } from "../src/platform/core/index";
|
||||
import { IDBCache } from "../src/platform/store/idb-cache";
|
||||
import { openGalaxyDB, type GalaxyDB } from "../src/platform/store/idb";
|
||||
import type { Cache } from "../src/platform/store/index";
|
||||
@@ -100,21 +106,27 @@ function makeReport(localShipClass: ShipClassSummary[] = []): GameReport {
|
||||
localShipClass,
|
||||
routes: [],
|
||||
localPlayerDrive: 0,
|
||||
localPlayerWeapons: 0,
|
||||
localPlayerShields: 0,
|
||||
localPlayerCargo: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function mountDesigner(opts: {
|
||||
classId?: string;
|
||||
report?: GameReport | null;
|
||||
core?: Core | null;
|
||||
}) {
|
||||
const report = opts.report ?? makeReport();
|
||||
pageMock.params = opts.classId
|
||||
? { id: "g1", classId: opts.classId }
|
||||
: { id: "g1" };
|
||||
const renderedReport = { get report() { return report; } };
|
||||
const coreHandle: CoreHandle = { core: opts.core ?? null };
|
||||
const context = new Map<unknown, unknown>([
|
||||
[ORDER_DRAFT_CONTEXT_KEY, draft],
|
||||
[RENDERED_REPORT_CONTEXT_KEY, renderedReport],
|
||||
[CORE_CONTEXT_KEY, coreHandle],
|
||||
]);
|
||||
return render(DesignerShipClass, { context });
|
||||
}
|
||||
@@ -260,3 +272,136 @@ describe("ship-class designer (view mode)", () => {
|
||||
).toHaveTextContent("Ghost");
|
||||
});
|
||||
});
|
||||
|
||||
describe("ship-class designer preview pane (Phase 18)", () => {
|
||||
test("hides preview while validation fails", () => {
|
||||
const ui = mountDesigner({});
|
||||
expect(
|
||||
ui.queryByTestId("designer-ship-class-preview"),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("hides preview when no Core is provided", async () => {
|
||||
const ui = mountDesigner({});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-name"), {
|
||||
target: { value: "Drone" },
|
||||
});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-drive"), {
|
||||
target: { value: "1" },
|
||||
});
|
||||
await waitFor(() =>
|
||||
expect(ui.getByTestId("designer-ship-class-save")).not.toBeDisabled(),
|
||||
);
|
||||
expect(
|
||||
ui.queryByTestId("designer-ship-class-preview"),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders five rows once form is valid and Core is ready", async () => {
|
||||
const core = await loadWasmCoreForTest();
|
||||
const report: GameReport = {
|
||||
turn: 1,
|
||||
mapWidth: 1000,
|
||||
mapHeight: 1000,
|
||||
planetCount: 0,
|
||||
planets: [],
|
||||
race: "",
|
||||
localShipClass: [],
|
||||
routes: [],
|
||||
localPlayerDrive: 1.5,
|
||||
localPlayerWeapons: 1,
|
||||
localPlayerShields: 1,
|
||||
localPlayerCargo: 1.2,
|
||||
};
|
||||
const ui = mountDesigner({ report, core });
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-name"), {
|
||||
target: { value: "Cruiser" },
|
||||
});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-drive"), {
|
||||
target: { value: "8" },
|
||||
});
|
||||
await fireEvent.input(
|
||||
ui.getByTestId("designer-ship-class-input-armament"),
|
||||
{ target: { value: "2" } },
|
||||
);
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-weapons"), {
|
||||
target: { value: "5" },
|
||||
});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-shields"), {
|
||||
target: { value: "3" },
|
||||
});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-cargo"), {
|
||||
target: { value: "4" },
|
||||
});
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview"),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
// Empty mass = drive + shields + cargo + (armament+1)*(weapons/2)
|
||||
// = 8 + 3 + 4 + 3 * 2.5 = 22.5
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-mass"),
|
||||
).toHaveTextContent("22.5");
|
||||
// CargoCapacity = cargoTech * (cargo + cargo²/20)
|
||||
// = 1.2 * (4 + 16/20) = 1.2 * 4.8 = 5.76
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-cargo-capacity"),
|
||||
).toHaveTextContent("5.76");
|
||||
// CarryingMass at full = capacity / cargoTech = 5.76 / 1.2 = 4.8
|
||||
// FullLoadMass = 22.5 + 4.8 = 27.3
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-full-load-mass"),
|
||||
).toHaveTextContent("27.3");
|
||||
// DriveEffective = 8 * 1.5 = 12
|
||||
// MaxSpeed = 12 * 20 / 22.5 = 10.666… → "10.67"
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-max-speed"),
|
||||
).toHaveTextContent("10.67");
|
||||
// RangeAtFull = 12 * 20 / 27.3 = 8.791… → "8.79"
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-range"),
|
||||
).toHaveTextContent("8.79");
|
||||
});
|
||||
|
||||
test("preview reacts to subsequent edits", async () => {
|
||||
const core = await loadWasmCoreForTest();
|
||||
const report: GameReport = {
|
||||
turn: 1,
|
||||
mapWidth: 1000,
|
||||
mapHeight: 1000,
|
||||
planetCount: 0,
|
||||
planets: [],
|
||||
race: "",
|
||||
localShipClass: [],
|
||||
routes: [],
|
||||
localPlayerDrive: 1,
|
||||
localPlayerWeapons: 1,
|
||||
localPlayerShields: 1,
|
||||
localPlayerCargo: 1,
|
||||
};
|
||||
const ui = mountDesigner({ report, core });
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-name"), {
|
||||
target: { value: "Hauler" },
|
||||
});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-drive"), {
|
||||
target: { value: "1" },
|
||||
});
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-cargo"), {
|
||||
target: { value: "5" },
|
||||
});
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-cargo-capacity"),
|
||||
).toHaveTextContent("6.25"),
|
||||
);
|
||||
await fireEvent.input(ui.getByTestId("designer-ship-class-input-cargo"), {
|
||||
target: { value: "10" },
|
||||
});
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
ui.getByTestId("designer-ship-class-preview-cargo-capacity"),
|
||||
).toHaveTextContent("15"),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user