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

<!--
Phase 23 Report View — player status section. Mirrors the legacy
"Status of Players" table: every named row in the FBS player block,
local player included, extinct rows marked with the RIP suffix.
Rows are sorted alphabetically (case-insensitive) by the decoder.
The local player's row gets a "(you)" marker and a visual
highlight so the user can locate themselves quickly.
-->
<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, formatPercent, formatVotes } from "./format";

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

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

	{#if report === null}
		<p class="status">{i18n.t("game.report.loading")}</p>
	{:else}
		<table class="grid" data-testid="player-status-table">
			<thead>
				<tr>
					<th>{i18n.t("game.report.section.player_status.column.name")}</th>
					<th>{i18n.t("game.report.section.player_status.column.drive")}</th>
					<th>{i18n.t("game.report.section.player_status.column.weapons")}</th>
					<th>{i18n.t("game.report.section.player_status.column.shields")}</th>
					<th>{i18n.t("game.report.section.player_status.column.cargo")}</th>
					<th>{i18n.t("game.report.section.player_status.column.population")}</th>
					<th>{i18n.t("game.report.section.player_status.column.industry")}</th>
					<th>{i18n.t("game.report.section.player_status.column.planets")}</th>
					<th>{i18n.t("game.report.section.player_status.column.votes")}</th>
				</tr>
			</thead>
			<tbody>
				{#each players as p (p.name)}
					<tr
						data-testid="player-status-row"
						data-name={p.name}
						data-local={p.isLocal ? "true" : "false"}
						data-extinct={p.extinct ? "true" : "false"}
						class:local={p.isLocal}
						class:extinct={p.extinct}
					>
						<td>
							<span>{p.name}</span>
							{#if p.isLocal}
								<span class="marker local-marker">
									({i18n.t("game.report.section.player_status.local_marker")})
								</span>
							{/if}
							{#if p.extinct}
								<span
									class="marker extinct-marker"
									data-testid="player-status-extinct-marker"
								>
									{i18n.t("game.report.section.player_status.extinct_marker")}
								</span>
							{/if}
						</td>
						<td>{formatPercent(p.drive)}</td>
						<td>{formatPercent(p.weapons)}</td>
						<td>{formatPercent(p.shields)}</td>
						<td>{formatPercent(p.cargo)}</td>
						<td>{formatCount(p.population)}</td>
						<td>{formatCount(p.industry)}</td>
						<td>{formatCount(p.planets)}</td>
						<td>{formatVotes(p.votesReceived)}</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;
	}
	.local td {
		background: #11203d;
	}
	.extinct td {
		color: #889;
	}
	.marker {
		margin-left: 0.4rem;
		font-size: 0.75rem;
		color: #aab;
	}
	.extinct-marker {
		color: #c97a7a;
		letter-spacing: 0.08em;
	}
</style>