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>
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,139 @@
|
||||
<!--
|
||||
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>{i18n.t("game.report.section.bombings.column.industry")}</th>
|
||||
<th>{i18n.t("game.report.section.bombings.column.population")}</th>
|
||||
<th>{i18n.t("game.report.section.bombings.column.colonists")}</th>
|
||||
<th>
|
||||
{i18n.t("game.report.section.bombings.column.industry_stockpile")}
|
||||
</th>
|
||||
<th>
|
||||
{i18n.t("game.report.section.bombings.column.materials_stockpile")}
|
||||
</th>
|
||||
<th>{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>{formatFloat(b.industry)}</td>
|
||||
<td>{formatFloat(b.population)}</td>
|
||||
<td>{formatFloat(b.colonists)}</td>
|
||||
<td>{formatFloat(b.industryStockpile)}</td>
|
||||
<td>{formatFloat(b.materialsStockpile)}</td>
|
||||
<td>{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: #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;
|
||||
}
|
||||
.wiped td {
|
||||
color: #c97a7a;
|
||||
}
|
||||
.wiped-badge {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.45rem;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
background: #4a1010;
|
||||
color: #ffcaca;
|
||||
border: 1px solid #8a3030;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user