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

<!--
Phase 23 Report View — bombings section. One row per bombing
event; wiped planets get a visually-distinct row state plus a
"wiped" badge so the boolean is explicit for e2e assertions.
Decoder sorts by `planetNumber` already.
-->
<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 { formatCount, formatFloat } from "./format";

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

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

	{#if report === null}
		<p class="status">{i18n.t("game.report.loading")}</p>
	{:else if rows.length === 0}
		<p class="status" data-testid="bombings-empty">
			{i18n.t("game.report.section.bombings.empty")}
		</p>
	{:else}
		<table class="grid" data-testid="bombings-table">
			<thead>
				<tr>
					<th>{i18n.t("game.report.section.bombings.column.planet")}</th>
					<th>{i18n.t("game.report.section.bombings.column.owner")}</th>
					<th>{i18n.t("game.report.section.bombings.column.attacker")}</th>
					<th>{i18n.t("game.report.section.bombings.column.production")}</th>
					<th class="numeric">{i18n.t("game.report.section.bombings.column.industry")}</th>
					<th class="numeric">{i18n.t("game.report.section.bombings.column.population")}</th>
					<th class="numeric">{i18n.t("game.report.section.bombings.column.colonists")}</th>
					<th class="numeric">
						{i18n.t("game.report.section.bombings.column.industry_stockpile")}
					</th>
					<th class="numeric">
						{i18n.t("game.report.section.bombings.column.materials_stockpile")}
					</th>
					<th class="numeric">{i18n.t("game.report.section.bombings.column.attack_power")}</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				{#each rows as b (`${b.planetNumber}/${b.attacker}/${b.owner}`)}
					<tr
						data-testid="report-bombing-row"
						data-planet={b.planetNumber}
						data-wiped={b.wiped ? "true" : "false"}
						class:wiped={b.wiped}
					>
						<td>#{b.planetNumber} ({b.planet})</td>
						<td>{b.owner}</td>
						<td>{b.attacker}</td>
						<td>{b.production}</td>
						<td class="numeric">{formatFloat(b.industry)}</td>
						<td class="numeric">{formatFloat(b.population)}</td>
						<td class="numeric">{formatFloat(b.colonists)}</td>
						<td class="numeric">{formatFloat(b.industryStockpile)}</td>
						<td class="numeric">{formatFloat(b.materialsStockpile)}</td>
						<td class="numeric">{formatCount(b.attackPower)}</td>
						<td>
							{#if b.wiped}
								<span
									class="wiped-badge"
									data-testid="report-bombing-wiped-badge"
								>
									{i18n.t("game.report.section.bombings.wiped")}
								</span>
							{/if}
						</td>
					</tr>
				{/each}
			</tbody>
		</table>
	{/if}
</section>

<style>
	.grid-section h2 {
		margin: 0 0 0.5rem;
		font-size: 1.05rem;
		color: var(--color-text);
	}
	.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);
	}
	.wiped td {
		color: var(--color-danger);
	}
	.wiped-badge {
		display: inline-block;
		padding: 0.1rem 0.45rem;
		font-size: 0.7rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		background: var(--color-danger-subtle);
		color: var(--color-danger);
		border: 1px solid var(--color-danger);
		border-radius: 3px;
	}
</style>