@nano133/nanoterra 0.3.1 → 0.4.0

package/dist/admin/panel/tabs.js

@@ -0,0 +1,68 @@
+// The panel's tab bar: Overview, Cosmetics, Orders, Players and Settings. Real tabs (role tablist, tab and tabpanel): a press or the arrow keys, Home and End
+// choose one, and only the chosen tab is in the Tab order. Every panel is made once and only hidden, so a draft, a search or a switch keeps its state when
+// the creator goes to another tab and back. The choice lives in this page's memory only: the panel never writes the page's address (the host page owns it).
+import { h } from "./dom.js";
+import { icon } from "./icons.js";
+export const TABS = [
+    { id: "overview", label: "Overview", icon: "overview" },
+    { id: "cosmetics", label: "Cosmetics", icon: "shirt" },
+    { id: "orders", label: "Orders", icon: "receipt" },
+    { id: "players", label: "Players", icon: "players" },
+    { id: "settings", label: "Settings", icon: "settings" },
+];
+export function tabBar(first = "overview") {
+    let current = first;
+    const bar = h("div", { class: "tabbar", role: "tablist", "aria-label": "Admin sections" });
+    const buttons = {};
+    const counts = {};
+    const panels = {};
+    for (const t of TABS) {
+        counts[t.id] = h("span", { class: "tab-count" });
+        counts[t.id].hidden = true;
+        const b = h("button", { class: "tabbar-tab", type: "button", role: "tab", id: `n133-tab-${t.id}`, "aria-controls": `n133-panel-${t.id}` }, icon(t.icon, 18), h("span", { class: "tab-label" }, t.label), counts[t.id]);
+        b.addEventListener("click", () => select(t.id));
+        b.addEventListener("keydown", (e) => {
+            const i = TABS.findIndex((x) => x.id === t.id);
+            const next = e.key === "ArrowRight" ? i + 1 : e.key === "ArrowLeft" ? i - 1 : e.key === "Home" ? 0 : e.key === "End" ? TABS.length - 1 : null;
+            if (next === null)
+                return;
+            e.preventDefault();
+            select(TABS[(next + TABS.length) % TABS.length].id, true);
+        });
+        buttons[t.id] = b;
+        bar.append(b);
+        panels[t.id] = h("section", { class: `tabpanel tabpanel-${t.id}`, role: "tabpanel", id: `n133-panel-${t.id}`, "aria-labelledby": `n133-tab-${t.id}`, tabindex: 0 });
+    }
+    function select(id, focus = false) {
+        current = id;
+        for (const t of TABS) {
+            const on = t.id === id;
+            buttons[t.id].setAttribute("aria-selected", on ? "true" : "false");
+            buttons[t.id].tabIndex = on ? 0 : -1;
+            buttons[t.id].classList.toggle("is-on", on);
+            panels[t.id].hidden = !on;
+        }
+        if (focus)
+            buttons[id].focus({ preventScroll: true });
+        // Keep the chosen tab in view in the bar, when the bar scrolls sideways (only the bar moves).
+        const b = buttons[id];
+        if (bar.scrollWidth > bar.clientWidth)
+            bar.scrollLeft = Math.max(0, b.offsetLeft - (bar.clientWidth - b.offsetWidth) / 2);
+        const panel = panels[id];
+        if (panel.isConnected && panel.getBoundingClientRect().top < bar.getBoundingClientRect().bottom)
+            panel.scrollIntoView?.({ block: "start" });
+    }
+    select(first);
+    return {
+        bar,
+        panels,
+        select,
+        get current() {
+            return current;
+        },
+        setCount(id, n) {
+            counts[id].hidden = n === null;
+            counts[id].textContent = n === null ? "" : n.toLocaleString("en-US");
+        },
+    };
+}

package/dist/admin/switches.d.ts

@@ -49,7 +49,7 @@ export declare const SWITCHES: Record<SwitchId, {
  * to do (the starter's src/client/ui/player.ts draws no Nanoterra character while sign-in is Off); the card only says it.
  */
 export declare const CHARACTER_NEEDS_SIGNIN = "This needs \u201CPlayers can sign in with Nanoterra\u201D to be On: only a player who signs in from Nanoterra brings a character.";
-export declare const CHARACTER_SIGNIN_OFF = "Sign-in from Nanoterra is Off, so every player plays as the island's first character, a player who signed in from Nanoterra before included.";
+export declare const CHARACTER_SIGNIN_OFF = "Sign-in from Nanoterra is Off, so every player starts as the island's first character, a player who signed in from Nanoterra before included. The game may also let a player switch to its own character.";
 /** What to tell the creator under the sign-in switch about Nanoterra's review. A game cannot see that review: it says so. */
 export declare const REVIEW_NOTE = "Your choice is saved here at once. The sign-in word is part of your listing file, and Nanoterra's review decides what Nanoterra shows for a game that is listed. This page cannot see that review. Check it on Nanoterra's launch page (step 6).";
 export declare const REVIEW_LINK = "https://nano133.com/build/nanoterra/launch";

package/dist/admin/switches.js

@@ -36,9 +36,9 @@ export function mergeSettings(stored, defaults) {
 }
 export const SWITCHES = {
     character: {
-        title: "Players use their Nanoterra character",
-        on: "On: a player who signs in from Nanoterra plays as the character they picked there. Anyone else plays as the island's first character.",
-        off: "Off: every player plays as this game's own character.",
+        title: "Players can play as their Nanoterra character",
+        on: "On: a player who signs in from Nanoterra plays as the character they picked there. Anyone else plays as the island's first character. The game may also let a player switch to its own character.",
+        off: "Off: every player plays as this game's own character, with no choice.",
     },
     signin: {
         title: "Players can sign in with Nanoterra",
@@ -52,7 +52,7 @@ export const SWITCHES = {
  * to do (the starter's src/client/ui/player.ts draws no Nanoterra character while sign-in is Off); the card only says it.
  */
 export const CHARACTER_NEEDS_SIGNIN = "This needs “Players can sign in with Nanoterra” to be On: only a player who signs in from Nanoterra brings a character.";
-export const CHARACTER_SIGNIN_OFF = "Sign-in from Nanoterra is Off, so every player plays as the island's first character, a player who signed in from Nanoterra before included.";
+export const CHARACTER_SIGNIN_OFF = "Sign-in from Nanoterra is Off, so every player starts as the island's first character, a player who signed in from Nanoterra before included. The game may also let a player switch to its own character.";
 /** What to tell the creator under the sign-in switch about Nanoterra's review. A game cannot see that review: it says so. */
 export const REVIEW_NOTE = "Your choice is saved here at once. The sign-in word is part of your listing file, and Nanoterra's review decides what Nanoterra shows for a game that is listed. This page cannot see that review. Check it on Nanoterra's launch page (step 6).";
 export const REVIEW_LINK = "https://nano133.com/build/nanoterra/launch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Nanoterra for a creator's game, in one package: the player's sign-in ticket, the player's character (a toon body on the island's skeleton) and the looks ladder.",
   "type": "module",
   "main": "dist/index.js",

package/src/admin/panel/dom.ts

@@ -29,3 +29,37 @@ export async function copy(text: string, button: HTMLButtonElement): Promise<voi
   }
   setTimeout(() => (button.textContent = was), 1500);
 }
+
+/**
+ * A small copy key: an icon and the word "Copy". A press puts `value` on the clipboard and says "Copied" for a moment; only the word changes, so the icon
+ * stays. `label` names what is copied, for a screen reader and the tooltip ("Copy the player's address").
+ */
+export function copyKey(value: string, label: string, icon?: Element): HTMLButtonElement {
+  const word = h("span", { class: "copy-word" }, "Copy");
+  const button = h("button", { class: "btn btn-small btn-quiet copy-key", type: "button", "aria-label": label, title: label }, icon ?? null, word);
+  button.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      word.textContent = "Copied";
+    } catch {
+      word.textContent = "Copy failed";
+    }
+    setTimeout(() => (word.textContent = "Copy"), 1500);
+  });
+  return button;
+}
+
+/** "just now", "5 min ago", "3 h ago", "2 days ago". A time in the future reads "just now". */
+export function ago(ms: number, now = Date.now()): string {
+  const m = Math.max(0, Math.round((now - ms) / 60_000));
+  if (m < 1) return "just now";
+  if (m < 60) return `${m} min ago`;
+  const hours = Math.round(m / 60);
+  return hours < 48 ? `${hours} h ago` : `${Math.round(hours / 24)} days ago`;
+}
+
+/** "3 orders", "1 order" */
+export const plural = (n: number, word: string): string => `${n} ${word}${n === 1 ? "" : "s"}`;
+
+/** "$1.25" from cents. */
+export const dollars = (cents: number): string => `$${(cents / 100).toFixed(2)}`;

package/src/admin/panel/gameCard.ts

@@ -1,4 +1,4 @@
-// The "Game" card of /admin: two switches, "Players use their Nanoterra character" and "Players can sign in with Nanoterra". A press saves at once
+// The "Game" card of /admin: two switches, "Players can play as their Nanoterra character" and "Players can sign in with Nanoterra". A press saves at once
 // (POST {api}/game, behind the same admin guard as every admin call) and the game reads the setting at run time, so the creator pushes and deploys
 // nothing. The words are in ../switches.ts. The card changes ONLY these two settings: never a look, a price or an order.
 
@@ -6,14 +6,17 @@ import { CHARACTER_NEEDS_SIGNIN, CHARACTER_SIGNIN_OFF, REVIEW_LINK, REVIEW_NOTE,
 import { ApiError, type Api } from "./api.js";
 import { h } from "./dom.js";
 
-/** The card for the settings `initial`. It keeps its own state: a press shows "Saving…", then "Saved." or the server's words. `defaultsFile` is where the game's defaults are written ("game.config.json"). */
-export function gameCard(api: Api, initial: GameState, defaultsFile = "the game's own settings"): HTMLElement {
+/**
+ * The card for the settings `initial`. It keeps its own state: a press shows "Saving…", then "Saved." or the server's words. `defaultsFile` is where the game's defaults are
+ * written ("game.config.json"). `onChange` hears each saved state (the panel's Overview shows the two switches too).
+ */
+export function gameCard(api: Api, initial: GameState, defaultsFile = "the game's own settings", onChange?: (state: GameState) => void): HTMLElement {
   let state = initial;
   const rows = new Map<SwitchId, { button: HTMLButtonElement; sentence: HTMLElement; status: HTMLElement }>();
   /** Under the character switch: it works only through sign-in, so it says so, and says what a player gets while sign-in is Off. */
   const needs = h("p", { class: "fine switch-needs" });
-  const card = h("section", { class: "admin-card game-card", "aria-labelledby": "game-title" }, h("h2", { id: "game-title" }, "Game"));
-  card.append(h("p", { class: "fine" }, `Two choices about your game. A press saves at once: you push nothing and deploy nothing. They start from ${defaultsFile}, and a press here wins.`));
+  const card = h("section", { class: "admin-card game-card", "aria-labelledby": "game-title" }, h("div", { class: "card-head" }, h("h2", { id: "game-title" }, "Game")));
+  card.append(h("p", { class: "fine card-intro" }, `Two choices about your game. A press saves at once: you push nothing and deploy nothing. They start from ${defaultsFile}, and a press here wins.`));
 
   const draw = () => {
     for (const [id, row] of rows) {
@@ -35,6 +38,7 @@ export function gameCard(api: Api, initial: GameState, defaultsFile = "the game'
       state = await api.post<GameState>("/game", pressOf(id, state));
       row.status.textContent = "Saved.";
       draw();
+      onChange?.(state);
     } catch (e) {
       row.status.textContent = e instanceof ApiError ? e.message : "The game's server did not answer. Nothing was changed.";
     } finally {

package/src/admin/panel/icons.ts

@@ -0,0 +1,46 @@
+// The panel's small line icons, drawn as inline SVG with createElementNS (no icon font, no innerHTML: fine under a strict CSP). Each is 24 units square, drawn
+// with the text colour (currentColor), and hidden from screen readers: the word next to it says what it is.
+
+const NS = "http://www.w3.org/2000/svg";
+
+type Shape = [tag: string, attrs: Record<string, string | number>];
+
+const SHAPES = {
+  overview: [["rect", { x: 3, y: 3, width: 7.5, height: 7.5, rx: 2 }], ["rect", { x: 13.5, y: 3, width: 7.5, height: 7.5, rx: 2 }], ["rect", { x: 3, y: 13.5, width: 7.5, height: 7.5, rx: 2 }], ["rect", { x: 13.5, y: 13.5, width: 7.5, height: 7.5, rx: 2 }]],
+  shirt: [["path", { d: "M8.5 3.5 4 6 2.5 10.5l3.5 1.5V21h12v-9l3.5-1.5L20 6l-4.5-2.5a3.5 3.5 0 0 1-7 0Z" }]],
+  receipt: [["path", { d: "M5 3h14v18l-2.5-1.5L14 21l-2-1.5L10 21l-2.5-1.5L5 21Z" }], ["path", { d: "M9 8h6M9 12h6M9 16h3" }]],
+  players: [["circle", { cx: 9, cy: 8, r: 3.5 }], ["path", { d: "M2.5 20a6.5 6.5 0 0 1 13 0" }], ["path", { d: "M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14.2a6.5 6.5 0 0 1 3.5 5.8" }]],
+  settings: [["circle", { cx: 12, cy: 12, r: 3 }], ["path", { d: "M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1" }]],
+  coin: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M12 6.5v11M14.8 9.2a2.6 2.6 0 0 0-2.6-1.7h-.6a2.2 2.2 0 0 0 0 4.4h.8a2.2 2.2 0 0 1 0 4.4h-.7a2.6 2.6 0 0 1-2.6-1.7" }]],
+  clock: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M12 7v5l3.5 2" }]],
+  back: [["path", { d: "M9 6 4 11l5 5" }], ["path", { d: "M4 11h10.5a5.5 5.5 0 0 1 0 11H11" }]],
+  tag: [["path", { d: "M3 12.2V4a1 1 0 0 1 1-1h8.2l8.6 8.6a1.5 1.5 0 0 1 0 2.1l-6.9 6.9a1.5 1.5 0 0 1-2.1 0Z" }], ["circle", { cx: 7.5, cy: 7.5, r: 1.5 }]],
+  copy: [["rect", { x: 8, y: 8, width: 13, height: 13, rx: 2.5 }], ["path", { d: "M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8" }]],
+  lock: [["rect", { x: 4.5, y: 10.5, width: 15, height: 10.5, rx: 2.5 }], ["path", { d: "M8 10.5V7.5a4 4 0 0 1 8 0v3" }]],
+  plus: [["path", { d: "M12 5v14M5 12h14" }]],
+  search: [["circle", { cx: 10.5, cy: 10.5, r: 6.5 }], ["path", { d: "m15.5 15.5 5 5" }]],
+  alert: [["path", { d: "M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }], ["path", { d: "M12 9v4.5M12 17h.01" }]],
+  check: [["path", { d: "m4.5 12.5 5 5 10-11" }]],
+  external: [["path", { d: "M14 4h6v6M20 4l-9 9" }], ["path", { d: "M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10" }]],
+  refresh: [["path", { d: "M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4" }], ["path", { d: "M4 13a8 8 0 0 0 14.3 4.9L20 16M20 20v-4h-4" }]],
+  out: [["path", { d: "M15 4h3.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H15" }], ["path", { d: "M10 8l-4 4 4 4M6 12h10" }]],
+  pencil: [["path", { d: "M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16Z" }], ["path", { d: "m13.5 6.5 4 4" }]],
+  close: [["path", { d: "M6 6l12 12M18 6 6 18" }]],
+  dup: [["rect", { x: 8, y: 8, width: 13, height: 13, rx: 2.5 }], ["path", { d: "M14.5 11.5v6M11.5 14.5h6M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8" }]],
+  trash: [["path", { d: "M4 7h16M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13" }]],
+  sparkle: [["path", { d: "M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6" }]],
+} satisfies Record<string, Shape[]>;
+
+export type IconName = keyof typeof SHAPES;
+
+/** An icon of `size` CSS pixels (default 20). */
+export function icon(name: IconName, size = 20): SVGSVGElement {
+  const svg = document.createElementNS(NS, "svg");
+  for (const [k, v] of Object.entries({ viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", "stroke-width": 1.8, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false", class: `icon icon-${name}` })) svg.setAttribute(k, String(v));
+  for (const [tag, attrs] of SHAPES[name] as Shape[]) {
+    const el = document.createElementNS(NS, tag);
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
+    svg.append(el);
+  }
+  return svg;
+}

package/src/admin/panel/index.ts

@@ -11,8 +11,17 @@ export type { MountedAdmin, MountOptions } from "./mount.js";
 export { ApiError, createApi } from "./api.js";
 export type { Api } from "./api.js";
 export { gameCard } from "./gameCard.js";
-export { lookPicture, previewPicture, shelfView } from "./shelf.js";
+export { BODY_COLOURS, lookPicture, previewPicture, shelfFilter, shelfSort, shelfView } from "./shelf.js";
 export { DEFAULT_LOGINS_NOTE, signinsCard } from "./signins.js";
-export type { ShelfData } from "./shelf.js";
+export type { ShelfData, ShelfFilter, ShelfSort } from "./shelf.js";
+export { orderMatches, ordersView } from "./orders.js";
+export type { OrderFilter, OrdersView } from "./orders.js";
+export { bestSellers, overviewView } from "./overview.js";
+export type { BestSeller, OverviewView } from "./overview.js";
+export { playerMatches, playersView } from "./players.js";
+export { TABS, tabBar } from "./tabs.js";
+export type { TabBar, TabId } from "./tabs.js";
+export { icon } from "./icons.js";
+export type { IconName } from "./icons.js";
 export { aiPrompt, centsOf, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";
 export type { LookStats, ShelfOrder, ShelfPlayer } from "./shelfData.js";

package/src/admin/panel/mount.ts

@@ -1,14 +1,23 @@
 // The admin panel: orders, owned looks, totals and the two game switches, from the game's own database. Only the game's owner can read them (the
 // handler checks it on every call); this page only shows them. `mountAdmin(element, options)` draws the panel into `element`.
+//
+// The page: a top bar (who is signed in, Live or Test mode, Sign out), what is still off (one banner), four numbers (earned, open now, to send back, players;
+// each opens its list), then five tabs: Overview, Cosmetics (the Shelf), Orders, Players and Settings (the Game card, the sign-ins, the facts). Every tab is
+// made once; a new read of the summary fills them again and keeps the chosen tab, the Shelf's draft, a search and the Game card.
 
 import type { Look } from "../../looks/look.js";
 import type { AdminSummary } from "../store.js";
 import type { GameState } from "../switches.js";
 import { ApiError, createApi, type Api } from "./api.js";
-import { h, shortAddress } from "./dom.js";
+import { copyKey, h, plural, shortAddress } from "./dom.js";
 import { gameCard } from "./gameCard.js";
+import { icon, type IconName } from "./icons.js";
+import { ordersView, type OrderFilter } from "./orders.js";
+import { overviewView } from "./overview.js";
+import { playersView } from "./players.js";
 import { shelfView } from "./shelf.js";
 import { signinsCard } from "./signins.js";
+import { tabBar, type TabId } from "./tabs.js";
 
 export type MountOptions = {
   /** The game's looks now (its looks.json). The Shelf starts from them. */
@@ -40,35 +49,51 @@ export type MountedAdmin = {
   ready: Promise<void>;
 };
 
-const STATUS_WORDS: Record<string, string> = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
-const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
 const when = (ms: number | null) => (ms ? new Date(ms).toLocaleString() : "");
 
+/** The drawn page, made at the first read that the owner may see. */
+type Dashboard = { update(s: AdminSummary): void; setGame(state: GameState | null): void };
+
 export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdmin {
   const api: Api = createApi(options.api ?? "/api/admin", options.fetch);
-  const gate = h("section", { id: "n133-gate", class: "admin-card", "aria-live": "polite" });
+  const gate = h("section", { id: "n133-gate", class: "admin-card gate", "aria-live": "polite" });
   const data = h("section", { id: "n133-data" });
   data.hidden = true;
   root.classList.add("n133-admin");
   root.replaceChildren(gate, data);
 
-  let filter = "all";
   /** The Shelf keeps its draft while the page redraws (a tab, a payment check): one view for the life of the page. */
   let shelf: ReturnType<typeof shelfView> | null = null;
   /** The "Game" card keeps its own state for the life of the page (a payment check redraws the rest, not this). */
   let game: HTMLElement | null = null;
+  let gameState: GameState | null = null;
+  let dash: Dashboard | null = null;
 
   /** The card, made once. A fault in reading the two switches must not hide the orders: the card is left out and the rest still shows. */
   async function gameSection(): Promise<HTMLElement | null> {
     if (game) return game;
     try {
-      game = gameCard(api, await api.get<GameState>("/game"), options.defaultsFile);
+      gameState = await api.get<GameState>("/game");
+      game = gameCard(api, gameState, options.defaultsFile, (state) => {
+        gameState = state;
+        dash?.setGame(state);
+      });
     } catch {
       game = null;
+      gameState = null;
     }
     return game;
   }
 
+  /** The gate's screen: an icon, a title and what to do. The data drawn before goes (a signed-out page holds none); the Shelf's draft and the Game card stay in memory. */
+  function showGate(kind: IconName, title: string, ...body: (Node | null)[]) {
+    data.hidden = true;
+    data.replaceChildren();
+    dash = null;
+    gate.hidden = false;
+    gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon(kind, 28)), h("h2", {}, title), ...body.filter((b): b is Node => b !== null));
+  }
+
   async function load(): Promise<void> {
     try {
       const s = await api.get<AdminSummary>("/summary");
@@ -77,43 +102,34 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
       render(s);
     } catch (e) {
       if (!(e instanceof ApiError)) {
+        // The data already drawn (if any) stays: a failed new read does not take it away.
         gate.hidden = false;
-        gate.replaceChildren(h("p", {}, "The game's server did not answer. Try again."));
+        gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon("alert", 28)), h("p", {}, "The game's server did not answer. Try again."), h("button", { class: "btn", type: "button", onclick: () => void load() }, "Try again"));
         return;
       }
-      data.hidden = true;
-      gate.hidden = false;
       if (e.status === 403 && e.body.signedInAs) {
-        gate.replaceChildren(
-          h("h2", {}, "Not the game's address"),
-          h("p", {}, `You are signed in as ${shortAddress(String(e.body.signedInAs))}. Only the game's owner address can open this page.`),
-          signOutButton(),
-        );
+        showGate("lock", "Not the game's address", h("p", {}, `You are signed in as ${shortAddress(String(e.body.signedInAs))}. Only the game's owner address can open this page.`), signOutButton());
         return;
       }
       if (e.status === 403 && e.body.reason === "nanoterra") {
-        gate.replaceChildren(
-          h("h2", {}, "You signed in from Nanoterra"),
-          h("p", {}, "A Nanoterra sign-in names your address but proves no key, so it cannot open this page. Sign out, then sign in with the wallet that holds your game's address."),
-          signOutButton(),
-        );
+        showGate("lock", "You signed in from Nanoterra", h("p", {}, "A Nanoterra sign-in names your address but proves no key, so it cannot open this page. Sign out, then sign in with the wallet that holds your game's address."), signOutButton());
         return;
       }
       if (e.status === 403 && e.body.reason === "no_address") {
-        gate.replaceChildren(h("h2", {}, "No owner address yet"), h("p", {}, e.message), h("p", { class: "fine" }, options.noAddressHelp ?? "Set the game's owner address, then deploy again."));
+        showGate("alert", "No owner address yet", h("p", {}, e.message), h("p", { class: "fine" }, options.noAddressHelp ?? "Set the game's owner address, then deploy again."));
         return;
       }
       if (e.status === 403) {
-        gate.replaceChildren(h("h2", {}, "This page is closed to you"), h("p", {}, e.message), signOutButton());
+        showGate("lock", "This page is closed to you", h("p", {}, e.message), signOutButton());
         return;
       }
       if (e.status === 401) {
-        const into = h("div", {});
-        gate.replaceChildren(h("h2", {}, "Sign in with your game's address"), h("p", {}, e.message), into);
+        const into = h("div", { class: "gate-signin" });
+        showGate("lock", "Sign in with your game's address", h("p", {}, e.message), into);
         options.signIn(into, () => void load());
         return;
       }
-      gate.replaceChildren(h("p", {}, e.message));
+      showGate("alert", "Something went wrong", h("p", {}, e.message));
     }
   }
 
@@ -128,6 +144,7 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
           void load();
         },
       },
+      icon("out", 18),
       "Sign out",
     );
   }
@@ -139,89 +156,91 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
     return shelf.el;
   }
 
-  function render(s: AdminSummary): void {
-    data.hidden = false;
-    const check = h("button", { class: "btn btn-primary", type: "button" }, "Check payments now");
-    const checkNote = h("span", { class: "fine", role: "status" });
-    check.addEventListener("click", async () => {
-      check.disabled = true;
-      checkNote.textContent = "Checking…";
-      try {
-        const r = await api.post<{ scan: { scanned: boolean; settled: unknown[]; error?: string }; summary: AdminSummary }>("/check");
-        render(r.summary);
-      } catch (e) {
-        checkNote.textContent = e instanceof Error ? e.message : "The check failed.";
-        check.disabled = false;
-      }
-    });
-
-    const tabs = h("div", { class: "tabs", role: "group", "aria-label": "Show orders" });
-    for (const key of ["all", "open", "paid", "expired", "paid_late"]) {
-      const n = key === "all" ? s.orders.length : s.counts[key as keyof AdminSummary["counts"]];
-      tabs.append(
-        h(
-          "button",
-          {
-            class: `tab${filter === key ? " tab-on" : ""}`,
-            type: "button",
-            "aria-pressed": filter === key ? "true" : "false",
-            onclick: () => {
-              filter = key;
-              render(s);
-            },
-          },
-          `${key === "all" ? "All" : STATUS_WORDS[key]} (${n})`,
-        ),
+  /** A look's body colour, while the game still has the look (for the dots in the lists). */
+  const colourOf = (id: string): string | null => options.looks.find((l) => l.id === id)?.change.body ?? null;
+
+  function build(): Dashboard {
+    const tabs = tabBar("overview");
+    const go = (tab: TabId, filter?: OrderFilter) => {
+      if (filter) orders.setFilter(filter);
+      tabs.select(tab);
+    };
+    const overview = overviewView(options.looks, colourOf, go);
+    const orders = ordersView(api, colourOf, (s) => render(s));
+    const players = playersView(colourOf);
+    tabs.panels.overview.append(overview.el);
+    tabs.panels.orders.append(orders.el);
+    tabs.panels.players.append(players.el);
+
+    const who = h("div", { class: "who" });
+    const chips = h("div", { class: "chips" });
+    const top = h("header", { class: "topbar" }, h("div", { class: "who-mark", "aria-hidden": "true" }, icon("lock", 18)), who, chips, h("div", { class: "topbar-keys" }, signOutButton()));
+    const banner = h("div", { class: "banner warnings", role: "alert" });
+    const kpis = h("div", { class: "kpis", role: "group", "aria-label": "Your game in numbers" });
+    const settings = h("div", { class: "settings-grid" });
+    tabs.panels.settings.append(settings);
+    data.replaceChildren(top, banner, kpis, tabs.bar, ...Object.values(tabs.panels));
+
+    const kpi = (cls: string, mark: IconName, label: string, value: string, sub: string, open: () => void, alert = false) =>
+      h("button", { class: `kpi kpi-${cls}${alert ? " is-alert" : ""}`, type: "button", onclick: open }, h("span", { class: "kpi-top" }, h("span", { class: "kpi-icon", "aria-hidden": "true" }, icon(mark, 18)), h("span", { class: "kpi-label" }, label)), h("strong", { class: "kpi-value" }, value), h("span", { class: "kpi-sub" }, sub));
+
+    function about(s: AdminSummary): HTMLElement {
+      const facts: [string, Node | string][] = [];
+      if (s.address) facts.push(["Signed in as", h("span", { class: "fact-address" }, h("code", {}, s.address), copyKey(s.address, "Copy your address", icon("copy", 14)))]);
+      facts.push(["Mode", s.testMode ? "Test mode: payments are not real" : "Live: payments are real"]);
+      if (s.turnstile !== undefined) facts.push(["Bot check", s.turnstile ? "On" : "Off"]);
+      if (s.nodes?.length) facts.push(["Payments are checked on", s.nodes.join(", ")]);
+      if (s.rate) facts.push(["Last price", `$${s.rate.usd} per XNO (${s.rate.sources.join(", ")}), ${when(s.rate.at)}`]);
+      return h(
+        "section",
+        { class: "admin-card about-card", "aria-labelledby": "n133-about-title" },
+        h("h2", { id: "n133-about-title" }, "About this admin"),
+        h("dl", { class: "facts" }, ...facts.map(([k, v]) => h("div", {}, h("dt", {}, k), h("dd", {}, v)))),
+        signOutButton(),
       );
     }
 
-    const rows = s.orders.filter((o) => filter === "all" || o.status === filter);
-    const orders = h("div", { class: "orders" });
-    if (!rows.length) orders.append(h("p", { class: "fine" }, "No orders here yet."));
-    for (const o of rows) {
-      orders.append(
-        h(
-          "article",
-          { class: `order order-${o.status}` },
-          h("div", { class: "order-top" }, h("strong", {}, o.look), h("span", { class: `badge badge-${o.status}` }, STATUS_WORDS[o.status] ?? o.status)),
-          h("div", { class: "order-amount" }, `${o.xno} XNO · $${o.usd}`),
-          h("div", { class: "fine" }, `Player ${shortAddress(o.player)} · made ${when(o.createdAt)}`),
-          o.paidAt ? h("div", { class: "fine" }, `Payment seen ${when(o.paidAt)}${o.payer ? ` from ${shortAddress(o.payer)}` : ""}`) : null,
-          o.status === "paid_late" && o.payer ? h("div", { class: "late-note" }, "Send this amount back by hand to ", h("code", {}, o.payer), ". The game holds no key, so it cannot send it.") : null,
-          o.hash ? h("div", { class: "fine hash" }, `Block ${o.hash}`) : null,
-        ),
-      );
-    }
+    return {
+      setGame: (state) => overview.setGame(state),
+      update(s) {
+        who.replaceChildren(h("span", { class: "who-label" }, "Signed in as"), s.address ? h("span", { class: "who-address" }, h("code", { title: s.address }, shortAddress(s.address)), copyKey(s.address, "Copy your address", icon("copy", 14))) : h("span", {}, "the game's owner"));
+        chips.replaceChildren(
+          h("span", { class: `chip ${s.testMode ? "chip-warn" : "chip-ok"}`, title: s.testMode ? "Payments are not real" : "Payments are real" }, h("span", { class: "chip-dot", "aria-hidden": "true" }), s.testMode ? "Test mode" : "Live"),
+          s.turnstile === undefined ? "" : h("span", { class: `chip ${s.turnstile ? "chip-ok" : "chip-warn"}` }, h("span", { class: "chip-dot", "aria-hidden": "true" }), s.turnstile ? "Bot check on" : "Bot check off"),
+        );
+        banner.hidden = !s.warnings.length;
+        banner.replaceChildren(h("div", { class: "banner-icon", "aria-hidden": "true" }, icon("alert", 20)), h("div", {}, h("h2", {}, "Check these"), h("ul", {}, ...s.warnings.map((w) => h("li", {}, w)))));
+
+        const ownedLooks = s.players.reduce((n, p) => n + p.looks.length, 0);
+        const late = s.totals.paidLate.count;
+        kpis.replaceChildren(
+          kpi("earned", "coin", "Earned", `${s.totals.paid.xno} XNO`, `$${s.totals.paid.usd} · ${plural(s.totals.paid.count, "order")}`, () => go("orders", "paid")),
+          kpi("open", "clock", "Open now", String(s.counts.open), `${s.counts.expired} expired`, () => go("orders", "open")),
+          kpi("late", "back", "To send back", `${s.totals.paidLate.xno} XNO`, late ? `$${s.totals.paidLate.usd} · ${plural(late, "order")}` : "Nothing to send back", () => go("orders", "paid_late"), late > 0),
+          kpi("players", "players", "Players", String(s.players.length), `${plural(ownedLooks, "look")} owned`, () => go("players")),
+        );
 
-    const players = h("div", { class: "players" });
-    if (!s.players.length) players.append(h("p", { class: "fine" }, "Nobody owns a paid look yet."));
-    for (const p of s.players) players.append(h("div", { class: "player" }, h("code", {}, p.player), h("span", {}, p.looks.map((l) => l.name).join(", "))));
+        tabs.setCount("cosmetics", options.looks.length);
+        tabs.setCount("orders", s.orders.length);
+        tabs.setCount("players", s.players.length);
+        overview.update(s);
+        overview.setGame(gameState);
+        const shelfEl = shelfCard(s);
+        if (shelfEl.parentNode !== tabs.panels.cosmetics) tabs.panels.cosmetics.replaceChildren(shelfEl);
+        orders.update(s);
+        players.update(s);
+        // The Game card is the same element at every redraw: moving it keeps its state.
+        settings.replaceChildren(...[game, signinsCard(s, api, () => void load(), options.loginsNote), about(s)].filter((p): p is HTMLElement => p !== null));
+      },
+    };
+  }
 
-    const parts: (Node | null)[] = [
-      s.warnings.length ? h("section", { class: "admin-card warnings", role: "alert" }, h("h2", {}, "Check these"), h("ul", {}, ...s.warnings.map((w) => h("li", {}, w)))) : null,
-      game,
-      h(
-        "section",
-        { class: "totals" },
-        h("div", { class: "total" }, h("span", {}, "Paid"), h("strong", {}, `${s.totals.paid.xno} XNO`), h("small", {}, `$${s.totals.paid.usd} · ${plural(s.totals.paid.count, "order")}`)),
-        h("div", { class: "total" }, h("span", {}, "Paid late (send back)"), h("strong", {}, `${s.totals.paidLate.xno} XNO`), h("small", {}, `$${s.totals.paidLate.usd} · ${plural(s.totals.paidLate.count, "order")}`)),
-        h("div", { class: "total" }, h("span", {}, "Open now"), h("strong", {}, String(s.counts.open)), h("small", {}, `${s.counts.expired} expired`)),
-      ),
-      shelfCard(s),
-      h("section", { class: "admin-card" }, h("div", { class: "card-head" }, h("h2", {}, "Orders"), h("div", {}, ...(s.canCheck === false ? [] : [check, " ", checkNote]))), tabs, orders),
-      h("section", { class: "admin-card" }, h("h2", {}, "Owned looks"), players),
-      signinsCard(s, api, () => void load(), options.loginsNote),
-      h(
-        "section",
-        { class: "admin-card fine" },
-        s.address ? h("p", {}, "Signed in as ", h("code", {}, s.address), ".") : null,
-        s.nodes?.length ? h("p", {}, `Payments are checked on: ${s.nodes.join(", ")}.`) : null,
-        s.rate ? h("p", {}, `Last price: $${s.rate.usd} per XNO (${s.rate.sources.join(", ")}), ${when(s.rate.at)}.`) : null,
-        signOutButton(),
-      ),
-    ];
-    data.replaceChildren(...parts.filter((p): p is Node => p !== null));
+  function render(s: AdminSummary): void {
+    data.hidden = false;
+    dash ??= build();
+    dash.update(s);
   }
 
   return { reload: () => load(), ready: load() };
 }
+