@nano133/nanoterra 0.3.2 → 0.5.0

package/dist/admin/panel/mount.js

@@ -1,37 +1,58 @@
 // 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 { ApiError, createApi } from "./api.js";
-import { h, shortAddress } from "./dom.js";
+import { copyKey, h, plural, shortAddress } from "./dom.js";
 import { gameCard } from "./gameCard.js";
+import { icon } from "./icons.js";
+import { ordersView } from "./orders.js";
+import { overviewView } from "./overview.js";
+import { playersView } from "./players.js";
 import { shelfView } from "./shelf.js";
 import { signinsCard } from "./signins.js";
-const STATUS_WORDS = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
-const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+import { tabBar } from "./tabs.js";
 const when = (ms) => (ms ? new Date(ms).toLocaleString() : "");
 export function mountAdmin(root, options) {
     const 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 = null;
     /** The "Game" card keeps its own state for the life of the page (a payment check redraws the rest, not this). */
     let game = null;
+    let gameState = null;
+    let dash = 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() {
         if (game)
             return game;
         try {
-            game = gameCard(api, await api.get("/game"), options.defaultsFile);
+            gameState = await api.get("/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, title, ...body) {
+        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 !== null));
+    }
     async function load() {
         try {
             const s = await api.get("/summary");
@@ -41,35 +62,34 @@ export function mountAdmin(root, options) {
         }
         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));
         }
     }
     function signOutButton() {
@@ -80,7 +100,7 @@ export function mountAdmin(root, options) {
                 await options.signOut().catch(() => null);
                 void load();
             },
-        }, "Sign out");
+        }, icon("out", 18), "Sign out");
     }
     function shelfCard(s) {
         const d = { orders: s.orders, players: s.players, repo: s.repo ?? null };
@@ -90,58 +110,72 @@ export function mountAdmin(root, options) {
             shelf = shelfView(d, options.looks, options.lookPicture, options.repoHelp);
         return shelf.el;
     }
+    /** An outfit's body colour, while the game still has the look (for the dots in the lists); none for an item of another wear slot. */
+    const colourOf = (id) => options.looks.find((l) => l.id === id)?.change?.body ?? null;
+    function build() {
+        const tabs = tabBar("overview");
+        const go = (tab, filter) => {
+            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, mark, label, value, sub, open, 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) {
+            const facts = [];
+            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());
+        }
+        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")));
+                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 !== null));
+            },
+        };
+    }
     function render(s) {
         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("/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];
-            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})`));
-        }
-        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));
-        }
-        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(", "))));
-        const parts = [
-            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 !== null));
+        dash ??= build();
+        dash.update(s);
     }
     return { reload: () => load(), ready: load() };
 }

package/dist/admin/panel/orders.d.ts

@@ -0,0 +1,23 @@
+import type { AdminOrder, AdminSummary } from "../store.js";
+import type { Api } from "./api.js";
+export type OrderFilter = "all" | "open" | "paid" | "expired" | "paid_late";
+/** How many orders the list draws at first, and how many more each "Show more" adds. */
+export declare const ORDERS_PAGE = 20;
+export declare const STATUS_WORDS: Record<string, string>;
+/** Whether an order matches a search: its look's name or id, the player's or the payer's address, or its block. Upper or lower case does not matter. Pure. */
+export declare function orderMatches(o: AdminOrder, query: string): boolean;
+/** A status as a coloured badge. */
+export declare const badge: (status: string) => HTMLSpanElement;
+/** One order: a card on a phone, a line of the table on a wide screen. `colourOf` gives the look's body colour for its dot, when the game still has the look. */
+export declare function orderRow(o: AdminOrder, colourOf: (lookId: string) => string | null, compact?: boolean): HTMLElement;
+export type OrdersView = {
+    el: HTMLElement;
+    update(s: AdminSummary): void;
+    /** Shows only one status (a press on a number of the Overview does it). */
+    setFilter(f: OrderFilter): void;
+};
+/**
+ * The tab's content, made once: its filter, its search and its check keep their state when the summary is read again. `colourOf` gives a look's body colour;
+ * `onSummary` hears the summary that "Check payments now" answers with (the panel draws it everywhere).
+ */
+export declare function ordersView(api: Api, colourOf: (lookId: string) => string | null, onSummary: (s: AdminSummary) => void): OrdersView;

package/dist/admin/panel/orders.js

@@ -0,0 +1,130 @@
+// The Orders tab of /admin: every order of the game (the summary gives the newest 500), a filter by status with its count, a search (a look, a player's or a
+// payer's address, a block), and "Check payments now" when the game gave a check. A row is a card on a phone and a line of a table on a wide screen. A
+// payment that came after its order ran out says what to do: the game holds no key, so the owner sends the amount back by hand.
+import { ago, copyKey, h, plural, shortAddress } from "./dom.js";
+import { icon } from "./icons.js";
+/** How many orders the list draws at first, and how many more each "Show more" adds. */
+export const ORDERS_PAGE = 20;
+export const STATUS_WORDS = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
+const FILTERS = ["all", "paid", "open", "paid_late", "expired"];
+const when = (ms) => (ms ? new Date(ms).toLocaleString() : "");
+/** "A1B2C3D4…E5F6A7" */
+const shortHash = (hash) => (hash.length > 16 ? `${hash.slice(0, 8)}…${hash.slice(-6)}` : hash);
+/** Whether an order matches a search: its look's name or id, the player's or the payer's address, or its block. Upper or lower case does not matter. Pure. */
+export function orderMatches(o, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return true;
+    return [o.look, o.lookId, o.player, o.payer ?? "", o.hash ?? ""].some((v) => v.toLowerCase().includes(q));
+}
+/** A status as a coloured badge. */
+export const badge = (status) => h("span", { class: `badge badge-${status}` }, STATUS_WORDS[status] ?? status);
+/** One order: a card on a phone, a line of the table on a wide screen. `colourOf` gives the look's body colour for its dot, when the game still has the look. */
+export function orderRow(o, colourOf, compact = false) {
+    const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+    const c = colourOf(o.lookId);
+    if (c)
+        dot.style.setProperty("--swatch", c);
+    const row = h("article", { class: `order order-${o.status}${compact ? " is-compact" : ""}` }, h("div", { class: "order-look" }, dot, h("strong", {}, o.look)), h("div", { class: "order-status" }, badge(o.status)), h("div", { class: "order-amount" }, h("strong", {}, `${o.xno} XNO`), h("span", { class: "fine" }, `$${o.usd}`)), h("div", { class: "order-player" }, h("span", { class: "fine cell-label" }, "Player "), h("code", { title: o.player }, shortAddress(o.player)), compact ? null : copyKey(o.player, "Copy the player's address", icon("copy", 14))), compact
+        ? h("div", { class: "order-when" }, o.paidAt ? h("span", { title: when(o.paidAt) }, `Paid ${ago(o.paidAt)}`) : h("span", { title: when(o.createdAt) }, `Made ${ago(o.createdAt)}`))
+        : h("div", { class: "order-when" }, h("span", { title: when(o.createdAt) }, `Made ${ago(o.createdAt)}`), o.paidAt ? h("span", { class: "fine", title: when(o.paidAt) }, `Paid ${ago(o.paidAt)}${o.payer && o.payer !== o.player ? ` from ${shortAddress(o.payer)}` : ""}`) : null));
+    if (compact)
+        return row;
+    if (o.status === "paid_late" && o.payer)
+        row.append(h("div", { class: "late-note order-extra" }, icon("back", 16), h("span", {}, "Send this amount back by hand to ", h("code", {}, o.payer), ". The game holds no key, so it cannot send it."), copyKey(o.payer, "Copy the address to send it back to", icon("copy", 14))));
+    if (o.hash)
+        row.append(h("div", { class: "fine order-extra order-hash" }, h("span", {}, "Block "), h("code", { title: o.hash }, shortHash(o.hash)), copyKey(o.hash, "Copy the block hash", icon("copy", 14))));
+    return row;
+}
+/**
+ * The tab's content, made once: its filter, its search and its check keep their state when the summary is read again. `colourOf` gives a look's body colour;
+ * `onSummary` hears the summary that "Check payments now" answers with (the panel draws it everywhere).
+ */
+export function ordersView(api, colourOf, onSummary) {
+    let s = null;
+    let filter = "all";
+    let query = "";
+    let shown = ORDERS_PAGE;
+    const check = h("button", { class: "btn btn-primary", type: "button" }, icon("refresh", 18), "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("/check");
+            checkNote.textContent = !r.scan?.scanned ? "The check did not finish. Try again in a moment." : r.scan.settled.length ? `Checked: ${plural(r.scan.settled.length, "payment")} found.` : "Checked: no new payment.";
+            onSummary(r.summary);
+        }
+        catch (e) {
+            checkNote.textContent = e instanceof Error ? e.message : "The check failed.";
+        }
+        finally {
+            check.disabled = false;
+        }
+    });
+    const seg = h("div", { class: "seg tabs", role: "group", "aria-label": "Show orders" });
+    const search = h("input", { class: "input search-input", type: "search", placeholder: "Look, address or block", "aria-label": "Search the orders", autocomplete: "off", spellcheck: false });
+    search.addEventListener("input", () => {
+        query = search.value;
+        shown = ORDERS_PAGE;
+        drawList();
+    });
+    const count = h("p", { class: "fine list-count", role: "status", "aria-live": "polite" });
+    const list = h("div", { class: "orders" });
+    // The check key is there only when the game gave a check (the summary's canCheck).
+    const keys = h("div", { class: "card-keys" });
+    const head = h("div", { class: "card-head" }, h("div", { class: "card-title" }, h("h2", {}, "Orders"), h("p", { class: "fine card-sub" }, "Every order your game made, newest first.")), keys);
+    const el = h("section", { class: "admin-card orders-card" }, head, h("div", { class: "toolbar" }, seg, h("label", { class: "search" }, icon("search", 18), search)), count, h("div", { class: "order-table-head", "aria-hidden": "true" }, h("span", {}, "Look"), h("span", {}, "Status"), h("span", {}, "Amount"), h("span", {}, "Player"), h("span", {}, "When")), list);
+    function drawFilter() {
+        if (!s)
+            return;
+        const sum = s;
+        seg.replaceChildren(...FILTERS.map((key) => {
+            const n = key === "all" ? sum.orders.length : sum.counts[key];
+            return h("button", {
+                class: `seg-btn tab${filter === key ? " is-on tab-on" : ""}${key === "paid_late" && n > 0 ? " is-alert" : ""}`,
+                type: "button",
+                "aria-pressed": filter === key ? "true" : "false",
+                onclick: () => {
+                    filter = key;
+                    shown = ORDERS_PAGE;
+                    drawFilter();
+                    drawList();
+                },
+            }, `${key === "all" ? "All" : STATUS_WORDS[key]} (${n})`);
+        }));
+    }
+    function drawList() {
+        if (!s)
+            return;
+        const rows = s.orders.filter((o) => (filter === "all" || o.status === filter) && orderMatches(o, query));
+        const total = s.orders.filter((o) => filter === "all" || o.status === filter).length;
+        count.textContent = query.trim() ? `${plural(rows.length, "order")} of ${total} match “${query.trim()}”.` : "";
+        count.hidden = !query.trim();
+        list.replaceChildren(...rows.slice(0, shown).map((o) => orderRow(o, colourOf)));
+        if (!rows.length)
+            list.append(h("p", { class: "empty" }, query.trim() ? "No order matches your search." : "No orders here yet."));
+        if (rows.length > shown) {
+            const more = Math.min(ORDERS_PAGE, rows.length - shown);
+            list.append(h("button", { class: "btn more-key", type: "button", onclick: () => ((shown += ORDERS_PAGE), drawList()) }, `Show ${more} more`, rows.length - shown > more ? h("span", { class: "fine" }, `of ${rows.length - shown}`) : null));
+        }
+    }
+    return {
+        el,
+        update(next) {
+            s = next;
+            if (next.canCheck === false)
+                keys.replaceChildren();
+            else if (check.parentNode !== keys)
+                keys.replaceChildren(check, checkNote);
+            drawFilter();
+            drawList();
+        },
+        setFilter(f) {
+            filter = f;
+            shown = ORDERS_PAGE;
+            drawFilter();
+            drawList();
+        },
+    };
+}

package/dist/admin/panel/overview.d.ts

@@ -0,0 +1,22 @@
+import type { Look } from "../../looks/look.js";
+import type { AdminSummary } from "../store.js";
+import { type GameState } from "../switches.js";
+import { type OrderFilter } from "./orders.js";
+import type { TabId } from "./tabs.js";
+/** A best seller: a look id, its name, its paid orders and their cents, its owners. */
+export type BestSeller = {
+    id: string;
+    name: string;
+    paid: number;
+    cents: number;
+    owners: number;
+};
+/** The looks that sold, best first (by money, then by owners), at most `n`. A look that is no longer in looks.json keeps the name its orders give. Pure. */
+export declare function bestSellers(s: Pick<AdminSummary, "orders" | "players">, looks: readonly Look[], n?: number): BestSeller[];
+export type OverviewView = {
+    el: HTMLElement;
+    update(s: AdminSummary): void;
+    /** The two switches as they are now (null: they could not be read). */
+    setGame(state: GameState | null): void;
+};
+export declare function overviewView(looks: readonly Look[], colourOf: (lookId: string) => string | null, go: (tab: TabId, filter?: OrderFilter) => void): OverviewView;

package/dist/admin/panel/overview.js

@@ -0,0 +1,75 @@
+// The Overview tab of /admin: the game at a glance. The best-selling looks with their share of the money, the last five orders, the two game switches as On or
+// Off, and the shelf in numbers; each part has a key to its own tab. A game with no sale yet gets three first steps instead of empty lists.
+import { priceText } from "../../looks/ladder.js";
+import { SWITCHES, stateOf } from "../switches.js";
+import { dollars, h, plural } from "./dom.js";
+import { icon } from "./icons.js";
+import { orderRow } from "./orders.js";
+import { shelfStats } from "./shelfData.js";
+/** The looks that sold, best first (by money, then by owners), at most `n`. A look that is no longer in looks.json keeps the name its orders give. Pure. */
+export function bestSellers(s, looks, n = 5) {
+    const names = new Map();
+    for (const o of s.orders)
+        names.set(o.lookId, o.look);
+    for (const l of looks)
+        names.set(l.id, l.name);
+    return [...shelfStats(s.orders, s.players)]
+        .filter(([, st]) => st.paid > 0)
+        .map(([id, st]) => ({ id, name: names.get(id) ?? id, paid: st.paid, cents: st.paidCents, owners: st.owners }))
+        .sort((a, b) => b.cents - a.cents || b.owners - a.owners || a.name.localeCompare(b.name))
+        .slice(0, n);
+}
+export function overviewView(looks, colourOf, go) {
+    let game = null;
+    const sellers = h("section", { class: "admin-card best-card", "aria-labelledby": "n133-best-title" });
+    const recent = h("section", { class: "admin-card recent-card", "aria-labelledby": "n133-recent-title" });
+    const gameBox = h("section", { class: "admin-card glance-card", "aria-labelledby": "n133-glance-game" });
+    const shelfBox = h("section", { class: "admin-card glance-card", "aria-labelledby": "n133-glance-shelf" });
+    const start = h("section", { class: "admin-card start-card", "aria-labelledby": "n133-start-title" });
+    const main = h("div", { class: "overview-main" }, start, sellers, recent);
+    const side = h("div", { class: "overview-side" }, gameBox, shelfBox);
+    const el = h("div", { class: "overview" }, main, side);
+    const linkKey = (words, to) => h("button", { class: "btn btn-small btn-quiet link-key", type: "button", onclick: to }, words, h("span", { "aria-hidden": "true" }, "→"));
+    function drawGame() {
+        const rows = ["character", "signin"].map((id) => {
+            const on = game ? stateOf(id, game) : null;
+            return h("li", {}, h("span", {}, SWITCHES[id].title), on === null ? h("span", { class: "pill" }, "Unknown") : h("span", { class: `pill ${on ? "pill-on" : "pill-off"}` }, on ? "On" : "Off"));
+        });
+        gameBox.replaceChildren(h("div", { class: "card-head" }, h("h2", { id: "n133-glance-game" }, "Game switches"), linkKey("Change", () => go("settings"))), game ? h("ul", { class: "glance-list" }, ...rows) : h("p", { class: "fine" }, "The two switches could not be read. Reload the page to try again."));
+    }
+    function drawShelf() {
+        const sale = looks.filter((l) => l.priceUsd > 0);
+        const prices = sale.map((l) => l.priceUsd);
+        const range = prices.length ? (Math.min(...prices) === Math.max(...prices) ? priceText(prices[0]) : `${priceText(Math.min(...prices))} to ${priceText(Math.max(...prices))}`) : "none";
+        shelfBox.replaceChildren(h("div", { class: "card-head" }, h("h2", { id: "n133-glance-shelf" }, "Shelf"), linkKey("Open", () => go("cosmetics"))), h("ul", { class: "glance-list" }, h("li", {}, h("span", {}, "Looks"), h("strong", {}, String(looks.length))), h("li", {}, h("span", {}, "For sale"), h("strong", {}, String(sale.length))), h("li", {}, h("span", {}, "Prices"), h("strong", {}, range))));
+    }
+    drawGame();
+    drawShelf();
+    return {
+        el,
+        setGame(state) {
+            game = state;
+            drawGame();
+        },
+        update(s) {
+            const best = bestSellers(s, looks);
+            const total = best.length ? [...shelfStats(s.orders, s.players).values()].reduce((n, x) => n + x.paidCents, 0) : 0;
+            start.hidden = s.orders.length > 0;
+            start.replaceChildren(h("div", { class: "start-icon", "aria-hidden": "true" }, icon("sparkle", 28)), h("h2", { id: "n133-start-title" }, "No sales yet"), h("p", { class: "fine" }, "When a player buys a look, the money and the order show here. Three things to do first:"), h("ol", { class: "start-steps" }, h("li", {}, h("strong", {}, "Check your looks and prices."), " ", linkKey("Open the shelf", () => go("cosmetics"))), h("li", {}, h("strong", {}, "Choose the two game switches."), " ", linkKey("Open the settings", () => go("settings"))), h("li", {}, h("strong", {}, "Share your game's address"), " with your players.")));
+            sellers.hidden = !best.length;
+            sellers.replaceChildren(h("div", { class: "card-head" }, h("h2", { id: "n133-best-title" }, "Best sellers"), linkKey("All looks", () => go("cosmetics"))), h("ol", { class: "best-list" }, ...best.map((b, i) => {
+                const share = total ? Math.round((b.cents / total) * 100) : 0;
+                const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+                const c = colourOf(b.id);
+                if (c)
+                    dot.style.setProperty("--swatch", c);
+                const bar = h("div", { class: "share-bar" });
+                bar.style.setProperty("--share", `${share}%`);
+                return h("li", {}, h("span", { class: "best-rank" }, String(i + 1)), dot, h("div", { class: "best-main" }, h("div", { class: "best-top" }, h("strong", {}, b.name), h("span", { class: "best-money" }, dollars(b.cents))), h("div", { class: "share", title: `${share}% of the money from sales` }, bar, h("span", { class: "fine" }, `${plural(b.paid, "sale")} · ${share}%`))));
+            })));
+            const last = s.orders.slice(0, 5);
+            recent.hidden = !last.length;
+            recent.replaceChildren(h("div", { class: "card-head" }, h("h2", { id: "n133-recent-title" }, "Recent orders"), linkKey("See all orders", () => go("orders", "all"))), h("div", { class: "orders is-compact" }, ...last.map((o) => orderRow(o, colourOf, true))));
+        },
+    };
+}

package/dist/admin/panel/players.d.ts

@@ -0,0 +1,7 @@
+import type { AdminPlayer, AdminSummary } from "../store.js";
+/** Whether a player matches a search: their address or the name or id of a look they own. Pure. */
+export declare function playerMatches(p: AdminPlayer, query: string): boolean;
+export declare function playersView(colourOf: (lookId: string) => string | null): {
+    el: HTMLElement;
+    update(s: AdminSummary): void;
+};

package/dist/admin/panel/players.js

@@ -0,0 +1,61 @@
+// The Players tab of /admin: each player who owns a look that a paid order gave them, with the looks as chips, and a search (an address or a look). It shows
+// only what the summary gives: the player's address and their looks.
+import { copyKey, h, plural, shortAddress } from "./dom.js";
+import { icon } from "./icons.js";
+/** Whether a player matches a search: their address or the name or id of a look they own. Pure. */
+export function playerMatches(p, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return true;
+    return p.player.toLowerCase().includes(q) || p.looks.some((l) => l.name.toLowerCase().includes(q) || l.id.toLowerCase().includes(q));
+}
+/** A colour for a player's round mark, from their address: the same address always has the same colour. */
+function hueOf(address) {
+    let n = 0;
+    for (const ch of address.slice(5))
+        n = (n * 31 + ch.charCodeAt(0)) % 360;
+    return n;
+}
+export function playersView(colourOf) {
+    let s = null;
+    let query = "";
+    const search = h("input", { class: "input search-input", type: "search", placeholder: "Address or look", "aria-label": "Search the players", autocomplete: "off", spellcheck: false });
+    search.addEventListener("input", () => {
+        query = search.value;
+        draw();
+    });
+    const sub = h("p", { class: "fine card-sub" });
+    const list = h("div", { class: "players" });
+    const tools = h("div", { class: "toolbar" }, h("label", { class: "search" }, icon("search", 18), search));
+    const el = h("section", { class: "admin-card players-card" }, h("div", { class: "card-head" }, h("div", { class: "card-title" }, h("h2", {}, "Players who own a look"), sub)), tools, list);
+    function draw() {
+        if (!s)
+            return;
+        const owned = s.players.reduce((n, p) => n + p.looks.length, 0);
+        sub.textContent = s.players.length ? `${plural(s.players.length, "player")} own ${plural(owned, "look")} that a paid order gave them.` : "A player shows here when a paid order gives them a look.";
+        tools.hidden = s.players.length < 2;
+        const rows = s.players.filter((p) => playerMatches(p, query));
+        list.replaceChildren(...rows.map((p) => {
+            const mark = h("span", { class: "player-mark", "aria-hidden": "true" });
+            mark.style.setProperty("--hue", String(hueOf(p.player)));
+            return h("article", { class: "player" }, mark, h("div", { class: "player-main" }, h("div", { class: "player-id" }, h("code", { title: p.player }, shortAddress(p.player)), copyKey(p.player, "Copy the player's address", icon("copy", 14))), h("ul", { class: "look-chips", "aria-label": "Looks they own" }, ...p.looks.map((l) => {
+                const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+                const c = colourOf(l.id);
+                if (c)
+                    dot.style.setProperty("--swatch", c);
+                return h("li", { class: "look-chip" }, dot, l.name);
+            }))), h("span", { class: "player-count" }, plural(p.looks.length, "look")));
+        }));
+        if (!s.players.length)
+            list.append(h("p", { class: "empty" }, "Nobody owns a paid look yet."));
+        else if (!rows.length)
+            list.append(h("p", { class: "empty" }, "No player matches your search."));
+    }
+    return {
+        el,
+        update(next) {
+            s = next;
+            draw();
+        },
+    };
+}

package/dist/admin/panel/shelf.d.ts

@@ -1,11 +1,14 @@
 import { type Look } from "../../looks/look.js";
-import { type ShelfOrder, type ShelfPlayer } from "./shelfData.js";
+import { type LookStats, type ShelfOrder, type ShelfPlayer } from "./shelfData.js";
 export type ShelfData = {
     orders: ShelfOrder[];
     players: ShelfPlayer[];
     repo: string | null;
 };
-/** A small flat picture of a look: the body in its colour and the hat in its colour. (The game draws the real character; a game can give its own picture.) */
+/**
+ * A small flat picture of a look: an outfit's body in its colour and its hat in its colour; an item of another wear slot as a tag with the slot's name (the game
+ * knows what the item is). (The game draws the real thing; a game can give its own picture.)
+ */
 export declare function lookPicture(l: Look): Element;
 /**
  * A Shelf picture that shows the look on the real character. `load` gives the drawing function (a look to a PNG address, or null), and is
@@ -14,9 +17,18 @@ export declare function lookPicture(l: Look): Element;
  * `@nano133/nanoterra/character` has `createLookPreview` to make the drawing function.
  */
 export declare function previewPicture(load: () => Promise<(l: Look) => Promise<string | null>>, fallback?: (l: Look) => Element, size?: number): (l: Look) => Element;
+/** The colours the body colour offers in one press (any colour is good: the colour field is next to them). */
+export declare const BODY_COLOURS: readonly ["#4aa8ff", "#3ddc97", "#ffcf5a", "#ff7a3d", "#ff5c8a", "#9b6bff", "#2b2d42", "#f4f1ea"];
+export type ShelfFilter = "all" | "sale" | "free" | "unsold";
+export type ShelfSort = "best" | "price-desc" | "price-asc" | "name" | "file";
+/** Whether a look passes a filter. "Not sold yet": a look for sale that no paid order and no owner has. Pure, for the screen and its tests. */
+export declare function shelfFilter(l: Look, f: ShelfFilter, s: LookStats | undefined): boolean;
+/** The looks in a sort's order (a new list; equal looks keep the file's order). Pure, for the screen and its tests. */
+export declare function shelfSort(ls: readonly Look[], by: ShelfSort, stats: Map<string, LookStats>): Look[];
 /**
  * The screen. `looks` is the game's looks now (its looks.json): the draft starts from them. `update` hands the screen fresh numbers (after the page reloads
- * the summary) and keeps the draft. `picture` draws a look (default: the flat picture above). `repoHelp` is what to tell a game that has no repository set.
+ * the summary) and keeps the draft, the mode, the open card, the filter and the sort. `picture` draws a look (default: the flat picture above). `repoHelp` is
+ * what to tell a game that has no repository set.
  */
 export declare function shelfView(first: ShelfData, looks: readonly Look[], picture?: (l: Look) => Element, repoHelp?: string): {
     el: HTMLElement;