fix(ui): F8-08 unified number format — mono, fixed 3-decimal, no separators
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
@@ -20,6 +20,7 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
ShipClassSummary,
|
||||
} from "../../api/game-state";
|
||||
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
|
||||
import { formatFloat } from "$lib/util/number-format";
|
||||
import Actions from "./ship-group/actions.svelte";
|
||||
|
||||
export type ShipGroupSelection =
|
||||
@@ -82,10 +83,6 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
return planet.name;
|
||||
}
|
||||
|
||||
function formatNumber(value: number): string {
|
||||
return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function cargoLabel(cargo: "NONE" | "COL" | "CAP" | "MAT" | "EMP"): string {
|
||||
if (cargo === "NONE") {
|
||||
return i18n.t("game.inspector.ship_group.cargo.none");
|
||||
@@ -132,27 +129,27 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
<dl class="fields">
|
||||
<div class="field" data-testid="inspector-ship-group-field-count">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.count")}</dt>
|
||||
<dd>{g.count}</dd>
|
||||
<dd class="numeric">{g.count}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-drive">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.drive")}</dt>
|
||||
<dd>{formatNumber(g.tech.drive)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.tech.drive)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-weapons">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.weapons")}</dt>
|
||||
<dd>{formatNumber(g.tech.weapons)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.tech.weapons)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-shields">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.shields")}</dt>
|
||||
<dd>{formatNumber(g.tech.shields)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.tech.shields)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-cargo-tech">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.cargo_tech")}</dt>
|
||||
<dd>{formatNumber(g.tech.cargo)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.tech.cargo)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-mass">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.mass")}</dt>
|
||||
<dd>{formatNumber(g.mass)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.mass)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-cargo-load">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.cargo_load")}</dt>
|
||||
@@ -160,7 +157,7 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
{#if g.cargo === "NONE"}
|
||||
{cargoLabel(g.cargo)}
|
||||
{:else}
|
||||
{cargoLabel(g.cargo)} × {formatNumber(g.load)}
|
||||
{cargoLabel(g.cargo)} × <span class="numeric">{formatFloat(g.load)}</span>
|
||||
{/if}
|
||||
</dd>
|
||||
</div>
|
||||
@@ -181,7 +178,7 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-distance">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.distance")}</dt>
|
||||
<dd>{formatNumber(g.range!)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.range!)}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -212,23 +209,25 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-distance">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.distance")}</dt>
|
||||
<dd>{formatNumber(g.distance)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.distance)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-speed">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.speed")}</dt>
|
||||
<dd>{formatNumber(g.speed)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.speed)}</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-eta">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.eta")}</dt>
|
||||
<dd>
|
||||
{eta === null
|
||||
? i18n.t("game.designer.ship_class.preview.unavailable")
|
||||
: eta}
|
||||
{#if eta === null}
|
||||
{i18n.t("game.designer.ship_class.preview.unavailable")}
|
||||
{:else}
|
||||
<span class="numeric">{eta}</span>
|
||||
{/if}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="field" data-testid="inspector-ship-group-field-mass">
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.mass")}</dt>
|
||||
<dd>{formatNumber(g.mass)}</dd>
|
||||
<dd class="numeric">{formatFloat(g.mass)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{:else}
|
||||
@@ -238,8 +237,8 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
data-testid="inspector-ship-group-field-coordinates"
|
||||
>
|
||||
<dt>{i18n.t("game.inspector.ship_group.field.coordinates")}</dt>
|
||||
<dd>
|
||||
({formatNumber(selection.group.x)}, {formatNumber(selection.group.y)})
|
||||
<dd class="numeric">
|
||||
{formatFloat(selection.group.x)}, {formatFloat(selection.group.y)}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
@@ -285,16 +284,20 @@ variant — for Phase 19 the inspector is intentionally read-only.
|
||||
}
|
||||
.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,
|
||||
.field dd .numeric {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user