+ {
+ warm();
+ show();
+ }}
+ onMouseLeave={hide}
+ onFocus={() => {
+ warm();
+ setHinting(true);
+ }}
+ onBlur={hide}
+ >
+
+ );
+}
+
function AccountMenu() {
const { user, signOutUser } = useAuth();
const [open, setOpen] = useState(false);
@@ -204,6 +286,8 @@ export function AppShell({ title, aside, children }: AppShellProps) {
+ {/*
+ * The field fills the window, edge to edge and under everything else.
+ * There is no title over it: the game is the picture, and a wordmark
+ * across the top of it is a browser tab's job.
+ */}
+
+ {
+ const scene = await buildKeepScene(app, viewport, handle.current);
+ handle.current.still(motionWanted.current);
+ return scene;
+ }}
+ />
+
+
+ {/*
+ * Everything that must survive a television sits inside this, laid
+ * over the field rather than beside it. The picture may bleed into
+ * the crop; the things you need to read may not.
+ */}
+ {
+ setPicked(undefined);
+ handle.current.select(undefined);
+ }}
+ />
+ )}
+
+ {paused && (
+ {
+ setPaused(false);
+ /*
+ * Forgotten on the way out, or every later press of Escape would
+ * reopen the pane the vial last asked for rather than the menu.
+ */
+ setPauseAt(undefined);
+ }}
+ purse={purse}
+ characterClass={save.characterClass || "terminal"}
+ wearing={save.skinId}
+ livery={save.liveryId}
+ shopOpen={rank.level >= 2}
+ elixir={elixir}
+ garrison={tally.wrights.length}
+ onTravel={(id) => handle.current.lookAt(id)}
+ gathering={save.gathering}
+ earned={earned}
+ counted={known}
+ onGathering={(on) => setSave({ ...save, gathering: on })}
+ openAt={pauseAt}
+ onBuy={(skinId) => {
+ const result = buy(purse, skinId);
+ if (!result.ok) return;
+ const bought = skinById(skinId);
+ /*
+ * What is stored is the spend, not the purse. The purse is
+ * derived from the level that earned it, so storing both would
+ * be two facts that can disagree.
+ *
+ * A first purchase in a slot is worn at once, because nobody buys
+ * a colour in order to not wear it.
+ */
+ const next = {
+ ...save,
+ spent: save.spent + (purse.marks - result.purse.marks),
+ owned: result.purse.owned,
+ skinId:
+ bought?.wears === "hero" ? save.skinId || skinId : save.skinId,
+ liveryId:
+ bought?.wears === "retinue" ? save.liveryId || skinId : save.liveryId,
+ };
+ setSave(next);
+ handle.current.wear(tintFor(next.skinId), tintFor(next.liveryId));
+ }}
+ onWear={(skinId) => {
+ const chosen = skinById(skinId);
+ const next =
+ chosen?.wears === "retinue"
+ ? { ...save, liveryId: skinId }
+ : { ...save, skinId };
+ setSave(next);
+ /* The field shows it at once, rather than on the next reload. */
+ handle.current.wear(tintFor(next.skinId), tintFor(next.liveryId));
+ }}
+ />
+ )}
+
+ {/*
+ * The one decision the game asks for, over the top of everything.
+ * Shown until it has been made; the field carries on behind it.
+ */}
+ {!hasChosen(save) && (
+ setSave({ ...save, characterClass })}
+ />
+ )}
+
+
+ {
+ setPauseAt("gathering");
+ setPaused(true);
+ }}
+ onOpenRoster={() => setPaused(true)}
+ />
+
+ {/*
+ * The pause button holds the corner the HUD leaves for it, and the
+ * key prompt the one below. Both belong to the same ring of things
+ * around the edge of the eye; they are here rather than in `Hud`
+ * only because they are the route's to open and to label.
+ */}
+
+
+ {picked && (
+
+
+
+
+
+
+
+ {failed && (
+
+ );
+}
diff --git a/app/src/game/pixi/actors.ts b/app/src/game/pixi/actors.ts
new file mode 100644
index 0000000..fb4614a
--- /dev/null
+++ b/app/src/game/pixi/actors.ts
@@ -0,0 +1,445 @@
+import { Container, Graphics, Sprite, Texture } from "pixi.js";
+import { atWork, heroPlate, soldierPlate, type Plate } from "./plates";
+import type { Sigils } from "./sigils";
+import { makeUnmade, walkUnmade, type Unmade } from "./unmade";
+import { depthOf, TILE_H, toScreen } from "../world/iso";
+import type { Loaded } from "./scene";
+import type { Actor, Sim } from "../world/sim";
+
+/**
+ * The people on the map, and the things that got in.
+ *
+ * Pixi keeps a display object per actor for as long as that actor exists,
+ * rather than rebuilding the scene each frame. That is the whole reason for
+ * using a scene graph: moving a sprite is setting two numbers, where drawing
+ * it again is uploading geometry.
+ */
+
+import { UNIT_FOR } from "./units";
+
+/** How much bigger than drawn a soldier is. See `make`. */
+const FIGURE = 1.85;
+
+/**
+ * How much bigger again a hero is.
+ *
+ * Two thirds again on top of a soldier, and both have grown. A hero is a person
+ * and everything around them is their work; drawn at the same size they were
+ * indistinguishable from their own retinue, which is the one thing about this
+ * map that has to be legible at a glance.
+ *
+ * Everybody is larger than the pack intends. Kenney's units are scaled to stand
+ * beside Kenney's buildings, which is correct and useless here: the country is
+ * a hundred and twenty-eight tiles across, and a figure sized for a courtyard
+ * is a speck on it.
+ */
+const HERO = 3.1;
+
+/** A small deterministic offset, so two bugs do not step in lockstep. */
+function hashOf(id: string): number {
+ let value = 0;
+ for (let index = 0; index < id.length; index += 1) {
+ value = (Math.imul(value, 31) + id.charCodeAt(index)) | 0;
+ }
+ return (Math.abs(value) % 100) / 16;
+}
+
+/**
+ * A deterministic vertical stagger, so boards do not stack.
+ *
+ * Wider than it was, because a camp gathers a whole company into a few tiles
+ * and three steps of thirteen pixels is not enough separation for a dozen
+ * boards. Deterministic so a name does not hop when the list is re-ordered.
+ */
+/**
+ * How far a soldier's name is lifted above its head, so two of them standing
+ * together do not write over each other.
+ *
+ * Six bands rather than five, and thirty-six apart rather than twenty-two. A
+ * plate is about thirty pixels tall, so at twenty-two the bands overlapped each
+ * other by a third before any two figures had even met -- the stagger was
+ * shuffling the collision around rather than preventing it. Thirty-six clears a
+ * plate outright, and six bands means a camp has to hold seven sessions before
+ * two can land on the same line.
+ *
+ * Deterministic from the id, so a session's name does not hop to a different
+ * height every time the roster is polled.
+ */
+function lift(id: string): number {
+ let value = 0;
+ for (let index = 0; index < id.length; index += 1) {
+ value = (Math.imul(value, 31) + id.charCodeAt(index)) | 0;
+ }
+ return (Math.abs(value) % 6) * 36;
+}
+
+/**
+ * And a hero's name sits above every band a soldier can reach.
+ *
+ * A hero used to be pinned at zero, which is also the lowest band a soldier can
+ * draw at -- so the one board on a camp that has to be findable was the one
+ * most likely to have a session's name written across it. Their own retinue is
+ * what they collide with, so the fix is to put them over the top of it.
+ */
+const HERO_LIFT = 6 * 36 + 24;
+
+interface Piece {
+ root: Container;
+ /**
+ * The figure itself: a sprite for anybody human, a drawn creature for the
+ * Unmade. Kenney's pack has no insects, and six legs settles what a thing is
+ * in a way no amount of tinting could.
+ */
+ sprite: Sprite | undefined;
+ bug: Unmade | undefined;
+ /** Whichever of the two is on screen, for facing and for the lunge. */
+ figure: Container;
+ shadow: Graphics;
+ bar: Graphics;
+ plate?: Plate;
+ /** How far above the feet this figure's plate hangs. See `make`. */
+ headroom: number;
+ /**
+ * The figure's drawn extent, for picking: half its width, and how far it
+ * rises above the point it stands on. Kept rather than measured, because
+ * `getBounds` walks the display list and this is asked per actor per click.
+ */
+ halfWidth: number;
+ rise: number;
+ lastHp: number;
+}
+
+export class ActorLayer {
+ private readonly pieces = new Map+ {failed} +
+ )} +
+
+ );
+}
diff --git a/app/src/game/ui/ChooseCharacter.tsx b/app/src/game/ui/ChooseCharacter.tsx
new file mode 100644
index 0000000..fb013e0
--- /dev/null
+++ b/app/src/game/ui/ChooseCharacter.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { CLASS_LORE, OPENING, WORLD } from "../lore/world";
+import { Menu, type MenuItem } from "./Menu";
+import { Prompt } from "./Prompt";
+
+/**
+ * The one thing the game asks before it starts.
+ *
+ * Shown once, on first launch, and never again unless somebody asks to change
+ * it. Everything else about the keep is derived from work that already
+ * happened; this is the single decision the player actually makes, which is
+ * why it gets a screen of its own rather than a dropdown in a settings panel.
+ *
+ * The opening is three lines. A wall of fiction in front of a game somebody
+ * opened out of curiosity is a wall they close.
+ */
+export function ChooseCharacter({ onChoose }: { onChoose: (kind: string) => void }) {
+ const [focused, setFocused] = useState(0);
+ const kinds = Object.keys(CLASS_LORE);
+ const current = CLASS_LORE[kinds[focused]] ?? CLASS_LORE.terminal;
+
+ const items: MenuItem[] = kinds.map((kind) => ({
+ id: kind,
+ label: CLASS_LORE[kind].title,
+ detail: CLASS_LORE[kind].motto,
+ onSelect: () => onChoose(kind),
+ }));
+
+ return (
+ + Every soldier on the field is a session that is running. When one ends, + it walks to the Barrow. This is what they have left behind. +
+ + {!counted && ( ++ The service did not answer, so none of this has been counted yet. + Unknown is not the same as none. +
+ )} + +-
+ {rows.map((row) => (
+
- + + + {row.label} + {row.note} + + + {row.count.toLocaleString()} + {/* What each is worth, so the sum below can be checked by hand. */} + × {row.each} + + + ))} +
+ Experience + {total.toLocaleString()} +
+ ++ Nothing here can be earned by playing. Every figure above is something a + session did, counted by the service from its own records — which is why + walking your hero about the map changes none of it. +
+ + +
+
+ );
+}
diff --git a/app/src/game/ui/Codex.tsx b/app/src/game/ui/Codex.tsx
new file mode 100644
index 0000000..06a16f2
--- /dev/null
+++ b/app/src/game/ui/Codex.tsx
@@ -0,0 +1,106 @@
+import { GARRISONS } from "../world/marches";
+import { CLASS_LORE, FOE_LORE, WORLD } from "../lore/world";
+
+/**
+ * The Chronicle: what everything in the keep is, and what it is a name for.
+ *
+ * Every entry does the same two things — says the fictional name, then says
+ * plainly what it corresponds to in the product. That second half is the whole
+ * point. Lore that only describes a fiction is a thing to be skipped; lore
+ * that quietly teaches somebody that a wright is a session and the Prompt is
+ * the shell process is doing a job.
+ *
+ * Read-only, and reached from the pause menu. Nothing here is a mechanic and
+ * nothing here can be missed by not reading it.
+ */
+export function Codex({ onBack }: { onBack: () => void }) {
+ return (
+
+
+
+
+
+ {WORLD.era}
+ {OPENING.map((line) => ( +{line}
+ ))} +
+
+
+
+ Which are you?
+ + {/* + * The description sits beside the list rather than inside each row, + * so moving through five classes does not reflow the whole panel + * under the cursor. + */} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/src/game/ui/Gathering.tsx b/app/src/game/ui/Gathering.tsx
new file mode 100644
index 0000000..e8c05dc
--- /dev/null
+++ b/app/src/game/ui/Gathering.tsx
@@ -0,0 +1,160 @@
+import { useGathering } from "../state/gathering";
+import { WORLD } from "../lore/world";
+
+/**
+ * The gathering: what it reads, what it costs, and how to stop it.
+ *
+ * This screen is written plainly and deliberately out of character. Everywhere
+ * else the game calls tokens essence and machines outposts, because that is the
+ * skin and the skin is the point. Here it does not, because somebody deciding
+ * whether to let a program read their work is not playing along, and a consent
+ * notice in fantasy voice is a consent notice designed not to be understood.
+ *
+ * Off until it is switched on, and one press turns it off again. The list below
+ * is the bill: a total on its own is a number to be taken on trust, and a person
+ * who has agreed to this is owed the itemised version.
+ */
+function when(at: number, now: number): string {
+ const ago = Math.max(0, now - at);
+ const minutes = Math.round(ago / 60_000);
+ if (minutes < 1) return "just now";
+ if (minutes < 60) return `${minutes}m ago`;
+ const hours = Math.round(minutes / 60);
+ if (hours < 24) return `${hours}h ago`;
+ return `${Math.round(hours / 24)}d ago`;
+}
+
+export function Gathering({
+ on,
+ tokens,
+ onAgree,
+ onStop,
+ onBack,
+}: {
+ on: boolean;
+ /** The total in the vial, which is the sum of the runs below. */
+ tokens: number;
+ onAgree: () => void;
+ onStop: () => void;
+ onBack: () => void;
+}) {
+ const { runs, asking, refusal, asked, gatherNow } = useGathering(on);
+ const now = Date.now();
+
+ return (
+ The Marches
+-
+
- The Prompt +
- + The amber light in the hall. While it burns, the machine is up — it is the + shell process, and it goes out the way a process does. + +
- A wright +
- + One session. Your machine sent it to do a piece of work, and it is on the + field for as long as that work is running. + +
- An outpost +
- A linked machine. The garrison musters from whichever ones are awake. +
- Elixir +
- + Tokens spent gathering your statistics. It is the one figure in the keep + that is real money, which is why it has a vessel of its own. + +
+ {/* Capitalised here: these are headings, not mid-sentence mentions. */}
+
+
+
+
+
+
+
+ The garrison
+-
+ {Object.entries(CLASS_LORE).map(([kind, lore]) => (
+
- {lore.title} +
-
+ {lore.motto} {lore.note} Mustered from a
{kind}{" "} + session. +
+
+
+ ))}
+ {WORLD.foe}
++ They come when a session is working on a fault, and not otherwise. A keep whose + sessions are all building things is a quiet keep. +
+-
+ {FOE_LORE.map((foe) => (
+
- {foe.name} +
- {foe.note} +
+
+ ))}
+ The holdings
++ Every one of these is somewhere on the map, with its name and its purpose on a + board outside it. This is the index, not the source: the Marches are meant to be + walked. +
+-
+ {GARRISONS.map((garrison) => (
+
- {garrison.name} +
- + {garrison.purpose} {garrison.truth} + +
+
+ ))}
+
+
+ );
+}
diff --git a/app/src/game/ui/Hud.tsx b/app/src/game/ui/Hud.tsx
new file mode 100644
index 0000000..eb61e38
--- /dev/null
+++ b/app/src/game/ui/Hud.tsx
@@ -0,0 +1,229 @@
+import { CLASS_LORE, WORLD } from "../lore/world";
+import { nextUnlock, type Standing } from "../state/progress";
+import type { Actor } from "../world/sim";
+
+/**
+ * What the player needs to know without opening anything.
+ *
+ * Four things, and nothing else: who they are and how far along, what they can
+ * spend, what the stat-gathering has cost, and who is on the field. Everything
+ * else lives behind the pause menu, because a heads-up display is screen space
+ * borrowed from the thing it is displaying over.
+ *
+ * All of it is DOM rather than canvas. It does not move with the world, it has
+ * to be readable by a screen reader, and it has to be reachable with a pad —
+ * three things the canvas is bad at and the document is good at.
+ */
+
+export interface HudProps {
+ standing: Standing;
+ marks: number;
+ /** Tokens the stat-gathering has spent. See the elixir vial below. */
+ elixir: number;
+ /** Whether any stat-gathering has been agreed to at all. */
+ gathering: boolean;
+ characterClass: string;
+ wrights: Actor[];
+ /** True when the field is showing a stand-in garrison, not real sessions. */
+ demo: boolean;
+ /**
+ * Whether the service has told us what has been earned.
+ *
+ * Unreachable is not nothing earned, and a bar reading zero because a
+ * request failed is a bar telling somebody their week did not count.
+ */
+ counted: boolean;
+ onOpenRoster: () => void;
+ /** Opens the gathering: the notice when it is off, the bill when it is on. */
+ onOpenGathering: () => void;
+}
+
+/** A bar with its numbers beside it, never colour alone. */
+function Meter({
+ label,
+ value,
+ of,
+ tone,
+ detail,
+}: {
+ label: string;
+ value: number;
+ of: number;
+ tone: "xp" | "elixir";
+ detail?: string;
+}) {
+ const fraction = of > 0 ? Math.min(1, Math.max(0, value / of)) : 0;
+ return (
+ + {on + ? `Gathering is on. ${tokens.toLocaleString()} tokens spent so far.` + : "Gathering is off. Nothing is being read."} +
+ + {/* + * What is read and what is not, before the button rather than after it. + * The second list is the one that matters, and it is second because it + * is the reassurance: you cannot be reassured about a thing you have not + * been told yet. + */} +
+
+
+ What your machine would read
+-
+
- Git in the folder a session is running in: how many commits, and how many lines changed. +
- How many pull requests you have open, if the GitHub CLI is installed. +
- How many tokens your coding agent has spent, from its own local files. +
What it never reads
+-
+
- Terminal output. Nothing that appears in a session is read, sent or stored. +
- File contents, diffs, commit messages, branch names, prompts or replies. +
Where it goes
++ Your machine does the reading and sends counts — numbers and nothing + else. This service cannot read a session: they are encrypted end to + end and it holds no key. That is why the reading happens on your + machine rather than here. +
+ ++ Reading your agent's token totals costs nothing. Any run that spends + tokens is listed below, to the token. +
+
+ {on ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+
+ {asking === "asked" && (
+ + {asked.length > 0 + ? `Asked ${asked.join(", ")}. The bill appears when they answer.` + : "Asked. The bill appears when a machine answers."} +
+ )} + {asking === "failed" && ( ++ {refusal} +
+ )} + + {on && ( + <> +What it has cost
+ {runs.length === 0 ? ( +
+ Nothing has run yet. A machine has to be signed in with{" "}
+ shell agent running for there to be anything to ask.
+
-
+ {runs.map((run) => (
+
- + + {run.device} + {when(run.ranAt, now)} + + {run.error ? ( + /* A run that failed still happened, and still may have cost. */ + Failed: {run.error} + ) : ( + + {run.pullRequests} open {run.pullRequests === 1 ? "PR" : "PRs"} ·{" "} + {run.commits} commits · +{run.insertions.toLocaleString()} − + {run.deletions.toLocaleString()} + + )} + + {run.tokens.toLocaleString()} tokens + + + ))} +
+ Those totals are what fills the {WORLD.essence.toLowerCase()} vial on the field. +
+ + )} + + +
+
+ );
+}
+
+/**
+ * How full the vial looks, which is not how many tokens there are.
+ *
+ * Logarithmic, because the range this has to cover is absurd. A light week is
+ * a few hundred thousand tokens and a heavy one is hundreds of millions -- a
+ * real machine reported eighty-three million for three days of ordinary work.
+ * On the linear scale this used to have, which filled at a million, that pinned
+ * the vial at the top on the first run and it never said anything again.
+ *
+ * A decade of tokens is a fifth of the vial: a hundred thousand is a third
+ * full, ten million is two thirds, a billion is the top. The exact number is
+ * printed beside it, which is where precision belongs; this is for the glance.
+ */
+function vialFill(tokens: number): number {
+ if (tokens <= 0) return 0;
+ const decades = Math.log10(tokens) / 9;
+ return Math.min(100, Math.max(4, decades * 100));
+}
+
+/**
+ * The elixir vial: what the stat-gathering has spent, in tokens.
+ *
+ * On the HUD rather than in a settings page because it is the one number in
+ * this game that costs real money. Somebody playing with a resource gauge
+ * should see at a glance that the gauge is their own spend, and clicking it
+ * says where every drop went.
+ */
+function Elixir({ tokens, gathering }: { tokens: number; gathering: boolean }) {
+ return (
+
+ {label}
+
+ {value.toLocaleString()}
+ {of > 0 && / {of.toLocaleString()}}
+
+
+
+
+
+ {detail && {detail}
} +
+
+
+ {WORLD.essence}
+
+ {gathering ? `${tokens.toLocaleString()} tokens` : "not gathering"}
+
+
+
+ );
+}
+
+export function Hud({
+ standing,
+ marks,
+ elixir,
+ gathering,
+ characterClass,
+ wrights,
+ demo,
+ counted,
+ onOpenRoster,
+ onOpenGathering,
+}: HudProps) {
+ const lore = CLASS_LORE[characterClass] ?? CLASS_LORE.terminal;
+ const unlock = nextUnlock(standing.level);
+ const fighting = wrights.filter((wright) => wright.work === "bug").length;
+ const building = wrights.filter((wright) => wright.work === "feature").length;
+
+ /*
+ * Corners rather than a bar.
+ *
+ * A strip across the top was one panel wide enough to reach from edge to edge
+ * and tall enough to hold three rows, and what it mostly did was cover the
+ * map. Everything on it is glanced at rather than read, and things that are
+ * glanced at belong at the edges of the eye, not across the middle of what
+ * you are looking at.
+ *
+ * So: who you are, top left, because it is the only thing here you might read
+ * a whole sentence of. What you have, bottom left, where money lives in every
+ * game anybody has played. Who is out, bottom right, next to the key prompt.
+ * The top right is left for the pause button, which was already there.
+ */
+ return (
+ <>
+
+
+
+
+
+
+
+
+ {lore.title}
+ Level {standing.level}
+
+
+
+
+
+
+
+
+ {marks.toLocaleString()}
+ {WORLD.coin}
+
+
+
+ {/*
+ * The vial is a way in, not an ornament. A figure that stands for
+ * money somebody's machine has spent should be one press from the
+ * account of what spent it -- and while it is off, one press from the
+ * notice explaining what turning it on would read.
+ */}
+
+
+
+
+
+ );
+}
diff --git a/app/src/game/ui/Marches.tsx b/app/src/game/ui/Marches.tsx
new file mode 100644
index 0000000..0ca72c0
--- /dev/null
+++ b/app/src/game/ui/Marches.tsx
@@ -0,0 +1,56 @@
+import { GARRISONS } from "../world/marches";
+
+/**
+ * The road book: every holding, what it is for, and a way to go there.
+ *
+ * This exists because the map got big. On a country you can see all of at once
+ * there is nothing to navigate and a list of places would be furniture; on one
+ * several screens across there is, and walking from the Keep to the Muster Yard
+ * to find out whether anything is happening there is a chore rather than
+ * exploration.
+ *
+ * It is also the second place the lore is written down, and deliberately the
+ * lesser one. The sentence here is the same sentence on the board outside the
+ * holding, so reading the list is a way of remembering what you have seen
+ * rather than a substitute for going and seeing it. What the list adds is the
+ * line the board does not carry: what each holding is a rename of.
+ */
+export function Marches({
+ onTravel,
+ onBack,
+}: {
+ onTravel: (id: string) => void;
+ onBack: () => void;
+}) {
+ return (
+
+
+ );
+}
diff --git a/app/src/game/ui/Mark.tsx b/app/src/game/ui/Mark.tsx
new file mode 100644
index 0000000..8db0f9e
--- /dev/null
+++ b/app/src/game/ui/Mark.tsx
@@ -0,0 +1,33 @@
+/**
+ * The marks the interface uses beside a label.
+ *
+ * Drawn icons from the medieval pack rather than typographic glyphs. The glyphs
+ * were doing the job badly: ⚒ and ⧗ and ❯ are whatever the reader's font
+ * happens to have for them, they sit on the baseline at sizes nobody chose, and
+ * three of them rendered as boxes on at least one machine this was looked at
+ * on. An icon is the same picture everywhere.
+ *
+ * Never on its own. Every one of these sits beside a word, because a picture
+ * nobody has been taught is decoration, and the word is the thing that actually
+ * says what the row is.
+ */
+
+/** What each mark is for. One name per thing, not one per icon. */
+const MARKS = {
+ work: "lance",
+ company: "shield",
+ machine: "tower",
+ running: "torch",
+ elapsed: "map",
+ condition: "goblet",
+ finished: "castle",
+ made: "wagon",
+} as const;
+
+export type MarkName = keyof typeof MARKS;
+
+export function Mark({ name }: { name: MarkName }) {
+ return (
+
+ );
+}
diff --git a/app/src/game/ui/Menu.tsx b/app/src/game/ui/Menu.tsx
new file mode 100644
index 0000000..266b322
--- /dev/null
+++ b/app/src/game/ui/Menu.tsx
@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { actionForKey, type GameAction } from "../engine/input";
+import { firstEnabled, nextIndex, restoreIndex } from "../engine/menu";
+import { useGamepadActions } from "../engine/use-gamepad";
+
+export interface MenuItem {
+ id: string;
+ label: string;
+ /** A second line, for what the choice costs or what it will do. */
+ detail?: string;
+ icon?: ReactNode;
+ disabled?: boolean;
+ /** Draws it as the way out, and never as the item focus lands on first. */
+ danger?: boolean;
+ onSelect: () => void;
+}
+
+/**
+ * A vertical menu that a keyboard, a pad and a thumb can all drive.
+ *
+ * Real `+ Ten holdings. The roads all meet at the Keep. +
+ +-
+ {GARRISONS.map((garrison) => (
+
- + + {garrison.name} + {garrison.purpose} + {/* The part the board outside does not say. */} + {garrison.truth} + + + + ))} +
+ );
+}
diff --git a/app/src/game/ui/Menu.tsx b/app/src/game/ui/Menu.tsx
new file mode 100644
index 0000000..266b322
--- /dev/null
+++ b/app/src/game/ui/Menu.tsx
@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { actionForKey, type GameAction } from "../engine/input";
+import { firstEnabled, nextIndex, restoreIndex } from "../engine/menu";
+import { useGamepadActions } from "../engine/use-gamepad";
+
+export interface MenuItem {
+ id: string;
+ label: string;
+ /** A second line, for what the choice costs or what it will do. */
+ detail?: string;
+ icon?: ReactNode;
+ disabled?: boolean;
+ /** Draws it as the way out, and never as the item focus lands on first. */
+ danger?: boolean;
+ onSelect: () => void;
+}
+
+/**
+ * A vertical menu that a keyboard, a pad and a thumb can all drive.
+ *
+ * Real `