galaxy-game/ui/frontend/src/lib/active-view/report/section-foreign-sciences.svelte

<!--
Phase 23 Report View — foreign sciences section. Renders one
sub-table per race, mirroring the legacy "<Race> Sciences" layout.
Sorted alphabetically by race name (the decoder already produces
the (race, name) order); the sub-table groups are built here so
that anchor navigation to the section lands on a single visual
unit even when the section spans many races.
-->
<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 type { ReportOtherScience } from "../../../api/game-state";
	import { formatPercent } from "./format";

	const rendered = getContext<RenderedReportSource | undefined>(
		RENDERED_REPORT_CONTEXT_KEY,
	);
	const report = $derived(rendered?.report ?? null);
	const rows = $derived(report?.otherScience ?? []);

	// Decoder already sorts by (race, name); a simple linear walk
	// builds an array of {race, rows[]} groups.
	const grouped = $derived.by(() => {
		const out: { race: string; entries: ReportOtherScience[] }[] = [];
		let current: { race: string; entries: ReportOtherScience[] } | null = null;
		for (const row of rows) {
			if (current === null || current.race !== row.race) {
				current = { race: row.race, entries: [] };
				out.push(current);
			}
			current.entries.push(row);
		}
		return out;
	});
</script>

<section
	id="report-foreign-sciences"
	class="grid-section"
	data-testid="report-section-foreign-sciences"
>
	<h2>{i18n.t("game.report.section.foreign_sciences.title")}</h2>

	{#if report === null}
		<p class="status">{i18n.t("game.report.loading")}</p>
	{:else if grouped.length === 0}
		<p class="status" data-testid="foreign-sciences-empty">
			{i18n.t("game.report.section.foreign_sciences.empty")}
		</p>
	{:else}
		{#each grouped as group (group.race)}
			<h3
				class="race-header"
				data-testid="report-other-science-race"
				data-race={group.race}
			>
				{i18n.t("game.report.section.foreign_sciences.race_header", {
					race: group.race,
				})}
			</h3>
			<table class="grid" data-testid="foreign-sciences-table">
				<thead>
					<tr>
						<th>{i18n.t("game.report.section.my_sciences.column.name")}</th>
						<th class="numeric">{i18n.t("game.report.section.my_sciences.column.drive")}</th>
						<th class="numeric">{i18n.t("game.report.section.my_sciences.column.weapons")}</th>
						<th class="numeric">{i18n.t("game.report.section.my_sciences.column.shields")}</th>
						<th class="numeric">{i18n.t("game.report.section.my_sciences.column.cargo")}</th>
					</tr>
				</thead>
				<tbody>
					{#each group.entries as r (`${r.race}/${r.name}`)}
						<tr
							data-testid="foreign-sciences-row"
							data-race={r.race}
							data-name={r.name}
						>
							<td>{r.name}</td>
							<td class="numeric">{formatPercent(r.drive)}</td>
							<td class="numeric">{formatPercent(r.weapons)}</td>
							<td class="numeric">{formatPercent(r.shields)}</td>
							<td class="numeric">{formatPercent(r.cargo)}</td>
						</tr>
					{/each}
				</tbody>
			</table>
		{/each}
	{/if}
</section>

<style>
	.grid-section h2 {
		margin: 0 0 0.5rem;
		font-size: 1.05rem;
		color: var(--color-text);
	}
	.race-header {
		margin: 0.75rem 0 0.3rem;
		font-size: 0.85rem;
		color: var(--color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.status {
		margin: 0;
		color: var(--color-text-muted);
		font-size: 0.9rem;
	}
	.grid {
		border-collapse: collapse;
		width: 100%;
		font-variant-numeric: tabular-nums;
		font-size: 0.85rem;
	}
	.grid th,
	.grid td {
		padding: 0.4rem 0.6rem;
		text-align: left;
		border-bottom: 1px solid var(--color-border-subtle);
	}
	.grid th {
		color: var(--color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 0.75rem;
	}
	.grid th.numeric,
	.grid td.numeric {
		font-family: var(--font-mono);
		text-align: right;
	}
	.grid tbody tr:hover {
		background: var(--color-surface);
	}
</style>