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:
@@ -41,20 +41,20 @@ column set (matches `ReportPlanet` shape).
|
||||
<tr>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.number")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.name")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.coordinates")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.size")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.resources")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.population")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.industry")}</th>
|
||||
<th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.coordinates")}</th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.size")}</th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.resources")}</th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.population")}</th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.industry")}</th>
|
||||
<th class="numeric">
|
||||
{i18n.t("game.report.section.my_planets.column.industry_stockpile")}
|
||||
</th>
|
||||
<th>
|
||||
<th class="numeric">
|
||||
{i18n.t("game.report.section.my_planets.column.materials_stockpile")}
|
||||
</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.colonists")}</th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.colonists")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.production")}</th>
|
||||
<th>{i18n.t("game.report.section.my_planets.column.free_industry")}</th>
|
||||
<th class="numeric">{i18n.t("game.report.section.my_planets.column.free_industry")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -62,16 +62,16 @@ column set (matches `ReportPlanet` shape).
|
||||
<tr data-testid="my-planets-row" data-number={p.number}>
|
||||
<td>{p.number}</td>
|
||||
<td>{p.name}</td>
|
||||
<td>{formatFloat(p.x)}, {formatFloat(p.y)}</td>
|
||||
<td>{formatFloat(p.size ?? 0)}</td>
|
||||
<td>{formatFloat(p.resources ?? 0)}</td>
|
||||
<td>{formatFloat(p.population ?? 0)}</td>
|
||||
<td>{formatFloat(p.industry ?? 0)}</td>
|
||||
<td>{formatFloat(p.industryStockpile ?? 0)}</td>
|
||||
<td>{formatFloat(p.materialsStockpile ?? 0)}</td>
|
||||
<td>{formatFloat(p.colonists ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.x)}, {formatFloat(p.y)}</td>
|
||||
<td class="numeric">{formatFloat(p.size ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.resources ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.population ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.industry ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.industryStockpile ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.materialsStockpile ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.colonists ?? 0)}</td>
|
||||
<td>{p.production ?? "—"}</td>
|
||||
<td>{formatFloat(p.freeIndustry ?? 0)}</td>
|
||||
<td class="numeric">{formatFloat(p.freeIndustry ?? 0)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -94,7 +94,7 @@ column set (matches `ReportPlanet` shape).
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.grid th,
|
||||
.grid td {
|
||||
@@ -108,6 +108,11 @@ column set (matches `ReportPlanet` shape).
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user