Compare commits

..

1 Commits

Author SHA1 Message Date
Ilia Denisov 5271f2b1ec feat(ui): lobby site-style sidebar + profile screen (#47)
Tests · UI / test (push) Waiting to run
Tests · UI / test (pull_request) Successful in 2m30s
- Wrap lobby and profile in a shared `lobby-shell.svelte` chrome:
  page-list sidebar (Overview/Profile) and a top "Player-xxxx"
  identity strip mirroring the project site's monospace look.
- Strip the legacy `lobby.title`, device-session-id `<code>`, and
  `lobby.greeting` paragraph; the identity strip both names the user
  and opens the profile editor.
- Add a top-level `profile` AppScreen with a three-field form
  (`display_name`, `preferred_language`, `time_zone`) backed by a new
  `src/api/account.ts` wrapper around `user.account.get`,
  `user.profile.update`, and `user.settings.update`. Saving switches
  the active i18n locale in-place when the new preferred language is
  one the UI ships translations for.
- Update e2e fixture + auth-flow / lobby-flow specs to use the new
  `lobby-account-name` testid and wait for the loaded identity before
  releasing pending `SubscribeEvents` (webkit revocation race). New
  `profile-screen.spec.ts` covers navigation, edit-save, and cancel.
- Sync `ui/docs/lobby.md` and `ui/docs/navigation.md` to the new
  layout.

Closes #47
2026-05-26 13:42:10 +02:00
20 changed files with 210 additions and 1455 deletions
+4 -17
View File
@@ -22,25 +22,12 @@ func WeaponsForAttack(targetAttack, weaponsTech float64) (float64, bool) {
// DriveForSpeed returns the drive block that yields targetSpeed for a // DriveForSpeed returns the drive block that yields targetSpeed for a
// ship whose mass excluding the drive block is restMass, at drive tech // ship whose mass excluding the drive block is restMass, at drive tech
// level driveTech, inverting [Speed] composed with [DriveEffective]. // level driveTech, inverting [Speed] composed with [DriveEffective].
// With a positive restMass the speed approaches but never reaches the // Speed approaches but never reaches the stripped-hull ceiling
// stripped-hull ceiling 20*driveTech, so a target at or above the // 20*driveTech, so a target at or above the ceiling (or a non-positive
// ceiling is infeasible. With restMass==0 the drive block carries no // target or tech level) is infeasible.
// other mass: every positive drive yields exactly the ceiling speed, so
// the ceiling target is the only feasible one and any positive drive
// (canonically 1) solves it. Non-positive targetSpeed or driveTech are
// always infeasible.
func DriveForSpeed(targetSpeed, driveTech, restMass float64) (float64, bool) { func DriveForSpeed(targetSpeed, driveTech, restMass float64) (float64, bool) {
if driveTech <= 0 || targetSpeed <= 0 {
return 0, false
}
ceiling := 20 * driveTech ceiling := 20 * driveTech
if restMass <= 0 { if driveTech <= 0 || targetSpeed <= 0 || targetSpeed >= ceiling {
if targetSpeed != ceiling {
return 0, false
}
return 1, true
}
if targetSpeed >= ceiling {
return 0, false return 0, false
} }
return targetSpeed * restMass / (ceiling - targetSpeed), true return targetSpeed * restMass / (ceiling - targetSpeed), true
+1 -19
View File
@@ -24,30 +24,12 @@ func TestDriveForSpeed(t *testing.T) {
if !ok || math.Abs(got-drive) > 1e-9 { if !ok || math.Abs(got-drive) > 1e-9 {
t.Errorf("DriveForSpeed round-trip = %v (ok=%v), want %v", got, ok, drive) t.Errorf("DriveForSpeed round-trip = %v (ok=%v), want %v", got, ok, drive)
} }
// With a positive restMass speed can never reach 20*driveTech. // Speed can never reach the stripped-hull ceiling 20*driveTech.
if _, ok := calc.DriveForSpeed(20*driveTech, driveTech, restMass); ok { if _, ok := calc.DriveForSpeed(20*driveTech, driveTech, restMass); ok {
t.Error("DriveForSpeed at the speed ceiling should be infeasible") t.Error("DriveForSpeed at the speed ceiling should be infeasible")
} }
} }
func TestDriveForSpeedZeroRest(t *testing.T) {
// With restMass==0 the only achievable speed is the stripped-hull
// ceiling 20*driveTech; any positive drive reaches it. Off-ceiling
// targets are infeasible.
const driveTech = 1.5
ceiling := 20 * driveTech
got, ok := calc.DriveForSpeed(ceiling, driveTech, 0)
if !ok || got <= 0 {
t.Errorf("DriveForSpeed(ceiling, _, 0) = %v (ok=%v), want positive", got, ok)
}
if _, ok := calc.DriveForSpeed(ceiling/2, driveTech, 0); ok {
t.Error("DriveForSpeed(below ceiling, _, 0) should be infeasible")
}
if _, ok := calc.DriveForSpeed(ceiling+1, driveTech, 0); ok {
t.Error("DriveForSpeed(above ceiling, _, 0) should be infeasible")
}
}
func TestShieldsForDefence(t *testing.T) { func TestShieldsForDefence(t *testing.T) {
const shields, shieldsTech, restMass = 5.75, 1.0, 40.0 const shields, shieldsTech, restMass = 5.75, 1.0, 40.0
defence := calc.EffectiveDefence(shields, shieldsTech, shields+restMass) defence := calc.EffectiveDefence(shields, shieldsTech, shields+restMass)
+29 -86
View File
@@ -24,60 +24,28 @@ in as a per-ship result rather than a separate mode.
1. **Ship Class design area** — five blocks (drive, armament, weapons, 1. **Ship Class design area** — five blocks (drive, armament, weapons,
shields, cargo) and four tech levels (drive, weapons, shields, shields, cargo) and four tech levels (drive, weapons, shields,
cargo). Tech defaults to the player's current tech: the cell renders cargo). Tech defaults to the player's current tech and shows a lock
the inherited number with an open padlock; clicking the open lock icon once overridden; clicking it resets to the default.
activates an input (closed padlock), where the player may type an
override at or above their current tech. Clicking the closed
padlock resets to the default. The padlock slot is always reserved,
so the column width does not shift as the lock state toggles. The
inherited tech value reads through the same 3-decimal `Ceil3`
formatter the report uses, so the column lines up with derived
values. **Every numeric input in the calculator hides the native
spinner and drives stepping through ArrowUp / ArrowDown.** This keeps
the column widths stable, makes the inputs read consistently, and
gives each row a step that matches its purpose. The four ship-class
blocks (drive, weapons, shields, cargo) use a smart step that
respects the engine value rule (`0` or `≥ 1`): ArrowUp from 0 jumps
straight to 1, otherwise +0.1; ArrowDown from 1 collapses to 0,
otherwise 0.1, never producing an invalid value in `(0, 1)`.
Armament steps ±1 (clamped at 0). Tech, planet MAT, custom load,
lock value, and modernization target tech each step by their natural
grain (±0.001 for tech and lock values, ±0.01 for MAT and load).
2. **Calculator area** — derived results: empty/loaded mass, empty/ 2. **Calculator area** — derived results: empty/loaded mass, empty/
loaded speed, attack, defence, bombing (per ship), cargo capacity. loaded speed, attack, defence, bombing (per ship), cargo capacity.
A load toggle (empty / full / custom) sets the cargo load (in cargo A load toggle (empty / full / custom) sets the cargo load (in cargo
units) that the loaded-column results use. At **full** the toggle units) that the loaded-column results use. At **full** the toggle
shows the ship's cargo capacity; a **custom** load over that capacity shows the ship's cargo capacity; a **custom** load over that capacity
is flagged as an error. With a zero cargo block there is no hold, so is flagged as an error. With a zero cargo block there is no hold, so
the load is pinned to empty and the toggle is disabled. The bombing the load is pinned to empty and the toggle is disabled.
and cargo-capacity rows have no goal-seek lock, but they still
reserve a hidden lock-slot placeholder so the value column stays
vertically aligned with the lockable rows above.
3. **Planet area** — when an own planet is selected on the map, shows 3. **Planet area** — when an own planet is selected on the map, shows
its MAT (overridable) and the single-turn build rate (ships per turn, its MAT (overridable) and the single-turn build rate (ships per turn,
turns per ship). The MAT follows the same lock idiom as the tech turns per ship). The realistic multi-turn forecast with CAP/COL
cells: the planet number renders with an open padlock, clicking supply is planned (see ../ROADMAP.md).
opens an input with a closed padlock, and the closed padlock resets
to the planet value. The MAT label reads through the same 3-decimal
`Ceil3` formatter, matching the rest of the calculator's label
values. The realistic multi-turn forecast with CAP/COL supply is
planned (see ../ROADMAP.md).
## Locks and goal-seek ## Locks and goal-seek
Two distinct lock semantics share one padlock affordance. Both follow Two distinct lock semantics share one icon (a closed padlock; it only
the same idiom — an open padlock (🔓) means *value is inherited / appears once a value is pinned, click to release):
derived, click to override*; a closed padlock (🔒) means *value is
pinned by the player, click to reset*:
- **Override locks** on inputs that have a default — the four techs and - **Override locks** on inputs that have a default — the four techs and
the planet MAT. By default the cell shows the inherited number plus the planet MAT. Editing one overrides the default; the lock resets it.
an open padlock; clicking it switches to an input plus a closed Any number may be overridden at once.
padlock for typing the override. Closing (clicking the closed
padlock) resets to the default. Any number may be overridden at once.
Tech overrides are floored at the player's current tech on this
turn — a lower value is flagged as invalid. The same floor applies
to the modernization target tech.
- **Goal-seek locks** on derived results. Pinning a result back-solves - **Goal-seek locks** on derived results. Pinning a result back-solves
the single input it claims, which then renders read-only (computed): the single input it claims, which then renders read-only (computed):
@@ -92,19 +60,12 @@ pinned by the player, click to reset*:
Only **one** result may be locked at a time (the others' lock Only **one** result may be locked at a time (the others' lock
affordances disable with a tooltip). An unreachable target — e.g. a affordances disable with a tooltip). An unreachable target — e.g. a
speed above the stripped-hull ceiling `20 × driveTech`, or a solved speed at or above the stripped-hull ceiling `20 × driveTech`, or a
block that fails the value rules (a DWSC value in the `(0, 1)` gap) solved block that fails the value rules — leaves the locked cell in a
— leaves the locked cell in a red error state and does not apply. red error state and does not apply. Inverse solving lives in
When that happens the claimed block is **not** back-solved into the `pkg/calc/solve.go`; the bisection for defence → shields is the only
invalid range; the design preview keeps reading the user's typed non-analytic case. Locking a speed is disabled when the drive block is
values, so the row never silently shows a sub-1 block. Inverse zero (a deliberately immobile ship has no speed to back-solve).
solving lives in `pkg/calc/solve.go`; the bisection for defence →
shields is the only non-analytic case. Locking a speed is disabled
when the drive block is zero (a deliberately immobile ship has no
speed to back-solve). With the drive block as the only non-zero mass
the displayed speed equals the ceiling exactly (every positive drive
gives the same speed), so the solver accepts that ceiling target as
a feasible lock and any positive drive solves it.
## Validation and display ## Validation and display
@@ -114,43 +75,25 @@ negative, the five blocks follow the engine value rules
(`pkg/calc/validator.go`, surfaced per-field by (`pkg/calc/validator.go`, surfaced per-field by
`shipClassFieldErrors`), and a custom load may not exceed cargo capacity. `shipClassFieldErrors`), and a custom load may not exceed cargo capacity.
Every displayed number — the derived results, the inherited tech / Every displayed number — the derived results and the goal-seek
planet MAT labels, and the goal-seek back-solved input — is rounded back-solved input — is rounded **up** to three decimals through the
**up** to three decimals through the shared `pkg/calc/number.go.Ceil3` shared `pkg/calc/number.go.Ceil3` (bridged as `core.ceil3`), so a value
(bridged as `core.ceil3`) and always padded to three decimals so the is never shown lower than it is (a speed of 5.0003 reads 5.001). The
column reads the same on integers and fractions alike (a speed of 20 engine keeps its own round-to-nearest `util.Fixed*`; `Ceil3` is a
shows as `20.000`, of 5.0003 as `5.001`). Labels and inputs use the display-only helper that lives in `pkg/calc` so the UI and Go share one
monospace stack from the design tokens (`--font-mono`) with implementation.
right-aligned, tabular numerals so values line up vertically across
rows. To match the display rule, every number input also refuses a
fourth decimal as the user types: typing `1.2345` clamps the input to
`1.234` on input. The engine keeps its own round-to-nearest
`util.Fixed*`; `Ceil3` is a display-only helper that lives in `pkg/calc`
so the UI and Go share one implementation.
## Create / load ## Create / load / delete
The name field is a combobox over the player's existing classes. Picking The name field is a combobox over the player's existing classes. Picking
an existing class loads it as a template (so you can tweak and Create a an existing class loads it as a template (so you can tweak and Create a
new one); Create is disabled while the name is invalid or duplicate new one); Create is disabled while the name is invalid or duplicate
(reusing `lib/util/ship-class-validation.ts`). Create reuses the existing (reusing `lib/util/ship-class-validation.ts`). When a saved class is
`createShipClass` order-draft flow, so the optimistic overlay reflects loaded, a Delete affordance appears. Create / Delete reuse the existing
the change immediately. Ship classes are immutable after creation (per `createShipClass` / `removeShipClass` order-draft flow, so the optimistic
`game/rules.txt`), so there is no edit — only Create-new. Delete-class overlay reflects the change immediately. Ship classes are immutable after
lives in the ship-classes table (`lib/active-view/table-ship-classes.svelte`), creation (per `game/rules.txt`), so there is no edit — only Create-new
not the calculator. and Delete.
Selecting a class from the dropdown loads it **immediately**, the
moment the option is clicked. (Native `change` only fires on blur in
Firefox; switching the load trigger to `input` makes the load
synchronous everywhere, since the `InputEvent.inputType` flags a
datalist replacement as `"insertReplacementText"` in Chromium / WebKit
or `undefined` in Firefox — keyboard typing always carries a typing
`inputType`.) If the live blocks differ from the previously loaded
class (or, when nothing is loaded, from the empty defaults), the
calculator first asks `Discard unsaved changes and load class «…»?`
through a `window.confirm`; declining reverts the name field and
leaves the current blocks untouched.
## Reach circles ## Reach circles
+14 -33
View File
@@ -16,23 +16,11 @@ the right-hand column. The shell uses `var(--font-mono)` so the
post-login pages adopt the "nerdy" type stack that the public site post-login pages adopt the "nerdy" type stack that the public site
already uses. already uses.
The identity strip reads the caller's account from The identity strip renders the caller's `display_name` (falling back
`lib/account-store.svelte.ts` — a session-wide cache that fetches to the immutable `user_name` handle, then to a loading placeholder
`user.account.get` once on first access and is written through after while `user.account.get` resolves) as a `data-testid="lobby-account-name"`
every Profile save. Both `lobby-screen.svelte` and button. Clicking it switches the top-level screen to `profile`
`profile-screen.svelte` populate the same cache through (`appScreen.go("profile")`); the e2e suites use that testid as their
`account.ensure(client)`, so switching Overview ⇄ Profile never
re-issues `user.account.get` and the strip never flashes the
`lobby.account_loading` placeholder mid-navigation. The cache is
cleared by `session.signOut("user")` / `signOut("revoked")` so a
different user signing in on the same browser does not briefly see
the previous identity.
The strip falls back to `display_name` → immutable `user_name`
`lobby.account_loading` while the first `ensure(...)` resolves. It
renders as a `data-testid="lobby-account-name"` button; clicking it
switches the top-level screen to `profile`
(`appScreen.go("profile")`). The e2e suites use that testid as their
lobby-loaded signal. The logout button sits next to it lobby-loaded signal. The logout button sits next to it
(`session.signOut("user")`). (`session.signOut("user")`).
@@ -61,29 +49,22 @@ same as the create screen — pushing a fresh history entry on entry,
falling back to lobby on Back/Forward (see falling back to lobby on Back/Forward (see
[`navigation.md`](navigation.md)). [`navigation.md`](navigation.md)).
On mount it reads the caller's account through `account.ensure(...)` On mount it issues `user.account.get` through `src/api/account.ts`
(see [Shell](#shell)) — the first visit issues `user.account.get`, and renders an identity read-out (immutable `user_name`, `email`)
subsequent visits resolve from the session-wide cache without a plus a three-field form:
gateway round-trip. The form renders an identity read-out (immutable
`user_name`, `email`) plus three editable fields:
| Field | Endpoint | Notes | | Field | Endpoint | Notes |
| --------------------- | --------------------- | -------------------------------------------------------------- | | --------------------- | --------------------- | -------------------------------------------------------------- |
| `display_name` | `user.profile.update` | Trimmed; empty value clears the stored name (backend PATCH semantics). | | `display_name` | `user.profile.update` | Trimmed; empty value clears the stored name (backend PATCH semantics). |
| `preferred_language` | `user.settings.update`| `<select>` over `SUPPORTED_LOCALES`; if the stored value is unsupported the option is preserved verbatim so a round-trip save does not silently switch it. | | `preferred_language` | `user.settings.update`| `<select>` over `SUPPORTED_LOCALES`; if the stored value is unsupported the option is preserved verbatim so a round-trip save does not silently switch it. |
| `time_zone` | `user.settings.update`| `<select>` of every IANA zone the browser knows (`Intl.supportedValuesOf("timeZone")`), grouped by leading slash segment (Africa / America / …; singletons like `UTC` collapse into a trailing "Other" optgroup). When the form opens with no stored zone, the picker is pre-selected to `Intl.DateTimeFormat().resolvedOptions().timeZone`. A stored value the runtime no longer advertises is added as an extra "Other" entry so the round-trip never silently drops it. Browsers that lack `supportedValuesOf` fall back to a free-text input; the backend validates with `time.LoadLocation` in every shape. | | `time_zone` | `user.settings.update`| Free-text IANA name. Placeholder shows the browser's current zone; backend validates with `time.LoadLocation`. |
Save fires `user.profile.update` and/or `user.settings.update` Save fires `user.profile.update` and/or `user.settings.update`
conditionally on which fields actually changed, then **stays on the conditionally on which fields actually changed, then returns to the
profile** and surfaces a transient `profile-saved-notice` line lobby (`appScreen.go("lobby")`). When the saved
(`data-testid="profile-saved-notice"`). Editing any field clears the `preferred_language` is one the UI also ships translations for, the
notice. Only the explicit `cancel` button navigates back to the lobby active i18n locale switches in-place so the rest of the session
(`appScreen.go("lobby")`). When the saved `preferred_language` is one matches the new preference.
the UI also ships translations for, the active i18n locale switches
in-place so the rest of the session matches the new preference. The
write-through is also pushed into the shared `account` store so the
shell identity strip picks up the new `display_name` without a second
`user.account.get`.
`GameSummary` carries a `current_turn` field that the lobby UI does `GameSummary` carries a `current_turn` field that the lobby UI does
not display directly — the in-game shell reads it from the same not display directly — the in-game shell reads it from the same
@@ -1,76 +0,0 @@
// `AccountStore` is the session-wide cache for the caller's
// `user.account.get` aggregate. The lobby shell and every post-login
// screen read the identity (display name, immutable user_name, time
// zone, …) from the same rune, so navigating between Overview and
// Profile does not refetch and does not flash the
// `lobby.account_loading` placeholder.
//
// `ensure(client)` fetches once on first call, dedupes concurrent
// callers onto a single in-flight promise, and resolves immediately
// from the cache thereafter. `set(account)` is the write-through
// path used by Profile after `user.profile.update` /
// `user.settings.update` succeeds — both the shell and the screen
// pick up the change without an extra round-trip. `clear()` resets
// the cache on logout so a different user signing in on the same
// browser does not briefly see the previous identity.
//
// The store is intentionally narrow: it caches one struct, never
// retries on failure (the caller decides), and exposes no error
// state of its own. Callers that need a tighter error surface (the
// Profile form) catch the rejection from `ensure(client)` directly.
import type { GalaxyClient } from "../api/galaxy-client";
import { getMyAccount, type Account } from "../api/account";
class AccountStore {
current: Account | null = $state(null);
#inFlight: Promise<Account> | null = null;
/**
* ensure returns the cached `Account` when present, otherwise issues
* `user.account.get` through the supplied client and caches the
* result. Concurrent callers during the first fetch share the same
* in-flight promise so the gateway only sees one request per
* session.
*/
ensure(client: GalaxyClient): Promise<Account> {
if (this.current !== null) {
return Promise.resolve(this.current);
}
if (this.#inFlight !== null) {
return this.#inFlight;
}
const pending = getMyAccount(client)
.then((account) => {
this.current = account;
return account;
})
.finally(() => {
this.#inFlight = null;
});
this.#inFlight = pending;
return pending;
}
/**
* set replaces the cached `Account` with the supplied value. Used
* by the Profile screen after a successful save so both the form
* and the shell identity strip pick up the new fields without a
* second round-trip.
*/
set(next: Account): void {
this.current = next;
}
/**
* clear resets the cache. Called on logout so a different user
* signing in on the same browser does not briefly see the
* previous identity through the rune.
*/
clear(): void {
this.current = null;
this.#inFlight = null;
}
}
export const account = new AccountStore();
+2 -24
View File
@@ -92,18 +92,6 @@ export interface CalculatorResult {
outputs: CalculatorOutputs | null; outputs: CalculatorOutputs | null;
} }
// isClaimedBlockValid checks that a solver result, before we apply it
// to the resolved blocks, satisfies the same per-field rules the live
// validator enforces on user-typed values (`pkg/calc/validator.go` /
// `lib/util/ship-class-validation`). The four claimable blocks all
// share the DWSC rule, so a single predicate suffices. Used to flag
// a goal-seek target as infeasible when the only block that would
// reach it falls in the (0, 1) gap.
function isClaimedBlockValid(solved: number): boolean {
if (!Number.isFinite(solved)) return false;
return solved === 0 || solved >= 1;
}
function resolveLoad( function resolveLoad(
mode: LoadMode, mode: LoadMode,
customLoad: number, customLoad: number,
@@ -237,18 +225,8 @@ export function computeCalculator(
if (solved === null) { if (solved === null) {
lockFeasible = false; lockFeasible = false;
} else { } else {
// The solver may produce a value that is mathematically blocks[claimed] = solved;
// correct yet rejected by the ship-class value rules — computedInput = claimed;
// most commonly a DWSC block in the (0, 1) gap. Surface
// that as an infeasible lock so the lock input flips
// red and the outputs are suppressed, instead of
// silently showing an invalid design.
if (!isClaimedBlockValid(solved)) {
lockFeasible = false;
} else {
blocks[claimed] = solved;
computedInput = claimed;
}
} }
} }
} }
@@ -1,17 +1,13 @@
<!-- <!--
Reusable "Ship Class design area": the five design blocks (drive, Reusable "Ship Class design area": the five design blocks (drive,
armament, weapons, shields, cargo) plus the four tech levels they are armament, weapons, shields, cargo) plus the four tech levels they are
built with. Tech and MAT locks follow the same idiom as goal-seek built with. Each tech defaults to the player's current level and shows a
locks below the design area — by default the value renders as plain lock icon once overridden; clicking the lock resets it. A block claimed
text with an open padlock; clicking it overrides (input + closed by an active goal-seek lock renders read-only with its own lock marker.
padlock). Reserved space for the padlock keeps the column width The component is presentational — the parent owns the state and the
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. calculator math — so the ship-group upgrade flow can reuse it later.
--> -->
<script lang="ts"> <script lang="ts">
import { tick } from "svelte";
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte"; import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
import { import {
shipClassFieldErrors, shipClassFieldErrors,
@@ -41,17 +37,8 @@ calculator math — so the ship-group upgrade flow can reuse it later.
resolved: DesignBlocksState; resolved: DesignBlocksState;
techs: TechState; techs: TechState;
techOverridden: Record<TechKey, boolean>; 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; computedInput?: ClaimedInput | null;
blocksReadonly?: boolean; blocksReadonly?: boolean;
// Formatter applied to the read-only tech value and to the
// resolved (goal-seek) ship-block value. Same `fmt` as the
// rest of the calculator, passed in so the design area stays
// presentational and the parent owns the rounding policy.
formatNumber: (value: number) => string;
onTechInput: (key: TechKey) => void; onTechInput: (key: TechKey) => void;
onResetTech: (key: TechKey) => void; onResetTech: (key: TechKey) => void;
}; };
@@ -60,10 +47,8 @@ calculator math — so the ship-group upgrade flow can reuse it later.
resolved, resolved,
techs = $bindable(), techs = $bindable(),
techOverridden, techOverridden,
techFloor,
computedInput = null, computedInput = null,
blocksReadonly = false, blocksReadonly = false,
formatNumber,
onTechInput, onTechInput,
onResetTech, onResetTech,
}: Props = $props(); }: Props = $props();
@@ -88,93 +73,21 @@ calculator math — so the ship-group upgrade flow can reuse it later.
return reason === undefined ? "" : i18n.t(VALUE_REASON_KEY[reason]); return reason === undefined ? "" : i18n.t(VALUE_REASON_KEY[reason]);
} }
function techError(key: TechKey): string { function techError(key: TechKey): string {
const value = techs[key]; return techs[key] < 0 ? i18n.t("game.calculator.invalid.tech_value") : "";
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 uses a plain
// integer step (±1, clamped at 0) so it follows the same
// JS-driven idiom and we can hide the native spinner uniformly.
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 bumpArmament(value: number, dir: 1 | -1): number {
const next = Math.trunc(value) + dir;
return next < 0 ? 0 : next;
}
function onBlockKey(
event: KeyboardEvent,
key: keyof DesignBlocksState,
smart: boolean,
): void {
const dir = event.key === "ArrowUp" ? 1 : event.key === "ArrowDown" ? -1 : 0;
if (dir === 0) return;
event.preventDefault();
blocks[key] = smart
? bumpBlock(blocks[key], dir)
: bumpArmament(blocks[key], dir);
}
// Tech / modernization-target inputs all use the same ±0.001 step
// with a per-row floor; lifted into a helper so the parent can
// reuse it (modernization area in `calculator-tab`).
function bumpTech(event: KeyboardEvent, key: TechKey): void {
const dir = event.key === "ArrowUp" ? 1 : event.key === "ArrowDown" ? -1 : 0;
if (dir === 0) return;
event.preventDefault();
const current = techs[key];
const next = Math.round((current + dir * 0.001) * 1000) / 1000;
const floor = techFloor[key];
techs[key] = next < floor ? floor : next;
}
// Refuse a fourth decimal as typing happens: keeps the calculator
// from ever displaying a >3-decimal fraction the user could not
// have intended (the calculator math is `Ceil3`-rounded for display
// anyway). Pairs with `bind:value` — `apply` overwrites the bound
// state when Svelte's own bind handler has already read the
// over-precise number.
function capDecimals(event: Event, apply: (next: number) => void): void {
const el = event.currentTarget as HTMLInputElement;
const txt = el.value;
const dot = txt.indexOf(".");
if (dot < 0 || txt.length - dot - 1 <= 3) return;
el.value = txt.slice(0, dot + 4);
apply(el.valueAsNumber);
} }
const BLOCK_ROWS: { const BLOCK_ROWS: {
key: keyof DesignBlocksState; key: keyof DesignBlocksState;
label: () => string; label: () => string;
step: string;
tech: TechKey | null; tech: TechKey | null;
smartStep: boolean;
}[] = [ }[] = [
{ key: "drive", label: () => i18n.t("game.calculator.field.drive"), tech: "drive", smartStep: true }, { key: "drive", label: () => i18n.t("game.calculator.field.drive"), step: "0.01", tech: "drive" },
{ key: "armament", label: () => i18n.t("game.calculator.field.armament"), tech: null, smartStep: false }, { key: "armament", label: () => i18n.t("game.calculator.field.armament"), step: "1", tech: null },
{ key: "weapons", label: () => i18n.t("game.calculator.field.weapons"), tech: "weapons", smartStep: true }, { key: "weapons", label: () => i18n.t("game.calculator.field.weapons"), step: "0.01", tech: "weapons" },
{ key: "shields", label: () => i18n.t("game.calculator.field.shields"), tech: "shields", smartStep: true }, { key: "shields", label: () => i18n.t("game.calculator.field.shields"), step: "0.01", tech: "shields" },
{ key: "cargo", label: () => i18n.t("game.calculator.field.cargo"), tech: "cargo", smartStep: true }, { key: "cargo", label: () => i18n.t("game.calculator.field.cargo"), step: "0.01", tech: "cargo" },
]; ];
const techInputEls: Partial<Record<TechKey, HTMLInputElement>> = {};
async function activateTechOverride(key: TechKey): Promise<void> {
onTechInput(key);
await tick();
techInputEls[key]?.focus();
techInputEls[key]?.select();
}
</script> </script>
<div class="design" data-testid="calculator-design-area"> <div class="design" data-testid="calculator-design-area">
@@ -189,50 +102,46 @@ calculator math — so the ship-group upgrade flow can reuse it later.
<span class="label">{row.label()}</span> <span class="label">{row.label()}</span>
{#if isComputed} {#if isComputed}
<input <input
class="ship no-spin" class="ship"
type="number" type="number"
step="any" step={row.step}
readonly readonly
value={formatNumber(resolved[row.key])} value={resolved[row.key]}
data-computed="true" data-computed="true"
data-testid={`calculator-block-${row.key}`} data-testid={`calculator-block-${row.key}`}
title={i18n.t("game.calculator.lock.reset")} title={i18n.t("game.calculator.lock.reset")}
/> />
{:else} {:else}
<input <input
class="ship no-spin" class="ship"
type="number" type="number"
step="any" step={row.step}
min="0" min="0"
bind:value={blocks[row.key]} bind:value={blocks[row.key]}
readonly={blocksReadonly} readonly={blocksReadonly}
aria-invalid={blockError(row.key) !== "" ? "true" : "false"} aria-invalid={blockError(row.key) !== "" ? "true" : "false"}
title={blockError(row.key)} title={blockError(row.key)}
data-testid={`calculator-block-${row.key}`} data-testid={`calculator-block-${row.key}`}
onkeydown={(e) => onBlockKey(e, row.key, row.smartStep)}
oninput={(e) => capDecimals(e, (v) => (blocks[row.key] = v))}
/> />
{/if} {/if}
{#if row.tech !== null} {#if row.tech !== null}
{@const techKey = row.tech} {@const techKey = row.tech}
<span class="tech-cell"> <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]} {#if techOverridden[techKey]}
<input
bind:this={techInputEls[techKey]}
class="tech no-spin"
type="number"
step="any"
min={techFloor[techKey]}
bind:value={techs[techKey]}
aria-invalid={techError(techKey) !== "" ? "true" : "false"}
title={techError(techKey)}
data-testid={`calculator-tech-${techKey}`}
onkeydown={(e) => bumpTech(e, techKey)}
oninput={(e) => capDecimals(e, (v) => (techs[techKey] = v))}
/>
<button <button
type="button" type="button"
class="lock active" class="lock"
title={i18n.t("game.calculator.tech.reset")} title={i18n.t("game.calculator.tech.reset")}
aria-label={i18n.t("game.calculator.tech.reset")} aria-label={i18n.t("game.calculator.tech.reset")}
data-testid={`calculator-tech-reset-${techKey}`} data-testid={`calculator-tech-reset-${techKey}`}
@@ -240,23 +149,6 @@ calculator math — so the ship-group upgrade flow can reuse it later.
> >
🔒 🔒
</button> </button>
{:else}
<span
class="tech-val"
data-testid={`calculator-tech-value-${techKey}`}
>
{formatNumber(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} {/if}
</span> </span>
{:else} {:else}
@@ -290,7 +182,7 @@ calculator math — so the ship-group upgrade flow can reuse it later.
font-size: 0.8rem; font-size: 0.8rem;
} }
input { input {
font-family: var(--font-mono); font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@@ -300,19 +192,6 @@ calculator math — so the ship-group upgrade flow can reuse it later.
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: right;
}
/* Hide native spinners across the design area — the row drives
every numeric edit through ArrowUp/ArrowDown so the column
width stays stable and the inputs read consistently. */
input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.no-spin {
-moz-appearance: textfield;
appearance: textfield;
} }
input[data-computed="true"], input[data-computed="true"],
input[readonly] { input[readonly] {
@@ -327,15 +206,6 @@ calculator math — so the ship-group upgrade flow can reuse it later.
align-items: center; align-items: center;
gap: 0.2rem; gap: 0.2rem;
} }
.tech-val {
flex: 1;
min-width: 0;
font-family: var(--font-mono);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
text-align: right;
padding: 0.2rem 0.35rem;
}
.lock { .lock {
flex: none; flex: none;
padding: 0; padding: 0;
@@ -344,10 +214,5 @@ calculator math — so the ship-group upgrade flow can reuse it later.
background: transparent; background: transparent;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
opacity: 0.5;
}
.lock.active,
.lock:hover {
opacity: 1;
} }
</style> </style>
+2 -6
View File
@@ -111,10 +111,9 @@ const en = {
"profile.field.preferred_language": "preferred language", "profile.field.preferred_language": "preferred language",
"profile.field.time_zone": "time zone", "profile.field.time_zone": "time zone",
"profile.hint.display_name": "shown wherever Galaxy needs a friendlier name than the username handle. Leave empty to fall back to the username.", "profile.hint.display_name": "shown wherever Galaxy needs a friendlier name than the username handle. Leave empty to fall back to the username.",
"profile.hint.time_zone": "IANA zones grouped by continent. The form opens on your browser's current zone when no value is saved.", "profile.hint.time_zone": "IANA time-zone name (e.g. Europe/Moscow, America/New_York). The placeholder shows your browser's current zone.",
"profile.save": "save", "profile.save": "save",
"profile.saving": "saving…", "profile.saving": "saving…",
"profile.saved": "saved",
"profile.cancel": "cancel", "profile.cancel": "cancel",
"profile.error.language_required": "language must not be empty", "profile.error.language_required": "language must not be empty",
"profile.error.time_zone_required": "time zone must not be empty", "profile.error.time_zone_required": "time zone must not be empty",
@@ -380,6 +379,7 @@ const en = {
"game.calculator.name.placeholder": "new class name", "game.calculator.name.placeholder": "new class name",
"game.calculator.name.existing": "your ship classes", "game.calculator.name.existing": "your ship classes",
"game.calculator.action.create": "create", "game.calculator.action.create": "create",
"game.calculator.action.delete": "delete",
"game.calculator.col.ship": "ship", "game.calculator.col.ship": "ship",
"game.calculator.col.tech": "tech", "game.calculator.col.tech": "tech",
"game.calculator.field.drive": "drive", "game.calculator.field.drive": "drive",
@@ -408,9 +408,7 @@ const en = {
"game.calculator.lock.reset": "locked — click to release to the computed value", "game.calculator.lock.reset": "locked — click to release to the computed value",
"game.calculator.lock.infeasible": "this target cannot be reached with the current design", "game.calculator.lock.infeasible": "this target cannot be reached with the current design",
"game.calculator.lock.max": "release the locked result first — one result at a time", "game.calculator.lock.max": "release the locked result first — one result at a time",
"game.calculator.tech.override": "click to override your current tech",
"game.calculator.tech.reset": "overridden — click to reset to your current tech", "game.calculator.tech.reset": "overridden — click to reset to your current tech",
"game.calculator.mat.override": "click to override the planet value",
"game.calculator.mat.reset": "overridden — click to reset to the planet value", "game.calculator.mat.reset": "overridden — click to reset to the planet value",
"game.calculator.modern.current": "current", "game.calculator.modern.current": "current",
"game.calculator.modern.target": "target", "game.calculator.modern.target": "target",
@@ -435,10 +433,8 @@ const en = {
"game.calculator.invalid.all_zero": "at least one value must be nonzero", "game.calculator.invalid.all_zero": "at least one value must be nonzero",
"game.calculator.invalid.negative": "value cannot be negative", "game.calculator.invalid.negative": "value cannot be negative",
"game.calculator.invalid.tech_value": "tech level cannot be negative", "game.calculator.invalid.tech_value": "tech level cannot be negative",
"game.calculator.invalid.tech_below_current": "tech level cannot be below your current tech this turn",
"game.calculator.invalid.load_over_capacity": "load exceeds the ship's cargo capacity", "game.calculator.invalid.load_over_capacity": "load exceeds the ship's cargo capacity",
"game.calculator.lock.no_drive": "set a non-zero drive before locking speed", "game.calculator.lock.no_drive": "set a non-zero drive before locking speed",
"game.calculator.confirm_reset_for_load": "Discard unsaved changes and load class «{name}»?",
"game.table.sciences.title": "sciences", "game.table.sciences.title": "sciences",
"game.table.sciences.column.name": "name", "game.table.sciences.column.name": "name",
+2 -6
View File
@@ -112,10 +112,9 @@ const ru: Record<keyof typeof en, string> = {
"profile.field.preferred_language": "язык интерфейса", "profile.field.preferred_language": "язык интерфейса",
"profile.field.time_zone": "часовой пояс", "profile.field.time_zone": "часовой пояс",
"profile.hint.display_name": "показывается там, где нужно более «человеческое» имя, чем системный идентификатор. Пустое значение — вернётся к идентификатору.", "profile.hint.display_name": "показывается там, где нужно более «человеческое» имя, чем системный идентификатор. Пустое значение — вернётся к идентификатору.",
"profile.hint.time_zone": "пояса IANA, сгруппированные по континентам. Если сохранённого значения нет, форма открывается на поясе, который определил браузер.", "profile.hint.time_zone": "имя часового пояса IANA (например, Europe/Moscow, America/New_York). В подсказке — текущий пояс твоего браузера.",
"profile.save": "сохранить", "profile.save": "сохранить",
"profile.saving": "сохраняем…", "profile.saving": "сохраняем…",
"profile.saved": "сохранено",
"profile.cancel": "отмена", "profile.cancel": "отмена",
"profile.error.language_required": "язык не должен быть пустым", "profile.error.language_required": "язык не должен быть пустым",
"profile.error.time_zone_required": "часовой пояс не должен быть пустым", "profile.error.time_zone_required": "часовой пояс не должен быть пустым",
@@ -381,6 +380,7 @@ const ru: Record<keyof typeof en, string> = {
"game.calculator.name.placeholder": "имя нового класса", "game.calculator.name.placeholder": "имя нового класса",
"game.calculator.name.existing": "ваши классы кораблей", "game.calculator.name.existing": "ваши классы кораблей",
"game.calculator.action.create": "создать", "game.calculator.action.create": "создать",
"game.calculator.action.delete": "удалить",
"game.calculator.col.ship": "корабль", "game.calculator.col.ship": "корабль",
"game.calculator.col.tech": "технологии", "game.calculator.col.tech": "технологии",
"game.calculator.field.drive": "двигатель", "game.calculator.field.drive": "двигатель",
@@ -409,9 +409,7 @@ const ru: Record<keyof typeof en, string> = {
"game.calculator.lock.reset": "зафиксировано — нажмите, чтобы вернуть вычисляемое значение", "game.calculator.lock.reset": "зафиксировано — нажмите, чтобы вернуть вычисляемое значение",
"game.calculator.lock.infeasible": "эта цель недостижима при текущих параметрах", "game.calculator.lock.infeasible": "эта цель недостижима при текущих параметрах",
"game.calculator.lock.max": "сначала снимите фиксацию с другого результата — по одному за раз", "game.calculator.lock.max": "сначала снимите фиксацию с другого результата — по одному за раз",
"game.calculator.tech.override": "нажмите, чтобы задать свой технологический уровень",
"game.calculator.tech.reset": "переопределено — нажмите, чтобы вернуть ваши текущие технологии", "game.calculator.tech.reset": "переопределено — нажмите, чтобы вернуть ваши текущие технологии",
"game.calculator.mat.override": "нажмите, чтобы задать своё значение MAT",
"game.calculator.mat.reset": "переопределено — нажмите, чтобы вернуть значение планеты", "game.calculator.mat.reset": "переопределено — нажмите, чтобы вернуть значение планеты",
"game.calculator.modern.current": "текущий", "game.calculator.modern.current": "текущий",
"game.calculator.modern.target": "целевой", "game.calculator.modern.target": "целевой",
@@ -436,10 +434,8 @@ const ru: Record<keyof typeof en, string> = {
"game.calculator.invalid.all_zero": "хотя бы одно значение должно быть ненулевым", "game.calculator.invalid.all_zero": "хотя бы одно значение должно быть ненулевым",
"game.calculator.invalid.negative": "значение не может быть отрицательным", "game.calculator.invalid.negative": "значение не может быть отрицательным",
"game.calculator.invalid.tech_value": "технологический уровень не может быть отрицательным", "game.calculator.invalid.tech_value": "технологический уровень не может быть отрицательным",
"game.calculator.invalid.tech_below_current": "технологический уровень не может быть ниже ваших текущих технологий на этом ходу",
"game.calculator.invalid.load_over_capacity": "загрузка превышает грузоподъёмность корабля", "game.calculator.invalid.load_over_capacity": "загрузка превышает грузоподъёмность корабля",
"game.calculator.lock.no_drive": "задайте ненулевой двигатель, прежде чем фиксировать скорость", "game.calculator.lock.no_drive": "задайте ненулевой двигатель, прежде чем фиксировать скорость",
"game.calculator.confirm_reset_for_load": "Сбросить несохранённые изменения и загрузить класс «{name}»?",
"game.table.sciences.title": "науки", "game.table.sciences.title": "науки",
"game.table.sciences.column.name": "название", "game.table.sciences.column.name": "название",
@@ -17,7 +17,7 @@
type GameSummary, type GameSummary,
type InviteSummary, type InviteSummary,
} from "../../api/lobby"; } from "../../api/lobby";
import { account } from "$lib/account-store.svelte"; import { AccountError, getMyAccount } from "../../api/account";
import { gatewayRpcBaseUrl, GATEWAY_RESPONSE_PUBLIC_KEY } from "$lib/env"; import { gatewayRpcBaseUrl, GATEWAY_RESPONSE_PUBLIC_KEY } from "$lib/env";
import { import {
SyntheticReportError, SyntheticReportError,
@@ -28,6 +28,8 @@
import { session } from "$lib/session-store.svelte"; import { session } from "$lib/session-store.svelte";
import LobbyShell from "./lobby-shell.svelte"; import LobbyShell from "./lobby-shell.svelte";
let displayName = $state("");
let userName = $state("");
let configError: string | null = $state(null); let configError: string | null = $state(null);
let listsLoading = $state(true); let listsLoading = $state(true);
let lobbyError: string | null = $state(null); let lobbyError: string | null = $state(null);
@@ -156,6 +158,21 @@
} }
} }
async function loadIdentity(c: GalaxyClient): Promise<void> {
try {
const account = await getMyAccount(c);
displayName = account.displayName;
userName = account.userName;
} catch (err) {
if (err instanceof AccountError) {
// Stay quiet: the lobby still works without a name; the
// identity strip falls back to a loading placeholder.
return;
}
throw err;
}
}
function gotoCreate(): void { function gotoCreate(): void {
appScreen.go("lobby-create"); appScreen.go("lobby-create");
} }
@@ -233,11 +250,7 @@
deviceSessionId: session.deviceSessionId, deviceSessionId: session.deviceSessionId,
gatewayResponsePublicKey: GATEWAY_RESPONSE_PUBLIC_KEY, gatewayResponsePublicKey: GATEWAY_RESPONSE_PUBLIC_KEY,
}); });
// Populate the session-wide identity cache; the shell's loadIdentity(client).catch(() => {});
// identity strip reads from there. Swallowed errors leave
// the shell on the `lobby.account_loading` placeholder
// without breaking the rest of the lobby.
account.ensure(client).catch(() => {});
await refreshAll(); await refreshAll();
} catch (err) { } catch (err) {
lobbyError = describeLobbyError(err); lobbyError = describeLobbyError(err);
@@ -246,7 +259,7 @@
}); });
</script> </script>
<LobbyShell activePage="overview"> <LobbyShell activePage="overview" {displayName} {userName}>
{#if configError !== null} {#if configError !== null}
<p role="alert" data-testid="account-error">{configError}</p> <p role="alert" data-testid="account-error">{configError}</p>
{:else if lobbyError !== null} {:else if lobbyError !== null}
+6 -13
View File
@@ -4,27 +4,23 @@ landing and the editable profile. Renders a left page-list sidebar
(mirroring the project site's VitePress layout) plus a top identity (mirroring the project site's VitePress layout) plus a top identity
strip ("Player-xxxx" → opens profile, logout). Children fill the strip ("Player-xxxx" → opens profile, logout). Children fill the
right-hand column. Pages mark themselves active via `activePage`. right-hand column. Pages mark themselves active via `activePage`.
The identity strip reads directly from the session-wide `account`
store so navigating Overview ⇄ Profile never re-renders an empty
placeholder: both screens populate the same cache through
`account.ensure(client)` and the shell renders the latest value.
--> -->
<script lang="ts"> <script lang="ts">
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
import { appScreen } from "$lib/app-nav.svelte"; import { appScreen } from "$lib/app-nav.svelte";
import { i18n } from "$lib/i18n/index.svelte"; import { i18n } from "$lib/i18n/index.svelte";
import { session } from "$lib/session-store.svelte"; import { session } from "$lib/session-store.svelte";
import { account } from "$lib/account-store.svelte";
type Page = "overview" | "profile"; type Page = "overview" | "profile";
interface Props { interface Props {
activePage: Page; activePage: Page;
displayName: string;
userName: string;
children: Snippet; children: Snippet;
} }
let { activePage, children }: Props = $props(); let { activePage, displayName, userName, children }: Props = $props();
const PAGES: ReadonlyArray<{ id: Page; labelKey: "lobby.nav.overview" | "lobby.nav.profile"; screen: "lobby" | "profile" }> = [ const PAGES: ReadonlyArray<{ id: Page; labelKey: "lobby.nav.overview" | "lobby.nav.profile"; screen: "lobby" | "profile" }> = [
{ id: "overview", labelKey: "lobby.nav.overview", screen: "lobby" }, { id: "overview", labelKey: "lobby.nav.overview", screen: "lobby" },
@@ -32,12 +28,9 @@ placeholder: both screens populate the same cache through
]; ];
let identityLabel = $derived.by(() => { let identityLabel = $derived.by(() => {
const current = account.current; const trimmed = displayName.trim();
if (current !== null) { if (trimmed.length > 0) return trimmed;
const trimmed = current.displayName.trim(); if (userName.length > 0) return userName;
if (trimmed.length > 0) return trimmed;
if (current.userName.length > 0) return current.userName;
}
return i18n.t("lobby.account_loading"); return i18n.t("lobby.account_loading");
}); });
@@ -3,10 +3,7 @@
// `lobby-create`). Loads the caller's account aggregate, lets the // `lobby-create`). Loads the caller's account aggregate, lets the
// user edit `display_name`, `preferred_language`, and `time_zone`, // user edit `display_name`, `preferred_language`, and `time_zone`,
// and posts the changes through `user.profile.update` / // and posts the changes through `user.profile.update` /
// `user.settings.update`. The form stays on screen after a // `user.settings.update`. Returns to the lobby on save or cancel.
// successful save (the shell-level identity strip picks up the
// new value through the shared `account` store) — only `cancel`
// returns to the lobby.
import { onMount } from "svelte"; import { onMount } from "svelte";
import { appScreen } from "$lib/app-nav.svelte"; import { appScreen } from "$lib/app-nav.svelte";
@@ -14,6 +11,7 @@
import { GalaxyClient } from "../../api/galaxy-client"; import { GalaxyClient } from "../../api/galaxy-client";
import { import {
AccountError, AccountError,
getMyAccount,
updateMyProfile, updateMyProfile,
updateMySettings, updateMySettings,
type Account, type Account,
@@ -27,13 +25,6 @@
} from "$lib/i18n/index.svelte"; } from "$lib/i18n/index.svelte";
import { loadCore } from "../../platform/core/index"; import { loadCore } from "../../platform/core/index";
import { session } from "$lib/session-store.svelte"; import { session } from "$lib/session-store.svelte";
import { account } from "$lib/account-store.svelte";
import {
browserTimeZone,
supportedTimeZones,
withPreservedValue,
type TimeZoneGroup,
} from "$lib/time-zones";
import LobbyShell from "./lobby-shell.svelte"; import LobbyShell from "./lobby-shell.svelte";
let loaded: Account | null = $state(null); let loaded: Account | null = $state(null);
@@ -45,7 +36,6 @@
let configError: string | null = $state(null); let configError: string | null = $state(null);
let saveError: string | null = $state(null); let saveError: string | null = $state(null);
let saving = $state(false); let saving = $state(false);
let savedNotice = $state(false);
let client: GalaxyClient | null = null; let client: GalaxyClient | null = null;
@@ -53,16 +43,6 @@
SUPPORTED_LOCALES.map((entry) => entry.code), SUPPORTED_LOCALES.map((entry) => entry.code),
); );
// Built once: the IANA list is static for the page lifetime. The
// stored value is folded in lazily so a zone the runtime no longer
// advertises still renders.
const TIME_ZONE_GROUPS_BASE: readonly TimeZoneGroup[] = supportedTimeZones();
let timeZoneGroups = $derived<readonly TimeZoneGroup[]>(
withPreservedValue(TIME_ZONE_GROUPS_BASE, timeZoneInput),
);
let timeZoneFallbackToText = $derived(TIME_ZONE_GROUPS_BASE.length === 0);
async function sha256(payload: Uint8Array): Promise<Uint8Array> { async function sha256(payload: Uint8Array): Promise<Uint8Array> {
const digest = await crypto.subtle.digest("SHA-256", payload as BufferSource); const digest = await crypto.subtle.digest("SHA-256", payload as BufferSource);
return new Uint8Array(digest); return new Uint8Array(digest);
@@ -78,26 +58,24 @@
return err instanceof Error ? err.message : "request failed"; return err instanceof Error ? err.message : "request failed";
} }
function applyAccount(next: Account): void { function browserTimeZone(): string {
loaded = next; try {
displayNameInput = next.displayName; return Intl.DateTimeFormat().resolvedOptions().timeZone ?? "";
preferredLanguageInput = next.preferredLanguage; } catch {
// Seed an empty stored zone with the browser's current zone so return "";
// the picker lands on a sensible default rather than the first }
// IANA entry. The form treats "no change" as not posting, so
// the seeded value is only persisted on an explicit save.
timeZoneInput = next.timeZone.length > 0 ? next.timeZone : browserTimeZone();
} }
function markDirty(): void { function applyAccount(account: Account): void {
// Any edit invalidates the "Saved" notice. loaded = account;
savedNotice = false; displayNameInput = account.displayName;
saveError = null; preferredLanguageInput = account.preferredLanguage;
timeZoneInput = account.timeZone;
} }
async function loadAccount(c: GalaxyClient): Promise<void> { async function loadAccount(c: GalaxyClient): Promise<void> {
try { try {
applyAccount(await account.ensure(c)); applyAccount(await getMyAccount(c));
} catch (err) { } catch (err) {
loadError = describe(err); loadError = describe(err);
} }
@@ -119,7 +97,6 @@
} }
saving = true; saving = true;
saveError = null; saveError = null;
savedNotice = false;
try { try {
let next: Account = loaded; let next: Account = loaded;
if (trimmedDisplay !== loaded.displayName) { if (trimmedDisplay !== loaded.displayName) {
@@ -132,7 +109,6 @@
next = await updateMySettings(client, trimmedLanguage, trimmedZone); next = await updateMySettings(client, trimmedLanguage, trimmedZone);
} }
applyAccount(next); applyAccount(next);
account.set(next);
// When the user picks a language the UI supports, switch the // When the user picks a language the UI supports, switch the
// active locale immediately so the rest of the session sees // active locale immediately so the rest of the session sees
// the change without a reload. Unsupported BCP 47 codes are // the change without a reload. Unsupported BCP 47 codes are
@@ -140,7 +116,7 @@
if (SUPPORTED_LOCALE_CODES.has(next.preferredLanguage)) { if (SUPPORTED_LOCALE_CODES.has(next.preferredLanguage)) {
i18n.setLocale(next.preferredLanguage as Locale); i18n.setLocale(next.preferredLanguage as Locale);
} }
savedNotice = true; appScreen.go("lobby");
} catch (err) { } catch (err) {
saveError = describe(err); saveError = describe(err);
} finally { } finally {
@@ -181,7 +157,11 @@
}); });
</script> </script>
<LobbyShell activePage="profile"> <LobbyShell
activePage="profile"
displayName={loaded?.displayName ?? ""}
userName={loaded?.userName ?? ""}
>
<h1>{i18n.t("profile.title")}</h1> <h1>{i18n.t("profile.title")}</h1>
{#if configError !== null} {#if configError !== null}
<p role="alert" data-testid="profile-config-error">{configError}</p> <p role="alert" data-testid="profile-config-error">{configError}</p>
@@ -203,7 +183,6 @@
<input <input
type="text" type="text"
bind:value={displayNameInput} bind:value={displayNameInput}
oninput={markDirty}
autocomplete="nickname" autocomplete="nickname"
data-testid="profile-display-name" data-testid="profile-display-name"
/> />
@@ -214,7 +193,6 @@
<span>{i18n.t("profile.field.preferred_language")}</span> <span>{i18n.t("profile.field.preferred_language")}</span>
<select <select
bind:value={preferredLanguageInput} bind:value={preferredLanguageInput}
onchange={markDirty}
data-testid="profile-preferred-language" data-testid="profile-preferred-language"
> >
{#each SUPPORTED_LOCALES as entry (entry.code)} {#each SUPPORTED_LOCALES as entry (entry.code)}
@@ -234,44 +212,18 @@
<label> <label>
<span>{i18n.t("profile.field.time_zone")}</span> <span>{i18n.t("profile.field.time_zone")}</span>
{#if timeZoneFallbackToText} <input
<!-- type="text"
Browser lacks `Intl.supportedValuesOf("timeZone")` — bind:value={timeZoneInput}
fall back to a free-text field so a viable runtime can placeholder={browserTimeZone()}
still save a zone. The backend remains the validator. autocomplete="off"
--> data-testid="profile-time-zone"
<input />
type="text"
bind:value={timeZoneInput}
oninput={markDirty}
placeholder={browserTimeZone()}
autocomplete="off"
data-testid="profile-time-zone"
/>
{:else}
<select
bind:value={timeZoneInput}
onchange={markDirty}
data-testid="profile-time-zone"
>
{#each timeZoneGroups as group (group.label)}
<optgroup label={group.label}>
{#each group.values as zone (zone)}
<option value={zone}>{zone}</option>
{/each}
</optgroup>
{/each}
</select>
{/if}
<small>{i18n.t("profile.hint.time_zone")}</small> <small>{i18n.t("profile.hint.time_zone")}</small>
</label> </label>
{#if saveError !== null} {#if saveError !== null}
<p role="alert" data-testid="profile-save-error">{saveError}</p> <p role="alert" data-testid="profile-save-error">{saveError}</p>
{:else if savedNotice}
<p role="status" data-testid="profile-saved-notice">
{i18n.t("profile.saved")}
</p>
{/if} {/if}
<div class="actions"> <div class="actions">
@@ -351,12 +303,6 @@
font-size: var(--text-xs); font-size: var(--text-xs);
} }
[data-testid="profile-saved-notice"] {
color: var(--color-text-muted);
font-size: var(--text-sm);
margin: 0;
}
.actions { .actions {
display: flex; display: flex;
gap: var(--space-3); gap: var(--space-3);
@@ -31,7 +31,6 @@ import {
loadDeviceSession, loadDeviceSession,
setDeviceSessionId, setDeviceSessionId,
} from "../api/session"; } from "../api/session";
import { account } from "./account-store.svelte";
export type SessionStatus = export type SessionStatus =
| "loading" | "loading"
@@ -95,10 +94,6 @@ export class SessionStore {
this.keypair = fresh.keypair; this.keypair = fresh.keypair;
this.deviceSessionId = null; this.deviceSessionId = null;
this.status = "anonymous"; this.status = "anonymous";
// Drop the cached identity so a different user signing in on the
// same browser does not briefly see the previous display name
// through the post-login shell.
account.clear();
if (reason === "revoked") { if (reason === "revoked") {
console.info("session store: device session revoked by gateway"); console.info("session store: device session revoked by gateway");
} }
+57 -240
View File
@@ -14,7 +14,7 @@ switch (the inspector auto-opens on a planet click) — the calculator is a
long-lived planning tool. `ensureGame` resets it when the game changes. long-lived planning tool. `ensureGame` resets it when the game changes.
--> -->
<script lang="ts"> <script lang="ts">
import { getContext, tick } from "svelte"; import { getContext } from "svelte";
import { appScreen } from "$lib/app-nav.svelte"; import { appScreen } from "$lib/app-nav.svelte";
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte"; import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
@@ -204,6 +204,11 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
nameValidation.ok ? "" : i18n.t(nameInvalidKeyMap[nameValidation.reason]), nameValidation.ok ? "" : i18n.t(nameInvalidKeyMap[nameValidation.reason]),
); );
const canCreate = $derived(nameValidation.ok && draft !== undefined); const canCreate = $derived(nameValidation.ok && draft !== undefined);
const canDelete = $derived(
cs.loadedExisting !== null &&
existingNames.includes(cs.loadedExisting) &&
draft !== undefined,
);
// Per-block modernization upgrade cost (current tech → target tech). // Per-block modernization upgrade cost (current tech → target tech).
const modernCosts = $derived.by(() => { const modernCosts = $derived.by(() => {
@@ -232,35 +237,12 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
// Display every computed number rounded up to three decimals via the // Display every computed number rounded up to three decimals via the
// shared `Ceil3` bridge, so a value is never shown lower than it is. // shared `Ceil3` bridge, so a value is never shown lower than it is.
// Always three decimals (`1` → `1.000`) for column-aligned readability,
// and without thousands grouping so the same string also embeds in the
// read-only goal-seek `<input type="number">` cell.
function fmt(value: number | null | undefined): string { function fmt(value: number | null | undefined): string {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return i18n.t("game.calculator.unavailable"); return i18n.t("game.calculator.unavailable");
} }
const rounded = core !== null ? core.ceil3({ value }) : value; const rounded = core !== null ? core.ceil3({ value }) : value;
return rounded.toLocaleString(undefined, { return rounded.toLocaleString(undefined, { maximumFractionDigits: 3 });
minimumFractionDigits: 3,
maximumFractionDigits: 3,
useGrouping: false,
});
}
// Cap typed precision at three decimal digits. Number inputs use
// `step="any"`, which lets the browser accept arbitrary precision; the
// owner asked us to refuse a fourth decimal as typing happens so the
// calculator never displays a longer-than-three-digit fraction. Pairs
// with `bind:value`: if Svelte's bind handler has already read the
// over-precise number, `apply` overwrites the state with the truncated
// value so the next reactive flush does not undo our truncation.
function capDecimals(event: Event, apply: (next: number) => void): void {
const el = event.currentTarget as HTMLInputElement;
const txt = el.value;
const dot = txt.indexOf(".");
if (dot < 0 || txt.length - dot - 1 <= 3) return;
el.value = txt.slice(0, dot + 4);
apply(el.valueAsNumber);
} }
// The goal-seek back-solved block, shown in its read-only cell, is // The goal-seek back-solved block, shown in its read-only cell, is
@@ -291,18 +273,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
cs.matValue < 0 ? i18n.t("game.calculator.invalid.negative") : "", cs.matValue < 0 ? i18n.t("game.calculator.invalid.negative") : "",
); );
// Modernization target tech mirrors the design-area floor: a target
// below the player's current tech on this turn is meaningless (no
// upgrade), so flag it the same way.
function targetTechError(key: TechKey): string {
const value = cs.targetTech[key];
if (value < 0) return i18n.t("game.calculator.invalid.negative");
if (value < playerTech[key]) {
return i18n.t("game.calculator.invalid.tech_below_current");
}
return "";
}
// Locking a speed back-solves the drive block; with a zero drive the // Locking a speed back-solves the drive block; with a zero drive the
// ship is deliberately immobile, so disallow it. // ship is deliberately immobile, so disallow it.
function lockDisabledReason(output: LockableOutputId): string { function lockDisabledReason(output: LockableOutputId): string {
@@ -321,12 +291,8 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
function onResetTech(key: TechKey): void { function onResetTech(key: TechKey): void {
cs.techOverridden[key] = false; cs.techOverridden[key] = false;
} }
const matInputRef: { el?: HTMLInputElement } = {}; function onMatInput(): void {
async function activateMatOverride(): Promise<void> {
cs.matOverridden = true; cs.matOverridden = true;
await tick();
matInputRef.el?.focus();
matInputRef.el?.select();
} }
function resetMat(): void { function resetMat(): void {
cs.matOverridden = false; cs.matOverridden = false;
@@ -341,30 +307,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
cs.lock = null; cs.lock = null;
} }
// Generic ±step keyboard handler for the calculator's free-form
// number inputs (MAT, custom-load, lock value, modernization
// target tech). Pairs with `class="no-spin"` so the native spinner
// is hidden everywhere and the column width is stable; ArrowUp /
// ArrowDown is the only step affordance. The smart 0↔1 jump on
// the ship-class blocks lives in `ship-design-area.svelte` —
// these other inputs accept any non-negative number.
function onStepKey(
event: KeyboardEvent,
current: number,
step: number,
min: number,
apply: (next: number) => void,
): void {
const dir = event.key === "ArrowUp" ? 1 : event.key === "ArrowDown" ? -1 : 0;
if (dir === 0) return;
event.preventDefault();
// Snap to the same fractional grid as `step` so 0.001 stays
// at three decimals instead of drifting via float math.
const inv = 1 / step;
const next = Math.round((current + dir * step) * inv) / inv;
apply(next < min ? min : next);
}
function loadExisting(clsName: string): void { function loadExisting(clsName: string): void {
const cls = localShipClass.find((c) => c.name === clsName); const cls = localShipClass.find((c) => c.name === clsName);
if (cls === undefined) return; if (cls === undefined) return;
@@ -380,78 +322,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
cs.lock = null; cs.lock = null;
} }
// Compare the live blocks to the baseline they were last loaded
// from — or to the empty defaults if no class has been loaded. The
// dropdown selection flow uses this to ask before discarding manual
// edits. Tech overrides are independent of class loading, so they
// don't count as "dirty" here.
function baselineBlocks(): {
drive: number;
armament: number;
weapons: number;
shields: number;
cargo: number;
} {
if (cs.loadedExisting !== null) {
const cls = localShipClass.find((c) => c.name === cs.loadedExisting);
if (cls !== undefined) {
return {
drive: cls.drive,
armament: cls.armament,
weapons: cls.weapons,
shields: cls.shields,
cargo: cls.cargo,
};
}
}
return { drive: 0, armament: 0, weapons: 0, shields: 0, cargo: 0 };
}
function isDesignDirty(): boolean {
const base = baselineBlocks();
return (
cs.blocks.drive !== base.drive ||
cs.blocks.armament !== base.armament ||
cs.blocks.weapons !== base.weapons ||
cs.blocks.shields !== base.shields ||
cs.blocks.cargo !== base.cargo
);
}
function tryLoadByName(name: string): void {
const cls = localShipClass.find((c) => c.name === name);
if (cls === undefined) return;
if (cs.loadedExisting === cls.name) return;
if (isDesignDirty()) {
const ok = window.confirm(
i18n.t("game.calculator.confirm_reset_for_load", {
name: cls.name,
}),
);
if (!ok) {
cs.name = cs.loadedExisting ?? "";
return;
}
}
loadExisting(name);
}
// Catch the datalist option click immediately. Native `change` only
// fires on blur in Firefox, which is what made dropdown selection
// look delayed; `input` fires the moment the value is set. Typed
// keystrokes carry an `inputType` ("insertText", "deleteContent…");
// a datalist selection replaces the value in one shot, so its
// `inputType` is undefined (Firefox) or "insertReplacementText"
// (Chromium / WebKit). We treat that as a selection.
function onNameInput(event: Event): void {
const ev = event as InputEvent;
const isSelection =
ev.inputType === undefined ||
ev.inputType === "insertReplacementText";
if (!isSelection) {
cs.loadedExisting = null;
return;
}
tryLoadByName(cs.name);
}
// React to the ship-classes table / bottom-tabs asking to load a // React to the ship-classes table / bottom-tabs asking to load a
// class (or start a fresh design) into the calculator. The layout // class (or start a fresh design) into the calculator. The layout
// flips the sidebar to this tab in parallel. // flips the sidebar to this tab in parallel.
@@ -484,6 +354,16 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
cs.loadedExisting = created.name; cs.loadedExisting = created.name;
} }
async function deleteClass(): Promise<void> {
if (cs.loadedExisting === null || draft === undefined) return;
await draft.add({
kind: "removeShipClass",
id: crypto.randomUUID(),
name: cs.loadedExisting,
});
cs.loadedExisting = null;
}
const LOCK_LABELS: Record<LockableOutputId, string> = $derived({ const LOCK_LABELS: Record<LockableOutputId, string> = $derived({
emptyMass: i18n.t("game.calculator.out.mass"), emptyMass: i18n.t("game.calculator.out.mass"),
loadedMass: i18n.t("game.calculator.out.mass"), loadedMass: i18n.t("game.calculator.out.mass"),
@@ -498,13 +378,9 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
{#if cs.lock === output} {#if cs.lock === output}
<span class="cell locked" class:infeasible={!result.lockFeasible}> <span class="cell locked" class:infeasible={!result.lockFeasible}>
<input <input
class="no-spin"
type="number" type="number"
step="any" step="0.001"
bind:value={cs.lockValue} bind:value={cs.lockValue}
onkeydown={(e) =>
onStepKey(e, cs.lockValue, 0.001, 0, (v) => (cs.lockValue = v))}
oninput={(e) => capDecimals(e, (v) => (cs.lockValue = v))}
data-testid={`calculator-locked-${output}`} data-testid={`calculator-locked-${output}`}
title={result.lockFeasible ? "" : i18n.t("game.calculator.lock.infeasible")} title={result.lockFeasible ? "" : i18n.t("game.calculator.lock.infeasible")}
/> />
@@ -570,8 +446,8 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
placeholder={i18n.t("game.calculator.name.placeholder")} placeholder={i18n.t("game.calculator.name.placeholder")}
maxlength="30" maxlength="30"
bind:value={cs.name} bind:value={cs.name}
oninput={onNameInput} oninput={() => (cs.loadedExisting = null)}
onchange={() => tryLoadByName(cs.name)} onchange={() => loadExisting(cs.name)}
aria-invalid={nameValidation.ok ? "false" : "true"} aria-invalid={nameValidation.ok ? "false" : "true"}
data-testid="calculator-name" data-testid="calculator-name"
/> />
@@ -593,15 +469,23 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
</button> </button>
{/if} {/if}
</div> </div>
{#if cs.mode === "ship" && canDelete}
<button
type="button"
class="delete"
data-testid="calculator-delete"
onclick={() => void deleteClass()}
>
{i18n.t("game.calculator.action.delete")} {cs.loadedExisting}
</button>
{/if}
<ShipDesignArea <ShipDesignArea
bind:blocks={cs.blocks} bind:blocks={cs.blocks}
resolved={resolvedCeil} resolved={resolvedCeil}
bind:techs={cs.techValues} bind:techs={cs.techValues}
techOverridden={cs.techOverridden} techOverridden={cs.techOverridden}
techFloor={playerTech}
computedInput={result.computedInput} computedInput={result.computedInput}
formatNumber={fmt}
{onTechInput} {onTechInput}
{onResetTech} {onResetTech}
/> />
@@ -625,13 +509,10 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
{#if cs.loadMode === "custom"} {#if cs.loadMode === "custom"}
<input <input
type="number" type="number"
step="any" step="0.01"
min="0" min="0"
class="custom-load no-spin" class="custom-load"
bind:value={cs.customLoad} bind:value={cs.customLoad}
onkeydown={(e) =>
onStepKey(e, cs.customLoad, 0.01, 0, (v) => (cs.customLoad = v))}
oninput={(e) => capDecimals(e, (v) => (cs.customLoad = v))}
aria-invalid={customLoadError !== "" ? "true" : "false"} aria-invalid={customLoadError !== "" ? "true" : "false"}
title={customLoadError} title={customLoadError}
data-testid="calculator-custom-load" data-testid="calculator-custom-load"
@@ -679,7 +560,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
<span class="val" data-testid="calculator-out-bombing"> <span class="val" data-testid="calculator-out-bombing">
{fmt(result.outputs?.bombing)} {fmt(result.outputs?.bombing)}
</span> </span>
<span class="lock-slot" aria-hidden="true">🔓</span>
</span> </span>
<span></span> <span></span>
</div> </div>
@@ -689,7 +569,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
<span class="val" data-testid="calculator-out-cargo-capacity"> <span class="val" data-testid="calculator-out-cargo-capacity">
{fmt(result.outputs === null ? null : result.cargoCapacity)} {fmt(result.outputs === null ? null : result.cargoCapacity)}
</span> </span>
<span class="lock-slot" aria-hidden="true">🔓</span>
</span> </span>
<span></span> <span></span>
</div> </div>
@@ -710,21 +589,17 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
<div class="rrow"> <div class="rrow">
<span class="label">{i18n.t("game.calculator.planet.mat")}</span> <span class="label">{i18n.t("game.calculator.planet.mat")}</span>
<span class="cell"> <span class="cell">
<input
type="number"
step="0.01"
min="0"
bind:value={cs.matValue}
oninput={onMatInput}
aria-invalid={matError !== "" ? "true" : "false"}
title={matError}
data-testid="calculator-planet-mat"
/>
{#if cs.matOverridden} {#if cs.matOverridden}
<input
bind:this={matInputRef.el}
class="no-spin"
type="number"
step="any"
min="0"
bind:value={cs.matValue}
onkeydown={(e) =>
onStepKey(e, cs.matValue, 0.01, 0, (v) => (cs.matValue = v))}
oninput={(e) => capDecimals(e, (v) => (cs.matValue = v))}
aria-invalid={matError !== "" ? "true" : "false"}
title={matError}
data-testid="calculator-planet-mat"
/>
<button <button
type="button" type="button"
class="lock active" class="lock active"
@@ -735,23 +610,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
> >
🔒 🔒
</button> </button>
{:else}
<span
class="mat-val"
data-testid="calculator-planet-mat-value"
>
{fmt(cs.matValue)}
</span>
<button
type="button"
class="lock"
title={i18n.t("game.calculator.mat.override")}
aria-label={i18n.t("game.calculator.mat.override")}
data-testid="calculator-mat-override"
onclick={() => void activateMatOverride()}
>
🔓
</button>
{/if} {/if}
</span> </span>
<span></span> <span></span>
@@ -780,28 +638,18 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
<span class="col-head">{i18n.t("game.calculator.modern.cost")}</span> <span class="col-head">{i18n.t("game.calculator.modern.cost")}</span>
</div> </div>
{#each modernCosts?.perBlock ?? [] as row (row.key)} {#each modernCosts?.perBlock ?? [] as row (row.key)}
{@const targetError = targetTechError(row.key)}
<div class="rrow"> <div class="rrow">
<span class="label">{i18n.t(`game.calculator.field.${row.key}` as TranslationKey)}</span> <span class="label">{i18n.t(`game.calculator.field.${row.key}` as TranslationKey)}</span>
<span class="cell"> <span class="cell">
<input <input
class="no-spin"
type="number" type="number"
step="any" step="0.001"
min={playerTech[row.key]} min="0"
bind:value={cs.targetTech[row.key]} bind:value={cs.targetTech[row.key]}
onkeydown={(e) => aria-invalid={cs.targetTech[row.key] < 0 ? "true" : "false"}
onStepKey( title={cs.targetTech[row.key] < 0
e, ? i18n.t("game.calculator.invalid.negative")
cs.targetTech[row.key], : ""}
0.001,
playerTech[row.key],
(v) => (cs.targetTech[row.key] = v),
)}
oninput={(e) =>
capDecimals(e, (v) => (cs.targetTech[row.key] = v))}
aria-invalid={targetError !== "" ? "true" : "false"}
title={targetError}
data-testid={`calculator-target-${row.key}`} data-testid={`calculator-target-${row.key}`}
/> />
</span> </span>
@@ -870,7 +718,8 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
.name[aria-invalid="true"] { .name[aria-invalid="true"] {
border-color: var(--color-danger); border-color: var(--color-danger);
} }
.create { .create,
.delete {
font: inherit; font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.25rem 0.55rem; padding: 0.25rem 0.55rem;
@@ -888,6 +737,10 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.delete {
color: var(--color-danger);
align-self: flex-start;
}
.load { .load {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -913,15 +766,13 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
} }
.custom-load { .custom-load {
width: 4rem; width: 4rem;
font-family: var(--font-mono); font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
font-variant-numeric: tabular-nums;
padding: 0.15rem 0.3rem; padding: 0.15rem 0.3rem;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
text-align: right;
} }
.results, .results,
.modern { .modern {
@@ -951,7 +802,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
justify-content: flex-end; justify-content: flex-end;
} }
.cell .val { .cell .val {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.85rem; font-size: 0.85rem;
text-align: right; text-align: right;
@@ -959,7 +809,7 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
.cell input { .cell input {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
font-family: var(--font-mono); font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.15rem 0.3rem; padding: 0.15rem 0.3rem;
background: var(--color-bg); background: var(--color-bg);
@@ -969,19 +819,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: right; text-align: right;
} }
/* Hide the native spinner on every calculator number input — the
row drives every numeric edit through ArrowUp / ArrowDown so the
column width is stable and the inputs read consistently with the
ship-block row inside the design area. */
input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.no-spin {
-moz-appearance: textfield;
appearance: textfield;
}
.cell.locked input { .cell.locked input {
color: var(--color-accent); color: var(--color-accent);
border-color: var(--color-accent); border-color: var(--color-accent);
@@ -1008,12 +845,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
cursor: not-allowed; cursor: not-allowed;
opacity: 0.2; opacity: 0.2;
} }
.lock-slot {
flex: none;
font-size: 0.7rem;
line-height: 1;
visibility: hidden;
}
.planet { .planet {
border-top: 1px solid var(--color-border-subtle); border-top: 1px solid var(--color-border-subtle);
padding-top: 0.5rem; padding-top: 0.5rem;
@@ -1047,7 +878,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
} }
.planet-stats dd { .planet-stats dd {
margin: 0; margin: 0;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.85rem; font-size: 0.85rem;
text-align: right; text-align: right;
@@ -1065,21 +895,8 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
cursor: not-allowed; cursor: not-allowed;
} }
.full-capacity { .full-capacity {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-accent); color: var(--color-accent);
} }
/* Plain-text view of the planet MAT (mirrors `.tech-val` in the
design area) so the cell width stays the same whether the value is
the inherited planet number or the player's override. */
.mat-val {
flex: 1;
min-width: 0;
font-family: var(--font-mono);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
text-align: right;
padding: 0.15rem 0.3rem;
}
</style> </style>
-140
View File
@@ -1,140 +0,0 @@
// Time-zone option helpers for the Profile screen's `<select>`.
//
// The browser ships the full IANA list through
// `Intl.supportedValuesOf("timeZone")` (Chrome 99+, Firefox 93+,
// Safari 15.4+ — all within the PWA target). This module reads that
// list, groups the entries by their first slash-delimited segment
// (`Africa`, `America`, …), sorts both groups and entries within each
// group, and yields a shape that maps 1:1 onto `<optgroup>` /
// `<option>`.
//
// Two corner cases:
// * Singletons like `UTC` / `GMT` / `EST` have no slash, so they
// collapse into a single "Other" bucket at the bottom of the
// dropdown.
// * A stored value that is not in the browser-supplied list (an
// older zone the runtime no longer ships, or a name from a
// freshly-imported account) is appended as a one-entry "Other"
// option through `withPreservedValue`. The Profile form calls
// that helper so saving an unchanged form never silently
// downgrades a stored value to the default.
const OTHER_GROUP = "Other";
export interface TimeZoneGroup {
readonly label: string;
readonly values: readonly string[];
}
/**
* supportedTimeZones returns the browser-supplied IANA list, grouped
* by leading segment and sorted alphabetically. Returns an empty
* array when the runtime does not implement
* `Intl.supportedValuesOf("timeZone")` so callers can fall back to a
* text input.
*/
export function supportedTimeZones(): readonly TimeZoneGroup[] {
const zones = listSupportedZones();
if (zones.length === 0) return [];
return groupZones(zones);
}
/**
* withPreservedValue returns `groups` unchanged when the supplied
* `value` is empty or already appears in one of the groups.
* Otherwise it appends a single-entry "Other" group carrying the
* value so the `<select>` can render it without losing the saved
* zone. The original groups are not mutated.
*/
export function withPreservedValue(
groups: readonly TimeZoneGroup[],
value: string,
): readonly TimeZoneGroup[] {
const trimmed = value.trim();
if (trimmed === "") return groups;
for (const group of groups) {
if (group.values.includes(trimmed)) return groups;
}
const extra: TimeZoneGroup = { label: OTHER_GROUP, values: [trimmed] };
// Merge with an existing "Other" group if one is already present,
// otherwise append a fresh one.
const next: TimeZoneGroup[] = [];
let mergedIntoOther = false;
for (const group of groups) {
if (group.label === OTHER_GROUP) {
mergedIntoOther = true;
next.push({
label: OTHER_GROUP,
values: [...group.values, trimmed].sort((a, b) => a.localeCompare(b)),
});
} else {
next.push(group);
}
}
if (!mergedIntoOther) next.push(extra);
return next;
}
/**
* browserTimeZone returns the time zone the runtime believes the
* user is in. An empty string is returned when `Intl.DateTimeFormat`
* is missing or rejects the resolution.
*/
export function browserTimeZone(): string {
try {
return Intl.DateTimeFormat().resolvedOptions().timeZone ?? "";
} catch {
return "";
}
}
interface IntlWithSupportedValues {
supportedValuesOf?: (key: "timeZone") => string[];
}
function listSupportedZones(): string[] {
const intl = Intl as unknown as IntlWithSupportedValues;
if (typeof intl.supportedValuesOf !== "function") return [];
try {
const zones = intl.supportedValuesOf("timeZone");
return Array.isArray(zones) ? zones.slice() : [];
} catch {
return [];
}
}
function groupZones(zones: readonly string[]): readonly TimeZoneGroup[] {
const buckets = new Map<string, string[]>();
const others: string[] = [];
for (const zone of zones) {
const slash = zone.indexOf("/");
if (slash === -1) {
others.push(zone);
continue;
}
const prefix = zone.slice(0, slash);
const bucket = buckets.get(prefix);
if (bucket === undefined) {
buckets.set(prefix, [zone]);
} else {
bucket.push(zone);
}
}
const groups: TimeZoneGroup[] = [];
const sortedPrefixes = Array.from(buckets.keys()).sort((a, b) =>
a.localeCompare(b),
);
for (const prefix of sortedPrefixes) {
const values = (buckets.get(prefix) ?? []).slice().sort((a, b) =>
a.localeCompare(b),
);
groups.push({ label: prefix, values });
}
if (others.length > 0) {
groups.push({
label: OTHER_GROUP,
values: others.slice().sort((a, b) => a.localeCompare(b)),
});
}
return groups;
}
-50
View File
@@ -135,56 +135,6 @@ describe("computeCalculator goal-seek", () => {
expect(result.blocks.drive).toBe(10); expect(result.blocks.drive).toBe(10);
}); });
test("an attack target that back-solves to a (0, 1) weapons block is infeasible", () => {
// weapons = targetAttack / weaponsTech; weaponsTech=1.5, a 0.5
// target → weapons = 0.333…, which fails the DWSC rule (must be
// 0 or ≥ 1). The lock is flagged infeasible so the UI shows the
// red border, and the claimed block is left at its raw value so
// the design preview keeps reading off the user's own design.
const core = makeFakeCore();
const result = computeCalculator(
input({ lock: { output: "attack", value: 0.5 } }),
core,
);
expect(result.lockFeasible).toBe(false);
expect(result.computedInput).toBeNull();
// The claimed block stays at its raw value.
expect(result.blocks.weapons).toBe(0);
});
test("an empty-mass target that back-solves to a (0, 1) cargo block is infeasible", () => {
// emptyMass = drive + shields + cargo; with drive=10 shields=5,
// rest excluding cargo = 15. Target 15.5 → cargo = 0.5, in the
// invalid gap, so the lock is flagged.
const core = makeFakeCore();
const result = computeCalculator(
input({ lock: { output: "emptyMass", value: 15.5 } }),
core,
);
expect(result.lockFeasible).toBe(false);
expect(result.computedInput).toBeNull();
expect(result.blocks.cargo).toBe(5);
});
test("speed lock is feasible at the ceiling when rest mass is zero", () => {
// Regression for the D=1, W=A=S=C=0 case: every block except
// drive is zero, so speed equals 20*driveTech (the ceiling); the
// solver must accept that exact target instead of flagging it
// as unreachable.
const core = makeFakeCore();
const result = computeCalculator(
input({
blocks: { drive: 1, armament: 0, weapons: 0, shields: 0, cargo: 0 },
driveTech: 1,
lock: { output: "speedEmpty", value: 20 },
}),
core,
);
expect(result.lockFeasible).toBe(true);
expect(result.computedInput).toBe("drive");
expect(result.outputs?.speedEmpty).toBeCloseTo(20, 9);
});
test("calls the matching solver with the right context", () => { test("calls the matching solver with the right context", () => {
const weaponsForAttack = vi.fn(() => 7); const weaponsForAttack = vi.fn(() => 7);
const core = makeFakeCore({ weaponsForAttack }); const core = makeFakeCore({ weaponsForAttack });
-386
View File
@@ -278,390 +278,4 @@ describe("calculator-tab", () => {
"15.273", "15.273",
); );
}); });
test("tech defaults render as a number with an open-lock affordance", () => {
const ui = mount();
// Default state: no override → number + open lock, no input.
expect(ui.getByTestId("calculator-tech-value-drive")).toHaveTextContent(
"1.2",
);
expect(
ui.getByTestId("calculator-tech-override-drive"),
).toBeInTheDocument();
expect(ui.queryByTestId("calculator-tech-drive")).toBeNull();
});
test("clicking the open tech lock reveals the input + closed lock", async () => {
const ui = mount();
await fireEvent.click(ui.getByTestId("calculator-tech-override-drive"));
// Now an input is rendered and the lock turned closed (reset).
expect(ui.getByTestId("calculator-tech-drive")).toHaveValue(1.2);
expect(ui.getByTestId("calculator-tech-reset-drive")).toBeInTheDocument();
expect(ui.queryByTestId("calculator-tech-value-drive")).toBeNull();
});
test("flags a tech override below the player's current tech", async () => {
const ui = mount();
await fireEvent.click(ui.getByTestId("calculator-tech-override-drive"));
// Player drive is 1.2; setting 0.5 is below the floor.
await fireEvent.input(ui.getByTestId("calculator-tech-drive"), {
target: { value: "0.5" },
});
expect(ui.getByTestId("calculator-tech-drive")).toHaveAttribute(
"aria-invalid",
"true",
);
});
test("smart step jumps from 0 to 1 on ArrowUp for ship blocks", async () => {
const ui = mount();
const drive = ui.getByTestId("calculator-block-drive") as HTMLInputElement;
drive.focus();
await fireEvent.keyDown(drive, { key: "ArrowUp" });
expect(drive).toHaveValue(1);
await fireEvent.keyDown(drive, { key: "ArrowUp" });
expect(drive).toHaveValue(1.1);
await fireEvent.keyDown(drive, { key: "ArrowDown" });
expect(drive).toHaveValue(1);
await fireEvent.keyDown(drive, { key: "ArrowDown" });
expect(drive).toHaveValue(0);
});
test("regression: speed lock works at the ceiling with all-zero non-drive blocks", async () => {
const ui = mount();
await setBlock(ui, "drive", 1);
// Override drive tech to 1 so the ceiling math is plain.
await fireEvent.click(ui.getByTestId("calculator-tech-override-drive"));
await fireEvent.input(ui.getByTestId("calculator-tech-drive"), {
target: { value: "1" },
});
// With D=1, W=A=S=C=0 the only achievable speed is 20*driveTech=20.
expect(ui.getByTestId("calculator-out-speedEmpty")).toHaveTextContent("20");
await fireEvent.click(ui.getByTestId("calculator-lock-speedEmpty"));
const locked = ui.getByTestId("calculator-locked-speedEmpty");
expect(locked).toHaveValue(20);
// The lock is feasible — no infeasible title and no red error class.
expect(locked).not.toHaveAttribute(
"title",
expect.stringMatching(/cannot be reached/i),
);
});
test("planet MAT defaults to a value + open lock and opens an input on click", async () => {
const selection = new SelectionStore();
selection.selectPlanet(17);
const ui = mount({
report: makeReport({ planets: [LOCAL_PLANET] }),
selection,
});
// Initial state: the MAT shows the planet's value via the number cell
// and an open lock; no input until the override is activated.
expect(
ui.getByTestId("calculator-planet-mat-value"),
).toHaveTextContent("100");
expect(
ui.getByTestId("calculator-mat-override"),
).toBeInTheDocument();
expect(ui.queryByTestId("calculator-planet-mat")).toBeNull();
await fireEvent.click(ui.getByTestId("calculator-mat-override"));
expect(ui.getByTestId("calculator-planet-mat")).toHaveValue(100);
expect(ui.getByTestId("calculator-mat-reset")).toBeInTheDocument();
});
test("flags a modernization target below the player's current tech", async () => {
const ui = mount();
await fireEvent.click(ui.getByTestId("calculator-mode-modernization"));
// Player drive is 1.2; the target is seeded with the same value.
await fireEvent.input(ui.getByTestId("calculator-target-drive"), {
target: { value: "0.5" },
});
expect(ui.getByTestId("calculator-target-drive")).toHaveAttribute(
"aria-invalid",
"true",
);
});
test("armament Arrow keys step the integer block by ±1 (clamped at 0)", async () => {
const ui = mount();
const armament = ui.getByTestId(
"calculator-block-armament",
) as HTMLInputElement;
armament.focus();
await fireEvent.keyDown(armament, { key: "ArrowUp" });
expect(armament).toHaveValue(1);
await fireEvent.keyDown(armament, { key: "ArrowUp" });
expect(armament).toHaveValue(2);
await fireEvent.keyDown(armament, { key: "ArrowDown" });
expect(armament).toHaveValue(1);
await fireEvent.keyDown(armament, { key: "ArrowDown" });
expect(armament).toHaveValue(0);
// Clamped at zero — another ArrowDown is a no-op.
await fireEvent.keyDown(armament, { key: "ArrowDown" });
expect(armament).toHaveValue(0);
});
test("renders unoverridden tech as a 3-decimal label (matches the report)", () => {
// Player drive tech 1.2 → "1.200" via the shared ceil3 formatter,
// always padded to three decimals (calculator labels are column-
// aligned with the report).
const ui = mount();
const tech = ui.getByTestId("calculator-tech-value-drive");
expect((tech.textContent ?? "").trim()).toBe("1.200");
});
test("planet MAT label renders through the 3-decimal formatter", () => {
const selection = new SelectionStore();
selection.selectPlanet(17);
const ui = mount({
report: makeReport({ planets: [LOCAL_PLANET] }),
selection,
});
// Planet MAT is 100 → "100.000" through the shared formatter; the
// label is monospaced + right-aligned via the existing `.mat-val`
// rule. Integer MAT pads to three decimals like every other label.
const mat = ui.getByTestId("calculator-planet-mat-value");
expect((mat.textContent ?? "").trim()).toBe("100.000");
});
test("derived results pad to three decimals (integer empty mass)", async () => {
// Integer-valued outputs read with the same trailing zeros as
// fractional ones — column-aligned tabular display.
const ui = mount();
await setBlock(ui, "drive", 10);
await setBlock(ui, "shields", 5);
await setBlock(ui, "cargo", 5);
const mass = ui.getByTestId("calculator-out-emptyMass");
expect((mass.textContent ?? "").trim()).toBe("20.000");
});
test("number inputs refuse a fourth decimal as the user types", async () => {
const selection = new SelectionStore();
selection.selectPlanet(17);
const ui = mount({
report: makeReport({ planets: [LOCAL_PLANET] }),
selection,
});
// MAT input: typed "12.3456" must clamp to "12.345" on input.
await fireEvent.click(ui.getByTestId("calculator-mat-override"));
const mat = ui.getByTestId("calculator-planet-mat") as HTMLInputElement;
await fireEvent.input(mat, { target: { value: "12.3456" } });
expect(mat.value).toBe("12.345");
expect(mat.valueAsNumber).toBeCloseTo(12.345, 9);
// Custom-load input on a ship with a non-zero cargo: typed
// "1.2345" must clamp to "1.234".
await setBlock(ui, "drive", 10);
await setBlock(ui, "shields", 5);
await setBlock(ui, "cargo", 5);
await fireEvent.click(ui.getByTestId("calculator-load-custom"));
const load = ui.getByTestId("calculator-custom-load") as HTMLInputElement;
await fireEvent.input(load, { target: { value: "1.2345" } });
expect(load.value).toBe("1.234");
});
test("tech and target-tech inputs cap at three decimals", async () => {
const ui = mount();
// Tech override input.
await fireEvent.click(ui.getByTestId("calculator-tech-override-drive"));
const tech = ui.getByTestId("calculator-tech-drive") as HTMLInputElement;
await fireEvent.input(tech, { target: { value: "2.9999" } });
expect(tech.value).toBe("2.999");
// Modernization target tech input.
await fireEvent.click(ui.getByTestId("calculator-mode-modernization"));
const target = ui.getByTestId(
"calculator-target-drive",
) as HTMLInputElement;
await fireEvent.input(target, { target: { value: "3.1416" } });
expect(target.value).toBe("3.141");
});
test("lock value input caps at three decimals", async () => {
const ui = mount();
await setBlock(ui, "drive", 10);
await setBlock(ui, "shields", 5);
await setBlock(ui, "cargo", 5);
await fireEvent.click(ui.getByTestId("calculator-lock-attack"));
const lock = ui.getByTestId(
"calculator-locked-attack",
) as HTMLInputElement;
await fireEvent.input(lock, { target: { value: "0.1234" } });
expect(lock.value).toBe("0.123");
});
test("ship-block input caps at three decimals", async () => {
const ui = mount();
const drive = ui.getByTestId("calculator-block-drive") as HTMLInputElement;
await fireEvent.input(drive, { target: { value: "1.2345" } });
expect(drive.value).toBe("1.234");
});
test("lock spinner step is replaced by ArrowUp/ArrowDown (±0.001)", async () => {
const ui = mount();
await setBlock(ui, "drive", 10);
await setBlock(ui, "shields", 5);
await setBlock(ui, "cargo", 5);
await fireEvent.click(ui.getByTestId("calculator-lock-attack"));
const locked = ui.getByTestId(
"calculator-locked-attack",
) as HTMLInputElement;
// Lock value is seeded from outputs.attack (0 with no weapons).
const start = Number(locked.value);
locked.focus();
await fireEvent.keyDown(locked, { key: "ArrowUp" });
expect(Number(locked.value)).toBeCloseTo(start + 0.001, 9);
await fireEvent.keyDown(locked, { key: "ArrowDown" });
expect(Number(locked.value)).toBeCloseTo(start, 9);
});
test("flags the lock as infeasible when the back-solved block falls in (0, 1)", async () => {
// attack lock → weapons = targetAttack / weaponsTech. weaponsTech
// is 1.5; a target of 0.5 would force weapons = 0.333… which
// fails the DWSC rule (must be 0 or ≥ 1).
const ui = mount();
await setBlock(ui, "drive", 10);
await setBlock(ui, "armament", 2);
await setBlock(ui, "weapons", 5);
await setBlock(ui, "shields", 5);
await setBlock(ui, "cargo", 5);
await fireEvent.click(ui.getByTestId("calculator-lock-attack"));
await fireEvent.input(ui.getByTestId("calculator-locked-attack"), {
target: { value: "0.5" },
});
const locked = ui.getByTestId("calculator-locked-attack");
expect(locked).toHaveAttribute(
"title",
expect.stringMatching(/cannot be reached/i),
);
// The claimed block is not back-solved into the invalid (0, 1)
// range — the weapons input keeps the user's typed value (5).
expect(ui.getByTestId("calculator-block-weapons")).toHaveValue(5);
});
test("dropdown selection loads the class immediately (no blur needed)", async () => {
const ui = mount({
report: makeReport({
localShipClass: [
{
name: "Scout",
drive: 3,
armament: 0,
weapons: 0,
shields: 2,
cargo: 1,
},
],
} as unknown as GameReport),
});
// A datalist option click sets the whole value at once — Firefox
// reports no `inputType`, Chromium reports "insertReplacementText".
// Simulate the latter; the calculator should load before any
// `change` event.
await fireEvent.input(ui.getByTestId("calculator-name"), {
target: { value: "Scout" },
inputType: "insertReplacementText",
});
expect(ui.getByTestId("calculator-block-drive")).toHaveValue(3);
expect(ui.getByTestId("calculator-block-shields")).toHaveValue(2);
});
test("dropdown selection asks before discarding manual edits", async () => {
const ui = mount({
report: makeReport({
localShipClass: [
{
name: "Scout",
drive: 3,
armament: 0,
weapons: 0,
shields: 2,
cargo: 1,
},
],
} as unknown as GameReport),
});
// The user has hand-edited the design.
await setBlock(ui, "drive", 7);
const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
await fireEvent.input(ui.getByTestId("calculator-name"), {
target: { value: "Scout" },
inputType: "insertReplacementText",
});
expect(confirm).toHaveBeenCalledTimes(1);
// The user said no — the manual edits stay.
expect(ui.getByTestId("calculator-block-drive")).toHaveValue(7);
// The name field is reverted to the previously loaded class (or
// empty), so the field does not pretend the load happened.
expect(ui.getByTestId("calculator-name")).toHaveValue("");
confirm.mockReturnValue(true);
await fireEvent.input(ui.getByTestId("calculator-name"), {
target: { value: "Scout" },
inputType: "insertReplacementText",
});
// Confirmed — the class is now loaded.
expect(ui.getByTestId("calculator-block-drive")).toHaveValue(3);
confirm.mockRestore();
});
test("dropdown selection loads silently when the design is clean", async () => {
const ui = mount({
report: makeReport({
localShipClass: [
{
name: "Scout",
drive: 3,
armament: 0,
weapons: 0,
shields: 2,
cargo: 1,
},
],
} as unknown as GameReport),
});
const confirm = vi.spyOn(window, "confirm");
await fireEvent.input(ui.getByTestId("calculator-name"), {
target: { value: "Scout" },
inputType: "insertReplacementText",
});
expect(confirm).not.toHaveBeenCalled();
expect(ui.getByTestId("calculator-block-drive")).toHaveValue(3);
confirm.mockRestore();
});
test("does not render a delete-class button after loading a class", async () => {
const ui = mount({
report: makeReport({
localShipClass: [
{
name: "Scout",
drive: 3,
armament: 0,
weapons: 0,
shields: 2,
cargo: 1,
},
],
} as unknown as GameReport),
});
await fireEvent.input(ui.getByTestId("calculator-name"), {
target: { value: "Scout" },
inputType: "insertReplacementText",
});
// The loaded class state used to render a `delete <name>` button;
// the calculator no longer owns delete-class — issue #53 will.
expect(ui.queryByTestId("calculator-delete")).toBeNull();
});
test("bombing and cargo-capacity rows reserve the lock slot for column alignment", () => {
const ui = mount();
for (const id of ["calculator-out-bombing", "calculator-out-cargo-capacity"]) {
const cell = ui.getByTestId(id).parentElement;
expect(cell).not.toBeNull();
// A hidden placeholder occupies the same width as the lock button
// on the mass/speed/attack/defence rows, so the value column does
// not drift right on the rows without a lock.
expect(cell!.querySelector(".lock-slot")).not.toBeNull();
}
});
}); });
@@ -275,9 +275,6 @@ test("calculator draws reach circles for the selected planet", async ({
await calc.getByTestId("calculator-block-drive").fill("10"); await calc.getByTestId("calculator-block-drive").fill("10");
await calc.getByTestId("calculator-block-shields").fill("5"); await calc.getByTestId("calculator-block-shields").fill("5");
await calc.getByTestId("calculator-block-cargo").fill("5"); await calc.getByTestId("calculator-block-cargo").fill("5");
// Tech defaults render as a number + open lock; click to reveal the
// input before typing an override (the F8-06 unified lock idiom).
await calc.getByTestId("calculator-tech-override-drive").click();
await calc.getByTestId("calculator-tech-drive").fill("1.2"); await calc.getByTestId("calculator-tech-drive").fill("1.2");
await expect.poll(() => countReachCircles(page)).toBeGreaterThan(0); await expect.poll(() => countReachCircles(page)).toBeGreaterThan(0);
+15 -94
View File
@@ -1,7 +1,8 @@
// F8-04 profile screen — end-to-end coverage. Mocks the gateway so the // F8-04 profile screen — end-to-end coverage. Mocks the gateway so the
// lobby boots with an account aggregate, then exercises the sidebar // lobby boots with an account aggregate, then exercises the sidebar
// navigation into the profile, the edit form, the save-stay flow, and // navigation into the profile, the edit form, and the save round-trip
// the time-zone dropdown. // against the FlatBuffers-decoded `user.profile.update` /
// `user.settings.update` payloads.
import { fromJson, type JsonValue } from "@bufbuild/protobuf"; import { fromJson, type JsonValue } from "@bufbuild/protobuf";
import { ByteBuffer } from "flatbuffers"; import { ByteBuffer } from "flatbuffers";
@@ -24,7 +25,6 @@ import {
interface ProfileMocks { interface ProfileMocks {
pendingSubscribes: Array<() => void>; pendingSubscribes: Array<() => void>;
account: AccountFixture; account: AccountFixture;
accountGetCount: number;
profileUpdates: Array<{ displayName: string }>; profileUpdates: Array<{ displayName: string }>;
settingsUpdates: Array<{ preferredLanguage: string; timeZone: string }>; settingsUpdates: Array<{ preferredLanguage: string; timeZone: string }>;
} }
@@ -36,7 +36,6 @@ async function mockGateway(
const mocks: ProfileMocks = { const mocks: ProfileMocks = {
pendingSubscribes: [], pendingSubscribes: [],
account: { ...initial }, account: { ...initial },
accountGetCount: 0,
profileUpdates: [], profileUpdates: [],
settingsUpdates: [], settingsUpdates: [],
}; };
@@ -69,7 +68,6 @@ async function mockGateway(
let payload: Uint8Array; let payload: Uint8Array;
switch (req.messageType) { switch (req.messageType) {
case "user.account.get": case "user.account.get":
mocks.accountGetCount += 1;
payload = buildAccountResponsePayload(mocks.account); payload = buildAccountResponsePayload(mocks.account);
break; break;
case "user.profile.update": { case "user.profile.update": {
@@ -183,7 +181,7 @@ test.describe("F8-04 — profile screen", () => {
mocks.pendingSubscribes.forEach((resolve) => resolve()); mocks.pendingSubscribes.forEach((resolve) => resolve());
}); });
test("saving an edited display name posts user.profile.update, stays on the form, and refreshes the identity strip", async ({ test("saving an edited display name posts user.profile.update and returns to lobby", async ({
page, page,
}) => { }) => {
const mocks = await mockGateway(page, { const mocks = await mockGateway(page, {
@@ -199,26 +197,17 @@ test.describe("F8-04 — profile screen", () => {
await page.getByTestId("profile-display-name").fill("Captain"); await page.getByTestId("profile-display-name").fill("Captain");
await page.getByTestId("profile-save").click(); await page.getByTestId("profile-save").click();
// Form stays on screen; the saved notice surfaces and the await expect(page.getByTestId("lobby-my-games-empty")).toBeVisible();
// shell-level identity strip picks up the new name without a
// second `user.account.get`.
await expect(page.getByTestId("profile-saved-notice")).toBeVisible();
await expect(page.getByTestId("profile-form")).toBeVisible();
await expect(page.getByTestId("lobby-account-name")).toContainText( await expect(page.getByTestId("lobby-account-name")).toContainText(
"Captain", "Captain",
); );
expect(mocks.profileUpdates).toEqual([{ displayName: "Captain" }]); expect(mocks.profileUpdates).toEqual([{ displayName: "Captain" }]);
expect(mocks.settingsUpdates).toEqual([]); expect(mocks.settingsUpdates).toEqual([]);
// Editing the form again clears the notice so a follow-up save is
// unambiguous.
await page.getByTestId("profile-display-name").fill("Pilot");
await expect(page.getByTestId("profile-saved-notice")).toHaveCount(0);
mocks.pendingSubscribes.forEach((resolve) => resolve()); mocks.pendingSubscribes.forEach((resolve) => resolve());
}); });
test("changing the language posts user.settings.update, stays on the form, and switches the active locale", async ({ test("changing the language posts user.settings.update and switches the active locale", async ({
page, page,
}) => { }) => {
const mocks = await mockGateway(page, { const mocks = await mockGateway(page, {
@@ -233,13 +222,15 @@ test.describe("F8-04 — profile screen", () => {
await page.getByTestId("profile-preferred-language").selectOption("ru"); await page.getByTestId("profile-preferred-language").selectOption("ru");
await page.getByTestId("profile-save").click(); await page.getByTestId("profile-save").click();
// Profile stays on screen; the Russian dictionary now drives the await expect(page.getByTestId("lobby-account-name")).toBeVisible();
// form copy. The save button label is the visible signal. // The lobby switches to the Russian dictionary after the save —
await expect(page.getByTestId("profile-form")).toBeVisible(); // the "create new game" button label is the visible signal.
await expect(page.getByTestId("profile-save")).toHaveText("сохранить"); await expect(page.getByTestId("lobby-create-button")).toHaveText(
await expect(page.getByTestId("profile-saved-notice")).toBeVisible(); "создать новую игру",
expect(mocks.settingsUpdates).toHaveLength(1); );
expect(mocks.settingsUpdates[0]?.preferredLanguage).toBe("ru"); expect(mocks.settingsUpdates).toEqual([
{ preferredLanguage: "ru", timeZone: "UTC" },
]);
mocks.pendingSubscribes.forEach((resolve) => resolve()); mocks.pendingSubscribes.forEach((resolve) => resolve());
}); });
@@ -266,74 +257,4 @@ test.describe("F8-04 — profile screen", () => {
mocks.pendingSubscribes.forEach((resolve) => resolve()); mocks.pendingSubscribes.forEach((resolve) => resolve());
}); });
test("time zone is a continent-grouped <select>; saving an edited zone posts user.settings.update", async ({
page,
}) => {
const mocks = await mockGateway(page, {
userId: "user-1",
email: "pilot@example.com",
userName: "player-abc12345",
displayName: "Pilot",
preferredLanguage: "en",
timeZone: "Europe/London",
});
await completeLogin(page);
await page.getByTestId("lobby-account-name").click();
await expect(page.getByTestId("profile-form")).toBeVisible();
const select = page.getByTestId("profile-time-zone");
// The field renders as a <select> with at least the Europe and
// America optgroups present and the stored zone selected.
expect(await select.evaluate((el) => el.tagName)).toBe("SELECT");
const optgroupLabels = await select.evaluate((el) =>
Array.from((el as HTMLSelectElement).querySelectorAll("optgroup")).map(
(g) => g.label,
),
);
expect(optgroupLabels).toContain("Europe");
expect(optgroupLabels).toContain("America");
await expect(select).toHaveValue("Europe/London");
await select.selectOption("America/New_York");
await page.getByTestId("profile-save").click();
await expect(page.getByTestId("profile-saved-notice")).toBeVisible();
expect(mocks.settingsUpdates).toEqual([
{ preferredLanguage: "en", timeZone: "America/New_York" },
]);
mocks.pendingSubscribes.forEach((resolve) => resolve());
});
test("the identity strip persists across Overview ⇄ Profile without a second user.account.get", async ({
page,
}) => {
const mocks = await mockGateway(page, {
userId: "user-1",
email: "pilot@example.com",
userName: "player-abc12345",
displayName: "Pilot",
});
await completeLogin(page);
await expect(page.getByTestId("lobby-account-name")).toContainText("Pilot");
const firstCount = mocks.accountGetCount;
expect(firstCount).toBeGreaterThanOrEqual(1);
// Navigate Overview → Profile: identity must NOT flash the
// loading placeholder, and the cache must answer without a
// second gateway call.
await page.getByTestId("lobby-nav-profile").click();
await expect(page.getByTestId("profile-form")).toBeVisible();
await expect(page.getByTestId("lobby-account-name")).toContainText("Pilot");
// Navigate back to Overview.
await page.getByTestId("lobby-nav-overview").click();
await expect(page.getByTestId("lobby-my-games-empty")).toBeVisible();
await expect(page.getByTestId("lobby-account-name")).toContainText("Pilot");
expect(mocks.accountGetCount).toBe(firstCount);
mocks.pendingSubscribes.forEach((resolve) => resolve());
});
}); });
+2 -5
View File
@@ -94,13 +94,10 @@ export function makeFakeCore(overrides: Partial<Core> = {}): Core {
weaponsForAttack: ({ targetAttack, weaponsTech }) => weaponsForAttack: ({ targetAttack, weaponsTech }) =>
weaponsTech <= 0 || targetAttack < 0 ? null : targetAttack / weaponsTech, weaponsTech <= 0 || targetAttack < 0 ? null : targetAttack / weaponsTech,
driveForSpeed: ({ targetSpeed, driveTech, restMass }) => { driveForSpeed: ({ targetSpeed, driveTech, restMass }) => {
if (driveTech <= 0 || targetSpeed <= 0) return null;
const ceiling = 20 * driveTech; const ceiling = 20 * driveTech;
if (restMass <= 0) { if (driveTech <= 0 || targetSpeed <= 0 || targetSpeed >= ceiling) {
if (targetSpeed !== ceiling) return null; return null;
return 1;
} }
if (targetSpeed >= ceiling) return null;
return (targetSpeed * restMass) / (ceiling - targetSpeed); return (targetSpeed * restMass) / (ceiling - targetSpeed);
}, },
shieldsForDefence: ({ targetDefence, shieldsTech, restMass }) => { shieldsForDefence: ({ targetDefence, shieldsTech, restMass }) => {