ui/phase-19: read-only ship-group inspector + sheet + tab dispatch
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
@@ -0,0 +1,260 @@
|
||||
<!--
|
||||
Phase 19 read-only ship-group inspector. Renders the documented field
|
||||
set per group variant (local / other / incoming / unidentified). The
|
||||
inspector is mounted by the sidebar `inspector-tab.svelte` when the
|
||||
selection has `kind === "shipGroup"`, and on the mobile breakpoint by
|
||||
the `ship-group-sheet.svelte` overlay.
|
||||
|
||||
Phase 20 will fold action buttons (split / send / load / unload /
|
||||
modernize / dismantle / transfer / assign-to-fleet) onto the local
|
||||
variant — for Phase 19 the inspector is intentionally read-only.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type {
|
||||
ReportIncomingShipGroup,
|
||||
ReportLocalShipGroup,
|
||||
ReportOtherShipGroup,
|
||||
ReportPlanet,
|
||||
ReportUnidentifiedShipGroup,
|
||||
} from "../../api/game-state";
|
||||
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
|
||||
|
||||
export type ShipGroupSelection =
|
||||
| { variant: "local"; group: ReportLocalShipGroup }
|
||||
| { variant: "other"; group: ReportOtherShipGroup }
|
||||
| { variant: "incoming"; group: ReportIncomingShipGroup }
|
||||
| { variant: "unidentified"; group: ReportUnidentifiedShipGroup };
|
||||
|
||||
type Props = {
|
||||
selection: ShipGroupSelection;
|
||||
planets: ReportPlanet[];
|
||||
};
|
||||
let { selection, planets }: Props = $props();
|
||||
|
||||
const kindKeyMap: Record<ShipGroupSelection["variant"], TranslationKey> = {
|
||||
local: "game.inspector.ship_group.kind.local",
|
||||
other: "game.inspector.ship_group.kind.other",
|
||||
incoming: "game.inspector.ship_group.kind.incoming",
|
||||
unidentified: "game.inspector.ship_group.kind.unidentified",
|
||||
};
|
||||
|
||||
const cargoLoadKeyMap = {
|
||||
COL: "game.inspector.ship_group.cargo.col",
|
||||
CAP: "game.inspector.ship_group.cargo.cap",
|
||||
MAT: "game.inspector.ship_group.cargo.mat",
|
||||
EMP: "game.inspector.ship_group.cargo.emp",
|
||||
} as const;
|
||||
|
||||
const planetIndex = $derived.by(() => {
|
||||
const m = new Map<number, ReportPlanet>();
|
||||
for (const p of planets) m.set(p.number, p);
|
||||
return m;
|
||||
});
|
||||
|
||||
function planetLabel(number: number): string {
|
||||
const planet = planetIndex.get(number);
|
||||
if (planet === undefined) return `#${number}`;
|
||||
if (planet.name === "" || planet.name === undefined) return `#${number}`;
|
||||
return planet.name;
|
||||
}
|
||||
|
||||
function formatNumber(value: number): string {
|
||||
return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function cargoLabel(cargo: "NONE" | "COL" | "CAP" | "MAT" | "EMP"): string {
|
||||
if (cargo === "NONE") {
|
||||
return i18n.t("game.inspector.ship_group.cargo.none");
|
||||
}
|
||||
return i18n.t(cargoLoadKeyMap[cargo]);
|
||||
}
|
||||
|
||||
const kindLabel = $derived(i18n.t(kindKeyMap[selection.variant]));
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="inspector"
|
||||
data-testid="inspector-ship-group"
|
||||
data-variant={selection.variant}
|
||||
>
|
||||
<header>
|
||||
<p class="kind" data-testid="inspector-ship-group-kind">{kindLabel}</p>
|
||||
{#if selection.variant === "local" || selection.variant === "other"}
|
||||
<h3 class="name" data-testid="inspector-ship-group-class">
|
||||
{selection.group.class}
|
||||
</h3>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if selection.variant === "local" || selection.variant === "other"}
|
||||
{@const g = selection.group}
|
||||
{@const onPlanet = g.origin === null || g.range === null}
|
||||
<dl class="fields">
|
||||
<div class="field" data-testid="inspector-ship-group-field-count">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.count")}</dt>
|
||||
<dd>{g.count}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-drive">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.drive")}</dt>
|
||||
<dd>{formatNumber(g.tech.drive)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-weapons">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.weapons")}</dt>
|
||||
<dd>{formatNumber(g.tech.weapons)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-shields">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.shields")}</dt>
|
||||
<dd>{formatNumber(g.tech.shields)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-cargo-tech">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.cargo_tech")}</dt>
|
||||
<dd>{formatNumber(g.tech.cargo)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-mass">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.mass")}</dt>
|
||||
<dd>{formatNumber(g.mass)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-cargo-load">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.cargo_load")}</dt>
|
||||
<dd>
|
||||
{#if g.cargo === "NONE"}
|
||||
{cargoLabel(g.cargo)}
|
||||
{:else}
|
||||
{cargoLabel(g.cargo)} × {formatNumber(g.load)}
|
||||
{/if}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
{#if onPlanet}
|
||||
<div class="field" data-testid="inspector-ship-group-field-location">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.location")}</dt>
|
||||
<dd>{planetLabel(g.destination)}</dd>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="field" data-testid="inspector-ship-group-field-from">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.from")}</dt>
|
||||
<dd>{planetLabel(g.origin!)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-to">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.to")}</dt>
|
||||
<dd>{planetLabel(g.destination)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-distance">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.distance")}</dt>
|
||||
<dd>{formatNumber(g.range!)}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if selection.variant === "local"}
|
||||
<div class="field" data-testid="inspector-ship-group-field-fleet">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.fleet")}</dt>
|
||||
<dd>
|
||||
{selection.group.fleet ?? i18n.t("game.inspector.ship_group.fleet.none")}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-state">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.state")}</dt>
|
||||
<dd>{selection.group.state}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
</dl>
|
||||
{:else if selection.variant === "incoming"}
|
||||
{@const g = selection.group}
|
||||
{@const eta = g.speed > 0 ? Math.ceil(g.distance / g.speed) : null}
|
||||
<dl class="fields">
|
||||
<div class="field" data-testid="inspector-ship-group-field-from">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.from")}</dt>
|
||||
<dd>{planetLabel(g.origin)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-to">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.to")}</dt>
|
||||
<dd>{planetLabel(g.destination)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-distance">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.distance")}</dt>
|
||||
<dd>{formatNumber(g.distance)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-speed">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.speed")}</dt>
|
||||
<dd>{formatNumber(g.speed)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-eta">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.eta")}</dt>
|
||||
<dd>
|
||||
{eta === null
|
||||
? i18n.t("game.designer.ship_class.preview.unavailable")
|
||||
: eta}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-mass">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.mass")}</dt>
|
||||
<dd>{formatNumber(g.mass)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{:else}
|
||||
<dl class="fields">
|
||||
<div
|
||||
class="field"
|
||||
data-testid="inspector-ship-group-field-coordinates"
|
||||
>
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.coordinates")}</dt>
|
||||
<dd>
|
||||
({formatNumber(selection.group.x)}, {formatNumber(selection.group.y)})
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="hint" data-testid="inspector-ship-group-no-data">
|
||||
{i18n.t("game.inspector.ship_group.unidentified_no_data")}
|
||||
</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.inspector {
|
||||
padding: 1rem;
|
||||
font-family: system-ui, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.kind {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #aab;
|
||||
}
|
||||
.name {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
.fields {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
row-gap: 0.25rem;
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
.field {
|
||||
display: contents;
|
||||
}
|
||||
.field dt {
|
||||
color: #aab;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.field dd {
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user