ui/phase-23: turn-report view with twenty sections and TOC

Replaces the Phase 10 report stub with a scrollable orchestrator that renders every FBS array as a dedicated section (galaxy summary, votes, player status, my/foreign sciences, my/foreign ship classes, battles, bombings, approaching groups, my/foreign/uninhabited/unknown planets, ships in production, cargo routes, my fleets, my/foreign/unidentified ship groups). A sticky table of contents (a <select> on mobile), "back to map" affordance, IntersectionObserver-driven active-section highlight, and SvelteKit Snapshot-based scroll save/restore round out the view. GameReport gains six new fields (players, otherScience, otherShipClass, battleIds, bombings, shipProductions); decodeReport, the synthetic- report loader, the e2e fixture builder, and EMPTY_SHIP_GROUPS extend in lockstep. ~90 new i18n keys land in en + ru together. The legacy-report parser is extended to populate the new sections from the dg/gplus text formats (Your Sciences, <Race> Sciences, <Race> Ship Types, Bombings, Ships In Production). Ships-in-production prod_used is derived through a new pkg/calc.ShipBuildCost helper; the engine's controller.ProduceShip refactors to call the same helper without any behaviour change (engine tests stay unchanged and green). Battles remain in the parser's Skipped list — the legacy text carries no stable per-battle UUID. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-11 14:33:56 +02:00
parent 81d8be08b2
commit c58027c034
48 changed files with 5368 additions and 103 deletions
@@ -0,0 +1,114 @@
+<!--
+Phase 23 Report View — cargo routes section. The wire `routes[]`
+groups by source planet; each entry inside a route is one
+(loadType, destination) pair. The section flattens both to a single
+table — anchor jumps into a single visual unit even when the player
+has many routes.
+-->
+<script lang="ts">
+	import { getContext } from "svelte";
+
+	import { i18n } from "$lib/i18n/index.svelte";
+	import {
+		RENDERED_REPORT_CONTEXT_KEY,
+		type RenderedReportSource,
+	} from "$lib/rendered-report.svelte";
+	import { planetLabel } from "./format";
+
+	const rendered = getContext<RenderedReportSource | undefined>(
+		RENDERED_REPORT_CONTEXT_KEY,
+	);
+	const report = $derived(rendered?.report ?? null);
+	const planets = $derived(report?.planets ?? []);
+
+	const rows = $derived.by(() => {
+		const out: {
+			sourcePlanetNumber: number;
+			loadType: string;
+			destinationPlanetNumber: number;
+		}[] = [];
+		for (const route of report?.routes ?? []) {
+			for (const entry of route.entries) {
+				out.push({
+					sourcePlanetNumber: route.sourcePlanetNumber,
+					loadType: entry.loadType,
+					destinationPlanetNumber: entry.destinationPlanetNumber,
+				});
+			}
+		}
+		return out;
+	});
+</script>
+
+<section
+	id="report-cargo-routes"
+	class="grid-section"
+	data-testid="report-section-cargo-routes"
+>
+	<h2>{i18n.t("game.report.section.cargo_routes.title")}</h2>
+
+	{#if report === null}
+		<p class="status">{i18n.t("game.report.loading")}</p>
+	{:else if rows.length === 0}
+		<p class="status" data-testid="cargo-routes-empty">
+			{i18n.t("game.report.section.cargo_routes.empty")}
+		</p>
+	{:else}
+		<table class="grid" data-testid="cargo-routes-table">
+			<thead>
+				<tr>
+					<th>{i18n.t("game.report.section.cargo_routes.column.source")}</th>
+					<th>{i18n.t("game.report.section.cargo_routes.column.load")}</th>
+					<th>{i18n.t("game.report.section.cargo_routes.column.destination")}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each rows as r (`${r.sourcePlanetNumber}/${r.loadType}`)}
+					<tr
+						data-testid="cargo-routes-row"
+						data-source={r.sourcePlanetNumber}
+						data-load={r.loadType}
+					>
+						<td>{planetLabel(r.sourcePlanetNumber, planets)}</td>
+						<td>{r.loadType}</td>
+						<td>{planetLabel(r.destinationPlanetNumber, planets)}</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</section>
+
+<style>
+	.grid-section h2 {
+		margin: 0 0 0.5rem;
+		font-size: 1.05rem;
+		color: #e8eaf6;
+	}
+	.status {
+		margin: 0;
+		color: #888;
+		font-size: 0.9rem;
+	}
+	.grid {
+		border-collapse: collapse;
+		width: 100%;
+		font-variant-numeric: tabular-nums;
+		font-size: 0.9rem;
+	}
+	.grid th,
+	.grid td {
+		padding: 0.4rem 0.6rem;
+		text-align: left;
+		border-bottom: 1px solid #1c2240;
+	}
+	.grid th {
+		color: #aab;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		font-size: 0.75rem;
+	}
+	.grid tbody tr:hover {
+		background: #11172a;
+	}
+</style>