Compare commits
8
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
eadae4dc4f | ||
|
|
67f48fb99c | ||
|
|
c19db2c118 | ||
|
|
977bf584ce | ||
|
|
6b167cb435 | ||
|
|
762c120bbd | ||
|
|
cfcdd8b8a8 | ||
|
|
ef27b59762 |
@@ -14,7 +14,7 @@ renders territorial ownership; the whole thing persists to SQLite and streams ov
|
||||
## Change process (mandatory)
|
||||
|
||||
1. **Small, incremental, well-tested changes** — work is done one change at a time, in smaller parts; each part is tested before moving on. Connected tasks that touch the same area of code MAY be done together on one branch/PR with a single version bump (e.g. two tweaks to the same panel).
|
||||
2. **Gitea issue first** — file an issue on Gitea (`https://git.kkhost.pl`, repo `OpenCode/History`) describing the change (title, scope, acceptance criteria) before or alongside creating the branch. The issue is the single source of intent; the PR references it.
|
||||
2. **Gitea issue + `Fixes #N` in the PR** — the PR references (and, via `Fixes #N`, closes) the Gitea issue(s) the work addresses (`https://git.kkhost.pl`, repo `OpenCode/History`). If the user has already filed issue(s) for the change, reference those directly in the PR — no separate changelog issue is created; only file a fresh issue when the work has none pre-filed (e.g. a fix originating purely from chat feedback). `CHANGELOG.md` is always the durable changelog of what shipped.
|
||||
3. **Feature branch + PR** — every change lands on a feature branch off `master` (no direct pushes to `master`). Open a pull request against `master` on Gitea; reference the issue in the PR description.
|
||||
4. **Changelog entry** — every change is listed in `CHANGELOG.md` with a version, date and time (format: `## v<version> — YYYY-MM-DD HH:MM`, then bullet points of what changed).
|
||||
5. **Version bump** — the version is updated in `package.json`.
|
||||
@@ -51,10 +51,10 @@ history/
|
||||
│ └── countries.geo.json # 177 features, id=ISO_A3 (committed; Vite copies to dist/)
|
||||
├── shared/ # NO runtime deps — the single source of truth
|
||||
│ ├── types.ts # domain types (Nation, GameState, RoundItem, Preset, …)
|
||||
│ └── protocol.ts # LLM TurnResult schema + AddAction/AddDiplomacy/Jump request types + pure helpers
|
||||
│ └── protocol.ts # LLM TurnResult schema + AddAction/AddDiplomacy/RemoveQueueItem/Jump request types + pure helpers
|
||||
├── server/
|
||||
│ ├── index.ts # Express: /api/* (action|diplomacy|jump|advisor|games|presets), /sse/:id; reads PORT/LLM_*/DATA_DIR
|
||||
│ ├── engine.ts # pure: buildPrompt / parse+validate / applyTurnResult / runTurn / queueRoundItem / advisor
|
||||
│ ├── index.ts # Express: /api/* (action|diplomacy|queue/remove|jump|advisor|games|presets), /sse/:id; reads PORT/LLM_*/DATA_DIR
|
||||
│ ├── engine.ts # pure: buildPrompt / parse+validate / applyTurnResult / runTurn / queueRoundItem / removeRoundItem / advisor
|
||||
│ ├── llm.ts # LlmClient (injectable transport, retry+backoff, logging) + env config
|
||||
│ ├── stub.ts # deterministic LLM transport (tests/e2e) + ADVISOR_MARKER
|
||||
│ ├── map.ts # GameState → RegionMap (ISO_A3 → owner + stable color)
|
||||
@@ -72,10 +72,11 @@ history/
|
||||
│ └── utils.ts # cn()
|
||||
└── components/
|
||||
├── PresetPicker.tsx / NationSelect.tsx # home + nation pick screens
|
||||
├── WorldMap.tsx # MapLibre basemap + choropleth + click popup + player highlight
|
||||
├── WorldMap.tsx # MapLibre basemap + choropleth + click→dossier + hover tooltip + player highlight
|
||||
├── NationPanel.tsx # a nation's stats/territory/diplomacy dossier
|
||||
├── ActionPanel.tsx # tabs: Action / Diplomacy / Advisor + pending-queue list + "Jump forward"
|
||||
├── ActionPanel.tsx # tabs: Action / Diplomacy / Advisor + pending-queue list (per-item trash button + confirm dialog) + "Jump forward"
|
||||
├── EventFeed.tsx # scrolling event log (newest first)
|
||||
├── FloatingWindow.tsx # the HUD window primitive — free-floating (draggable, position persisted), or `pinned` (fixed top-center bar), or `dock`ed (full-height left/right column); renders dock controls when `onDockChange` is set
|
||||
├── StatBar.tsx
|
||||
└── ui/ # 14 shadcn/ui primitives
|
||||
```
|
||||
@@ -87,7 +88,7 @@ history/
|
||||
| `npm run dev` | Express on :4321 (tsx watch) + Vite on :5173 (proxies `/api`,`/sse`) concurrently |
|
||||
| `npm run build` | `vite build` (client → `dist/`) then `tsup server/index.ts` → `server/dist/index.js` |
|
||||
| `npm start` | run the compiled server (`node server/dist/index.js`) on :4321 |
|
||||
| `npm test` | vitest unit tests in `server/` (19 tests) |
|
||||
| `npm test` | vitest unit tests in `server/` (39 tests) |
|
||||
| `npm run typecheck` | `tsc --noEmit` (strict) across src/server/shared/e2e/configs |
|
||||
| `npm run lint` | ESLint flat config |
|
||||
| `npm run e2e` | Playwright, fully deterministic (`LLM_STUB=1`); **runs in CI on every PR** (see below) |
|
||||
@@ -117,6 +118,21 @@ history/
|
||||
sends the entire `pending` array to the model, applies the `TurnResult`, clears `pending`, and
|
||||
advances the turn. An empty round (no items queued) is allowed and lets the world advance on its
|
||||
own. This design reduces LLM call frequency and makes each call a coherent batch of work.
|
||||
Queued items can be removed again via `POST /queue/remove` (by index — the client offers a
|
||||
trash button per row with a confirm dialog); like the adds it never advances the turn.
|
||||
- **Advisor "thinking" state (separate from the turn `busy`).** The Advisor tab shows a thinking hint
|
||||
(mirroring the turn's `sim-hint`) and disables its "Ask advisor" button while the advisor LLM call is
|
||||
in flight, and the top-bar `status-indicator` reads "Advisor thinking…". It is a distinct `advisorBusy`
|
||||
flag in `App.tsx` and must never gate "Jump forward" or the turn flow.
|
||||
- **Monotonic `GameState.version` — clients "never go backwards".** Every mutation (queue
|
||||
add/remove, turn commit) bumps `state.version` in the engine (`queueRoundItem` /
|
||||
`removeRoundItem` / `applyTurnResult`); it starts at 1 on game creation, is persisted in SQLite,
|
||||
and legacy games without the field are treated as version 0. ALL state ingestion on the client —
|
||||
SSE `state`/`turn` events, REST responses (add/remove/jump), and game loads — flows through the
|
||||
single `applyState` in `App.tsx`: a *different* game id is always adopted, the *same* game only
|
||||
when the incoming version is not older than the current one (compared inside the functional
|
||||
`setGame` updater, so it can't act on a stale closure). This is what stops a late-arriving stale
|
||||
SSE snapshot from clobbering the UI (see Gotchas, #10).
|
||||
- **Defensive turn handling, never crash.** `engine.runTurn` strips fences, extracts the first
|
||||
balanced `{...}`, `JSON.parse`s, validates (ignores invalid ops, clamps stats to 0–100), retries
|
||||
once with a nudge if the result is empty/invalid, and if it's still unusable emits a generic
|
||||
@@ -124,6 +140,17 @@ history/
|
||||
(model down) surfaces as an HTTP 502 to the client (shown as a toast).
|
||||
- **Stable per-nation colors.** `shared.nationColor(id)` hashes a nation id → hue, shared by the
|
||||
server's `RegionMap` and any client coloring so the choropleth always agrees.
|
||||
- **Map click → dossier target (owner resolved from the RegionMap).** Clicking a map region does
|
||||
NOT open a popup — it switches the dossier to that region's owning nation
|
||||
(`setViewingId(ownerId)` in `GameScreen`); the manual "Inspect" selector and a map click both set
|
||||
the same target and stay in sync. The owning nation is resolved from the authoritative `RegionMap`
|
||||
by the feature's stable ISO_A3 code, which `applyRegions` stamps into `properties.regionId`
|
||||
(properties survive into the rendered features) and the shared `regionOwner()` helper looks up.
|
||||
It must **never** be read from the feature's top-level `id`: MapLibre repacks a GeoJSON source's
|
||||
`id` into a numeric index when it stores the source, so at click/hover time `feature.id` is a
|
||||
number, never the ISO_A3 (that repacking was the "no owner" bug, #6). Unowned regions (no
|
||||
`RegionMap` entry) leave the current dossier target unchanged — never a broken dossier. The
|
||||
hover path (a non-closeable tooltip with owner + key stats) uses the same resolution.
|
||||
- **Deterministic stub.** `server/stub.ts` answers the model contract deterministically per
|
||||
queued round item: each `action` item → one military/success event, each `diplomacy` item → one
|
||||
diplomatic/partial event, an empty round → one political "The world moves on" event. The player
|
||||
@@ -131,6 +158,15 @@ history/
|
||||
the player is allied with the first other nation (by key order in the `nations` record), and the
|
||||
date advances 2 days. Unit + e2e assertions rely on these exact values, so keep the stub
|
||||
deterministic.
|
||||
- **HUD layout.** The game screen is a full-viewport map (z-0) with `FloatingWindow` overlays. The
|
||||
top bar is **pinned** — a fixed, non-movable bar centered at the top a few px down (it re-centers
|
||||
on resize and always floats above the other windows). The **dossier / event-feed / action**
|
||||
panels are free-floating by default (the same first-run positions as before) but can each be
|
||||
**docked** into a full-height left or right pane; the choice is persisted in `localStorage`
|
||||
(`history.floatwin.v1.dock`) and restored on reload, so the default "float" reproduces the
|
||||
original layout until the user docks something. The **legend** stays a small floating widget (not
|
||||
dockable). There is **no "Map" window** — the map is zoomed/panned directly (wheel/trackpad +
|
||||
drag).
|
||||
- Styling: Tailwind utility classes + shadcn/ui only; dark "command-center" theme (slate bg, amber
|
||||
primary, cyan accent). No CSS beyond the Tailwind import in `src/index.css`.
|
||||
|
||||
@@ -170,6 +206,16 @@ history/
|
||||
|
||||
## Gotchas
|
||||
|
||||
- **Stale SSE snapshots can arrive *after* a fresher REST response — the version guard is what
|
||||
keeps the UI honest (#10).** The SSE `state` event sent on connect/resync is a snapshot taken at
|
||||
the moment the request is handled, and the SSE stream and the REST responses ride different
|
||||
connections (Vite proxy in dev, Traefik in prod) with no delivery-order guarantee. A snapshot
|
||||
taken just before a mutation is saved (e.g. the on-connect resync racing a quick "Add action")
|
||||
can reach the browser *after* that mutation's REST response. Pre-v0.4.0 the client applied any
|
||||
incoming state unconditionally, so a just-queued item could vanish ("add one: nothing happened,
|
||||
add another: both appears" — issue #10). Now every state carries a monotonic `version` and
|
||||
`App.tsx`'s `applyState` drops same-game states whose version is older than the current one.
|
||||
Don't add unguarded `setGame` calls or remove the version comparison.
|
||||
- **502s were the reasoning model exhausting its output budget.** The original client sent only
|
||||
`max_tokens: 4000`; `qwen3.8-27b`'s chain-of-thought alone often exceeded 4000 tokens, so
|
||||
`content` came back `null`, which the client treated as fatal → HTTP 502 (~half of turns),
|
||||
|
||||
@@ -2,6 +2,33 @@
|
||||
|
||||
All notable changes to **History** are listed here, newest first.
|
||||
|
||||
## v0.7.0 — 2026-10-11 19:17
|
||||
|
||||
- Clicking a map region now switches the selected dossier to that region's owning nation instead of opening a popup (#7). The closeable click popup is gone; a hover tooltip (owner + key stats) is kept. The manual "Inspect" selector still works and stays in sync — both it and a map click drive the same dossier target.
|
||||
- Fixed: a clicked owned region no longer reports "no owner" (#6). Root cause: MapLibre repacks a GeoJSON source's top-level `id` (the ISO_A3 string) into a numeric index when it stores the source, so the feature a click/hover handler receives has a *number* for `id` — the old `regions[f.id]` lookup resolved to nothing, and the popup read "No owner" even for owned regions (the choropleth fill still worked because it is stamped from the original `id` before `setData`). Fix: `applyRegions` now stamps the stable ISO_A3 code into `properties.regionId` (and `ownerId`), which survives into the rendered features, and both the click and hover handlers resolve the owning nation from that code via the authoritative RegionMap — never from the repacked `feature.id`.
|
||||
- Unowned regions (no entry in the RegionMap) do not change the dossier when clicked — the current target is left in place (a deliberate, non-crashing choice rather than a special "unowned" dossier state).
|
||||
- New shared helper `regionOwner(regions, isoA3)` in `@shared/protocol` (the pure, single source of truth for "ISO_A3 → owner record").
|
||||
- **Unit tests** — new `regionOwner` tests (owned → owner record, unowned → undefined, empty/missing → undefined) plus a #6 regression guard that pins the exact MapLibre-repacked feature shape (numeric `id`, ISO_A3 in `properties.regionId`) and asserts resolution via `properties.regionId` works while the old `feature.id` path fails (44 tests, up from 39).
|
||||
|
||||
## v0.6.0 — 2026-10-11 18:27
|
||||
|
||||
- Advisor fetches now show a "thinking" indicator (mirroring the turn's "Simulating…" hint) while the model responds, and the Ask-advisor button disables during the fetch; the top-bar status shows "Advisor thinking…" in the meantime. Fixes #15.
|
||||
|
||||
## v0.5.0 — 2026-10-11 17:36
|
||||
|
||||
- **HUD revamp** — removed the "Map" window (the full-screen map is directly interactive via scroll/trackpad; no floating zoom control, and the now-dead `MapApi`/`onMapReady` map plumbing is removed from `WorldMap`); the top bar is now a fixed, non-movable element pinned to top-center a few px from the top (a new `pinned` mode on `FloatingWindow` — viewport-centered, no drag, no persisted position, always above other windows); and the dossier / event-feed / action panels can each be docked into a left or right full-height pane (a new `dock`/`onDockChange` mode on `FloatingWindow`, with small left/right/float controls in each title bar, choice persisted in `localStorage` and reproduced on reload; the default "float" reproduces the current first-run layout exactly). The legend stays a small floating widget. Fixes #4, Fixes #5.
|
||||
- **`FloatingWindow`** — new optional props: `pinned` (top-center fixed bar), `dock` (`'left'`/`'right'` full-height columns) and `onDockChange` (renders the dock controls and reports the mode), plus `dataTestId` (a `data-testid` on the window root for e2e). `anchor` is now optional (defaults to `top-center`).
|
||||
- **New `data-testid`s** — `top-bar` (pinned header), `panel-dossier` / `panel-feed` / `panel-action` (per-window roots), and `dock-left` / `dock-right` / `dock-float` (per-window dock controls).
|
||||
- **New localStorage key** — `history.floatwin.v1.dock` (per-id dock mode); mirrors the existing `history.floatwin.v1.collapsed`.
|
||||
- **E2E** — new "HUD revamp" suite: asserts the Map window and its zoom buttons are gone, the top bar is pinned and horizontally centered a few px from the top (and doesn't move under a drag attempt), the dossier docks to the left edge (full-height) and the feed to the right edge, and a dock choice survives a page reload — all deterministic under `LLM_STUB=1` (11 tests, up from 9).
|
||||
|
||||
## v0.4.0 — 2026-10-11 16:02
|
||||
|
||||
- **Fix: queued items disappearing from the pending list (#10).** Root cause: SSE `state` events carried no freshness information, and the client's `onState`/`onTurn` handlers applied any incoming snapshot unconditionally. A stale snapshot — e.g. the SSE on-connect resync taken just before an add was saved, or an EventSource auto-reconnect — could arrive *after* the add's REST response and clobber it, so "add one: nothing happens, add another: both appear". Fix: every mutation now bumps a monotonic `GameState.version` (persisted in SQLite, started at 1 on create, bumped by `queueRoundItem`, the new `removeRoundItem`, and `applyTurnResult`; legacy games without the field are treated as version 0), and the client routes *every* state ingestion (SSE events, add/remove/jump responses, game loads) through a single "never go backwards" rule: a different game id is always adopted, the same game only when the incoming version is not older than the current one (compared inside the functional `setGame` updater, so it is stale-closure-proof).
|
||||
- **New: remove button for queued items (#11).** Each pending-queue row in "Your move" has a small trash-icon button that opens a shadcn `Dialog` confirmation (item quoted, Cancel / destructive Remove, dark command-center styling). Confirming calls the new `POST /api/games/:id/queue/remove` (body `{ index }`) — same fast save → broadcast → respond order as the add routes, no LLM, no turn advance; invalid indices get a 400. The client `api.removeQueueItem(id, index)` is version-gated like every other state update, so the list can never regress after a removal.
|
||||
- **Unit tests** — new `removeRoundItem` tests (valid removal + version bump, out-of-bounds/non-integer → `null`), version-bump assertions for `queueRoundItem`/`applyTurnResult`/stub turn, a legacy-no-version case, and version round-trip in `db.test.ts` (39 tests, up from 35).
|
||||
- **E2E** — new "queue add is never clobbered by a stale SSE snapshot" test (one add appears immediately, still there after a 1s grace period for late SSE events, version strictly increases across adds, queue survives a full page reload) and a "remove with confirmation" test (cancel keeps the item, confirm removes it, no turn advance, version persisted) — all deterministic under `LLM_STUB=1`.
|
||||
|
||||
## v0.3.0 — 2026-10-11 15:29
|
||||
|
||||
- **Deep-linking** — the active game's id now lives in the URL (`#/game/<id>`), so a link opens that exact game and two tabs can run two different games; a bad or missing id falls back to the home screen. Fixes #3.
|
||||
|
||||
+277
@@ -181,6 +181,142 @@ test.describe('History — save / resume across a page refresh', () => {
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Queue reliability — issue #10. A queued item must appear in the pending list
|
||||
* right after its REST response AND stay there: before the fix, a stale SSE
|
||||
* `state` snapshot (the on-connect resync taken just before the add was saved,
|
||||
* carrying no freshness marker) could arrive after the REST response and
|
||||
* clobber it — "add one: nothing happens, add another: both appear". The fix
|
||||
* gives every mutation a monotonic `GameState.version` and the client applies
|
||||
* an incoming state only when it is not older than the current one.
|
||||
*/
|
||||
test.describe('History — queue add is never clobbered by a stale SSE snapshot (#10)', () => {
|
||||
test('one added action appears immediately and survives late SSE snapshots', async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(90000);
|
||||
const id = await createUkGame(page);
|
||||
const origin = await page.evaluate(() => location.origin);
|
||||
|
||||
// Game screen at turn 1, nothing queued yet.
|
||||
await expect(page.getByTestId('world-map')).toBeVisible();
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
await expect(page.getByTestId('game-date')).toHaveText('1939-09-01');
|
||||
await expect(page.getByTestId('pending-empty')).toBeVisible();
|
||||
|
||||
// Queue exactly ONE action and assert it appears immediately (turn/date
|
||||
// unchanged, no events yet).
|
||||
await page.getByTestId('action-textarea').fill('Hold the line at the channel');
|
||||
const [addResp] = await Promise.all([
|
||||
page.waitForResponse(
|
||||
(r) => r.request().method() === 'POST' && new URL(r.url()).pathname === `/api/games/${id}/action`,
|
||||
),
|
||||
page.getByTestId('add-action').click(),
|
||||
]);
|
||||
const addBody = (await addResp.json()) as { game: { version: number; pending: unknown[] } };
|
||||
expect(addBody.game.pending).toHaveLength(1);
|
||||
|
||||
await expect(page.getByTestId('pending-item')).toHaveCount(1);
|
||||
await expect(page.getByTestId('pending-item').first()).toHaveAttribute('data-kind', 'action');
|
||||
await expect(page.getByTestId('pending-item').first()).toContainText('Hold the line at the channel');
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
await expect(page.getByTestId('game-date')).toHaveText('1939-09-01');
|
||||
await expect(page.getByTestId('event-item')).toHaveCount(0);
|
||||
await expect(page.getByTestId('title-queued')).toHaveText('1 queued');
|
||||
|
||||
// Let any in-flight / late SSE snapshot (on-connect resync, auto-reconnect)
|
||||
// have its chance to arrive. Under the stub these settle in milliseconds;
|
||||
// a second is generous. Before the version fix, a stale one could clobber
|
||||
// the just-added item here.
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// The item is still there — the stale snapshot was dropped, not applied.
|
||||
await expect(page.getByTestId('pending-item')).toHaveCount(1);
|
||||
await expect(page.getByTestId('pending-item').first()).toContainText('Hold the line at the channel');
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
|
||||
// Protocol-level check: a later mutation (a second queued item) must carry
|
||||
// a strictly higher version than the one we just saw.
|
||||
await page.getByTestId('action-textarea').fill('Scramble the night fighters');
|
||||
const [add2Resp] = await Promise.all([
|
||||
page.waitForResponse(
|
||||
(r) => r.request().method() === 'POST' && new URL(r.url()).pathname === `/api/games/${id}/action`,
|
||||
),
|
||||
page.getByTestId('add-action').click(),
|
||||
]);
|
||||
const add2Body = (await add2Resp.json()) as { game: { version: number } };
|
||||
expect(add2Body.game.version).toBeGreaterThan(addBody.game.version);
|
||||
await expect(page.getByTestId('pending-item')).toHaveCount(2);
|
||||
|
||||
// The game persisted with a version survives a full page reload.
|
||||
await page.goto(`${origin}/#/game/${id}`);
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
await expect(page.getByTestId('pending-item')).toHaveCount(2, { timeout: 15000 });
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Per-item removal — issue #11. Each queued row has a small trash button that
|
||||
* opens a confirmation dialog; confirming removes the item server-side
|
||||
* (POST /api/games/:id/queue/remove, no turn advance) and cancelling keeps it.
|
||||
*/
|
||||
test.describe('History — remove a queued item with confirmation (#11)', () => {
|
||||
test('cancel keeps the item; confirm removes it', async ({ page }) => {
|
||||
test.setTimeout(90000);
|
||||
const id = await createUkGame(page);
|
||||
|
||||
await expect(page.getByTestId('world-map')).toBeVisible();
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
|
||||
// Queue one action.
|
||||
await page.getByTestId('action-textarea').fill('Open the back channel with Vichy');
|
||||
await page.getByTestId('add-action').click();
|
||||
await expect(page.getByTestId('pending-item')).toHaveCount(1);
|
||||
|
||||
// Trash icon → confirmation dialog.
|
||||
await page.getByTestId('remove-queue-item').click();
|
||||
const dialog = page.getByTestId('remove-confirm-dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
await expect(dialog).toContainText('Open the back channel with Vichy');
|
||||
|
||||
// Cancel: the item stays queued.
|
||||
await page.getByTestId('remove-cancel').click();
|
||||
await expect(dialog).not.toBeVisible();
|
||||
await expect(page.getByTestId('pending-item')).toHaveCount(1);
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
|
||||
// Open again and confirm: the item is removed server-side.
|
||||
await page.getByTestId('remove-queue-item').click();
|
||||
await expect(dialog).toBeVisible();
|
||||
const [removeResp] = await Promise.all([
|
||||
page.waitForResponse(
|
||||
(r) =>
|
||||
r.request().method() === 'POST' &&
|
||||
new URL(r.url()).pathname === `/api/games/${id}/queue/remove`,
|
||||
),
|
||||
page.getByTestId('remove-confirm').click(),
|
||||
]);
|
||||
const removeBody = (await removeResp.json()) as { game: { version: number; pending: unknown[] } };
|
||||
expect(removeBody.game.pending).toHaveLength(0);
|
||||
|
||||
await expect(dialog).not.toBeVisible();
|
||||
await expect(page.getByTestId('pending-empty')).toBeVisible();
|
||||
await expect(page.getByTestId('title-queued')).not.toBeVisible();
|
||||
// Still turn 1, no events — removing never advances the round.
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
await expect(page.getByTestId('game-date')).toHaveText('1939-09-01');
|
||||
await expect(page.getByTestId('event-item')).toHaveCount(0);
|
||||
|
||||
// The bumped version is persisted with the game (it survives a reload).
|
||||
const after = await page.evaluate(
|
||||
async (gameId) =>
|
||||
((await fetch(`/api/games/${gameId}`)).json()) as Promise<{ game: { version: number } }>,
|
||||
id,
|
||||
);
|
||||
expect(after.game.version).toBe(removeBody.game.version);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* URL deep-linking (issue #3). The active game's id lives in the URL fragment:
|
||||
* home is `#/` and an active game is `#/game/<id>`. A fresh page navigated to
|
||||
@@ -283,3 +419,144 @@ test.describe('History — URL deep-linking (#/game/<id>)', () => {
|
||||
await waitHash(page, '#/');
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* HUD revamp (issues #4 and #5). The floating "Map" zoom window is gone — the
|
||||
* full-bleed map is driven directly by wheel/trackpad + drag. The top bar is a
|
||||
* *pinned* element: fixed, non-movable, centered at the top a few px down. The
|
||||
* dossier / feed / action panels can each be docked into a full-height left or
|
||||
* right pane (persisted in `localStorage`); the legend stays a small floating
|
||||
* widget.
|
||||
*/
|
||||
test.describe('History — HUD revamp (pinned top bar, dockable panels, no Map window)', () => {
|
||||
test('Map window is gone; top bar is pinned top-center; panels dock left/right', async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(90000);
|
||||
await createUkGame(page);
|
||||
await expect(page.getByTestId('world-map')).toBeVisible();
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
|
||||
const vw = page.viewportSize()!.width;
|
||||
const vh = page.viewportSize()!.height;
|
||||
|
||||
// --- #4: the "Map" zoom window is gone --------------------------------
|
||||
// No zoom window element, and no zoom-in/zoom-out buttons anywhere on the
|
||||
// game screen.
|
||||
await expect(page.locator('[data-float-window="zoom"]')).toHaveCount(0);
|
||||
await expect(page.getByTestId('zoom-in')).toHaveCount(0);
|
||||
await expect(page.getByTestId('zoom-out')).toHaveCount(0);
|
||||
|
||||
// --- #5a: the top bar is pinned, centered at the top ------------------
|
||||
const topBar = page.getByTestId('top-bar');
|
||||
await expect(topBar).toBeVisible();
|
||||
const barBox = (await topBar.boundingBox())!;
|
||||
// Horizontally centered: x ≈ (viewportWidth − width) / 2 …
|
||||
expect(Math.abs(barBox.x - (vw - barBox.width) / 2)).toBeLessThanOrEqual(3);
|
||||
// …and a few px down from the top edge (y ≈ 8).
|
||||
expect(barBox.y).toBeGreaterThanOrEqual(6);
|
||||
expect(barBox.y).toBeLessThanOrEqual(10);
|
||||
|
||||
// A pointer-drag attempted on the pinned bar must not move it (it has no
|
||||
// drag handlers; the map behind it never receives a mousedown).
|
||||
await page.mouse.move(barBox.x + barBox.width / 2, barBox.y + barBox.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(barBox.x + barBox.width / 2 + 60, barBox.y + barBox.height / 2 + 40, {
|
||||
steps: 6,
|
||||
});
|
||||
await page.mouse.up();
|
||||
const barBoxAfter = (await topBar.boundingBox())!;
|
||||
expect(Math.abs(barBoxAfter.x - barBox.x)).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(barBoxAfter.y - barBox.y)).toBeLessThanOrEqual(1);
|
||||
|
||||
// --- #5b: the dossier docks into a full-height left pane --------------
|
||||
const dossier = page.getByTestId('panel-dossier');
|
||||
await dossier.getByTestId('dock-left').click();
|
||||
const dBox = (await dossier.boundingBox())!;
|
||||
// Pinned to the left edge, filling the viewport height.
|
||||
expect(dBox.x).toBeLessThanOrEqual(2);
|
||||
expect(dBox.y).toBeLessThanOrEqual(2);
|
||||
expect(Math.abs(dBox.height - vh)).toBeLessThanOrEqual(3);
|
||||
expect(Math.abs(dBox.width - 300)).toBeLessThanOrEqual(3);
|
||||
|
||||
// --- #5b: the event feed docks into a full-height right pane ----------
|
||||
const feed = page.getByTestId('panel-feed');
|
||||
await feed.getByTestId('dock-right').click();
|
||||
const fBox = (await feed.boundingBox())!;
|
||||
// Pinned to the right edge: its right side sits on the viewport edge.
|
||||
expect(Math.abs(fBox.x + fBox.width - vw)).toBeLessThanOrEqual(3);
|
||||
expect(Math.abs(fBox.height - vh)).toBeLessThanOrEqual(3);
|
||||
|
||||
// The "Your move" deck is still a floating panel (we never docked it).
|
||||
await expect(page.getByTestId('panel-action')).toBeVisible();
|
||||
});
|
||||
|
||||
test('a dock choice survives a page reload (persisted in localStorage)', async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(90000);
|
||||
await createUkGame(page);
|
||||
await expect(page.getByTestId('world-map')).toBeVisible();
|
||||
const vh = page.viewportSize()!.height;
|
||||
|
||||
// Dock the dossier into the left pane.
|
||||
const dossier = page.getByTestId('panel-dossier');
|
||||
await dossier.getByTestId('dock-left').click();
|
||||
const before = (await dossier.boundingBox())!;
|
||||
expect(before.x).toBeLessThanOrEqual(2);
|
||||
expect(Math.abs(before.height - vh)).toBeLessThanOrEqual(3);
|
||||
|
||||
// Reload: the persisted dock choice must restore the docked layout, and the
|
||||
// deep link restores the game.
|
||||
await page.reload();
|
||||
await expect(page.getByTestId('world-map')).toBeVisible();
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1', { timeout: 20000 });
|
||||
const after = (await page.getByTestId('panel-dossier').boundingBox())!;
|
||||
expect(after.x).toBeLessThanOrEqual(2);
|
||||
expect(Math.abs(after.height - vh)).toBeLessThanOrEqual(3);
|
||||
expect(Math.abs(after.width - 300)).toBeLessThanOrEqual(3);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Advisor "thinking" indicator (issue #15). Asking the advisor is a *separate*
|
||||
* LLM call with its own `advisorBusy` flag — it must never block the turn flow.
|
||||
* Under the deterministic stub the fetch resolves in milliseconds, so the
|
||||
* transient thinking state is too short to assert mid-flight reliably. Instead
|
||||
* we assert the *terminal* states, which are deterministic: before the fetch the
|
||||
* button is enabled and the hint is absent; after it, the advisor list is
|
||||
* populated (5 canned ideas), the hint is gone, the button is re-enabled, and
|
||||
* the top bar is back to "Idle".
|
||||
*/
|
||||
test.describe('History — Advisor thinking indicator (#15)', () => {
|
||||
test('asking the advisor populates the list and clears the busy state', async ({ page }) => {
|
||||
test.setTimeout(90000);
|
||||
await createUkGame(page);
|
||||
await expect(page.getByTestId('world-map')).toBeVisible();
|
||||
await expect(page.getByTestId('turn-count')).toHaveText('1');
|
||||
|
||||
// Open the Advisor tab.
|
||||
await page.getByTestId('tab-advisor').click();
|
||||
|
||||
// Before any fetch: the button is enabled, no thinking hint, no results yet.
|
||||
const ask = page.getByTestId('ask-advisor');
|
||||
await expect(ask).toBeEnabled();
|
||||
await expect(page.getByTestId('advisor-hint')).toHaveCount(0);
|
||||
await expect(page.getByTestId('advisor-list')).toHaveCount(0);
|
||||
|
||||
// Ask the advisor (with an optional focus). The stub returns 5 canned ideas.
|
||||
await page.getByTestId('advisor-prompt').fill('the nuclear standoff');
|
||||
await ask.click();
|
||||
|
||||
// Terminal state: the result populates the advisor list.
|
||||
await expect(page.getByTestId('advisor-list')).toBeVisible({ timeout: 20000 });
|
||||
await expect(page.getByTestId('advisor-item')).toHaveCount(5, { timeout: 20000 });
|
||||
|
||||
// The fetch finished: the thinking hint is gone and the button is re-enabled.
|
||||
await expect(page.getByTestId('advisor-hint')).toHaveCount(0);
|
||||
await expect(ask).toBeEnabled();
|
||||
|
||||
// Nothing is in flight now, so the top bar reports idle (not the turn flow).
|
||||
await expect(page.getByTestId('status-indicator')).toHaveText(/Idle/);
|
||||
});
|
||||
});
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "history",
|
||||
"version": "0.3.0",
|
||||
"version": "0.7.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "AI-driven alternate-history simulator — the LLM is the world engine (Pax Historia style).",
|
||||
|
||||
@@ -22,6 +22,7 @@ function makeState(id: string): GameState {
|
||||
},
|
||||
events: [],
|
||||
pending: [],
|
||||
version: 1,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -54,6 +55,11 @@ describe('openDb', () => {
|
||||
expect(db.load('a')?.events).toHaveLength(1);
|
||||
expect([...db.listIds()].sort()).toEqual(['a', 'b']); // still two rows
|
||||
|
||||
// the monotonic version is persisted with the state and round-trips
|
||||
s.version = 3;
|
||||
db.save(s);
|
||||
expect(db.load('a')?.version).toBe(3);
|
||||
|
||||
db.close();
|
||||
});
|
||||
|
||||
|
||||
+63
-1
@@ -9,6 +9,7 @@ import {
|
||||
isMeaningful,
|
||||
parseTurnResult,
|
||||
queueRoundItem,
|
||||
removeRoundItem,
|
||||
runTurn,
|
||||
validateTurnResult,
|
||||
} from './engine';
|
||||
@@ -72,6 +73,7 @@ function baseState(): GameState {
|
||||
},
|
||||
events: [],
|
||||
pending: [],
|
||||
version: 1,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -206,8 +208,11 @@ describe('runTurn (batched round, deterministic stub)', () => {
|
||||
expect(state.events[0].nation).toBe('uk');
|
||||
expect(state.events[0].outcome).toBe('success');
|
||||
expect(result.stateChanges).toEqual([{ nation: 'uk', stat: 'military', op: 'set', value: 85 }]);
|
||||
// committing a turn is a new revision too
|
||||
expect(state.version).toBe(2);
|
||||
// the original object is not mutated (a fresh queue was consumed)
|
||||
expect(original.pending).toHaveLength(1);
|
||||
expect(original.version).toBe(1);
|
||||
});
|
||||
|
||||
it('an empty round: turn advances, one political "world moves on" event, pending stays empty', async () => {
|
||||
@@ -286,6 +291,61 @@ describe('queueRoundItem', () => {
|
||||
expect(after.pending[0]).toEqual({ kind: 'diplomacy', to: 'us', text: 'hello' });
|
||||
// the original state is not mutated
|
||||
expect(before.pending).toHaveLength(0);
|
||||
expect(before.version).toBe(1);
|
||||
});
|
||||
|
||||
it('bumps the monotonic version on each queue mutation', () => {
|
||||
const a = queueRoundItem(baseState(), { kind: 'action', text: 'one' });
|
||||
expect(a.version).toBe(2);
|
||||
const b = queueRoundItem(a, { kind: 'action', text: 'two' });
|
||||
expect(b.version).toBe(3);
|
||||
// and never backwards: two consecutive adds from the same base both
|
||||
// advance past it, so a late snapshot of the older state is always older.
|
||||
const b2 = queueRoundItem(baseState(), { kind: 'action', text: 'two' });
|
||||
expect(b2.version).toBe(2);
|
||||
expect(b.version).toBeGreaterThan(b2.version);
|
||||
});
|
||||
|
||||
it('treats a legacy state without a version field as version 0', () => {
|
||||
const legacy = { ...baseState() } as Omit<GameState, 'version'> & { version?: number };
|
||||
delete legacy.version; // a row saved before the version field existed
|
||||
// simulate a legacy row coming back from SQLite: the JSON has no field.
|
||||
const after = queueRoundItem(legacy as unknown as GameState, {
|
||||
kind: 'action',
|
||||
text: 'first after upgrade',
|
||||
});
|
||||
expect(after.version).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeRoundItem', () => {
|
||||
it('removes the item at the index, bumps the version, and leaves the input untouched', () => {
|
||||
const state = baseState();
|
||||
state.pending = [
|
||||
{ kind: 'action', text: 'one' },
|
||||
{ kind: 'diplomacy', to: 'us', text: 'two' },
|
||||
{ kind: 'action', text: 'three' },
|
||||
];
|
||||
const next = removeRoundItem(state, 1);
|
||||
expect(next).not.toBeNull();
|
||||
expect(next!.version).toBe(2);
|
||||
expect(next!.pending).toEqual([
|
||||
{ kind: 'action', text: 'one' },
|
||||
{ kind: 'action', text: 'three' },
|
||||
]);
|
||||
expect(state.pending).toHaveLength(3); // original untouched
|
||||
expect(state.version).toBe(1);
|
||||
});
|
||||
|
||||
it('returns null for out-of-bounds or non-integer indices (route answers 400, nothing mutates)', () => {
|
||||
const state = baseState();
|
||||
state.pending = [{ kind: 'action', text: 'one' }];
|
||||
expect(removeRoundItem(state, -1)).toBeNull();
|
||||
expect(removeRoundItem(state, 1)).toBeNull(); // == length
|
||||
expect(removeRoundItem(state, 5)).toBeNull();
|
||||
expect(removeRoundItem(state, 0.5)).toBeNull();
|
||||
expect(removeRoundItem(state, Number.NaN)).toBeNull();
|
||||
expect(state.pending).toHaveLength(1); // still untouched
|
||||
});
|
||||
});
|
||||
|
||||
@@ -346,7 +406,7 @@ describe('applyTurnResult', () => {
|
||||
expect(JSON.stringify(state)).toBe(snapshot);
|
||||
});
|
||||
|
||||
it('clears the pending round on commit', () => {
|
||||
it('clears the pending round on commit and bumps the version', () => {
|
||||
const state = baseState();
|
||||
state.pending = [{ kind: 'action', text: 'x' }];
|
||||
const result: TurnResult = {
|
||||
@@ -358,7 +418,9 @@ describe('applyTurnResult', () => {
|
||||
};
|
||||
const next = applyTurnResult(state, result);
|
||||
expect(next.pending).toEqual([]);
|
||||
expect(next.version).toBe(2);
|
||||
expect(state.pending).toHaveLength(1); // original untouched
|
||||
expect(state.version).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
+22
-2
@@ -284,6 +284,7 @@ function genericUnclearEvent(state: GameState): TurnEventSpec {
|
||||
*/
|
||||
export function applyTurnResult(state: GameState, result: TurnResult): GameState {
|
||||
const next: GameState = JSON.parse(JSON.stringify(state));
|
||||
next.version = (state.version ?? 0) + 1; // every mutation is a new revision
|
||||
const actingTurn = state.turn; // this action resolves the current turn
|
||||
next.turn = state.turn + 1; // then we advance to the next turn to play
|
||||
next.date = isDateLike(result.date) ? result.date : addDays(state.date, 2);
|
||||
@@ -325,15 +326,34 @@ export function applyTurnResult(state: GameState, result: TurnResult): GameState
|
||||
/**
|
||||
* Immutably queue one item onto a round: append it to `pending` and return a new
|
||||
* state. This never advances the turn or the date — that only happens when a
|
||||
* round is committed via runTurn. Exported so the append-without-advance behavior
|
||||
* is unit-testable, and reused by the server's /action and /diplomacy routes.
|
||||
* round is committed via runTurn. Bumps `version` (a new revision, so stale SSE
|
||||
* snapshots can never clobber it client-side). Exported so the append-without-
|
||||
* advance behavior is unit-testable, and reused by the /action and /diplomacy
|
||||
* routes.
|
||||
*/
|
||||
export function queueRoundItem(state: GameState, item: RoundItem): GameState {
|
||||
const next: GameState = JSON.parse(JSON.stringify(state));
|
||||
next.version = (state.version ?? 0) + 1;
|
||||
next.pending.push(item);
|
||||
return next;
|
||||
}
|
||||
|
||||
/**
|
||||
* Immutably remove one item from the pending round by index and return a new
|
||||
* state (bumping `version`). Returns `null` when the index is missing or not a
|
||||
* valid, in-bounds integer position, so the route can answer 400 without
|
||||
* mutating anything. Reused by the server's /queue/remove route.
|
||||
*/
|
||||
export function removeRoundItem(state: GameState, index: number | undefined): GameState | null {
|
||||
if (index === undefined || !Number.isInteger(index) || index < 0 || index >= state.pending.length) {
|
||||
return null;
|
||||
}
|
||||
const next: GameState = JSON.parse(JSON.stringify(state));
|
||||
next.version = (state.version ?? 0) + 1;
|
||||
next.pending.splice(index, 1);
|
||||
return next;
|
||||
}
|
||||
|
||||
/**
|
||||
* Run one turn end-to-end against the (injectable) LLM: build prompts, call the
|
||||
* model ONCE over the whole pending batch, parse/validate, retry once with a
|
||||
|
||||
+24
-2
@@ -9,11 +9,16 @@ import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
import { deepClone } from '../shared/protocol';
|
||||
import type { AddActionRequest, AddDiplomacyRequest, CreateGameRequest } from '../shared/protocol';
|
||||
import type {
|
||||
AddActionRequest,
|
||||
AddDiplomacyRequest,
|
||||
CreateGameRequest,
|
||||
RemoveQueueItemRequest,
|
||||
} from '../shared/protocol';
|
||||
import type { GameState } from '../shared/types';
|
||||
import { createLlmClient } from './llm';
|
||||
import { makeStubLlmClient } from './stub';
|
||||
import { askAdvisor, queueRoundItem, runTurn } from './engine';
|
||||
import { askAdvisor, queueRoundItem, removeRoundItem, runTurn } from './engine';
|
||||
import { buildRegionMap } from './map';
|
||||
import { createPresetStore } from './presets';
|
||||
import { openDb, type Db } from './db';
|
||||
@@ -114,6 +119,7 @@ app.post('/api/games', (req: Request, res) => {
|
||||
nations: Object.fromEntries(preset.nations.map((n) => [n.id, deepClone(n)])),
|
||||
events: [],
|
||||
pending: [],
|
||||
version: 1, // the first saved revision; every later mutation bumps it
|
||||
};
|
||||
db.save(state);
|
||||
res.json({ game: state });
|
||||
@@ -179,6 +185,22 @@ app.post('/api/games/:id/diplomacy', (req, res) => {
|
||||
res.json({ game: next });
|
||||
});
|
||||
|
||||
// Remove one item from the pending round, by its index in `game.pending`. No
|
||||
// LLM call, no turn advance — same fast save → broadcast → respond order as the
|
||||
// add routes above. The mutated state bumps `version`, so clients (which apply
|
||||
// states "never go backwards") always reconcile to it.
|
||||
app.post('/api/games/:id/queue/remove', (req, res) => {
|
||||
const id = req.params.id;
|
||||
const game = db.load(id);
|
||||
if (!game) return res.status(404).json({ error: 'game not found' });
|
||||
const index = (req.body as RemoveQueueItemRequest | undefined)?.index;
|
||||
const next = removeRoundItem(game, index);
|
||||
if (!next) return res.status(400).json({ error: 'invalid queue index' });
|
||||
db.save(next);
|
||||
broadcast(id, 'state', { state: next });
|
||||
res.json({ game: next });
|
||||
});
|
||||
|
||||
// Jump forward: commit the whole pending round (or an empty one) to the model
|
||||
// in a single turn. applyTurnResult clears the pending queue on the returned
|
||||
// state. 404 for not-found/preset-missing; 502 for LLM/model (transport) errors.
|
||||
|
||||
+66
-1
@@ -1,6 +1,6 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { buildRegionMap } from './map';
|
||||
import { nationColor } from '../shared/protocol';
|
||||
import { nationColor, regionOwner, type RegionMap } from '../shared/protocol';
|
||||
import type { GameState } from '../shared/types';
|
||||
|
||||
const state: GameState = {
|
||||
@@ -30,8 +30,12 @@ const state: GameState = {
|
||||
},
|
||||
events: [],
|
||||
pending: [],
|
||||
version: 1,
|
||||
};
|
||||
|
||||
// The RegionMap built from the fixture: the authoritative ISO_A3 → owner source.
|
||||
const regions: RegionMap = buildRegionMap(state);
|
||||
|
||||
describe('buildRegionMap', () => {
|
||||
it('maps each ISO_A3 region to its owner + that nation\'s stable color', () => {
|
||||
const m = buildRegionMap(state);
|
||||
@@ -43,6 +47,67 @@ describe('buildRegionMap', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('regionOwner', () => {
|
||||
it('resolves an owned region\'s ISO_A3 to its owner record', () => {
|
||||
expect(regionOwner(regions, 'GBR')).toEqual({
|
||||
color: nationColor('uk'),
|
||||
owner: 'UK',
|
||||
ownerId: 'uk',
|
||||
});
|
||||
expect(regionOwner(regions, 'DEU')).toEqual({
|
||||
color: nationColor('de'),
|
||||
owner: 'DE',
|
||||
ownerId: 'de',
|
||||
});
|
||||
});
|
||||
|
||||
it('returns undefined for an unowned region (no RegionMap entry)', () => {
|
||||
expect(regionOwner(regions, 'FRA')).toBeUndefined();
|
||||
expect(regionOwner(regions, 'USA')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('returns undefined for an empty or missing code', () => {
|
||||
expect(regionOwner(regions, '')).toBeUndefined();
|
||||
expect(regionOwner(regions, null)).toBeUndefined();
|
||||
expect(regionOwner(regions, undefined)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* #6 regression guard. The click/hover handlers resolve the owning nation from a
|
||||
* map feature. MapLibre repacks a GeoJSON source's top-level `id` (the ISO_A3
|
||||
* string) into a *numeric index* when it stores the source, so a feature the map
|
||||
* hands back at interaction time has a number for `id` and the ISO_A3 only lives
|
||||
* in `properties.regionId`. This test pins the exact data shape and proves the
|
||||
* fix: resolution via `properties.regionId` works, while the pre-fix path that
|
||||
* read `feature.id` does not.
|
||||
*/
|
||||
describe('#6 — owner must be resolved from properties.regionId, not the repacked feature.id', () => {
|
||||
// The shape MapLibre returns for a source feature after setData(): `id` is a
|
||||
// number (here 0, as observed in the live map), and the ISO_A3 is preserved
|
||||
// only in properties (the client stamps it as `regionId`).
|
||||
const repackedFeature = {
|
||||
id: 0,
|
||||
properties: { name: 'DE', regionId: 'DEU' },
|
||||
};
|
||||
|
||||
it('resolves the owner from properties.regionId (the fix)', () => {
|
||||
const code = typeof repackedFeature.properties.regionId === 'string' ? repackedFeature.properties.regionId : '';
|
||||
expect(regionOwner(regions, code)).toEqual({
|
||||
color: nationColor('de'),
|
||||
owner: 'DE',
|
||||
ownerId: 'de',
|
||||
});
|
||||
});
|
||||
|
||||
it('the old path (feature.id as a string key) does NOT resolve — the bug', () => {
|
||||
// String(0) === '0' is not a valid ISO_A3 key, so the pre-fix lookup failed
|
||||
// and the click popup reported "No owner" even for owned regions.
|
||||
expect(regions[String(repackedFeature.id)]).toBeUndefined();
|
||||
expect(regionOwner(regions, String(repackedFeature.id))).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('nationColor', () => {
|
||||
it('is deterministic per id and distinct across different ids', () => {
|
||||
expect(nationColor('uk')).toBe(nationColor('uk'));
|
||||
|
||||
@@ -56,6 +56,23 @@ export interface RegionOwner {
|
||||
}
|
||||
export type RegionMap = Record<string, RegionOwner>;
|
||||
|
||||
/**
|
||||
* Look up the owner record for a map region from the authoritative RegionMap by
|
||||
* its ISO_A3 code. Returns `undefined` for an empty/missing code or an unowned
|
||||
* region. Pure + shared: the client resolves a clicked or hovered map feature by
|
||||
* first reading the feature's stable ISO_A3 code (stored in `properties.regionId`
|
||||
* by the client when it repacks the source — see WorldMap) and then calling this.
|
||||
*
|
||||
* The code must NOT be taken from the feature's top-level `id`: MapLibre repacks
|
||||
* a GeoJSON source's `id` (an ISO_A3 string) into a numeric index when it stores
|
||||
* the source, so at click/hover time `feature.id` is a number, never the ISO_A3
|
||||
* — resolving from it is exactly the "no owner" bug (#6).
|
||||
*/
|
||||
export function regionOwner(regions: RegionMap, isoA3: string | null | undefined): RegionOwner | undefined {
|
||||
if (!isoA3) return undefined;
|
||||
return regions[isoA3];
|
||||
}
|
||||
|
||||
/** Server -> client Server-Sent Events payload (see server/index.ts /sse). */
|
||||
export type SseMessage =
|
||||
| { type: 'state'; state: GameState }
|
||||
@@ -99,6 +116,14 @@ export interface TurnResponse {
|
||||
result: TurnResult;
|
||||
}
|
||||
|
||||
/** Remove one queued item from the pending round, by its index in `game.pending`. */
|
||||
export interface RemoveQueueItemRequest {
|
||||
index: number;
|
||||
}
|
||||
export interface RemoveQueueItemResponse {
|
||||
game: GameState;
|
||||
}
|
||||
|
||||
export interface AdvisorRequest {
|
||||
/** Optional prompt to steer the brainstorm. */
|
||||
prompt?: string;
|
||||
|
||||
@@ -85,6 +85,17 @@ export type RoundItem = {
|
||||
to?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Monotonic revision counter for a game, bumped by the server on every
|
||||
* mutation (queue add/remove, turn commit) and persisted with the state.
|
||||
* Clients use it to tell a fresh state from a stale one: an SSE `state`/`turn`
|
||||
* snapshot (e.g. the on-connect resync) that arrives *after* a fresher REST
|
||||
* response carries a lower version and must be ignored, never applied
|
||||
* (see the client's "never go backwards" rule in src/App.tsx). Legacy games
|
||||
* saved before this field existed are treated as version 0 by consumers.
|
||||
*/
|
||||
export type GameVersion = number;
|
||||
|
||||
/** The full, persisted state of one game. Saved to SQLite by id. */
|
||||
export interface GameState {
|
||||
id: string;
|
||||
@@ -101,6 +112,12 @@ export interface GameState {
|
||||
* batch in a single turn and clears this back to `[]`.
|
||||
*/
|
||||
pending: RoundItem[];
|
||||
/**
|
||||
* Monotonic revision counter (see GameVersion). Bumped on every mutation so
|
||||
* clients can reject stale SSE snapshots; see the "never go backwards" rule
|
||||
* in src/App.tsx. Starts at 1 on game creation.
|
||||
*/
|
||||
version: GameVersion;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+161
-73
@@ -7,8 +7,6 @@ import {
|
||||
ListTree,
|
||||
Loader2,
|
||||
Map as MapIcon,
|
||||
Minus,
|
||||
Plus,
|
||||
Radar,
|
||||
} from 'lucide-react';
|
||||
import { Toaster } from './components/ui/sonner';
|
||||
@@ -18,7 +16,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
|
||||
import { cn } from './lib/utils';
|
||||
import PresetPicker from './components/PresetPicker';
|
||||
import NationSelect from './components/NationSelect';
|
||||
import WorldMap, { type MapApi } from './components/WorldMap';
|
||||
import WorldMap from './components/WorldMap';
|
||||
import FloatingWindow from './components/FloatingWindow';
|
||||
import MapLegend from './components/MapLegend';
|
||||
import NationPanel from './components/NationPanel';
|
||||
@@ -46,13 +44,20 @@ function toastError(e: unknown): void {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Floating-window collapse persistence (positions live in FloatingWindow itself).
|
||||
// Floating-window collapse + dock persistence.
|
||||
// (Free-floating *positions* live in FloatingWindow itself, per id.)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const FLOAT_COLLAPSED_KEY = 'history.floatwin.v1.collapsed';
|
||||
const FLOAT_DOCK_KEY = 'history.floatwin.v1.dock';
|
||||
|
||||
/** Every collapsible HUD panel (the slim header is never collapsed). */
|
||||
const PANEL_WINDOW_IDS = ['dossier', 'feed', 'action', 'legend', 'zoom'] as const;
|
||||
/**
|
||||
* Every collapsible HUD panel (the slim, pinned header is never collapsed).
|
||||
* The three substantive panels (dossier / feed / action) are also dockable;
|
||||
* the legend stays a small floating widget, and there is no longer a "Map"
|
||||
* window.
|
||||
*/
|
||||
const PANEL_WINDOW_IDS = ['dossier', 'feed', 'action', 'legend'] as const;
|
||||
|
||||
function loadCollapsedMap(): Record<string, boolean> {
|
||||
try {
|
||||
@@ -78,6 +83,33 @@ function persistCollapsedMap(m: Record<string, boolean>): void {
|
||||
}
|
||||
}
|
||||
|
||||
/** A dock mode: a docked edge, or 'float' (free-floating, the default). */
|
||||
type DockMode = 'left' | 'right' | 'float';
|
||||
|
||||
function loadDockMap(): Record<string, DockMode> {
|
||||
try {
|
||||
const raw = localStorage.getItem(FLOAT_DOCK_KEY);
|
||||
if (raw == null) return {};
|
||||
const v: unknown = JSON.parse(raw);
|
||||
if (!v || typeof v !== 'object' || Array.isArray(v)) return {};
|
||||
const out: Record<string, DockMode> = {};
|
||||
for (const [k, val] of Object.entries(v as Record<string, unknown>)) {
|
||||
if (val === 'left' || val === 'right' || val === 'float') out[k] = val;
|
||||
}
|
||||
return out;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function persistDockMap(m: Record<string, DockMode>): void {
|
||||
try {
|
||||
localStorage.setItem(FLOAT_DOCK_KEY, JSON.stringify(m));
|
||||
} catch {
|
||||
/* storage unavailable — dock choices just won't persist */
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Active-game persistence. The id of the game the user is (or was last) playing
|
||||
// is remembered in localStorage, so a page refresh drops them straight back
|
||||
@@ -141,6 +173,10 @@ export default function App() {
|
||||
const [regions, setRegions] = useState<RegionMap>({});
|
||||
const [advisors, setAdvisors] = useState<string[]>([]);
|
||||
const [busy, setBusy] = useState(false);
|
||||
// Separate from `busy`: an advisor fetch is its own LLM call. It must NOT
|
||||
// gate the turn flow ("Jump forward" stays enabled while the advisor thinks) —
|
||||
// it only gates the advisor UI (the "Ask advisor" button + its hint).
|
||||
const [advisorBusy, setAdvisorBusy] = useState(false);
|
||||
// The id of the game the user is/was last in (mirrors localStorage) and the
|
||||
// list of saved games (newest first) shown on the home screen.
|
||||
const [activeGameId, setActiveGameId] = useState<string | null>(() => readActiveGameId());
|
||||
@@ -153,6 +189,26 @@ export default function App() {
|
||||
// never acts on a stale closure. Written each render (same pattern as sse.ts).
|
||||
const latestRef = useRef<{ game: GameState | null; goHome: () => void; loadGame: (id: string) => void } | null>(null);
|
||||
|
||||
// The single entry point for adopting a full game state — SSE `state`/`turn`
|
||||
// events AND the REST responses (add/remove/jump) AND game loads all flow
|
||||
// through here. Two rules:
|
||||
// • a *different* game id (new game, deep link, resume) is always adopted;
|
||||
// • the *same* game is adopted only when its `version` is not older than
|
||||
// the current state's ("never go backwards").
|
||||
// The comparison happens inside the functional updater, so it always reads
|
||||
// the latest committed state — never a stale closure. This is what makes a
|
||||
// late-arriving stale SSE snapshot (e.g. the on-connect resync taken just
|
||||
// before an add was saved, or an EventSource auto-reconnect) harmless: it
|
||||
// carries a lower version than the fresher state the REST response already
|
||||
// applied, so it is dropped instead of clobbering the queued item (#10).
|
||||
// Legacy games saved before `version` existed are treated as version 0.
|
||||
const applyState = useCallback((s: GameState) => {
|
||||
setGame((cur) => {
|
||||
if (!cur || cur.id !== s.id) return s;
|
||||
return (s.version ?? 0) >= (cur.version ?? 0) ? s : cur;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// On the home screen: load the scenario manifest and the list of saved games
|
||||
// (newest-updated first) so the user can resume a prior game.
|
||||
useEffect(() => {
|
||||
@@ -192,7 +248,7 @@ export default function App() {
|
||||
if (!alive) return;
|
||||
persistActiveGameId(id); // remember it so a future bare `/` load resumes it
|
||||
setActiveGameId(id);
|
||||
setGame(game);
|
||||
applyState(game);
|
||||
setScreen({ name: 'game' });
|
||||
} catch {
|
||||
if (!alive) return;
|
||||
@@ -250,10 +306,9 @@ export default function App() {
|
||||
}, [game]);
|
||||
|
||||
// Resync from the persisted server state on connect and after every turn.
|
||||
// Handlers only call the stable setGame, so no stale-closure concerns.
|
||||
useSse(game?.id ?? null, {
|
||||
onState: (s) => setGame(s),
|
||||
onTurn: (s) => setGame(s),
|
||||
onState: applyState,
|
||||
onTurn: applyState,
|
||||
});
|
||||
|
||||
const play = useCallback(async (presetId: string) => {
|
||||
@@ -282,7 +337,7 @@ export default function App() {
|
||||
// Remember this as the active game so a refresh resumes it.
|
||||
persistActiveGameId(game.id);
|
||||
setActiveGameId(game.id);
|
||||
setGame(game);
|
||||
applyState(game);
|
||||
setAdvisors([]);
|
||||
setScreen({ name: 'game' });
|
||||
} catch (e) {
|
||||
@@ -295,18 +350,20 @@ export default function App() {
|
||||
);
|
||||
|
||||
// Add an action to the pending round. Fast, non-LLM — no `busy`; the pending
|
||||
// list updates from the response and the SSE `state` event.
|
||||
// list updates from the response and the SSE `state` event. Both are
|
||||
// version-gated via applyState, so the item can never be clobbered by a
|
||||
// stale snapshot (#10).
|
||||
const runAddAction = useCallback(
|
||||
async (text: string) => {
|
||||
if (!game) return;
|
||||
try {
|
||||
const { game: g } = await api.addAction(game.id, text);
|
||||
setGame(g);
|
||||
applyState(g);
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
},
|
||||
[game],
|
||||
[game, applyState],
|
||||
);
|
||||
|
||||
// Add a diplomatic message to the pending round. Fast, non-LLM — no `busy`.
|
||||
@@ -315,12 +372,27 @@ export default function App() {
|
||||
if (!game) return;
|
||||
try {
|
||||
const { game: g } = await api.addDiplomacy(game.id, to, message);
|
||||
setGame(g);
|
||||
applyState(g);
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
},
|
||||
[game],
|
||||
[game, applyState],
|
||||
);
|
||||
|
||||
// Remove a queued item by index. Fast, non-LLM — no `busy`; the pending list
|
||||
// updates from the response and the SSE `state` event (version-gated).
|
||||
const runRemoveQueueItem = useCallback(
|
||||
async (index: number) => {
|
||||
if (!game) return;
|
||||
try {
|
||||
const { game: g } = await api.removeQueueItem(game.id, index);
|
||||
applyState(g);
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
},
|
||||
[game, applyState],
|
||||
);
|
||||
|
||||
// Jump forward: the single LLM call that commits the pending round. Only this
|
||||
@@ -330,22 +402,29 @@ export default function App() {
|
||||
setBusy(true);
|
||||
try {
|
||||
const { state } = await api.jump(game.id);
|
||||
setGame(state);
|
||||
applyState(state);
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}, [game]);
|
||||
}, [game, applyState]);
|
||||
|
||||
// Ask the advisor: a separate (slow) LLM call. It sets its own `advisorBusy`
|
||||
// flag (distinct from the turn `busy`) and clears it in `finally`, so the flag
|
||||
// is released on both success and error. Asking never advances a turn and
|
||||
// never touches the turn `busy` state — "Jump forward" stays usable.
|
||||
const askAdvisor = useCallback(
|
||||
async (prompt?: string) => {
|
||||
if (!game) return;
|
||||
setAdvisorBusy(true);
|
||||
try {
|
||||
const { suggestions } = await api.advisor(game.id, prompt);
|
||||
setAdvisors(suggestions);
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
} finally {
|
||||
setAdvisorBusy(false);
|
||||
}
|
||||
},
|
||||
[game],
|
||||
@@ -362,7 +441,7 @@ export default function App() {
|
||||
// Make this the active game so a bare `/` reload keeps resuming it.
|
||||
persistActiveGameId(id);
|
||||
setActiveGameId(id);
|
||||
setGame(game);
|
||||
applyState(game);
|
||||
setAdvisors([]);
|
||||
setScreen({ name: 'game' });
|
||||
} catch (e) {
|
||||
@@ -398,9 +477,11 @@ export default function App() {
|
||||
game={game}
|
||||
regions={regions}
|
||||
busy={busy}
|
||||
advisorBusy={advisorBusy}
|
||||
advisors={advisors}
|
||||
onAddAction={runAddAction}
|
||||
onAddDiplomacy={runAddDiplomacy}
|
||||
onRemoveQueueItem={runRemoveQueueItem}
|
||||
onAdvisor={askAdvisor}
|
||||
onJump={runJump}
|
||||
onHome={goHome}
|
||||
@@ -436,10 +517,14 @@ export default function App() {
|
||||
interface GameScreenProps {
|
||||
game: GameState;
|
||||
regions: RegionMap;
|
||||
/** A turn ("Jump forward") is in flight — drives the turn flow + commit button. */
|
||||
busy: boolean;
|
||||
/** An advisor fetch is in flight — drives the advisor UI only (never the turn). */
|
||||
advisorBusy: boolean;
|
||||
advisors: string[];
|
||||
onAddAction: (a: string) => void;
|
||||
onAddDiplomacy: (to: string, m: string) => void;
|
||||
onRemoveQueueItem: (index: number) => void;
|
||||
onAdvisor: (p?: string) => void;
|
||||
onJump: () => void;
|
||||
onHome: () => void;
|
||||
@@ -447,22 +532,27 @@ interface GameScreenProps {
|
||||
|
||||
/**
|
||||
* The main play view — a full-bleed world map with a floating HUD. The MapLibre
|
||||
* map is a fixed, full-viewport background (z-0); over it float draggable,
|
||||
* collapsible windows: a slim header bar (scenario, turn + date, player nation,
|
||||
* live status, "Focus map" collapse-all) at the top, the nation dossier
|
||||
* (top-left), the event feed (right), the "Your move" command deck
|
||||
* (bottom-center), the nation-color legend (bottom-left), and a tiny map zoom
|
||||
* control (bottom-right). Each window remembers its dragged position, and
|
||||
* clicking one raises it above its siblings. Pan/zoom/click on the map stays
|
||||
* fully available in the gaps between windows.
|
||||
* map is a fixed, full-viewport background (z-0) that the user drives directly
|
||||
* (wheel/trackpad zoom + drag pan — there is no floating zoom control). Over it:
|
||||
* a slim **pinned** header bar (fixed, non-movable, centered at the top a few
|
||||
* px down; scenario, turn + date, player nation, live status, "Focus map"
|
||||
* collapse-all); the nation dossier, the event feed, and the "Your move"
|
||||
* command deck — each free-floating by default (at the same first-run positions
|
||||
* as before) but **dockable** into a full-height left or right pane, the choice
|
||||
* being remembered; and the nation-color legend, which stays a small floating
|
||||
* widget (not dockable). Each floating window remembers its dragged position,
|
||||
* and clicking one raises it above its siblings. Pan/zoom/click on the map
|
||||
* stays fully available in the gaps between windows.
|
||||
*/
|
||||
function GameScreen({
|
||||
game,
|
||||
regions,
|
||||
busy,
|
||||
advisorBusy,
|
||||
advisors,
|
||||
onAddAction,
|
||||
onAddDiplomacy,
|
||||
onRemoveQueueItem,
|
||||
onAdvisor,
|
||||
onJump,
|
||||
onHome,
|
||||
@@ -495,11 +585,23 @@ function GameScreen({
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Tiny map API (zoom in/out) exposed by WorldMap for the floating control.
|
||||
const mapApiRef = useRef<MapApi | null>(null);
|
||||
const handleMapReady = useCallback((api: MapApi | null) => {
|
||||
mapApiRef.current = api;
|
||||
// Dock state for the three dockable panels (dossier / feed / action),
|
||||
// persisted per id (survives reloads). The default is 'float' — the current
|
||||
// first-run positions — so nothing visually changes until the user docks
|
||||
// something. The legend is not dockable; the header is pinned.
|
||||
const [dock, setDock] = useState<Record<string, DockMode>>(loadDockMap);
|
||||
const setDockFor = useCallback((id: string, mode: DockMode) => {
|
||||
setDock((prev) => {
|
||||
const next = { ...prev, [id]: mode };
|
||||
persistDockMap(next);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
// The `dock` prop expects a concrete edge, or `undefined` to free-float.
|
||||
const dockOf = (id: string) => {
|
||||
const m = dock[id];
|
||||
return m === 'left' || m === 'right' ? m : undefined;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
@@ -510,13 +612,14 @@ function GameScreen({
|
||||
nations={game.nations}
|
||||
presetId={game.presetId}
|
||||
onFocusNation={setViewingId}
|
||||
onMapReady={handleMapReady}
|
||||
/>
|
||||
|
||||
{/* Slim floating header: brand, turn + date, player nation, live status, Focus map. */}
|
||||
{/* Pinned top bar: brand, turn + date, player nation, live status, Focus map.
|
||||
Fixed and non-movable, centered at the top a few px from the top edge. */}
|
||||
<FloatingWindow
|
||||
id="header"
|
||||
anchor="top-center"
|
||||
dataTestId="top-bar"
|
||||
pinned
|
||||
collapsible={false}
|
||||
title={
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
@@ -563,17 +666,24 @@ function GameScreen({
|
||||
{player?.name ?? game.playerNationId}
|
||||
</span>
|
||||
</div>
|
||||
{/* Three-state live status: advisor fetch in flight → "Advisor
|
||||
thinking…"; else a turn in flight → "Simulating…"; else "Idle".
|
||||
Both LLM-in-flight states share the amber spinner; idle is muted. */}
|
||||
<span
|
||||
data-testid="status-indicator"
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium',
|
||||
busy
|
||||
advisorBusy || busy
|
||||
? 'border-primary/40 bg-primary/10 text-primary'
|
||||
: 'border-border bg-muted/40 text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{busy ? <Loader2 className="size-3 animate-spin" /> : <CircleDot className="size-3" />}
|
||||
{busy ? 'Simulating…' : 'Idle'}
|
||||
{advisorBusy || busy ? (
|
||||
<Loader2 className="size-3 animate-spin" />
|
||||
) : (
|
||||
<CircleDot className="size-3" />
|
||||
)}
|
||||
{advisorBusy ? 'Advisor thinking…' : busy ? 'Simulating…' : 'Idle'}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
@@ -589,13 +699,16 @@ function GameScreen({
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Nation dossier, top-left. */}
|
||||
{/* Nation dossier, top-left by default; dockable into a left/right pane. */}
|
||||
<FloatingWindow
|
||||
id="dossier"
|
||||
dataTestId="panel-dossier"
|
||||
anchor="top-left"
|
||||
width={300}
|
||||
title="Dossier"
|
||||
titleIcon={<BookOpen className="size-4" />}
|
||||
dock={dockOf('dossier')}
|
||||
onDockChange={(m) => setDockFor('dossier', m)}
|
||||
collapsed={!!collapsed.dossier}
|
||||
onCollapsedChange={(c) => setCollapsedFor('dossier', c)}
|
||||
bodyClassName="max-h-[56vh] overflow-y-auto"
|
||||
@@ -620,9 +733,10 @@ function GameScreen({
|
||||
<NationPanel nation={viewed} nations={game.nations} isPlayer={viewingId === game.playerNationId} inWindow />
|
||||
</FloatingWindow>
|
||||
|
||||
{/* Event feed, right side. */}
|
||||
{/* Event feed, right side by default; dockable into a left/right pane. */}
|
||||
<FloatingWindow
|
||||
id="feed"
|
||||
dataTestId="panel-feed"
|
||||
anchor="right"
|
||||
width={330}
|
||||
title="Event feed"
|
||||
@@ -632,6 +746,8 @@ function GameScreen({
|
||||
{game.events.length}
|
||||
</Badge>
|
||||
}
|
||||
dock={dockOf('feed')}
|
||||
onDockChange={(m) => setDockFor('feed', m)}
|
||||
collapsed={!!collapsed.feed}
|
||||
onCollapsedChange={(c) => setCollapsedFor('feed', c)}
|
||||
bodyClassName="h-[52vh]"
|
||||
@@ -639,9 +755,10 @@ function GameScreen({
|
||||
<EventFeed events={game.events} nations={game.nations} inWindow />
|
||||
</FloatingWindow>
|
||||
|
||||
{/* Command deck ("Your move"), bottom-center — queue items, then commit. */}
|
||||
{/* Command deck ("Your move"), bottom-center by default; dockable. */}
|
||||
<FloatingWindow
|
||||
id="action"
|
||||
dataTestId="panel-action"
|
||||
anchor="bottom-center"
|
||||
width={370}
|
||||
title="Your move"
|
||||
@@ -653,6 +770,8 @@ function GameScreen({
|
||||
</Badge>
|
||||
) : undefined
|
||||
}
|
||||
dock={dockOf('action')}
|
||||
onDockChange={(m) => setDockFor('action', m)}
|
||||
collapsed={!!collapsed.action}
|
||||
onCollapsedChange={(c) => setCollapsedFor('action', c)}
|
||||
bodyClassName="max-h-[72vh] overflow-y-auto"
|
||||
@@ -660,9 +779,11 @@ function GameScreen({
|
||||
<ActionPanel
|
||||
game={game}
|
||||
busy={busy}
|
||||
advisorBusy={advisorBusy}
|
||||
advisors={advisors}
|
||||
onAddAction={onAddAction}
|
||||
onAddDiplomacy={onAddDiplomacy}
|
||||
onRemoveQueueItem={onRemoveQueueItem}
|
||||
onAdvisor={onAdvisor}
|
||||
onJump={onJump}
|
||||
inWindow
|
||||
@@ -681,39 +802,6 @@ function GameScreen({
|
||||
>
|
||||
<MapLegend regions={regions} />
|
||||
</FloatingWindow>
|
||||
|
||||
{/* Tiny floating zoom control, bottom-right (clear of the attribution). */}
|
||||
<FloatingWindow
|
||||
id="zoom"
|
||||
anchor="bottom-right"
|
||||
width={88}
|
||||
title="Map"
|
||||
titleIcon={<MapIcon className="size-4" />}
|
||||
offset={{ y: -28 }}
|
||||
collapsed={!!collapsed.zoom}
|
||||
onCollapsedChange={(c) => setCollapsedFor('zoom', c)}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-1.5 p-2.5">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => mapApiRef.current?.zoomIn()}
|
||||
aria-label="Zoom in"
|
||||
data-testid="zoom-in"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => mapApiRef.current?.zoomOut()}
|
||||
aria-label="Zoom out"
|
||||
data-testid="zoom-out"
|
||||
>
|
||||
<Minus className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</FloatingWindow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,40 @@
|
||||
import { useState } from 'react';
|
||||
import { Loader2, MessageSquare, Radar, Zap } from 'lucide-react';
|
||||
import { Loader2, MessageSquare, Radar, Trash2, Zap } from 'lucide-react';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Button } from './ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from './ui/dialog';
|
||||
import { Input } from './ui/input';
|
||||
import { Textarea } from './ui/textarea';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import type { GameState } from '@shared/types';
|
||||
import type { GameState, RoundItem } from '@shared/types';
|
||||
|
||||
interface Props {
|
||||
game: GameState;
|
||||
/** A jump (the only LLM call) is currently in flight — disable the commit. */
|
||||
/** A jump (the only turn LLM call) is currently in flight — disable the commit. */
|
||||
busy: boolean;
|
||||
/**
|
||||
* An advisor fetch (a separate LLM call) is in flight. Distinct from `busy`:
|
||||
* it gates only the advisor UI (the "Ask advisor" button + its hint) and must
|
||||
* never disable "Jump forward" or the rest of the turn flow.
|
||||
*/
|
||||
advisorBusy: boolean;
|
||||
/** Advisor brainstorm suggestions from the last request. */
|
||||
advisors: string[];
|
||||
/** Queue a free-text action onto the pending round (no turn advance). */
|
||||
onAddAction: (text: string) => void;
|
||||
/** Queue a diplomatic message onto the pending round (no turn advance). */
|
||||
onAddDiplomacy: (to: string, message: string) => void;
|
||||
/** Remove one queued item by its index in `game.pending` (no turn advance). */
|
||||
onRemoveQueueItem: (index: number) => void;
|
||||
onAdvisor: (prompt?: string) => void;
|
||||
/** Commit the whole pending round in a single LLM turn. */
|
||||
onJump: () => void;
|
||||
@@ -29,20 +45,31 @@ interface Props {
|
||||
inWindow?: boolean;
|
||||
}
|
||||
|
||||
/** One-line, display-safe rendering of a queued item (text truncated). */
|
||||
function describeItem(item: RoundItem, nationName: (id?: string) => string): string {
|
||||
const who = item.kind === 'diplomacy' ? ` to ${nationName(item.to)}` : '';
|
||||
const text = item.text.length > 72 ? `${item.text.slice(0, 71)}…` : item.text;
|
||||
return `${who ? `${who}:` : 'Action:'} “${text}”`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The player's command deck ("Your move"). Three tabs — Action, Diplomacy,
|
||||
* Advisor — each with a small "Add" button that queues an item onto the pending
|
||||
* round (these never advance the turn). Below the tabs a visible pending-queue
|
||||
* list and one prominent "Jump forward" button commit the whole round in a
|
||||
* single LLM turn. While a jump is in flight the commit is disabled and a hint
|
||||
* is shown; an empty jump (nothing queued) is allowed and advances time.
|
||||
* list — each row has a small trash button that removes that item (with a
|
||||
* confirmation dialog) — and one prominent "Jump forward" button that commits
|
||||
* the whole round in a single LLM turn. While a jump is in flight the commit
|
||||
* is disabled (as is queue editing) and a hint is shown; an empty jump
|
||||
* (nothing queued) is allowed and advances time.
|
||||
*/
|
||||
export default function ActionPanel({
|
||||
game,
|
||||
busy,
|
||||
advisorBusy,
|
||||
advisors,
|
||||
onAddAction,
|
||||
onAddDiplomacy,
|
||||
onRemoveQueueItem,
|
||||
onAdvisor,
|
||||
onJump,
|
||||
inWindow = false,
|
||||
@@ -52,6 +79,8 @@ export default function ActionPanel({
|
||||
const [target, setTarget] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [prompt, setPrompt] = useState('');
|
||||
// Index of the queued item the user is about to remove, or null (dialog closed).
|
||||
const [confirmRemoveIndex, setConfirmRemoveIndex] = useState<number | null>(null);
|
||||
|
||||
const others = Object.entries(game.nations)
|
||||
.filter(([id]) => id !== game.playerNationId)
|
||||
@@ -79,6 +108,10 @@ export default function ActionPanel({
|
||||
};
|
||||
|
||||
const pending = game.pending;
|
||||
// The item the confirmation dialog is about (re-derived from the live list,
|
||||
// so if the queue changes while the dialog is open it tracks the current
|
||||
// item at that index — or the dialog closes if the index went out of range).
|
||||
const removeTarget = confirmRemoveIndex !== null ? pending[confirmRemoveIndex] : undefined;
|
||||
const queuedLabel = busy
|
||||
? 'Simulating…'
|
||||
: `Jump forward${pending.length > 0 ? ` · ${pending.length} queued` : ''}`;
|
||||
@@ -168,10 +201,23 @@ export default function ActionPanel({
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => onAdvisor(prompt.trim() || undefined)}
|
||||
disabled={advisorBusy}
|
||||
data-testid="ask-advisor"
|
||||
>
|
||||
Ask advisor
|
||||
{advisorBusy && <Loader2 className="size-3.5 animate-spin" />}
|
||||
{advisorBusy ? 'Thinking…' : 'Ask advisor'}
|
||||
</Button>
|
||||
{/* While the advisor (a separate LLM call) is thinking, mirror the
|
||||
turn's "sim-hint" so the user knows the request is in flight. */}
|
||||
{advisorBusy && (
|
||||
<p
|
||||
className="flex items-center gap-1.5 text-xs text-muted-foreground"
|
||||
data-testid="advisor-hint"
|
||||
>
|
||||
<span className="sim-pulse inline-block size-1.5 rounded-full bg-primary" />
|
||||
The advisor is thinking… this can take a few seconds.
|
||||
</p>
|
||||
)}
|
||||
{advisors.length > 0 && (
|
||||
<ul className="space-y-1.5" data-testid="advisor-list">
|
||||
{advisors.map((a, i) => (
|
||||
@@ -227,6 +273,18 @@ export default function ActionPanel({
|
||||
</span>
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate text-foreground/85">{item.text}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="shrink-0 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setConfirmRemoveIndex(i)}
|
||||
disabled={busy}
|
||||
title="Remove from this round"
|
||||
aria-label="Remove this queued item"
|
||||
data-testid="remove-queue-item"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -234,6 +292,39 @@ export default function ActionPanel({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirmation for removing a queued item (never removes without asking). */}
|
||||
<Dialog open={removeTarget !== undefined} onOpenChange={(open) => !open && setConfirmRemoveIndex(null)}>
|
||||
<DialogContent className="max-w-sm" data-testid="remove-confirm-dialog">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Remove queued item?</DialogTitle>
|
||||
<DialogDescription>
|
||||
{removeTarget ? (
|
||||
<>
|
||||
{describeItem(removeTarget, nationName)} will be removed from this round and
|
||||
won’t be simulated on the next jump.
|
||||
</>
|
||||
) : null}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setConfirmRemoveIndex(null)} data-testid="remove-cancel">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
if (confirmRemoveIndex !== null) onRemoveQueueItem(confirmRemoveIndex);
|
||||
setConfirmRemoveIndex(null);
|
||||
}}
|
||||
data-testid="remove-confirm"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
Remove
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Button className="h-11 w-full" onClick={onJump} disabled={busy} data-testid="jump-forward">
|
||||
{busy ? <Loader2 className="size-4 animate-spin" /> : <Radar className="size-4" />}
|
||||
{queuedLabel}
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { Minus, Plus } from 'lucide-react';
|
||||
import { AlignLeft, AlignRight, Maximize2, Minus, Plus } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Edge anchor used to place a window on first run (before the user drags it). */
|
||||
@@ -19,6 +19,11 @@ export type FloatAnchor =
|
||||
| 'bottom-center'
|
||||
| 'bottom-right';
|
||||
|
||||
/** A docked column edge: pinned to a screen edge and filling the viewport height. */
|
||||
export type FloatDock = 'left' | 'right';
|
||||
/** A dock mode: a docked edge, or `'float'` (free-floating, the default). */
|
||||
export type FloatDockMode = FloatDock | 'float';
|
||||
|
||||
const STORAGE_PREFIX = 'history.floatwin.v1.';
|
||||
|
||||
// Module-level z-index bookkeeping so sibling windows stack in click order:
|
||||
@@ -26,6 +31,9 @@ const STORAGE_PREFIX = 'history.floatwin.v1.';
|
||||
// raised, the shared counter advances, so the newest on top always wins.
|
||||
const Z_BASE = 10;
|
||||
const Z_STEP = 10;
|
||||
// A pinned window always floats above every docked/floating window, no matter
|
||||
// how many times those are raised.
|
||||
const Z_PINNED = 100000;
|
||||
let zSeq = 0;
|
||||
let zTopId: string | null = null;
|
||||
/** Returns the new z-index to use, or -1 if this window is already front-most. */
|
||||
@@ -118,8 +126,31 @@ function clampPos(x: number, y: number, w: number, h: number): Pos {
|
||||
export interface FloatingWindowProps {
|
||||
/** Stable id — used for the localStorage key and as a data-attribute. */
|
||||
id: string;
|
||||
/** First-run placement. The last dragged position (persisted) takes over. */
|
||||
anchor: FloatAnchor;
|
||||
/** Optional `data-testid` on the window root, for e2e targeting. */
|
||||
dataTestId?: string;
|
||||
/**
|
||||
* First-run placement for a free-floating window; the last dragged position
|
||||
* (persisted) takes over. Ignored when `pinned` or `dock` is set.
|
||||
*/
|
||||
anchor?: FloatAnchor;
|
||||
/**
|
||||
* Pin the window to the top-center of the viewport: a fixed, non-movable bar
|
||||
* a few px from the top that re-centers automatically on resize, always
|
||||
* floats above docked/floating panels, and never reads/writes a persisted
|
||||
* position. Used for the slim header.
|
||||
*/
|
||||
pinned?: boolean;
|
||||
/**
|
||||
* Dock the window into a full-height left or right column: non-movable,
|
||||
* body scrolls, never reads/writes the persisted free-floating position.
|
||||
* Absent (`undefined`) = free-floating as before.
|
||||
*/
|
||||
dock?: FloatDock;
|
||||
/**
|
||||
* When provided, render dock controls (left / right / float) in the title bar
|
||||
* and report the chosen mode back to the parent, which persists it.
|
||||
*/
|
||||
onDockChange?: (mode: FloatDockMode) => void;
|
||||
/** Fixed window width in px (content is sized to it). Omit to fit content. */
|
||||
width?: number;
|
||||
/** Extra px nudged away from the anchor position (e.g. clear the map attribution). */
|
||||
@@ -128,7 +159,7 @@ export interface FloatingWindowProps {
|
||||
title?: ReactNode;
|
||||
/** Optional icon before the title. */
|
||||
titleIcon?: ReactNode;
|
||||
/** Right-side title-bar content, rendered before the collapse button. */
|
||||
/** Right-side title-bar content, rendered before the dock/collapse controls. */
|
||||
titleExtra?: ReactNode;
|
||||
/** Render the collapse toggle (default true). */
|
||||
collapsible?: boolean;
|
||||
@@ -143,16 +174,27 @@ export interface FloatingWindowProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* A draggable, collapsible, position-persisted window that floats over the
|
||||
* full-screen map. Dragging is limited to the title bar (via pointer capture)
|
||||
* so inputs and buttons in the body keep working; the window is clamped so it
|
||||
* can never be dragged fully off-screen, its position is remembered in
|
||||
* localStorage, clicking any part of it raises it above siblings, and the
|
||||
* collapse toggle shrinks it to just its title bar.
|
||||
* A window that floats over the full-screen map. Three mutually-exclusive
|
||||
* modes, set via props (absent = free-floating):
|
||||
* • **free-floating** (default) — draggable by the title bar (pointer
|
||||
* capture), clamped on-screen, position persisted in localStorage, raised
|
||||
* above siblings on click, collapsible.
|
||||
* • **pinned** — a fixed, non-movable bar centered at the top of the
|
||||
* viewport a few px down; re-centers on resize; always above other
|
||||
* windows; no position persisted.
|
||||
* • **docked** (`left`/`right`) — a non-movable, full-height column pinned
|
||||
* to a screen edge whose body scrolls; the persisted free-floating
|
||||
* position is neither read nor written while docked.
|
||||
* When `onDockChange` is provided, small dock/left/right/float controls render
|
||||
* in the title bar and report the chosen mode back to the parent.
|
||||
*/
|
||||
export default function FloatingWindow({
|
||||
id,
|
||||
anchor,
|
||||
dataTestId,
|
||||
anchor = 'top-center',
|
||||
pinned = false,
|
||||
dock,
|
||||
onDockChange,
|
||||
width,
|
||||
offset,
|
||||
title,
|
||||
@@ -165,6 +207,12 @@ export default function FloatingWindow({
|
||||
bodyClassName,
|
||||
children,
|
||||
}: FloatingWindowProps) {
|
||||
const isPinned = pinned;
|
||||
const isDocked = dock === 'left' || dock === 'right';
|
||||
// Free-floating is the only mode that drags, persists a position, and needs
|
||||
// viewport measurement/clamping. Pinned and docked are CSS-positioned.
|
||||
const isFloating = !isPinned && !isDocked;
|
||||
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const sizeRef = useRef<{ w: number; h: number } | null>(null);
|
||||
const dragRef = useRef<{ dx: number; dy: number; pointerId: number } | null>(null);
|
||||
@@ -177,9 +225,11 @@ export default function FloatingWindow({
|
||||
setPosState(p);
|
||||
};
|
||||
|
||||
// First paint: measure, then place (restored position or anchor) and clamp.
|
||||
// Runs before paint (useLayoutEffect), so there is no visible flash.
|
||||
// First paint (free-floating only): measure, then place (restored position
|
||||
// or anchor) and clamp. Runs before paint (useLayoutEffect), so no flash.
|
||||
// Re-runs when the mode changes so a window returning from docked re-places.
|
||||
useLayoutEffect(() => {
|
||||
if (!isFloating) return;
|
||||
if (posRef.current) return;
|
||||
const el = rootRef.current;
|
||||
if (!el) return;
|
||||
@@ -195,11 +245,12 @@ export default function FloatingWindow({
|
||||
);
|
||||
posRef.current = p;
|
||||
setPosState(p);
|
||||
}, [id, anchor]);
|
||||
}, [id, anchor, offset, isFloating]);
|
||||
|
||||
// Re-measure + re-clamp whenever the body toggles hidden (expand can push a
|
||||
// bottom-anchored window off the bottom edge).
|
||||
// bottom-anchored window off the bottom edge). Free-floating only.
|
||||
useLayoutEffect(() => {
|
||||
if (!isFloating) return;
|
||||
const el = rootRef.current;
|
||||
const p = posRef.current;
|
||||
if (!el || !p) return;
|
||||
@@ -208,10 +259,11 @@ export default function FloatingWindow({
|
||||
sizeRef.current = { w: rect.width, h: rect.height };
|
||||
const c = clampPos(p.x, p.y, rect.width, rect.height);
|
||||
if (c.x !== p.x || c.y !== p.y) setPos(c);
|
||||
}, [collapsed]);
|
||||
}, [collapsed, isFloating]);
|
||||
|
||||
// Keep the window on-screen when the viewport shrinks.
|
||||
// Keep a free-floating window on-screen when the viewport shrinks.
|
||||
useEffect(() => {
|
||||
if (!isFloating) return;
|
||||
const onResize = () => {
|
||||
const p = posRef.current;
|
||||
const s = sizeRef.current;
|
||||
@@ -221,7 +273,7 @@ export default function FloatingWindow({
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
}, []);
|
||||
}, [isFloating]);
|
||||
|
||||
const onHandleDown = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (e.button !== 0) return;
|
||||
@@ -258,18 +310,44 @@ export default function FloatingWindow({
|
||||
if (p) savePos(id, p.x, p.y);
|
||||
};
|
||||
|
||||
const style: CSSProperties = {
|
||||
// Root placement: pinned → centered top bar; docked → full-height edge
|
||||
// column; free-floating → last/initial pixel position (hidden until measured).
|
||||
const rootStyle: CSSProperties = isPinned
|
||||
? { zIndex: Z_PINNED, top: 8, left: '50%', transform: 'translateX(-50%)' }
|
||||
: isDocked
|
||||
? {
|
||||
zIndex: z,
|
||||
...(pos ? { left: pos.x, top: pos.y } : {}),
|
||||
};
|
||||
top: 0,
|
||||
height: '100vh',
|
||||
...(dock === 'left' ? { left: 0 } : { right: 0 }),
|
||||
}
|
||||
: { zIndex: z, ...(pos ? { left: pos.x, top: pos.y } : {}) };
|
||||
|
||||
// The title bar is the drag handle only in free-floating mode.
|
||||
const titleBarHandlers = isFloating
|
||||
? {
|
||||
onPointerDown: onHandleDown,
|
||||
onPointerMove: onHandleMove,
|
||||
onPointerUp: endDrag,
|
||||
onPointerCancel: endDrag,
|
||||
}
|
||||
: {};
|
||||
|
||||
// Docked: the body fills the remaining column height and scrolls, overriding
|
||||
// any max-height the caller set for the floating layout.
|
||||
const bodyClass = isDocked
|
||||
? cn('min-h-0 flex-1 overflow-y-auto', collapsed && 'hidden')
|
||||
: cn('min-h-0', collapsed && 'hidden', bodyClassName);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
data-float-window={id}
|
||||
style={style}
|
||||
className={cn('fixed', !pos && 'pointer-events-none opacity-0')}
|
||||
data-testid={dataTestId}
|
||||
style={rootStyle}
|
||||
className={cn('fixed', isFloating && !pos && 'pointer-events-none opacity-0')}
|
||||
onPointerDown={() => {
|
||||
if (isPinned) return;
|
||||
const nz = nextZ(id);
|
||||
if (nz > 0) setZ(nz);
|
||||
}}
|
||||
@@ -277,21 +355,24 @@ export default function FloatingWindow({
|
||||
<div
|
||||
className={cn(
|
||||
'overflow-hidden rounded-xl border border-border/70 bg-slate-900/80 shadow-2xl shadow-black/50 backdrop-blur-md',
|
||||
isDocked && 'flex h-full flex-col',
|
||||
className,
|
||||
)}
|
||||
style={
|
||||
width != null
|
||||
isDocked
|
||||
? { width: width ?? 'fit-content', maxWidth: '96vw' }
|
||||
: width != null
|
||||
? { width, maxWidth: '96vw' }
|
||||
: { width: 'fit-content', maxWidth: '96vw' }
|
||||
}
|
||||
>
|
||||
{title != null && (
|
||||
<div
|
||||
className="flex cursor-grab touch-none select-none items-center gap-2 border-b border-border/60 bg-white/[0.03] px-2.5 py-1.5 active:cursor-grabbing"
|
||||
onPointerDown={onHandleDown}
|
||||
onPointerMove={onHandleMove}
|
||||
onPointerUp={endDrag}
|
||||
onPointerCancel={endDrag}
|
||||
className={cn(
|
||||
'flex shrink-0 touch-none select-none items-center gap-2 border-b border-border/60 bg-white/[0.03] px-2.5 py-1.5',
|
||||
isFloating && 'cursor-grab active:cursor-grabbing',
|
||||
)}
|
||||
{...titleBarHandlers}
|
||||
>
|
||||
{titleIcon && (
|
||||
<span className="shrink-0 text-muted-foreground" aria-hidden>
|
||||
@@ -302,6 +383,49 @@ export default function FloatingWindow({
|
||||
{title}
|
||||
</span>
|
||||
{titleExtra}
|
||||
{onDockChange && (
|
||||
<span className="flex shrink-0 items-center gap-0.5" data-no-drag>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dock-left"
|
||||
aria-label="Dock to the left edge"
|
||||
title="Dock to the left edge"
|
||||
className={cn(
|
||||
'rounded-md p-1 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground',
|
||||
dock === 'left' && 'bg-white/10 text-foreground',
|
||||
)}
|
||||
onClick={() => onDockChange('left')}
|
||||
>
|
||||
<AlignLeft className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dock-right"
|
||||
aria-label="Dock to the right edge"
|
||||
title="Dock to the right edge"
|
||||
className={cn(
|
||||
'rounded-md p-1 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground',
|
||||
dock === 'right' && 'bg-white/10 text-foreground',
|
||||
)}
|
||||
onClick={() => onDockChange('right')}
|
||||
>
|
||||
<AlignRight className="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dock-float"
|
||||
aria-label="Float the window"
|
||||
title="Float (undock)"
|
||||
className={cn(
|
||||
'rounded-md p-1 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground',
|
||||
!isDocked && 'bg-white/10 text-foreground',
|
||||
)}
|
||||
onClick={() => onDockChange('float')}
|
||||
>
|
||||
<Maximize2 className="size-3.5" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{collapsibleProp && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -315,9 +439,7 @@ export default function FloatingWindow({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{children != null && (
|
||||
<div className={cn('min-h-0', collapsed && 'hidden', bodyClassName)}>{children}</div>
|
||||
)}
|
||||
{children != null && <div className={bodyClass}>{children}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+58
-67
@@ -8,7 +8,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
// Point it at a Vite-emitted copy of the worker module so it loads in prod.
|
||||
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url';
|
||||
maplibregl.setWorkerUrl(workerUrl);
|
||||
import type { RegionMap, RegionOwner } from '@shared/protocol';
|
||||
import { regionOwner, type RegionMap, type RegionOwner } from '@shared/protocol';
|
||||
import type { Nation } from '@shared/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -101,21 +101,36 @@ function cameraForPreset(presetId: string): { center: [number, number]; zoom: nu
|
||||
* carries its owner's stable fill color, a subtle stroke, and a flag for the
|
||||
* player's own regions (rendered as a brighter, thicker border by a dedicated
|
||||
* layer). Unknown owners fall back to a faint neutral fill — never an error.
|
||||
*
|
||||
* Crucially, the base GeoJSON feature's top-level `id` (the ISO_A3 code) is
|
||||
* stamped into `properties.regionId`, and the owner's id into `properties.ownerId`.
|
||||
* MapLibre repacks a GeoJSON source's top-level `id` into a numeric index when it
|
||||
* stores it, so a later click/hover event exposes that number on
|
||||
* `e.features[i].id` — the top-level `id` is *not* a reliable lookup key at
|
||||
* interaction time (the root cause of #6). `properties`, however, survive into the
|
||||
* rendered features, so the interaction handlers resolve the owning nation from
|
||||
* `properties.regionId` via the RegionMap (see `regionOwner`).
|
||||
*/
|
||||
function applyRegions(geo: FeatureCollection, regions: RegionMap, playerNationId: string): FeatureCollection {
|
||||
const out: FeatureCollection = JSON.parse(JSON.stringify(geo));
|
||||
for (const f of out.features) {
|
||||
f.properties = f.properties ?? {};
|
||||
const r = f.id ? regions[f.id as string] : undefined;
|
||||
// The base GeoJSON `id` is the ISO_A3 code; keep it in a property that
|
||||
// survives into the features MapLibre hands back on click/hover.
|
||||
const code = f.id == null ? '' : String(f.id);
|
||||
f.properties.regionId = code;
|
||||
const r = code ? regions[code] : undefined;
|
||||
if (r) {
|
||||
f.properties.fill = r.color;
|
||||
f.properties.owner = r.owner;
|
||||
f.properties.ownerId = r.ownerId;
|
||||
f.properties.stroke = 'rgba(255,255,255,0.10)';
|
||||
f.properties.isPlayer = r.ownerId === playerNationId ? 1 : 0;
|
||||
} else {
|
||||
f.properties.fill = 'rgba(148,163,184,0.05)';
|
||||
f.properties.stroke = 'rgba(255,255,255,0.06)';
|
||||
f.properties.owner = '';
|
||||
f.properties.ownerId = '';
|
||||
f.properties.isPlayer = 0;
|
||||
}
|
||||
}
|
||||
@@ -150,48 +165,20 @@ function hoverHtml(countryName: string, region?: RegionOwner, nation?: Nation):
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/** Click popup: the full owning-nation profile with all four stats. */
|
||||
function clickHtml(countryName: string, region?: RegionOwner, nation?: Nation): string {
|
||||
if (!region || !nation) {
|
||||
return `<div class="hm-popup"><div class="hm-popup-title">${esc(countryName || 'Unclaimed')}</div><div class="hm-popup-sub">No owner</div></div>`;
|
||||
}
|
||||
const stats = [
|
||||
statRow('Mil', nation.stats.military),
|
||||
statRow('Eco', nation.stats.economy),
|
||||
statRow('Stab', nation.stats.stability),
|
||||
statRow('Pop', nation.stats.population),
|
||||
].join('');
|
||||
const regions = nation.territory.length;
|
||||
return `<div class="hm-popup">
|
||||
<div class="hm-popup-title">${esc(countryName || region.owner)}</div>
|
||||
<div class="hm-popup-owner hm-popup-owner-big"><span class="hm-chip" style="background:${region.color}"></span>${esc(region.owner)}</div>
|
||||
<div class="hm-popup-sub">${regions} region${regions === 1 ? '' : 's'} · click focuses the dossier</div>
|
||||
<div class="hm-stats">${stats}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/** Minimal map API exposed to the floating zoom control (and any other UI). */
|
||||
export interface MapApi {
|
||||
zoomIn: () => void;
|
||||
zoomOut: () => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
regions: RegionMap;
|
||||
playerNationId: string;
|
||||
/** All nations, for hover/click stats and color chips. */
|
||||
/** All nations, for the hover tooltip's owner stats and color chips. */
|
||||
nations: Record<string, Nation>;
|
||||
/** The active scenario id, for a sensible initial camera. */
|
||||
presetId: string;
|
||||
className?: string;
|
||||
/** Called when a region is clicked, so the dossier can focus its owner. */
|
||||
onFocusNation?: (id: string) => void;
|
||||
/**
|
||||
* Called with a minimal zoom/pan API once the map is ready (and with `null`
|
||||
* on unmount), so the floating zoom control can drive it.
|
||||
* Called with a region's owning-nation id when that region is clicked, so the
|
||||
* dossier switches to that nation. Not called for unowned regions (the dossier
|
||||
* keeps its current target). See the component doc for the full behavior.
|
||||
*/
|
||||
onMapReady?: (api: MapApi | null) => void;
|
||||
onFocusNation?: (id: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -199,10 +186,18 @@ interface Props {
|
||||
* nation. Rendered as a fixed, full-viewport background layer (z-0) behind the
|
||||
* floating HUD windows: a dark-navy basemap with subtle terrain, per-nation
|
||||
* stable fills (the choropleth is the star), thin borders, a brighter/thicker
|
||||
* border for the player, hover + click popups with
|
||||
* owner + stats, a transient flash on territory changes, and a
|
||||
* per-scenario initial camera. It exposes a tiny zoom/pan API so the floating
|
||||
* zoom control can drive it (no MapLibre navigation controls are shown).
|
||||
* border for the player, a hover tooltip (owner + key stats), a **click that
|
||||
* switches the dossier to the region's owning nation** (no popup — see #7), a
|
||||
* transient flash on territory changes, and a per-scenario initial camera.
|
||||
*
|
||||
* Ownership for a hovered/clicked region is resolved from the authoritative
|
||||
* RegionMap by the feature's stable ISO_A3 code in `properties.regionId`
|
||||
* (see `regionOwner` in @shared/protocol) — never from the feature's top-level
|
||||
* `id`, which MapLibre repacks into a numeric index at interaction time (#6).
|
||||
* Unowned regions (no RegionMap entry) simply do not change the dossier.
|
||||
*
|
||||
* Zoom and pan are driven directly by the user (MapLibre wheel/trackpad + drag)
|
||||
* — no floating control and no external API.
|
||||
*/
|
||||
export default function WorldMap({
|
||||
regions,
|
||||
@@ -211,7 +206,6 @@ export default function WorldMap({
|
||||
presetId,
|
||||
className,
|
||||
onFocusNation,
|
||||
onMapReady,
|
||||
}: Props) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const mapRef = useRef<maplibregl.Map | null>(null);
|
||||
@@ -222,13 +216,11 @@ export default function WorldMap({
|
||||
const playerRef = useRef(playerNationId);
|
||||
const presetRef = useRef(presetId);
|
||||
const onFocusNationRef = useRef(onFocusNation);
|
||||
const onMapReadyRef = useRef(onMapReady);
|
||||
regionsRef.current = regions;
|
||||
nationsRef.current = nations;
|
||||
playerRef.current = playerNationId;
|
||||
presetRef.current = presetId;
|
||||
onFocusNationRef.current = onFocusNation;
|
||||
onMapReadyRef.current = onMapReady;
|
||||
|
||||
// Diffing state for the transient territory-change flash (owned by this component
|
||||
// so a resync with identical data never re-flashes).
|
||||
@@ -257,19 +249,7 @@ export default function WorldMap({
|
||||
// Purely for testability; has no effect on rendering or behavior.
|
||||
(containerRef.current as unknown as { __map?: maplibregl.Map }).__map = map;
|
||||
|
||||
// Expose a tiny zoom/pan API to the floating control (null on unmount).
|
||||
const api: MapApi = {
|
||||
zoomIn: () => map.zoomIn(),
|
||||
zoomOut: () => map.zoomOut(),
|
||||
reset: () => {
|
||||
const c = cameraForPreset(presetRef.current);
|
||||
map.easeTo({ center: c.center, zoom: c.zoom, duration: 600 });
|
||||
},
|
||||
};
|
||||
onMapReadyRef.current?.(api);
|
||||
|
||||
const hoverPopup = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 10 });
|
||||
const clickPopup = new maplibregl.Popup({ closeButton: true, closeOnClick: true, offset: 12 });
|
||||
let lastHoverId: string | null = null;
|
||||
|
||||
const loadGeo = (): Promise<FeatureCollection> =>
|
||||
@@ -326,24 +306,33 @@ export default function WorldMap({
|
||||
}
|
||||
flashApiRef.current = animateFlash;
|
||||
|
||||
// The region a hovered/clicked feature belongs to is identified by its stable
|
||||
// ISO_A3 code, read from `properties.regionId` (stamped by `applyRegions`).
|
||||
// We must NOT use the feature's top-level `id`: MapLibre repacks a GeoJSON
|
||||
// source's `id` into a numeric index when it stores the source, so the value
|
||||
// exposed on `e.features[i].id` at interaction time is a number, never the
|
||||
// ISO_A3 — resolving the owner from it is the "no owner" bug (#6).
|
||||
const onHover = (e: maplibregl.MapLayerMouseEvent) => {
|
||||
const f = e.features?.[0];
|
||||
if (!f) return;
|
||||
const id = f.id == null ? null : String(f.id);
|
||||
if (id && id !== lastHoverId) {
|
||||
lastHoverId = id;
|
||||
const p = f.properties as { name?: string; regionId?: string };
|
||||
const code = typeof p?.regionId === 'string' ? p.regionId : '';
|
||||
if (code && code !== lastHoverId) {
|
||||
lastHoverId = code;
|
||||
const geo = baseGeoRef.current;
|
||||
const feat = geo?.features.find((x) => x.id != null && String(x.id) === id);
|
||||
// The base GeoJSON feature's top-level `id` IS the ISO_A3, so match on
|
||||
// that to recover the feature for the hover-highlight outline (the
|
||||
// feature MapLibre hands us has a repacked numeric `id` we can't use).
|
||||
const feat = geo?.features.find((x) => x.id != null && String(x.id) === code);
|
||||
(map.getSource(HOVER_SOURCE) as GeoSource | undefined)?.setData(
|
||||
feat ? { type: 'FeatureCollection', features: [JSON.parse(JSON.stringify(feat))] } : emptyFC(),
|
||||
);
|
||||
}
|
||||
const p = f.properties as { name?: string };
|
||||
const region = id ? regionsRef.current[id] : undefined;
|
||||
const region = regionOwner(regionsRef.current, code);
|
||||
const nation = region ? nationsRef.current[region.ownerId] : undefined;
|
||||
hoverPopup
|
||||
.setLngLat(e.lngLat)
|
||||
.setHTML(hoverHtml(p?.name ?? id ?? '', region, nation))
|
||||
.setHTML(hoverHtml(p?.name ?? code, region, nation))
|
||||
.addTo(map);
|
||||
map.getCanvas().style.cursor = 'pointer';
|
||||
};
|
||||
@@ -355,14 +344,17 @@ export default function WorldMap({
|
||||
map.getCanvas().style.cursor = '';
|
||||
};
|
||||
|
||||
// #7: a click does NOT open a popup — it switches the dossier to the region's
|
||||
// owning nation. The owner is resolved from the stable ISO_A3 in
|
||||
// `properties.regionId` via the RegionMap (never the repacked top-level
|
||||
// `f.id`, #6). A region with no owner in the RegionMap (unowned territory)
|
||||
// leaves the current dossier target unchanged — never a broken dossier.
|
||||
const onClick = (e: maplibregl.MapLayerMouseEvent) => {
|
||||
const f = e.features?.[0];
|
||||
if (!f) return;
|
||||
const id = f.id == null ? null : String(f.id);
|
||||
const p = f.properties as { name?: string };
|
||||
const region = id ? regionsRef.current[id] : undefined;
|
||||
const nation = region ? nationsRef.current[region.ownerId] : undefined;
|
||||
clickPopup.setLngLat(e.lngLat).setHTML(clickHtml(p?.name ?? id ?? '', region, nation)).addTo(map);
|
||||
const p = f.properties as { regionId?: string };
|
||||
const code = typeof p?.regionId === 'string' ? p.regionId : '';
|
||||
const region = regionOwner(regionsRef.current, code);
|
||||
if (region?.ownerId) onFocusNationRef.current?.(region.ownerId);
|
||||
};
|
||||
|
||||
@@ -482,7 +474,6 @@ export default function WorldMap({
|
||||
cancelled = true;
|
||||
cancelAnimationFrame(flashRaf);
|
||||
flashApiRef.current = null;
|
||||
onMapReadyRef.current?.(null);
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
if (containerRef.current) {
|
||||
|
||||
@@ -8,6 +8,7 @@ import type {
|
||||
AdvisorResponse,
|
||||
CreateGameResponse,
|
||||
GameSummary,
|
||||
RemoveQueueItemResponse,
|
||||
TurnResponse,
|
||||
} from '@shared/protocol';
|
||||
|
||||
@@ -48,6 +49,13 @@ export const api = {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ to, message }),
|
||||
}),
|
||||
// Remove one queued item from the pending round, by its index in `game.pending`.
|
||||
// Fast, non-LLM — no turn advance. Returns the updated game.
|
||||
removeQueueItem: (id: string, index: number) =>
|
||||
req<RemoveQueueItemResponse>(`/api/games/${id}/queue/remove`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ index }),
|
||||
}),
|
||||
// Commit the whole pending round (or an empty one) in a single LLM turn.
|
||||
jump: (id: string) =>
|
||||
req<TurnResponse>(`/api/games/${id}/jump`, {
|
||||
|
||||
Reference in New Issue
Block a user