fix(ui): calculator polish — smart input steps, unified tech/MAT lock idiom, tech floor, speed-lock ceiling fix
- 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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user