fix(ui): F8-08 unified number format — mono, fixed 3-decimal, no separators
Tests · UI / test (push) Waiting to run
Tests · UI / test (pull_request) Waiting to run

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>
This commit is contained in:
Ilia Denisov
2026-05-27 11:08:22 +02:00
parent 208d30073b
commit b31d9f4c45
33 changed files with 484 additions and 379 deletions
+17 -17
View File
@@ -31,6 +31,7 @@ field with five buttons.
validateEntityName,
type EntityNameInvalidReason,
} from "$lib/util/entity-name";
import { formatFloat } from "$lib/util/number-format";
import CargoRoutes from "./planet/cargo-routes.svelte";
import Production from "./planet/production.svelte";
import ShipGroups from "./planet/ship-groups.svelte";
@@ -99,14 +100,10 @@ field with five buttons.
const kindLabel = $derived(i18n.t(kindKeyMap[planet.kind]));
const coordinates = $derived(
`(${formatNumber(planet.x)}, ${formatNumber(planet.y)})`,
`${formatFloat(planet.x)}, ${formatFloat(planet.y)}`,
);
const productionLabel = $derived(productionDisplay(planet.production));
function formatNumber(value: number): string {
return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
}
function productionDisplay(value: string | null): string {
if (value === null || value === "") {
return i18n.t("game.inspector.planet.production_none");
@@ -252,55 +249,55 @@ field with five buttons.
<div class="field" data-testid="inspector-planet-field-coordinates">
<dt>{i18n.t("game.inspector.planet.field.coordinates")}</dt>
<dd>{coordinates}</dd>
<dd class="numeric">{coordinates}</dd>
</div>
{#if planet.size !== null}
<div class="field" data-testid="inspector-planet-field-size">
<dt>{i18n.t("game.inspector.planet.field.size")}</dt>
<dd>{formatNumber(planet.size)}</dd>
<dd class="numeric">{formatFloat(planet.size)}</dd>
</div>
{/if}
{#if planet.resources !== null}
<div class="field" data-testid="inspector-planet-field-natural_resources">
<dt>{i18n.t("game.inspector.planet.field.natural_resources")}</dt>
<dd>{formatNumber(planet.resources)}</dd>
<dd class="numeric">{formatFloat(planet.resources)}</dd>
</div>
{/if}
{#if planet.population !== null}
<div class="field" data-testid="inspector-planet-field-population">
<dt>{i18n.t("game.inspector.planet.field.population")}</dt>
<dd>{formatNumber(planet.population)}</dd>
<dd class="numeric">{formatFloat(planet.population)}</dd>
</div>
{/if}
{#if planet.colonists !== null}
<div class="field" data-testid="inspector-planet-field-colonists">
<dt>{i18n.t("game.inspector.planet.field.colonists")}</dt>
<dd>{formatNumber(planet.colonists)}</dd>
<dd class="numeric">{formatFloat(planet.colonists)}</dd>
</div>
{/if}
{#if planet.industry !== null}
<div class="field" data-testid="inspector-planet-field-industry">
<dt>{i18n.t("game.inspector.planet.field.industry")}</dt>
<dd>{formatNumber(planet.industry)}</dd>
<dd class="numeric">{formatFloat(planet.industry)}</dd>
</div>
{/if}
{#if planet.industryStockpile !== null}
<div class="field" data-testid="inspector-planet-field-industry_stockpile">
<dt>{i18n.t("game.inspector.planet.field.industry_stockpile")}</dt>
<dd>{formatNumber(planet.industryStockpile)}</dd>
<dd class="numeric">{formatFloat(planet.industryStockpile)}</dd>
</div>
{/if}
{#if planet.materialsStockpile !== null}
<div class="field" data-testid="inspector-planet-field-materials_stockpile">
<dt>{i18n.t("game.inspector.planet.field.materials_stockpile")}</dt>
<dd>{formatNumber(planet.materialsStockpile)}</dd>
<dd class="numeric">{formatFloat(planet.materialsStockpile)}</dd>
</div>
{/if}
@@ -314,7 +311,7 @@ field with five buttons.
{#if planet.freeIndustry !== null}
<div class="field" data-testid="inspector-planet-field-free_industry">
<dt>{i18n.t("game.inspector.planet.field.free_industry")}</dt>
<dd>{formatNumber(planet.freeIndustry)}</dd>
<dd class="numeric">{formatFloat(planet.freeIndustry)}</dd>
</div>
{/if}
</dl>
@@ -362,17 +359,20 @@ field with five buttons.
}
.field dt {
color: var(--color-text-muted);
font-size: 0.85rem;
font-size: 0.8rem;
}
.field dd {
margin: 0;
font-variant-numeric: tabular-nums;
font-size: 0.9rem;
font-size: 0.85rem;
}
.field dd.numeric {
font-family: var(--font-mono);
}
.hint {
margin: 0;
color: var(--color-text-muted);
font-size: 0.85rem;
font-size: 0.8rem;
}
.action {
align-self: flex-start;