Ilia Denisov
b31d9f4c45
Engine emits Floats at Fixed3 quantisation; UI now renders them as 3-decimal fixed-point strings without thousand separators, monospaced via var(--font-mono) on .numeric cells, and right-aligned in tables so columns line up on the decimal point. Integer counts render with 0 decimals and no separators; science fractions render as 1-decimal percent (matches the engine's third decimal of precision). Bug fixes from #51 (umbrella #43): - Player Status drive/weapons/shields/cargo: were tech LEVELS rendered through formatPercent (x100) — now use formatFloat (raw level). - Races table: same bug, same fix. Style/UX cleanups: - Inspector field labels lose "stockpile" word ($ / M suffix carries it). - Coordinates drop the parentheses (just "x, y"). - Inspector + report tables unify font sizes with calculator-tab (values 0.85rem mono, labels 0.8rem). Files: - new util: ui/frontend/src/lib/util/number-format.ts - report/format.ts becomes a thin re-export to keep section imports compact - inspector planet / ship-group / actions: drop inline formatNumber, mark numeric <dd> with class="numeric" - table-races (+ bug fix), table-sciences, table-ship-classes, designer-science: drop inline formatters, switch to util, add class="numeric" on numeric <th>/<td> - 17 report section files: class="numeric" on numeric th/td + scoped CSS rule for mono+right-align - i18n en/ru: drop "stockpile" word, drop "%" from tech-level column headers in races + player_status (the "%" was the misleading bit from the bug) - tests/inspector-planet + tests/table-races: update assertions to match the new format Verification: pnpm test (814 passed), pnpm check (0 errors/warnings), pnpm build clean. Refs: #51 (#43 umbrella). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
105 lines
2.9 KiB
Svelte
105 lines
2.9 KiB
Svelte
<!--
|
|
Phase 23 Report View — approaching groups section. Renders the wire
|
|
`incomingGroup[]` projection as a compact grid: origin → destination
|
|
along with distance / speed / mass. The wire field carries no
|
|
ship-class info (a true blip on radar); the player only learns the
|
|
class when the group lands and a battle roster forms.
|
|
-->
|
|
<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 { formatFloat, planetLabel } from "./format";
|
|
|
|
const rendered = getContext<RenderedReportSource | undefined>(
|
|
RENDERED_REPORT_CONTEXT_KEY,
|
|
);
|
|
const report = $derived(rendered?.report ?? null);
|
|
const rows = $derived(report?.incomingShipGroups ?? []);
|
|
const planets = $derived(report?.planets ?? []);
|
|
</script>
|
|
|
|
<section
|
|
id="report-approaching-groups"
|
|
class="grid-section"
|
|
data-testid="report-section-approaching-groups"
|
|
>
|
|
<h2>{i18n.t("game.report.section.approaching_groups.title")}</h2>
|
|
|
|
{#if report === null}
|
|
<p class="status">{i18n.t("game.report.loading")}</p>
|
|
{:else if rows.length === 0}
|
|
<p class="status" data-testid="approaching-groups-empty">
|
|
{i18n.t("game.report.section.approaching_groups.empty")}
|
|
</p>
|
|
{:else}
|
|
<table class="grid" data-testid="approaching-groups-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{i18n.t("game.report.section.approaching_groups.column.from")}</th>
|
|
<th>{i18n.t("game.report.section.approaching_groups.column.to")}</th>
|
|
<th class="numeric">
|
|
{i18n.t("game.report.section.approaching_groups.column.distance")}
|
|
</th>
|
|
<th class="numeric">{i18n.t("game.report.section.approaching_groups.column.speed")}</th>
|
|
<th class="numeric">{i18n.t("game.report.section.approaching_groups.column.mass")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each rows as r, i (i)}
|
|
<tr data-testid="approaching-groups-row">
|
|
<td>{planetLabel(r.origin, planets)}</td>
|
|
<td>{planetLabel(r.destination, planets)}</td>
|
|
<td class="numeric">{formatFloat(r.distance)}</td>
|
|
<td class="numeric">{formatFloat(r.speed)}</td>
|
|
<td class="numeric">{formatFloat(r.mass)}</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);
|
|
}
|
|
</style>
|