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>
459 lines
12 KiB
Svelte
459 lines
12 KiB
Svelte
<!--
|
|
Phase 22 races table. Lists every non-extinct other race with the
|
|
local player's per-row stance toggle (WAR / PEACE — two segmented
|
|
buttons, the active stance highlighted) and a single vote slot
|
|
above the table. Both controls dispatch through the per-game
|
|
`OrderDraftStore` (context), so the optimistic overlay flips
|
|
immediately and the auto-sync pipeline drives the server in the
|
|
background.
|
|
|
|
The alliance graph and the 2/3 victory check are NOT computed
|
|
here: `rules.txt` keeps each race's outgoing vote target private
|
|
(only the votes a race RECEIVED in the last tally and the local
|
|
player's own pick are observable), and the acceptance criterion
|
|
"vote counts match server state byte-for-byte" rules out
|
|
client-side recomputation. The sub-header explains this explicitly
|
|
so the player knows where the win condition lives.
|
|
|
|
The component sits inside the active-view slot owned by
|
|
`routes/games/[id]/+layout.svelte`, so it inherits the per-game
|
|
`OrderDraftStore` and `RenderedReportSource` through context. No
|
|
data fetching is performed here — the layout is responsible.
|
|
-->
|
|
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
|
|
import type { ReportOtherRace } from "../../api/game-state";
|
|
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
|
|
import {
|
|
RENDERED_REPORT_CONTEXT_KEY,
|
|
type RenderedReportSource,
|
|
} from "$lib/rendered-report.svelte";
|
|
import {
|
|
ORDER_DRAFT_CONTEXT_KEY,
|
|
OrderDraftStore,
|
|
} from "../../sync/order-draft.svelte";
|
|
import type { Relation } from "../../sync/order-types";
|
|
import ViewState from "$lib/ui/view-state.svelte";
|
|
import {
|
|
formatFloat,
|
|
formatInt,
|
|
} from "$lib/util/number-format";
|
|
|
|
type SortColumn =
|
|
| "name"
|
|
| "drive"
|
|
| "weapons"
|
|
| "shields"
|
|
| "cargo"
|
|
| "population"
|
|
| "industry"
|
|
| "planets"
|
|
| "votesReceived";
|
|
type SortDirection = "asc" | "desc";
|
|
|
|
const COLUMN_LABELS: Record<SortColumn, TranslationKey> = {
|
|
name: "game.table.races.column.name",
|
|
drive: "game.table.races.column.drive",
|
|
weapons: "game.table.races.column.weapons",
|
|
shields: "game.table.races.column.shields",
|
|
cargo: "game.table.races.column.cargo",
|
|
population: "game.table.races.column.population",
|
|
industry: "game.table.races.column.industry",
|
|
planets: "game.table.races.column.planets",
|
|
votesReceived: "game.table.races.column.votes",
|
|
};
|
|
|
|
const COLUMNS: readonly SortColumn[] = [
|
|
"name",
|
|
"drive",
|
|
"weapons",
|
|
"shields",
|
|
"cargo",
|
|
"population",
|
|
"industry",
|
|
"planets",
|
|
"votesReceived",
|
|
];
|
|
|
|
const rendered = getContext<RenderedReportSource | undefined>(
|
|
RENDERED_REPORT_CONTEXT_KEY,
|
|
);
|
|
const draft = getContext<OrderDraftStore | undefined>(
|
|
ORDER_DRAFT_CONTEXT_KEY,
|
|
);
|
|
|
|
let sortColumn: SortColumn = $state("name");
|
|
let sortDirection: SortDirection = $state("asc");
|
|
let filter: string = $state("");
|
|
|
|
const races = $derived<ReportOtherRace[]>(rendered?.report?.races ?? []);
|
|
const myVotes = $derived<number>(rendered?.report?.myVotes ?? 0);
|
|
const myVoteFor = $derived<string>(rendered?.report?.myVoteFor ?? "");
|
|
const reportLoaded = $derived(
|
|
rendered?.report !== null && rendered?.report !== undefined,
|
|
);
|
|
|
|
const filtered = $derived.by(() => {
|
|
const needle = filter.trim().toLowerCase();
|
|
if (needle === "") return races;
|
|
return races.filter((r) => r.name.toLowerCase().includes(needle));
|
|
});
|
|
|
|
const sorted = $derived.by(() => {
|
|
const list = [...filtered];
|
|
const dir = sortDirection === "asc" ? 1 : -1;
|
|
list.sort((a, b) => {
|
|
if (sortColumn === "name") {
|
|
return a.name.localeCompare(b.name) * dir;
|
|
}
|
|
return (a[sortColumn] - b[sortColumn]) * dir;
|
|
});
|
|
return list;
|
|
});
|
|
|
|
function toggleSort(column: SortColumn): void {
|
|
if (sortColumn === column) {
|
|
sortDirection = sortDirection === "asc" ? "desc" : "asc";
|
|
return;
|
|
}
|
|
sortColumn = column;
|
|
sortDirection = "asc";
|
|
}
|
|
|
|
function ariaSort(column: SortColumn): "ascending" | "descending" | "none" {
|
|
if (sortColumn !== column) return "none";
|
|
return sortDirection === "asc" ? "ascending" : "descending";
|
|
}
|
|
|
|
async function setStance(acceptor: string, relation: Relation): Promise<void> {
|
|
if (draft === undefined) return;
|
|
// No-op when the row already reflects the requested stance — the
|
|
// engine would accept the duplicate, but queueing a wire entry
|
|
// that re-states the current state inflates the order tab and
|
|
// the auto-sync envelope for nothing. The current stance reads
|
|
// off the overlay (`races[i].relation`), so a queued-but-not-
|
|
// applied stance change correctly suppresses a duplicate click
|
|
// that matches the *queued* intent, not just the server snapshot.
|
|
const current = races.find((r) => r.name === acceptor)?.relation;
|
|
if (current === relation) return;
|
|
await draft.add({
|
|
kind: "setDiplomaticStance",
|
|
id: crypto.randomUUID(),
|
|
acceptor,
|
|
relation,
|
|
});
|
|
}
|
|
|
|
async function pickVote(event: Event): Promise<void> {
|
|
if (draft === undefined) return;
|
|
const select = event.currentTarget as HTMLSelectElement;
|
|
const acceptor = select.value;
|
|
if (acceptor === "") return;
|
|
if (acceptor === myVoteFor) return;
|
|
await draft.add({
|
|
kind: "setVoteRecipient",
|
|
id: crypto.randomUUID(),
|
|
acceptor,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<section
|
|
class="active-view"
|
|
data-testid="active-view-table"
|
|
data-entity="races"
|
|
>
|
|
<header>
|
|
<h2>{i18n.t("game.table.races.title")}</h2>
|
|
<div class="summary">
|
|
<span class="summary-cell" data-testid="races-my-votes">
|
|
<span class="summary-label">
|
|
{i18n.t("game.table.races.votes.mine")}:
|
|
</span>
|
|
<span class="summary-value numeric">{formatFloat(myVotes)}</span>
|
|
</span>
|
|
<label class="summary-cell vote-picker">
|
|
<span class="summary-label">
|
|
{i18n.t("game.table.races.votes.target")}:
|
|
</span>
|
|
<select
|
|
data-testid="races-vote-target"
|
|
value={myVoteFor}
|
|
disabled={!reportLoaded || races.length === 0}
|
|
onchange={pickVote}
|
|
>
|
|
<option value="" disabled>
|
|
{i18n.t("game.table.races.votes.target_placeholder")}
|
|
</option>
|
|
{#each races as r (r.name)}
|
|
<option value={r.name}>{r.name}</option>
|
|
{/each}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<p class="note" data-testid="races-alliance-note">
|
|
{i18n.t("game.table.races.note.alliance_server_side")}
|
|
</p>
|
|
<div class="controls">
|
|
<input
|
|
type="search"
|
|
class="filter"
|
|
data-testid="races-filter"
|
|
placeholder={i18n.t("game.table.races.filter.placeholder")}
|
|
bind:value={filter}
|
|
/>
|
|
</div>
|
|
</header>
|
|
|
|
{#if !reportLoaded}
|
|
<ViewState
|
|
kind="loading"
|
|
testid="races-loading"
|
|
message={i18n.t("game.table.races.loading")}
|
|
/>
|
|
{:else if races.length === 0}
|
|
<ViewState
|
|
kind="empty"
|
|
testid="races-empty"
|
|
message={i18n.t("game.table.races.empty")}
|
|
/>
|
|
{:else}
|
|
<table class="grid" data-testid="races-table">
|
|
<thead>
|
|
<tr>
|
|
{#each COLUMNS as column (column)}
|
|
<th aria-sort={ariaSort(column)} class:numeric={column !== "name"}>
|
|
<button
|
|
type="button"
|
|
class="sort"
|
|
data-testid="races-column-{column}"
|
|
onclick={() => toggleSort(column)}
|
|
>
|
|
{i18n.t(COLUMN_LABELS[column])}
|
|
{#if sortColumn === column}
|
|
<span class="sort-indicator" aria-hidden="true">
|
|
{sortDirection === "asc" ? "▲" : "▼"}
|
|
</span>
|
|
{/if}
|
|
</button>
|
|
</th>
|
|
{/each}
|
|
<th>{i18n.t("game.table.races.column.relation")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each sorted as r (r.name)}
|
|
<tr data-testid="races-row" data-name={r.name}>
|
|
<td data-testid="races-cell-name">{r.name}</td>
|
|
<td class="numeric" data-testid="races-cell-drive">
|
|
{formatFloat(r.drive)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-weapons">
|
|
{formatFloat(r.weapons)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-shields">
|
|
{formatFloat(r.shields)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-cargo">
|
|
{formatFloat(r.cargo)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-population">
|
|
{formatInt(r.population)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-industry">
|
|
{formatInt(r.industry)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-planets">
|
|
{formatInt(r.planets)}
|
|
</td>
|
|
<td class="numeric" data-testid="races-cell-votes">
|
|
{formatFloat(r.votesReceived)}
|
|
</td>
|
|
<td>
|
|
<div
|
|
class="stance"
|
|
role="group"
|
|
aria-label={i18n.t("game.table.races.column.relation")}
|
|
>
|
|
<button
|
|
type="button"
|
|
class="stance-button war"
|
|
class:active={r.relation === "WAR"}
|
|
aria-pressed={r.relation === "WAR"}
|
|
data-testid="races-stance-war"
|
|
onclick={() => void setStance(r.name, "WAR")}
|
|
>
|
|
{i18n.t("game.table.races.action.war")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="stance-button peace"
|
|
class:active={r.relation === "PEACE"}
|
|
aria-pressed={r.relation === "PEACE"}
|
|
data-testid="races-stance-peace"
|
|
onclick={() => void setStance(r.name, "PEACE")}
|
|
>
|
|
{i18n.t("game.table.races.action.peace")}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
{/if}
|
|
</section>
|
|
|
|
<style>
|
|
.active-view {
|
|
padding: 1.5rem;
|
|
font-family: system-ui, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
header h2 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
.summary {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
font-size: 0.9rem;
|
|
}
|
|
.summary-cell {
|
|
display: inline-flex;
|
|
gap: 0.4rem;
|
|
align-items: baseline;
|
|
}
|
|
.summary-label {
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-size: 0.75rem;
|
|
}
|
|
.summary-value {
|
|
color: var(--color-text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.summary-value.numeric {
|
|
font-family: var(--font-mono);
|
|
}
|
|
.vote-picker select {
|
|
font: inherit;
|
|
padding: 0.2rem 0.4rem;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 3px;
|
|
}
|
|
.vote-picker select:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.note {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.8rem;
|
|
line-height: 1.35;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.filter {
|
|
font: inherit;
|
|
padding: 0.3rem 0.5rem;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 3px;
|
|
flex: 1 1 12rem;
|
|
min-width: 8rem;
|
|
}
|
|
.grid {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.grid th,
|
|
.grid td {
|
|
padding: 0.4rem 0.6rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--color-border-subtle);
|
|
font-size: 0.85rem;
|
|
}
|
|
.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 th.numeric .sort {
|
|
justify-content: flex-end;
|
|
}
|
|
.grid tbody tr:hover {
|
|
background: var(--color-surface);
|
|
}
|
|
.sort {
|
|
font: inherit;
|
|
font-size: inherit;
|
|
text-transform: inherit;
|
|
letter-spacing: inherit;
|
|
color: inherit;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
gap: 0.3rem;
|
|
align-items: baseline;
|
|
}
|
|
.sort-indicator {
|
|
font-size: 0.7em;
|
|
}
|
|
.stance {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
}
|
|
.stance-button {
|
|
font: inherit;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.05em;
|
|
padding: 0.2rem 0.55rem;
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.stance-button:hover {
|
|
color: var(--color-text);
|
|
}
|
|
.stance-button.war.active {
|
|
background: var(--color-danger-subtle);
|
|
color: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
}
|
|
.stance-button.peace.active {
|
|
background: var(--color-success-subtle);
|
|
color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
}
|
|
</style>
|