fix(ui): calculator polish — smart input steps, unified tech/MAT lock idiom, tech floor, speed-lock ceiling fix
Tests · Go / test (push) Successful in 2m31s
Tests · UI / test (push) Waiting to run
Tests · Integration / integration (pull_request) Successful in 1m41s
Tests · Go / test (pull_request) Successful in 3m14s
Tests · UI / test (pull_request) Successful in 2m32s

- pkg/calc: DriveForSpeed treats restMass==0 as a valid ceiling-only
  case (every positive drive solves it), so locking the displayed
  speed of a D=1, W=A=S=C=0 ship is no longer a phantom "infeasible".
- ship-design-area: drive/weapons/shields/cargo inputs use a JS-driven
  smart step on ArrowUp/ArrowDown (0↔1 jump, otherwise ±0.1) and hide
  the native spinner so it cannot produce invalid (0, 1) values;
  armament keeps its native step 1.
- Tech and planet MAT cells follow the same lock idiom as goal-seek
  locks: open padlock (🔓) over the inherited value → click to open
  an input with a closed padlock (🔒). The padlock slot is always
  reserved, so the column width is stable.
- Tech overrides (design area and modernization target) are floored
  at the player's current tech on this turn — a lower value is
  flagged as invalid.
This commit is contained in:
Ilia Denisov
2026-05-26 14:30:43 +02:00
parent 793b709d8f
commit e9b904332e
11 changed files with 384 additions and 55 deletions
@@ -1,13 +1,17 @@
<!--
Reusable "Ship Class design area": the five design blocks (drive,
armament, weapons, shields, cargo) plus the four tech levels they are
built with. Each tech defaults to the player's current level and shows a
lock icon once overridden; clicking the lock resets it. A block claimed
by an active goal-seek lock renders read-only with its own lock marker.
The component is presentational — the parent owns the state and the
built with. Tech and MAT locks follow the same idiom as goal-seek
locks below the design area — by default the value renders as plain
text with an open padlock; clicking it overrides (input + closed
padlock). Reserved space for the padlock keeps the column width
stable as the lock state toggles. A block claimed by an active
goal-seek lock renders read-only with its own lock marker. The
component is presentational — the parent owns the state and the
calculator math — so the ship-group upgrade flow can reuse it later.
-->
<script lang="ts">
import { tick } from "svelte";
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
import {
shipClassFieldErrors,
@@ -37,6 +41,10 @@ calculator math — so the ship-group upgrade flow can reuse it later.
resolved: DesignBlocksState;
techs: TechState;
techOverridden: Record<TechKey, boolean>;
// Lower bound for the tech inputs: the player's current tech on
// this turn. A design cannot be built with tech below the player's
// own level, so we surface that as a per-field validation error.
techFloor: TechState;
computedInput?: ClaimedInput | null;
blocksReadonly?: boolean;
onTechInput: (key: TechKey) => void;
@@ -47,6 +55,7 @@ calculator math — so the ship-group upgrade flow can reuse it later.
resolved,
techs = $bindable(),
techOverridden,
techFloor,
computedInput = null,
blocksReadonly = false,
onTechInput,
@@ -73,7 +82,38 @@ calculator math — so the ship-group upgrade flow can reuse it later.
return reason === undefined ? "" : i18n.t(VALUE_REASON_KEY[reason]);
}
function techError(key: TechKey): string {
return techs[key] < 0 ? i18n.t("game.calculator.invalid.tech_value") : "";
const value = techs[key];
if (value < 0) return i18n.t("game.calculator.invalid.tech_value");
if (value < techFloor[key]) {
return i18n.t("game.calculator.invalid.tech_below_current");
}
return "";
}
// Smart step on the four ship-class blocks (drive, weapons, shields,
// cargo): values must be 0 or ≥ 1 per `pkg/calc/validator.go`, so the
// native 0.01 step would produce invalid intermediates like 0.01.
// Up: 0 jumps straight to 1; otherwise +0.1. Down: 1 collapses to 0;
// otherwise 0.1 down to 1, clamped at 0. Armament keeps native step 1.
function bumpBlock(value: number, dir: 1 | -1): number {
if (dir === 1) {
if (value < 1) return 1;
return Math.round((value + 0.1) * 10) / 10;
}
if (value <= 1) return 0;
return Math.round((value - 0.1) * 10) / 10;
}
function onBlockKey(
event: KeyboardEvent,
key: keyof DesignBlocksState,
): void {
if (event.key === "ArrowUp") {
event.preventDefault();
blocks[key] = bumpBlock(blocks[key], 1);
} else if (event.key === "ArrowDown") {
event.preventDefault();
blocks[key] = bumpBlock(blocks[key], -1);
}
}
const BLOCK_ROWS: {
@@ -81,13 +121,23 @@ calculator math — so the ship-group upgrade flow can reuse it later.
label: () => string;
step: string;
tech: TechKey | null;
smartStep: boolean;
}[] = [
{ key: "drive", label: () => i18n.t("game.calculator.field.drive"), step: "0.01", tech: "drive" },
{ key: "armament", label: () => i18n.t("game.calculator.field.armament"), step: "1", tech: null },
{ key: "weapons", label: () => i18n.t("game.calculator.field.weapons"), step: "0.01", tech: "weapons" },
{ key: "shields", label: () => i18n.t("game.calculator.field.shields"), step: "0.01", tech: "shields" },
{ key: "cargo", label: () => i18n.t("game.calculator.field.cargo"), step: "0.01", tech: "cargo" },
{ key: "drive", label: () => i18n.t("game.calculator.field.drive"), step: "0.1", tech: "drive", smartStep: true },
{ key: "armament", label: () => i18n.t("game.calculator.field.armament"), step: "1", tech: null, smartStep: false },
{ key: "weapons", label: () => i18n.t("game.calculator.field.weapons"), step: "0.1", tech: "weapons", smartStep: true },
{ key: "shields", label: () => i18n.t("game.calculator.field.shields"), step: "0.1", tech: "shields", smartStep: true },
{ key: "cargo", label: () => i18n.t("game.calculator.field.cargo"), step: "0.1", tech: "cargo", smartStep: true },
];
const techInputEls: Partial<Record<TechKey, HTMLInputElement>> = {};
async function activateTechOverride(key: TechKey): Promise<void> {
onTechInput(key);
await tick();
techInputEls[key]?.focus();
techInputEls[key]?.select();
}
</script>
<div class="design" data-testid="calculator-design-area">
@@ -103,6 +153,7 @@ calculator math — so the ship-group upgrade flow can reuse it later.
{#if isComputed}
<input
class="ship"
class:smart-step={row.smartStep}
type="number"
step={row.step}
readonly
@@ -114,6 +165,7 @@ calculator math — so the ship-group upgrade flow can reuse it later.
{:else}
<input
class="ship"
class:smart-step={row.smartStep}
type="number"
step={row.step}
min="0"
@@ -122,26 +174,29 @@ calculator math — so the ship-group upgrade flow can reuse it later.
aria-invalid={blockError(row.key) !== "" ? "true" : "false"}
title={blockError(row.key)}
data-testid={`calculator-block-${row.key}`}
onkeydown={row.smartStep
? (e) => onBlockKey(e, row.key)
: null}
/>
{/if}
{#if row.tech !== null}
{@const techKey = row.tech}
<span class="tech-cell">
<input
class="tech"
type="number"
step="0.001"
min="0"
bind:value={techs[techKey]}
oninput={() => onTechInput(techKey)}
aria-invalid={techError(techKey) !== "" ? "true" : "false"}
title={techError(techKey)}
data-testid={`calculator-tech-${techKey}`}
/>
{#if techOverridden[techKey]}
<input
bind:this={techInputEls[techKey]}
class="tech"
type="number"
step="0.001"
min={techFloor[techKey]}
bind:value={techs[techKey]}
aria-invalid={techError(techKey) !== "" ? "true" : "false"}
title={techError(techKey)}
data-testid={`calculator-tech-${techKey}`}
/>
<button
type="button"
class="lock"
class="lock active"
title={i18n.t("game.calculator.tech.reset")}
aria-label={i18n.t("game.calculator.tech.reset")}
data-testid={`calculator-tech-reset-${techKey}`}
@@ -149,6 +204,23 @@ calculator math — so the ship-group upgrade flow can reuse it later.
>
🔒
</button>
{:else}
<span
class="tech-val"
data-testid={`calculator-tech-value-${techKey}`}
>
{techs[techKey]}
</span>
<button
type="button"
class="lock"
title={i18n.t("game.calculator.tech.override")}
aria-label={i18n.t("game.calculator.tech.override")}
data-testid={`calculator-tech-override-${techKey}`}
onclick={() => void activateTechOverride(techKey)}
>
🔓
</button>
{/if}
</span>
{:else}
@@ -193,6 +265,18 @@ calculator math — so the ship-group upgrade flow can reuse it later.
border-radius: 3px;
font-variant-numeric: tabular-nums;
}
/* Drive/weapons/shields/cargo use the JS-driven smart step (0→1 jump
then 0.1 increments) for keyboard arrows; hide the native spinner
on those inputs so it cannot produce invalid 0.01 intermediates. */
input.smart-step::-webkit-inner-spin-button,
input.smart-step::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.smart-step {
-moz-appearance: textfield;
appearance: textfield;
}
input[data-computed="true"],
input[readonly] {
color: var(--color-accent);
@@ -206,6 +290,14 @@ calculator math — so the ship-group upgrade flow can reuse it later.
align-items: center;
gap: 0.2rem;
}
.tech-val {
flex: 1;
min-width: 0;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
text-align: right;
padding: 0.2rem 0.35rem;
}
.lock {
flex: none;
padding: 0;
@@ -214,5 +306,10 @@ calculator math — so the ship-group upgrade flow can reuse it later.
background: transparent;
border: 0;
cursor: pointer;
opacity: 0.5;
}
.lock.active,
.lock:hover {
opacity: 1;
}
</style>