@nano133/nanoterra 0.4.0 → 0.6.0

package/dist/admin/panel/gameCard.js

@@ -1,12 +1,13 @@
-// 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.
-import { CHARACTER_NEEDS_SIGNIN, CHARACTER_SIGNIN_OFF, REVIEW_LINK, REVIEW_NOTE, SWITCHES, pressOf, signinOn, stateOf } from "../switches.js";
+// The "Game" card of /admin: two switches, "Players can play as their Nanoterra character" and "Players can sign in with Nanoterra", and one three-way
+// choice, "Friends list: Nanoterra / The game's own / Off". 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 three
+// settings: never a look, a price or an order.
+import { CHARACTER_NEEDS_SIGNIN, CHARACTER_SIGNIN_OFF, FRIENDS_CHOICES, FRIENDS_TITLE, REVIEW_LINK, REVIEW_NOTE, SWITCHES, pressOf, signinOn, stateOf } from "../switches.js";
 import { ApiError } 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"). `onChange` hears each saved state (the panel's Overview shows the two switches too).
+ * written ("game.config.json"). `onChange` hears each saved state (the panel's Overview shows the switches too).
  */
 export function gameCard(api, initial, defaultsFile = "the game's own settings", onChange) {
     let state = initial;
@@ -14,7 +15,11 @@ export function gameCard(api, initial, defaultsFile = "the game's own settings",
     /** 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("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.`));
+    card.append(h("p", { class: "fine card-intro" }, `Three choices about your game. A press saves at once: you push nothing and deploy nothing. They start from ${defaultsFile}, and a press here wins.`));
+    /** The friends choice: a radio group of three keys (arrow keys move between them, as a radio group does). */
+    const friendsKeys = new Map();
+    const friendsNote = h("p", { class: "switch-note", id: "switch-friends-note" });
+    const friendsStatus = h("span", { class: "fine", role: "status", "aria-live": "polite" });
     const draw = () => {
         for (const [id, row] of rows) {
             const on = stateOf(id, state);
@@ -25,6 +30,33 @@ export function gameCard(api, initial, defaultsFile = "the game's own settings",
         }
         needs.hidden = !stateOf("character", state);
         needs.textContent = signinOn(state.signin) ? CHARACTER_NEEDS_SIGNIN : CHARACTER_SIGNIN_OFF;
+        for (const [id, key] of friendsKeys) {
+            const on = state.friends === id;
+            key.setAttribute("aria-checked", on ? "true" : "false");
+            key.tabIndex = on ? 0 : -1;
+            key.classList.toggle("is-on", on);
+        }
+        friendsNote.textContent = FRIENDS_CHOICES[state.friends]?.note ?? "";
+    };
+    const choose = async (id) => {
+        if (state.friends === id)
+            return;
+        for (const key of friendsKeys.values())
+            key.disabled = true;
+        friendsStatus.textContent = "Saving…";
+        try {
+            state = await api.post("/game", { friends: id });
+            friendsStatus.textContent = "Saved.";
+            draw();
+            onChange?.(state);
+        }
+        catch (e) {
+            friendsStatus.textContent = e instanceof ApiError ? e.message : "The game's server did not answer. Nothing was changed.";
+        }
+        finally {
+            for (const key of friendsKeys.values())
+                key.disabled = false;
+        }
     };
     const press = async (id) => {
         const row = rows.get(id);
@@ -55,6 +87,24 @@ export function gameCard(api, initial, defaultsFile = "the game's own settings",
         if (id === "signin")
             card.append(h("p", { class: "fine switch-review" }, REVIEW_NOTE, " ", h("a", { href: REVIEW_LINK, target: "_blank", rel: "noopener noreferrer" }, "Open the launch page")));
     }
+    const order = Object.keys(FRIENDS_CHOICES);
+    const group = h("div", { class: "seg friends-choice", role: "radiogroup", "aria-labelledby": "switch-friends-label", "aria-describedby": "switch-friends-note" });
+    for (const id of order) {
+        const key = h("button", { class: "seg-btn", type: "button", role: "radio", "aria-checked": "false", "data-friends": id }, FRIENDS_CHOICES[id].name);
+        key.addEventListener("click", () => void choose(id));
+        key.addEventListener("keydown", (e) => {
+            const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+            if (!step)
+                return;
+            e.preventDefault();
+            const next = order[(order.indexOf(id) + step + order.length) % order.length];
+            friendsKeys.get(next).focus();
+            void choose(next);
+        });
+        friendsKeys.set(id, key);
+        group.append(key);
+    }
+    card.append(h("div", { class: "switch-row friends-row" }, h("div", { class: "switch-head" }, h("span", { class: "switch-title", id: "switch-friends-label" }, FRIENDS_TITLE), group), friendsNote, friendsStatus));
     draw();
     return card;
 }

package/dist/admin/panel/mount.js

@@ -28,7 +28,7 @@ export function mountAdmin(root, options) {
     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. */
+    /** The card, made once. A fault in reading the game switches must not hide the orders: the card is left out and the rest still shows. */
     async function gameSection() {
         if (game)
             return game;
@@ -110,8 +110,8 @@ export function mountAdmin(root, options) {
             shelf = shelfView(d, options.looks, options.lookPicture, options.repoHelp);
         return shelf.el;
     }
-    /** A look's body colour, while the game still has the look (for the dots in the lists). */
-    const colourOf = (id) => options.looks.find((l) => l.id === id)?.change.body ?? null;
+    /** 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) => {

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

@@ -16,7 +16,7 @@ export declare function bestSellers(s: Pick<AdminSummary, "orders" | "players">,
 export type OverviewView = {
     el: HTMLElement;
     update(s: AdminSummary): void;
-    /** The two switches as they are now (null: they could not be read). */
+    /** The game 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

@@ -1,7 +1,7 @@
 // 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 { FRIENDS_CHOICES, FRIENDS_TITLE, SWITCHES, stateOf } from "../switches.js";
 import { dollars, h, plural } from "./dom.js";
 import { icon } from "./icons.js";
 import { orderRow } from "./orders.js";
@@ -35,7 +35,9 @@ export function overviewView(looks, colourOf, go) {
             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."));
+        if (game)
+            rows.push(h("li", {}, h("span", {}, FRIENDS_TITLE), h("span", { class: `pill ${game.friends === "off" ? "pill-off" : "pill-on"}` }, FRIENDS_CHOICES[game.friends]?.name ?? "Unknown")));
+        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 game switches could not be read. Reload the page to try again."));
     }
     function drawShelf() {
         const sale = looks.filter((l) => l.priceUsd > 0);

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

@@ -5,7 +5,10 @@ export type ShelfData = {
     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

package/dist/admin/panel/shelf.js

@@ -9,7 +9,7 @@ import { diffLooks, removalProblems } from "../../looks/change.js";
 import { SLOTS_MAX } from "../../looks/look.js";
 import { looksJson, slugId } from "../../looks/json.js";
 import { PRICE_LADDER, priceText, rungOf, rungUsd } from "../../looks/ladder.js";
-import { COLOR_PATTERN, HATS, lookProblems, usdText } from "../../looks/look.js";
+import { COLOR_PATTERN, HATS, isOutfit, lookProblems, OUTFIT, SLOT_NAME_PATTERN, usdText, wearOf } from "../../looks/look.js";
 import { copy, dollars, h, plural } from "./dom.js";
 import { icon } from "./icons.js";
 import { aiPrompt, changeText, ownedIds, shelfStats, soldText } from "./shelfData.js";
@@ -33,8 +33,17 @@ function hatShapes(hat, fill) {
     };
     return hats[hat]();
 }
-/** 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 function lookPicture(l) {
+    if (!isOutfit(l)) {
+        const wear = wearOf(l);
+        const label = svg("text", { x: 33, y: 40, "font-size": 9, "font-family": "system-ui, sans-serif", "text-anchor": "middle", fill: INK });
+        label.textContent = wear.slice(0, 8);
+        return svg("svg", { viewBox: "0 0 64 72", width: 56, height: 63, role: "img", "aria-label": `${l.name}: worn in the ${wear} slot` }, shape("path", { d: "M14 20 L36 20 L52 36 L36 52 L14 52 Z", fill: "#f6e7c1" }), shape("circle", { cx: 22, cy: 36, r: 3.5, fill: "#ffffff" }), label);
+    }
     const hat = l.change.hat;
     return svg("svg", { viewBox: "0 0 64 72", width: 56, height: 63, role: "img", "aria-label": `${l.name}: ${l.change.hat ?? "no hat"}` }, shape("rect", { x: 23, y: 61, width: 7, height: 9, rx: 2, fill: "#3a3f5c" }), shape("rect", { x: 34, y: 61, width: 7, height: 9, rx: 2, fill: "#3a3f5c" }), shape("rect", { x: 16, y: 37, width: 32, height: 28, rx: 12, fill: l.change.body }), shape("circle", { cx: 32, cy: 26, r: 13, fill: "#f2c9a0" }), svg("circle", { cx: 27, cy: 27, r: 1.7, fill: INK }), svg("circle", { cx: 37, cy: 27, r: 1.7, fill: INK }), ...(hat ? hatShapes(hat, l.change.hatColor ?? "#444444") : []));
 }
@@ -55,7 +64,7 @@ export function previewPicture(load, fallback = lookPicture, size = 64) {
     return (l) => {
         const box = h("span", { class: "shelf-preview" }, fallback(l));
         ready ??= load().catch(() => null);
-        const look = { ...l, change: { ...l.change }, ...(l.slots ? { slots: { ...l.slots } } : {}) };
+        const look = copyLook(l);
         void ready
             .then((render) => (render ? render(look) : null))
             .then((src) => {
@@ -68,7 +77,9 @@ export function previewPicture(load, fallback = lookPicture, size = 64) {
         return box;
     };
 }
-const clone = (ls) => ls.map((l) => ({ id: l.id, name: l.name, priceUsd: l.priceUsd, change: { ...l.change }, ...(l.slots ? { slots: { ...l.slots } } : {}) }));
+/** A copy of a look that shares nothing with it: its wear slot, an outfit's change, its slots. */
+const copyLook = (l) => ({ id: l.id, name: l.name, priceUsd: l.priceUsd, ...(l.wear !== undefined ? { wear: l.wear } : {}), ...(l.change ? { change: { ...l.change } } : {}), ...(l.slots ? { slots: { ...l.slots } } : {}) });
+const clone = (ls) => ls.map(copyLook);
 /** The names of the slots that differ between two looks (added, removed or another value). */
 function slotNamesChanged(before, after) {
     const names = new Set([...Object.keys(before.slots ?? {}), ...Object.keys(after.slots ?? {})]);
@@ -83,7 +94,9 @@ function fieldWords(d) {
         if (f === "body")
             return "body colour";
         if (f === "hat")
-            return `hat ${d.before.change.hat ?? "none"} to ${d.after.change.hat ?? "none"}`;
+            return `hat ${d.before.change?.hat ?? "none"} to ${d.after.change?.hat ?? "none"}`;
+        if (f === "wear")
+            return `wear slot ${wearOf(d.before)} to ${wearOf(d.after)}`;
         if (f === "slots")
             return `slots changed (${slotNamesChanged(d.before, d.after)})`;
         return "hat colour";
@@ -166,7 +179,12 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
     const stats = () => shelfStats(data.orders, data.players);
     const owned = () => ownedIds(data.players);
     const isOriginal = (id) => LOOKS.some((l) => l.id === id);
-    const freeCount = () => draft.filter((l) => l.priceUsd === 0).length;
+    /** Free outfits in the draft: one must stay (every player starts with it). */
+    const freeCount = () => draft.filter((l) => l.priceUsd === 0 && wearOf(l) === OUTFIT).length;
+    /** The wear slots that the draft uses besides the outfit, for the wear slot field's suggestions. */
+    const wearSlots = () => [...new Set(draft.map(wearOf).filter((w) => w !== OUTFIT))].sort();
+    /** What a card says under the price: who has it (a free outfit), what it sold, or that it is new. */
+    const fineWords = (l, s) => (l.priceUsd === 0 && wearOf(l) === OUTFIT ? "Every player starts with it" : soldText(s));
     /** Whether the draft differs from the game's looks.json in any way, the order of the looks too (the file's own text is compared). */
     const changedFromGame = () => looksJson(draft) !== looksJson(LOOKS);
     /**
@@ -176,7 +194,7 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
     const pictures = new Map();
     let used = new Set();
     function pictureOf(l) {
-        const key = JSON.stringify([l.id, l.name, l.priceUsd, l.change, l.slots ?? null]);
+        const key = JSON.stringify([l.id, l.name, l.priceUsd, l.wear ?? null, l.change ?? null, l.slots ?? null]);
         const kept = pictures.get(key);
         if (kept && !used.has(key)) {
             used.add(key);
@@ -270,10 +288,15 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
     }
     function stage(l, ...extra) {
         const box = h("div", { class: "shelf-stage" }, h("div", { class: "shelf-pic" }, pictureOf(l)), ...extra);
-        if (COLOR_PATTERN.test(l.change.body))
-            box.style.setProperty("--tint", l.change.body);
+        const body = l.change?.body;
+        if (body && COLOR_PATTERN.test(body))
+            box.style.setProperty("--tint", body);
         return box;
     }
+    /** An item's wear slot, under its name ("Worn in the shovel slot"); nothing for an outfit. */
+    function wearLine(l) {
+        return wearOf(l) === OUTFIT ? null : h("span", { class: "fine shelf-wear" }, `Worn in the ${wearOf(l)} slot`);
+    }
     function slotList(l) {
         const entries = Object.entries(l.slots ?? {});
         if (!entries.length)
@@ -284,7 +307,7 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
         const share = s && total > 0 && s.paidCents > 0 ? Math.round((s.paidCents / total) * 100) : 0;
         const bar = h("div", { class: "share-bar" });
         bar.style.setProperty("--share", `${share}%`);
-        return h("article", { class: `shelf-card${l.priceUsd === 0 ? " is-free" : ""}` }, stage(l, h("span", { class: `price-pill${l.priceUsd === 0 ? " is-free" : ""}` }, priceWords(l.priceUsd))), h("div", { class: "shelf-body" }, h("strong", { class: "shelf-name" }, l.name || "(no name)"), h("span", { class: "fine" }, l.priceUsd === 0 ? "Every player starts with it" : soldText(s)), share ? h("div", { class: "share", title: `${share}% of the money from sales` }, bar, h("span", { class: "fine" }, `${share}% of sales`)) : null, slotList(l)));
+        return h("article", { class: `shelf-card${l.priceUsd === 0 ? " is-free" : ""}` }, stage(l, h("span", { class: `price-pill${l.priceUsd === 0 ? " is-free" : ""}` }, priceWords(l.priceUsd))), h("div", { class: "shelf-body" }, h("strong", { class: "shelf-name" }, l.name || "(no name)"), wearLine(l), h("span", { class: "fine" }, fineWords(l, s)), share ? h("div", { class: "share", title: `${share}% of the money from sales` }, bar, h("span", { class: "fine" }, `${share}% of sales`)) : null, slotList(l)));
     }
     // ---- To edit ----
     function editGrid(st, own) {
@@ -314,7 +337,7 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
         ];
     }
     function compactCard(l, st, own, mine, mark) {
-        return h("article", { class: `shelf-card is-compact${mark ? ` is-${mark}` : ""}${mine.length ? " has-problem" : ""}` }, stage(l), h("div", { class: "shelf-body" }, h("strong", { class: "shelf-name" }, l.name || "(no name)"), h("span", { class: "shelf-price" }, priceWords(l.priceUsd)), h("span", { class: "fine" }, isOriginal(l.id) ? (l.priceUsd === 0 ? "Every player starts with it" : soldText(st.get(l.id))) : "New: not in your game yet"), marks(l, own, mine, mark)), h("button", { class: "btn btn-small card-open", type: "button", "aria-expanded": "false", "aria-label": `Edit ${l.name || "this look"}`, onclick: () => openCard(l) }, icon("pencil", 16), "Edit"));
+        return h("article", { class: `shelf-card is-compact${mark ? ` is-${mark}` : ""}${mine.length ? " has-problem" : ""}` }, stage(l), h("div", { class: "shelf-body" }, h("strong", { class: "shelf-name" }, l.name || "(no name)"), h("span", { class: "shelf-price" }, priceWords(l.priceUsd)), wearLine(l), h("span", { class: "fine" }, isOriginal(l.id) ? fineWords(l, st.get(l.id)) : "New: not in your game yet"), marks(l, own, mine, mark)), h("button", { class: "btn btn-small card-open", type: "button", "aria-expanded": "false", "aria-label": `Edit ${l.name || "this look"}`, onclick: () => openCard(l) }, icon("pencil", 16), "Edit"));
     }
     function ghostCard(l) {
         return h("article", { class: "shelf-ghost" }, h("div", { class: "shelf-body" }, h("strong", { class: "shelf-name" }, l.name), h("span", { class: "fine" }, "Removed from the draft")), h("button", {
@@ -341,7 +364,7 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
         const stageBox = h("div", { class: "shelf-stage is-big" }, pic);
         const nameLine = h("strong", { class: "shelf-name" }, l.name || "(no name)");
         const priceLine = h("span", { class: "shelf-price" }, priceWords(l.priceUsd));
-        const tint = () => (COLOR_PATTERN.test(l.change.body) ? stageBox.style.setProperty("--tint", l.change.body) : stageBox.style.removeProperty("--tint"));
+        const tint = () => (l.change && COLOR_PATTERN.test(l.change.body) ? stageBox.style.setProperty("--tint", l.change.body) : stageBox.style.removeProperty("--tint"));
         tint();
         // The real picture is drawn a moment after the last change: a colour dragged across the picker draws once, not at every step.
         let later = null;
@@ -353,8 +376,10 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
                 clearTimeout(later);
             later = setTimeout(() => pic.replaceChildren(pictureOf(l)), 150);
             ladder.querySelectorAll("button").forEach((c) => c.setAttribute("aria-pressed", Number(c.dataset.usd) === l.priceUsd ? "true" : "false"));
-            swatches.querySelectorAll("button").forEach((c) => c.setAttribute("aria-pressed", c.dataset.colour === l.change.body.toLowerCase() ? "true" : "false"));
-            hatChoices.style.setProperty("color", l.change.hatColor ?? "#9aa4b2");
+            if (outfit) {
+                lookParts?.swatches.querySelectorAll("button").forEach((c) => c.setAttribute("aria-pressed", c.dataset.colour === outfit.change.body.toLowerCase() ? "true" : "false"));
+                lookParts?.hatChoices.style.setProperty("color", outfit.change.hatColor ?? "#9aa4b2");
+            }
             refreshFoot();
         };
         const name = h("input", { class: "input", type: "text", maxlength: 40, value: l.name, "aria-label": `Name of look ${i + 1}`, oninput: (e) => {
@@ -378,6 +403,48 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
         ladder.append(step(0, "Free", "everyone", "Every player has it"));
         for (const r of PRICE_LADDER)
             ladder.append(step(rungUsd(r), priceText(rungUsd(r)), r.name, `${r.name}: ${r.for}`));
+        // An outfit's body colour and hat (an item of another wear slot has neither).
+        const outfit = isOutfit(l) ? l : null;
+        const lookParts = outfit ? outfitFields(outfit, i, sync) : null;
+        const lastFree = l.priceUsd === 0 && wearOf(l) === OUTFIT && freeCount() === 1;
+        const keep = isOriginal(l.id) && own.has(l.id);
+        const remove = h("button", { class: "btn btn-danger", type: "button", disabled: keep || lastFree, title: keep ? "A player owns this look. Keep it in the file." : lastFree ? "Keep one free outfit: every player starts with it." : "", onclick: () => {
+                draft = draft.filter((x) => x !== l);
+                open = null;
+                redraw();
+            } }, icon("trash", 18), "Remove");
+        const dup = h("button", { class: "btn", type: "button", onclick: () => addLook(l) }, icon("dup", 18), "Duplicate");
+        const openMarks = marks(l, own, mine, mark);
+        const openProblems = h("ul", { class: "card-problems" }, ...mine.map((p) => h("li", {}, p.message)));
+        openProblems.hidden = !mine.length;
+        openParts = { marks: openMarks, problems: openProblems };
+        const group = (title, ...kids) => h("div", { class: "edit-group" }, h("h3", {}, title), ...kids);
+        return h("article", { class: `shelf-card shelf-editing${mark ? ` is-${mark}` : ""}${mine.length ? " has-problem" : ""}`, tabindex: -1, "aria-label": `Editing ${l.name || "a look"}` }, h("div", { class: "edit-top" }, stageBox, h("div", { class: "shelf-body" }, nameLine, priceLine, wearLine(l), h("span", { class: "fine" }, isOriginal(l.id) ? fineWords(l, st.get(l.id)) : "New: not in your game yet"), openMarks), h("button", { class: "btn btn-small card-done", type: "button", "aria-expanded": "true", onclick: () => openCard(null) }, icon("check", 16), "Done")), openProblems, h("div", { class: "edit-groups" }, group("Name", h("label", { class: "field" }, h("span", {}, "What players read"), name)), group("Price", h("label", { class: "field" }, h("span", {}, "Price in US dollars"), priceInput), ladder), wearEditor(l, keep || lastFree, i), lookParts?.group ?? null, slotsEditor(l, isOriginal(l.id) && own.has(l.id))), keep ? h("p", { class: "fine owned-note" }, icon("lock", 14), "A player owns this look: its id stays, and it cannot be removed.") : null, h("div", { class: "shelf-actions" }, dup, remove));
+    }
+    /**
+     * The wear slot of a look: "outfit" (the character's own look) or one of the game's own slots ("shovel"). Typed, with the slots the draft already uses as
+     * suggestions. Locked for a look that a player owns (it stays in its slot) and for the last free outfit. An outfit that becomes an item loses its colours; an
+     * item that becomes an outfit gets the free look's blue body.
+     */
+    function wearEditor(l, locked, i) {
+        const list = `n133-wears-${i}`;
+        const input = h("input", { class: "input", type: "text", maxlength: 24, value: wearOf(l), list, autocapitalize: "none", spellcheck: false, disabled: locked, "aria-label": `Wear slot of ${l.name}`, onchange: (e) => {
+                const v = e.target.value.trim();
+                if (v === "" || v === OUTFIT) {
+                    delete l.wear;
+                    l.change ??= { body: "#4aa8ff" };
+                }
+                else {
+                    l.wear = v;
+                    if (SLOT_NAME_PATTERN.test(v))
+                        delete l.change;
+                }
+                redraw();
+            } });
+        return h("div", { class: "edit-group" }, h("h3", {}, "Wear slot"), h("label", { class: "field" }, h("span", {}, "outfit (the character's colour and hat), or a slot of your game for an item (shovel, charm)"), input), h("datalist", { id: list }, ...[OUTFIT, ...wearSlots()].map((w) => h("option", { value: w }))));
+    }
+    /** An outfit's fields: the body colour (swatches and a picker), the hat (pictures) and the hat colour, as the editor's "Look" group. */
+    function outfitFields(l, i, sync) {
         const body = h("input", { class: "colour", type: "color", value: l.change.body, "aria-label": `Body colour of ${l.name}`, oninput: (e) => {
                 l.change.body = e.target.value;
                 sync();
@@ -416,20 +483,8 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
             hatChoices.append(h("label", { class: `hat-choice${(l.change.hat ?? null) === x ? " is-on" : ""}` }, input, hatChoicePicture(x), h("span", {}, x ? HAT_WORDS[x] : "No hat")));
         }
         hatChoices.style.setProperty("color", l.change.hatColor ?? "#9aa4b2");
-        const lastFree = l.priceUsd === 0 && freeCount() === 1;
-        const keep = isOriginal(l.id) && own.has(l.id);
-        const remove = h("button", { class: "btn btn-danger", type: "button", disabled: keep || lastFree, title: keep ? "A player owns this look. Keep it in the file." : lastFree ? "Keep one free look: every player starts with it." : "", onclick: () => {
-                draft = draft.filter((x) => x !== l);
-                open = null;
-                redraw();
-            } }, icon("trash", 18), "Remove");
-        const dup = h("button", { class: "btn", type: "button", onclick: () => addLook(l) }, icon("dup", 18), "Duplicate");
-        const openMarks = marks(l, own, mine, mark);
-        const openProblems = h("ul", { class: "card-problems" }, ...mine.map((p) => h("li", {}, p.message)));
-        openProblems.hidden = !mine.length;
-        openParts = { marks: openMarks, problems: openProblems };
-        const group = (title, ...kids) => h("div", { class: "edit-group" }, h("h3", {}, title), ...kids);
-        return h("article", { class: `shelf-card shelf-editing${mark ? ` is-${mark}` : ""}${mine.length ? " has-problem" : ""}`, tabindex: -1, "aria-label": `Editing ${l.name || "a look"}` }, h("div", { class: "edit-top" }, stageBox, h("div", { class: "shelf-body" }, nameLine, priceLine, h("span", { class: "fine" }, isOriginal(l.id) ? (l.priceUsd === 0 ? "Every player starts with it" : soldText(st.get(l.id))) : "New: not in your game yet"), openMarks), h("button", { class: "btn btn-small card-done", type: "button", "aria-expanded": "true", onclick: () => openCard(null) }, icon("check", 16), "Done")), openProblems, h("div", { class: "edit-groups" }, group("Name", h("label", { class: "field" }, h("span", {}, "What players read"), name)), group("Price", h("label", { class: "field" }, h("span", {}, "Price in US dollars"), priceInput), ladder), h("div", { class: "edit-group group-look" }, h("h3", {}, "Look"), h("div", { class: "look-fields" }, h("div", { class: "field" }, h("span", {}, "Body colour"), h("div", { class: "colour-row" }, swatches, body)), h("div", { class: "field" }, h("span", {}, "Hat"), hatChoices), h("label", { class: "field" }, h("span", {}, "Hat colour"), hatColor))), slotsEditor(l, isOriginal(l.id) && own.has(l.id))), keep ? h("p", { class: "fine owned-note" }, icon("lock", 14), "A player owns this look: its id stays, and it cannot be removed.") : null, h("div", { class: "shelf-actions" }, dup, remove));
+        const group = h("div", { class: "edit-group group-look" }, h("h3", {}, "Look"), h("div", { class: "look-fields" }, h("div", { class: "field" }, h("span", {}, "Body colour"), h("div", { class: "colour-row" }, swatches, body)), h("div", { class: "field" }, h("span", {}, "Hat"), hatChoices), h("label", { class: "field" }, h("span", {}, "Hat colour"), hatColor)));
+        return { group, swatches, hatChoices };
     }
     /** The slots of a look: names and values (words or #rrggbb colours) that the game reads. Rows to type in, at most SLOTS_MAX. */
     function slotsEditor(l, owned) {
@@ -456,7 +511,7 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
     }
     function addLook(from) {
         const name = from ? `${from.name} copy`.slice(0, 40) : "New look";
-        const base = from ? { id: "", name, priceUsd: from.priceUsd, change: { ...from.change }, ...(from.slots ? { slots: { ...from.slots } } : {}) } : { id: "", name, priceUsd: 0.05, change: { body: "#4aa8ff" } };
+        const base = from ? { ...copyLook(from), id: "", name } : { id: "", name, priceUsd: 0.05, change: { body: "#4aa8ff" } };
         // An id that a player owns is never given to a new look (even when that look is not in looks.json now): the new look would be what the owners own.
         base.id = slugId(name, [...draft.map((x) => x.id), ...owned()]);
         const at = from ? draft.indexOf(from) + 1 : draft.length;

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

@@ -71,7 +71,7 @@ export type AdminLogin = {
 /** How many sign-ins the panel lists. */
 export declare const ADMIN_LOGINS_SHOWN = 10;
 /**
- * The game's database, as the handler needs it. An adapter writes ONLY what these calls say: the two settings and, when the game turns it on, the deletion of the admin sessions
+ * The game's database, as the handler needs it. An adapter writes ONLY what these calls say: the three settings and, when the game turns it on, the deletion of the admin sessions
  * (`signOutEverywhere`). Nothing else.
  * (There is no call that writes a look, a price or an order: the Shelf gives text to copy, and a change of looks is a change of the repository.)
  */
@@ -80,6 +80,7 @@ export interface AdminStore {
     readSettings(): Promise<{
         character?: unknown;
         signin?: unknown;
+        friends?: unknown;
     }>;
     /** Saves a checked patch: all of it or none of it. */
     saveSettings(patch: GamePatch, now: number): Promise<void>;

package/dist/admin/switches.d.ts

@@ -2,25 +2,40 @@
 export type Character = "nanoterra" | "own";
 /** How the game signs a Nanoterra player in: the code exchange, a signed ticket (a game with no server), or not at all. */
 export type Signin = "exchange" | "ticket" | "none";
+/**
+ * Which friends list the game shows: Nanoterra's (the nano133 window, "@nano133/nanoterra/friends/panel"), the game's own (its own players and store), or none.
+ * A three-way choice, not an On/Off switch.
+ */
+export type Friends = "nanoterra" | "own" | "off";
+/** The game's own words for the switches. `friends` may be left out: it is "nanoterra" then (on by default). */
 export type GameSettings = {
     character: Character;
     signin: Signin;
+    friends?: Friends;
 };
 /** What a press can set: sign-in is on ("exchange": a game with a server) or off ("none"). */
 export type GamePatch = {
     character?: Character;
     signin?: "exchange" | "none";
+    friends?: Friends;
 };
 /** The settings as they are now, and which ones /admin has set (the others still have the game's default). */
-export type GameState = GameSettings & {
+export type GameState = {
+    character: Character;
+    signin: Signin;
+    friends: Friends;
     fromAdmin: {
         character: boolean;
         signin: boolean;
+        friends: boolean;
     };
 };
 export declare const isCharacter: (v: unknown) => v is Character;
 export declare const isSigninChoice: (v: unknown) => v is "exchange" | "none";
 export declare const isSignin: (v: unknown) => v is Signin;
+export declare const isFriends: (v: unknown) => v is Friends;
+/** The friends list a game shows while neither its own words nor /admin say: Nanoterra's. */
+export declare const DEFAULT_FRIENDS: Friends;
 /** The sign-in switch is on for any way but "none". */
 export declare const signinOn: (s: Signin) => boolean;
 /** A request body for a press: only the two known words, at least one. Anything else is refused, with the reason in words. */
@@ -35,7 +50,14 @@ export declare function parsePatch(body: unknown): {
 export declare function mergeSettings(stored: {
     character?: unknown;
     signin?: unknown;
+    friends?: unknown;
 }, defaults: GameSettings): GameState;
+/** The friends choice of the card: its title, and for each choice its short name (the card's three keys) and one plain sentence. Nanoterra's is the default. */
+export declare const FRIENDS_TITLE = "Friends list";
+export declare const FRIENDS_CHOICES: Record<Friends, {
+    name: string;
+    note: string;
+}>;
 /** One switch of the card: its title, and one plain sentence for each state. */
 export type SwitchId = "character" | "signin";
 export declare const SWITCHES: Record<SwitchId, {

package/dist/admin/switches.js

@@ -1,20 +1,27 @@
-// The two switches of the "Game" card in /admin, and the words that say what each does. The handler checks a press with `parsePatch`; the panel
-// draws the card from `SWITCHES`. A switch changes ONLY these two settings; never a look, a price or an order.
+// The switches of the "Game" card in /admin, and the words that say what each does. The handler checks a press with `parsePatch`; the panel
+// draws the card from `SWITCHES` and `FRIENDS_CHOICES`. A switch changes ONLY these three settings; never a look, a price or an order.
 export const isCharacter = (v) => v === "nanoterra" || v === "own";
 export const isSigninChoice = (v) => v === "exchange" || v === "none";
 export const isSignin = (v) => v === "exchange" || v === "ticket" || v === "none";
+export const isFriends = (v) => v === "nanoterra" || v === "own" || v === "off";
+/** The friends list a game shows while neither its own words nor /admin say: Nanoterra's. */
+export const DEFAULT_FRIENDS = "nanoterra";
 /** The sign-in switch is on for any way but "none". */
 export const signinOn = (s) => s !== "none";
 /** A request body for a press: only the two known words, at least one. Anything else is refused, with the reason in words. */
 export function parsePatch(body) {
     if (!body || typeof body !== "object" || Array.isArray(body))
-        return { ok: false, error: 'Send an object with "character" or "signin".' };
+        return { ok: false, error: 'Send an object with "character", "signin" or "friends".' };
     const patch = {};
     for (const [key, value] of Object.entries(body)) {
         if (key === "character" && isCharacter(value))
             patch.character = value;
         else if (key === "signin" && isSigninChoice(value))
             patch.signin = value;
+        else if (key === "friends" && isFriends(value))
+            patch.friends = value;
+        else if (key === "friends")
+            return { ok: false, error: '"friends" must be "nanoterra", "own" or "off".' };
         else if (key === "character")
             return { ok: false, error: '"character" must be "nanoterra" or "own".' };
         else if (key === "signin")
@@ -23,7 +30,7 @@ export function parsePatch(body) {
             return { ok: false, error: `"${key}" is not a game switch.` };
     }
     if (!Object.keys(patch).length)
-        return { ok: false, error: 'Send "character" or "signin".' };
+        return { ok: false, error: 'Send "character", "signin" or "friends".' };
     return { ok: true, patch };
 }
 /** The settings from what the store kept and the game's defaults. A stored value that is not one of the known words is ignored. */
@@ -31,9 +38,23 @@ export function mergeSettings(stored, defaults) {
     return {
         character: isCharacter(stored.character) ? stored.character : defaults.character,
         signin: isSigninChoice(stored.signin) ? stored.signin : defaults.signin,
-        fromAdmin: { character: isCharacter(stored.character), signin: isSigninChoice(stored.signin) },
+        friends: isFriends(stored.friends) ? stored.friends : isFriends(defaults.friends) ? defaults.friends : DEFAULT_FRIENDS,
+        fromAdmin: { character: isCharacter(stored.character), signin: isSigninChoice(stored.signin), friends: isFriends(stored.friends) },
     };
 }
+/** The friends choice of the card: its title, and for each choice its short name (the card's three keys) and one plain sentence. Nanoterra's is the default. */
+export const FRIENDS_TITLE = "Friends list";
+export const FRIENDS_CHOICES = {
+    nanoterra: {
+        name: "Nanoterra",
+        note: "Nanoterra: a player signed in on nano133 sees their Nanoterra friends in a small nano133 frame in your game, and their friends see that they are playing it. The friends stay on nano133: your game gets none of them.",
+    },
+    own: {
+        name: "The game's own",
+        note: "The game's own: a friends list of this game's players, kept in this game's own database. Nanoterra friends do not show.",
+    },
+    off: { name: "Off", note: "Off: the game shows no friends list." },
+};
 export const SWITCHES = {
     character: {
         title: "Players can play as their Nanoterra character",

package/dist/friends/adapters/d1.d.ts

@@ -0,0 +1,4 @@
+import type { D1Like } from "../../admin/adapters/d1.js";
+import { type FriendsStore } from "../types.js";
+export type { D1Like, D1StatementLike } from "../../admin/adapters/d1.js";
+export declare function createD1Friends(db: D1Like): FriendsStore;