@nano133/nanoterra 0.3.2 → 0.5.0

package/dist/admin/panel/shelfData.js

@@ -57,7 +57,7 @@ export function aiPrompt(text, diff, owned, before) {
         diff.changed.length ? `Changed: ${names(diff.changed.map((c) => c.after))}.` : "",
         "",
         `Looks that players own and that must stay in the file with the same id: ${ownedOk.length ? quote(ownedOk) : "none yet"}${odd ? ` (and ${odd} more with an id that is not a valid look id: do not remove any look)` : ""}.`,
-        `Rules: keep one free look (priceUsd 0), prices in US dollars with at most 2 decimals, never change or remove the id of a look that someone owns, never change the slots of a look that someone owns (slots are words and #rrggbb colours that the game reads, at most 8 on a look), and a look never changes a score or a rule. (The file had ${before.length} looks before.)`,
+        `Rules: keep one free outfit (priceUsd 0, no "wear"), prices in US dollars with at most 2 decimals, never change or remove the id of a look that someone owns, never change the wear slot or the slots of a look that someone owns (a look with "wear" is an item of that slot, such as a shovel, and has no "change"; slots are words and #rrggbb colours that the game reads, at most 8 on a look), and a look never changes a score or a rule. (The file had ${before.length} looks before.)`,
         "",
         "looks.json:",
         "```json",

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

@@ -0,0 +1,23 @@
+import { type IconName } from "./icons.js";
+export type TabId = "overview" | "cosmetics" | "orders" | "players" | "settings";
+export declare const TABS: readonly {
+    id: TabId;
+    label: string;
+    icon: IconName;
+}[];
+export type TabBar = {
+    /** The bar (role tablist). */
+    bar: HTMLElement;
+    /** The panel of each tab (role tabpanel), empty: the caller fills it. */
+    panels: Record<TabId, HTMLElement>;
+    /**
+     * Shows a tab. `focus` moves the keyboard to it (an arrow key does; a link from another tab does not). When the page was scrolled into the panels, the top of
+     * the new panel comes up under the bar (a short tab after a long one must not open at its end).
+     */
+    select(id: TabId, focus?: boolean): void;
+    /** The tab that shows now. */
+    readonly current: TabId;
+    /** The small number on a tab ("Orders 25"); null takes it away. */
+    setCount(id: TabId, n: number | null): void;
+};
+export declare function tabBar(first?: TabId): TabBar;

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/looks/change.d.ts

@@ -3,16 +3,16 @@ import { type Look, type Problem, type Slots } from "./look.js";
 export declare function sameSlots(a: Slots | undefined, b: Slots | undefined): boolean;
 /**
  * The mistakes that a new list would make for the players: an id that someone owns (a paid order gave it to them) is gone from the new
- * list, or its slots changed (the game reads the slots of the id that a player owns, so a new slot changes what they own: add a new look instead).
- * `owned` is every look id that any player owns. The free look is not owned by an order: it is every player's, and its slots may change.
- * A change of a price, a name, a body colour or a hat on an owned look is allowed.
+ * list, its wear slot changed (a shovel that a player owns must stay a shovel), or its slots changed (the game reads the slots of the id that a player
+ * owns, so a new slot changes what they own: add a new look instead). `owned` is every look id that any player owns. The free look is not owned by an
+ * order: it is every player's, and its slots may change. A change of a price, a name, a body colour or a hat on an owned look is allowed.
  */
 export declare function removalProblems(before: readonly Look[], after: readonly Look[], owned: Iterable<string>): Problem[];
-export type LookField = "name" | "priceUsd" | "body" | "hat" | "hatColor" | "slots";
+export type LookField = "name" | "priceUsd" | "wear" | "body" | "hat" | "hatColor" | "slots";
 export type LooksDiff = {
     added: Look[];
     removed: Look[];
-    /** Looks with the same id and a different name, price, colour, hat or slots. */
+    /** Looks with the same id and a different name, price, wear slot, colour, hat or slots. */
     changed: {
         id: string;
         before: Look;

package/dist/looks/change.js

@@ -1,4 +1,4 @@
-import { COLOR_PATTERN, cleanSlots } from "./look.js";
+import { COLOR_PATTERN, cleanSlots, wearOf } from "./look.js";
 /** Whether two looks have the same slots: the same names with the same values, in any order. No slots and empty slots are the same; a colour is the same in upper and lower case. */
 export function sameSlots(a, b) {
     const x = cleanSlots(a) ?? {};
@@ -12,9 +12,9 @@ export function sameSlots(a, b) {
 // What a change of the list does, before it goes live. Owned looks are stored by id: a look that someone owns must stay in the file.
 /**
  * The mistakes that a new list would make for the players: an id that someone owns (a paid order gave it to them) is gone from the new
- * list, or its slots changed (the game reads the slots of the id that a player owns, so a new slot changes what they own: add a new look instead).
- * `owned` is every look id that any player owns. The free look is not owned by an order: it is every player's, and its slots may change.
- * A change of a price, a name, a body colour or a hat on an owned look is allowed.
+ * list, its wear slot changed (a shovel that a player owns must stay a shovel), or its slots changed (the game reads the slots of the id that a player
+ * owns, so a new slot changes what they own: add a new look instead). `owned` is every look id that any player owns. The free look is not owned by an
+ * order: it is every player's, and its slots may change. A change of a price, a name, a body colour or a hat on an owned look is allowed.
  */
 export function removalProblems(before, after, owned) {
     const now = new Set(after.map((l) => l.id));
@@ -28,6 +28,9 @@ export function removalProblems(before, after, owned) {
         if (!kept) {
             out.push({ look: null, field: "id", message: `The look "${l.id}" (${l.name}) is owned by a player and is not in the new list. Keep it in the file; change its price if you do not want to sell it.` });
         }
+        else if (wearOf(l) !== wearOf(kept.look)) {
+            out.push({ look: kept.place, field: "wear", message: `The look "${l.id}" (${l.name}) is worn in the "${wearOf(l)}" slot, and a player owns it. Keep it in that slot, or add a new look for the "${wearOf(kept.look)}" slot.` });
+        }
         else if (!sameSlots(l.slots, kept.look.slots)) {
             out.push({ look: kept.place, field: "slots", message: `The slots of the look "${l.id}" (${l.name}) changed, and a player owns it. Keep its slots as they were, or add a new look with the new slots.` });
         }
@@ -48,11 +51,13 @@ export function diffLooks(before, after) {
             fields.push("name");
         if (a.priceUsd !== b.priceUsd)
             fields.push("priceUsd");
-        if (a.change.body.toLowerCase() !== b.change.body.toLowerCase())
+        if (wearOf(a) !== wearOf(b))
+            fields.push("wear");
+        if ((a.change?.body ?? "").toLowerCase() !== (b.change?.body ?? "").toLowerCase())
             fields.push("body");
-        if (a.change.hat !== b.change.hat)
+        if (a.change?.hat !== b.change?.hat)
             fields.push("hat");
-        if ((a.change.hatColor ?? "").toLowerCase() !== (b.change.hatColor ?? "").toLowerCase())
+        if ((a.change?.hatColor ?? "").toLowerCase() !== (b.change?.hatColor ?? "").toLowerCase())
             fields.push("hatColor");
         if (!sameSlots(a.slots, b.slots))
             fields.push("slots");

package/dist/looks/index.d.ts

@@ -1,5 +1,5 @@
-export { HATS, ID_PATTERN, COLOR_PATTERN, NAME_MAX, PRICE_MAX_USD, SLOTS_MAX, SLOT_NAME_PATTERN, SLOT_WORD_PATTERN, RESERVED_SLOT_NAMES, wholeCents, lookProblems, checkLooks, cleanSlots, slotValueOk, usdText } from "./look.js";
-export type { Hat, Look, Problem, Slots } from "./look.js";
+export { HATS, ID_PATTERN, COLOR_PATTERN, NAME_MAX, OUTFIT, PRICE_MAX_USD, SLOTS_MAX, SLOT_NAME_PATTERN, SLOT_WORD_PATTERN, RESERVED_SLOT_NAMES, wholeCents, lookProblems, checkLooks, cleanSlots, slotValueOk, usdText, wearOf, isOutfit } from "./look.js";
+export type { Change, Hat, Look, Problem, Slots } from "./look.js";
 export { PRICE_LADDER, rungUsd, rungOf, priceText } from "./ladder.js";
 export type { Rung } from "./ladder.js";
 export { removalProblems, diffLooks, sameSlots } from "./change.js";

package/dist/looks/index.js

@@ -1,4 +1,4 @@
-export { HATS, ID_PATTERN, COLOR_PATTERN, NAME_MAX, PRICE_MAX_USD, SLOTS_MAX, SLOT_NAME_PATTERN, SLOT_WORD_PATTERN, RESERVED_SLOT_NAMES, wholeCents, lookProblems, checkLooks, cleanSlots, slotValueOk, usdText } from "./look.js";
+export { HATS, ID_PATTERN, COLOR_PATTERN, NAME_MAX, OUTFIT, PRICE_MAX_USD, SLOTS_MAX, SLOT_NAME_PATTERN, SLOT_WORD_PATTERN, RESERVED_SLOT_NAMES, wholeCents, lookProblems, checkLooks, cleanSlots, slotValueOk, usdText, wearOf, isOutfit } from "./look.js";
 export { PRICE_LADDER, rungUsd, rungOf, priceText } from "./ladder.js";
 export { removalProblems, diffLooks, sameSlots } from "./change.js";
 export { looksJson, slugId } from "./json.js";

package/dist/looks/json.d.ts

@@ -1,7 +1,8 @@
 import { type Look } from "./look.js";
 /**
- * The text of looks.json for a list of looks: one look on each line, in the order id, name, priceUsd, change (and slots, when the look has any), as the game
- * starter's file is written, so a change of one look is a change of one line in a diff. A look with no slots is written exactly as before. It ends with a new line.
+ * The text of looks.json for a list of looks: one look on each line, in the order id, name, priceUsd, wear (an item of a wear slot other than the outfit's),
+ * change (an outfit) and slots (when the look has any), as the game starter's file is written, so a change of one look is a change of one line in a diff. An
+ * outfit with no slots is written exactly as before. It ends with a new line.
  */
 export declare function looksJson(looks: readonly Look[]): string;
 /** An id for a name: lowercase letters, digits and dashes, at most 40, and not one of `taken` ("mint-cap", then "mint-cap-2"). */

package/dist/looks/json.js

@@ -1,18 +1,25 @@
-import { cleanSlots, ID_PATTERN } from "./look.js";
+import { cleanSlots, ID_PATTERN, isOutfit, OUTFIT, wearOf } from "./look.js";
 /**
- * The text of looks.json for a list of looks: one look on each line, in the order id, name, priceUsd, change (and slots, when the look has any), as the game
- * starter's file is written, so a change of one look is a change of one line in a diff. A look with no slots is written exactly as before. It ends with a new line.
+ * The text of looks.json for a list of looks: one look on each line, in the order id, name, priceUsd, wear (an item of a wear slot other than the outfit's),
+ * change (an outfit) and slots (when the look has any), as the game starter's file is written, so a change of one look is a change of one line in a diff. An
+ * outfit with no slots is written exactly as before. It ends with a new line.
  */
 export function looksJson(looks) {
     const row = (l) => {
-        const change = [`"body": ${JSON.stringify(l.change.body)}`];
-        if (l.change.hat !== undefined)
-            change.push(`"hat": ${JSON.stringify(l.change.hat)}`);
-        if (l.change.hatColor !== undefined)
-            change.push(`"hatColor": ${JSON.stringify(l.change.hatColor)}`);
+        let middle;
+        if (isOutfit(l)) {
+            const change = [`"body": ${JSON.stringify(l.change.body)}`];
+            if (l.change.hat !== undefined)
+                change.push(`"hat": ${JSON.stringify(l.change.hat)}`);
+            if (l.change.hatColor !== undefined)
+                change.push(`"hatColor": ${JSON.stringify(l.change.hatColor)}`);
+            middle = `, "change": { ${change.join(", ")} }`;
+        }
+        else
+            middle = wearOf(l) === OUTFIT ? "" : `, "wear": ${JSON.stringify(wearOf(l))}`;
         const slots = cleanSlots(l.slots);
         const tail = slots ? `, "slots": { ${Object.keys(slots).map((k) => `${JSON.stringify(k)}: ${JSON.stringify(slots[k])}`).join(", ")} }` : "";
-        return `  { "id": ${JSON.stringify(l.id)}, "name": ${JSON.stringify(l.name)}, "priceUsd": ${l.priceUsd}, "change": { ${change.join(", ")} }${tail} }`;
+        return `  { "id": ${JSON.stringify(l.id)}, "name": ${JSON.stringify(l.name)}, "priceUsd": ${l.priceUsd}${middle}${tail} }`;
     };
     return `[\n${looks.map(row).join(",\n")}\n]\n`;
 }

package/dist/looks/look.d.ts

@@ -1,6 +1,12 @@
 /** The hats that the starter's character can wear. */
 export declare const HATS: readonly ["cap", "beanie", "crown", "tophat"];
 export type Hat = (typeof HATS)[number];
+/** What an outfit changes: the body's colour, and a hat in its colour. */
+export type Change = {
+    body: string;
+    hat?: Hat;
+    hatColor?: string;
+};
 export type Look = {
     /** 1 to 40 lowercase letters, digits or dashes: "mint-cap". Never change the id of a look that someone owns. */
     id: string;
@@ -8,11 +14,14 @@ export type Look = {
     name: string;
     /** The price in US dollars with at most 2 decimals, for example 0.25. 0 means free for everyone. */
     priceUsd: number;
-    change: {
-        body: string;
-        hat?: Hat;
-        hatColor?: string;
-    };
+    /**
+     * The wear slot that the look fills: none (or "outfit") for an outfit, or a slot of the game's own ("shovel", "charm"): 1 to 24 lowercase letters, digits
+     * or dashes, starting with a letter. A player wears one look in each slot. Never change the slot of a look that someone owns. `checkLooks` leaves it out
+     * for an outfit.
+     */
+    wear?: string;
+    /** What an outfit changes (an outfit must have it; an item of another slot must not: `isOutfit`). */
+    change?: Change;
     /**
      * What a game defines for itself: up to 8 slots, each a name and a value, that the game's own code reads ("wings": "ember", "trail": "#ffcf5a"). A name is 1 to 24
      * lowercase letters, digits or dashes, starting with a letter; a value is a word (1 to 40 lowercase letters, digits or dashes) or a colour ("#rrggbb"). Optional: a look
@@ -23,6 +32,8 @@ export type Look = {
 /** The slots of a look: names and values, words or colours. */
 export type Slots = Record<string, string>;
 export declare const ID_PATTERN: RegExp;
+/** The wear slot of an outfit (the character's own look). A look with no `wear` is an outfit too. */
+export declare const OUTFIT = "outfit";
 export declare const COLOR_PATTERN: RegExp;
 /** At most this many slots on a look. */
 export declare const SLOTS_MAX = 8;
@@ -38,7 +49,10 @@ export declare const PRICE_MAX_USD = 1000;
 export type Problem = {
     /** The place of the look in the list, from 1, or null for a mistake of the whole list. */
     look: number | null;
-    /** The field: "list", "id", "name", "priceUsd", "change.body", "change.hat", "change.hatColor", "slots", "slots.<name>" or "free". (The change rules also use "slots" for a slot that changed on a look that players own.) */
+    /**
+     * The field: "list", "id", "name", "priceUsd", "wear", "change", "change.body", "change.hat", "change.hatColor", "slots", "slots.<name>" or "free". (The change
+     * rules also use "slots" and "wear" for a slot or a wear slot that changed on a look that players own.)
+     */
     field: string;
     message: string;
 };
@@ -60,3 +74,9 @@ export declare function cleanSlots(slots: Slots | undefined): Slots | undefined;
 export declare function checkLooks(rawInput: unknown): Look[];
 /** "$0.25" */
 export declare const usdText: (usd: number) => string;
+/** The wear slot that a look fills: OUTFIT for an outfit (no `wear`), or the game's own slot. */
+export declare const wearOf: (l: Pick<Look, "wear">) => string;
+/** Whether a look is an outfit (the character's own look, with its `change`), not an item of another wear slot. */
+export declare const isOutfit: (l: Look) => l is Look & {
+    change: Change;
+};

package/dist/looks/look.js

@@ -1,8 +1,14 @@
 // The look: one thing a player can buy to change how their character looks. The rules are the game starter's (looks.json): a look only
 // changes how the character looks, it is never random and it never changes a score, a speed or a rule.
+//
+// A look fills one WEAR SLOT. An outfit (no `wear`, or "outfit") is the character's own look: its body colour and its hat (`change`); a player wears one
+// outfit. Every other wear slot is the game's own (a tool's skin, a charm, a trail: "shovel", "charm"): an item there has no `change` (the game reads what
+// it is from its id or its `slots`), and a player wears one item in each slot, beside the outfit.
 /** The hats that the starter's character can wear. */
 export const HATS = ["cap", "beanie", "crown", "tophat"];
 export const ID_PATTERN = /^[a-z0-9-]{1,40}$/;
+/** The wear slot of an outfit (the character's own look). A look with no `wear` is an outfit too. */
+export const OUTFIT = "outfit";
 export const COLOR_PATTERN = /^#[0-9a-f]{6}$/i;
 /** At most this many slots on a look. */
 export const SLOTS_MAX = 8;
@@ -27,7 +33,7 @@ export function lookProblems(raw) {
     if (!Array.isArray(raw) || raw.length === 0)
         return [{ look: null, field: "list", message: "looks.json must be a list with at least one look" }];
     const seen = new Set();
-    let free = false;
+    let freeOutfit = false;
     raw.forEach((l, i) => {
         const where = `looks.json, look ${i + 1}`;
         const v = (l ?? {});
@@ -44,19 +50,32 @@ export function lookProblems(raw) {
             add("priceUsd", '"priceUsd" must be a number from 0 to 1000');
         else if (!wholeCents(v.priceUsd))
             add("priceUsd", '"priceUsd" can have at most 2 decimals (cents)');
-        else if (v.priceUsd === 0)
-            free = true;
-        if (typeof v.change?.body !== "string" || !COLOR_PATTERN.test(v.change.body))
-            add("change.body", '"change.body" must be a colour like "#4aa8ff"');
-        if (v.change?.hat !== undefined && !HATS.includes(v.change.hat))
-            add("change.hat", `"change.hat" must be one of ${HATS.join(", ")}`);
-        if (v.change?.hatColor !== undefined && (typeof v.change.hatColor !== "string" || !COLOR_PATTERN.test(v.change.hatColor)))
-            add("change.hatColor", '"change.hatColor" must be a colour like "#1c6e4f"');
+        const wearOk = v.wear === undefined || (typeof v.wear === "string" && SLOT_NAME_PATTERN.test(v.wear) && !RESERVED_SLOT_NAMES.includes(v.wear));
+        if (!wearOk)
+            add("wear", `"wear" must be "${OUTFIT}" or the name of a wear slot: 1 to 24 lowercase letters, digits or dashes, starting with a letter ("shovel")`);
+        const outfit = v.wear === undefined || v.wear === OUTFIT;
+        if (outfit) {
+            if (typeof v.change?.body !== "string" || !COLOR_PATTERN.test(v.change.body))
+                add("change.body", '"change.body" must be a colour like "#4aa8ff"');
+            if (v.change?.hat !== undefined && !HATS.includes(v.change.hat))
+                add("change.hat", `"change.hat" must be one of ${HATS.join(", ")}`);
+            if (v.change?.hatColor !== undefined && (typeof v.change.hatColor !== "string" || !COLOR_PATTERN.test(v.change.hatColor)))
+                add("change.hatColor", '"change.hatColor" must be a colour like "#1c6e4f"');
+            if (v.priceUsd === 0)
+                freeOutfit = true;
+        }
+        else if (wearOk && v.change !== undefined)
+            add("change", `"change" is only for an outfit: a look worn in the "${v.wear}" slot does not change the body (remove "change")`);
         if (v.slots !== undefined)
             slotProblems(v.slots).forEach((s) => add(s.field, s.message));
     });
-    if (!out.length && !free)
-        out.push({ look: null, field: "free", message: "looks.json needs at least one free look (priceUsd 0): every player starts with it" });
+    // the starter's words for a list of outfits only; a list with items says that an item does not count
+    const items = raw.some((l) => {
+        const w = l?.wear;
+        return w !== undefined && w !== OUTFIT;
+    });
+    if (!out.length && !freeOutfit)
+        out.push({ look: null, field: "free", message: items ? 'looks.json needs at least one free outfit (priceUsd 0, and no "wear"): every player starts with it' : "looks.json needs at least one free look (priceUsd 0): every player starts with it" });
     return out;
 }
 /** Whether `v` is a plain object (not null, not a list, not a class instance). */
@@ -106,8 +125,14 @@ export function checkLooks(rawInput) {
         throw new Error(first.message);
     return raw.map((l) => {
         const slots = cleanSlots(l.slots);
-        return { id: l.id, name: l.name, priceUsd: l.priceUsd, change: { body: l.change.body, hat: l.change.hat, hatColor: l.change.hatColor }, ...(slots ? { slots } : {}) };
+        const wear = wearOf(l);
+        const change = isOutfit(l) ? { change: { body: l.change.body, hat: l.change.hat, hatColor: l.change.hatColor } } : {};
+        return { id: l.id, name: l.name, priceUsd: l.priceUsd, ...(wear === OUTFIT ? {} : { wear }), ...change, ...(slots ? { slots } : {}) };
     });
 }
 /** "$0.25" */
 export const usdText = (usd) => `$${usd.toFixed(2)}`;
+/** The wear slot that a look fills: OUTFIT for an outfit (no `wear`), or the game's own slot. */
+export const wearOf = (l) => l.wear ?? OUTFIT;
+/** Whether a look is an outfit (the character's own look, with its `change`), not an item of another wear slot. */
+export const isOutfit = (l) => wearOf(l) === OUTFIT && l.change !== undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.3.2",
+  "version": "0.5.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

@@ -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";