@nano133/nanoterra 0.3.2 → 0.5.0

package/dist/admin/panel/shelf.js

@@ -1,12 +1,17 @@
-// The Shelf screen in /admin: the game's looks with what each has sold, and a draft you can change in this page. It runs only in
+// The Shelf screen in /admin (the Cosmetics tab): the game's looks with what each has sold, and a draft you can change in this page. It runs only in
 // the creator's own browser, on the creator's own game. It changes NOTHING on the game: the new looks.json is text to copy and put
 // in the repository (there is no server call that writes looks, on purpose). Its rules are in the package's looks path (../../looks).
+//
+// Two modes. To see: the looks the game sells NOW (its looks.json), in a grid of cards with a big picture, the price and its step on the ladder, what each
+// has sold and its share of the sales, its slots; filters (All, For sale, Free, Not sold yet) and a sort. To edit: the draft, one card open at a time with its
+// fields in groups (name, price, look, slots), a "New" or "Changed" mark on each card, and a change bar at the bottom of the screen with the copy keys.
 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 { HATS, lookProblems, usdText } from "../../looks/look.js";
-import { copy, h } from "./dom.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";
 const NS = "http://www.w3.org/2000/svg";
 const INK = "#1d1530";
@@ -18,17 +23,35 @@ const svg = (tag, attrs = {}, ...kids) => {
     return el;
 };
 const shape = (tag, attrs) => svg(tag, { stroke: INK, "stroke-width": 1.4, "stroke-linejoin": "round", ...attrs });
-/** 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.) */
-export function lookPicture(l) {
-    const hat = l.change.hat;
-    const hc = l.change.hatColor ?? "#444444";
+/** The shapes of a hat in the flat picture's 64 x 72 box, in the colour `fill`. */
+function hatShapes(hat, fill) {
     const hats = {
-        cap: [shape("path", { d: "M19 24 A13 13 0 0 1 45 24 Z", fill: hc }), shape("rect", { x: 30, y: 22, width: 22, height: 4, rx: 2, fill: hc })],
-        beanie: [shape("path", { d: "M18 23 A14 14 0 0 1 46 23 Z", fill: hc }), shape("rect", { x: 18, y: 21, width: 28, height: 5, rx: 2, fill: hc }), shape("circle", { cx: 32, cy: 9, r: 3.5, fill: hc })],
-        crown: [shape("polygon", { points: "20,22 20,11 26,17 32,9 38,17 44,11 44,22", fill: hc })],
-        tophat: [shape("rect", { x: 23, y: 3, width: 18, height: 17, rx: 2, fill: hc }), shape("rect", { x: 17, y: 19, width: 30, height: 4, rx: 2, fill: hc })],
+        cap: () => [shape("path", { d: "M19 24 A13 13 0 0 1 45 24 Z", fill }), shape("rect", { x: 30, y: 22, width: 22, height: 4, rx: 2, fill })],
+        beanie: () => [shape("path", { d: "M18 23 A14 14 0 0 1 46 23 Z", fill }), shape("rect", { x: 18, y: 21, width: 28, height: 5, rx: 2, fill }), shape("circle", { cx: 32, cy: 9, r: 3.5, fill })],
+        crown: () => [shape("polygon", { points: "20,22 20,11 26,17 32,9 38,17 44,11 44,22", fill })],
+        tophat: () => [shape("rect", { x: 23, y: 3, width: 18, height: 17, rx: 2, fill }), shape("rect", { x: 17, y: 19, width: 30, height: 4, rx: 2, fill })],
     };
-    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 ? hats[hat] : []));
+    return hats[hat]();
+}
+/**
+ * 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") : []));
+}
+/** The drawing on a hat choice in the editor: the hat alone (or a dashed head for "No hat"), filled with the text colour, so the choice shows the look's hat colour. */
+function hatChoicePicture(hat) {
+    const head = shape("circle", { cx: 32, cy: 30, r: 12, fill: "#f2c9a0" });
+    const kids = hat ? [head, ...hatShapes(hat, "currentColor")] : [svg("circle", { cx: 32, cy: 30, r: 12, fill: "#f2c9a0", stroke: INK, "stroke-width": 1.4, "stroke-dasharray": "3 3" })];
+    return svg("svg", { viewBox: "0 0 64 46", width: 46, height: 33, "aria-hidden": "true", focusable: "false" }, ...kids);
 }
 /**
  * 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
@@ -41,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) => {
@@ -54,9 +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 } } : {}) }));
-/** "wings ember, trail #ffcf5a" */
-const slotsText = (l) => Object.entries(l.slots ?? {}).map(([k, v]) => `${k} ${v}`).join(", ");
+/** 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 ?? {})]);
@@ -71,27 +94,117 @@ 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";
     });
     return `${d.after.name}: ${parts.join(", ")}`;
 }
+/** The price as the cards write it: "Free", "25¢ · statement", "$1.10" (a price that is not a step of the ladder has no step name), "No price". */
+function priceWords(usd) {
+    if (!Number.isFinite(usd))
+        return "No price";
+    if (usd === 0)
+        return "Free";
+    const r = rungOf(usd);
+    return `${priceText(usd)}${r ? ` · ${r.name}` : ""}`;
+}
+/** The colours the body colour offers in one press (any colour is good: the colour field is next to them). */
+export const BODY_COLOURS = ["#4aa8ff", "#3ddc97", "#ffcf5a", "#ff7a3d", "#ff5c8a", "#9b6bff", "#2b2d42", "#f4f1ea"];
+/** A hat's name as the editor writes it. */
+const HAT_WORDS = { cap: "Cap", beanie: "Beanie", crown: "Crown", tophat: "Top hat" };
+const FILTERS = [
+    { id: "all", label: "All" },
+    { id: "sale", label: "For sale" },
+    { id: "free", label: "Free" },
+    { id: "unsold", label: "Not sold yet" },
+];
+const SORTS = [
+    { id: "best", label: "Best selling" },
+    { id: "price-desc", label: "Price: high to low" },
+    { id: "price-asc", label: "Price: low to high" },
+    { id: "name", label: "Name" },
+    { id: "file", label: "File order" },
+];
+/** 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 function shelfFilter(l, f, s) {
+    if (f === "sale")
+        return l.priceUsd > 0;
+    if (f === "free")
+        return l.priceUsd === 0;
+    if (f === "unsold")
+        return l.priceUsd > 0 && !s?.paid && !s?.owners;
+    return true;
+}
+/** 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 function shelfSort(ls, by, stats) {
+    const place = new Map(ls.map((l, i) => [l, i]));
+    const cents = (l) => stats.get(l.id)?.paidCents ?? 0;
+    const owners = (l) => stats.get(l.id)?.owners ?? 0;
+    const cmp = {
+        best: (a, b) => cents(b) - cents(a) || owners(b) - owners(a),
+        "price-desc": (a, b) => b.priceUsd - a.priceUsd,
+        "price-asc": (a, b) => a.priceUsd - b.priceUsd,
+        name: (a, b) => a.name.localeCompare(b.name, "en", { sensitivity: "base" }),
+        file: () => 0,
+    };
+    return [...ls].sort((a, b) => cmp[by](a, b) || place.get(a) - place.get(b));
+}
+/** A slot's value as a chip: a colour gets a swatch. */
+function slotChip(name, value) {
+    const sw = COLOR_PATTERN.test(value) ? h("span", { class: "swatch", "aria-hidden": "true" }) : null;
+    sw?.style.setProperty("--swatch", value);
+    return h("li", { class: "slot-chip" }, sw, h("span", { class: "slot-name" }, name), " ", h("span", { class: "slot-value" }, value));
+}
 /**
  * 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 function shelfView(first, looks, picture = lookPicture, repoHelp = "To get a link to your looks.json on GitHub, give the admin your repository (for example your-name/your-game).") {
     const LOOKS = looks;
     let data = first;
     let draft = clone(LOOKS);
     let editing = false;
+    /** The one card that is open in the editor (a look of the draft), or none. */
+    let open = null;
+    /** The open card's marks and its list of problems: the change bar brings them up to date at every key press (the rest of the screen waits for a redraw). */
+    let openParts = null;
+    let filter = "all";
+    let sort = "best";
     const el = h("section", { class: "admin-card shelf", "aria-labelledby": "shelf-title" });
     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);
+    /**
+     * The pictures, kept by the look's text: a redraw puts the same picture back instead of drawing it again (a picture on the real character is drawn once,
+     * and the card does not flash its flat picture first). Pictures that the last redraw did not use are let go.
+     */
+    const pictures = new Map();
+    let used = new Set();
+    function pictureOf(l) {
+        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);
+            return kept;
+        }
+        const made = picture(l);
+        pictures.set(key, made);
+        used.add(key);
+        return made;
+    }
     /**
      * The rows of a look's slot editor, as typed: a name can be typed twice (an object cannot hold it), so the rows are the draft's own truth while it is edited, and the
      * look's `slots` is made from them. A row with no name and no value is a row not filled in yet: it is not a slot.
@@ -120,9 +233,13 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
         return own.length ? own : removalProblems(LOOKS, draft, owned());
     }
     function redraw() {
+        used = new Set();
+        openParts = null;
         const st = stats();
         const own = owned();
-        const head = h("div", { class: "card-head" }, h("h2", { id: "shelf-title" }, "Shelf"), h("button", {
+        const forSale = LOOKS.filter((l) => l.priceUsd > 0).length;
+        const earned = [...st.values()].reduce((n, s) => n + s.paidCents, 0);
+        const head = h("div", { class: "card-head" }, h("div", { class: "card-title" }, h("h2", { id: "shelf-title" }, "Shelf"), h("p", { class: "fine card-sub" }, editing ? "Draft: nothing here changes your game until you push the new looks.json." : "The looks your game sells now. Only you see these numbers.")), h("button", {
             class: `btn ${editing ? "" : "btn-primary"}`,
             type: "button",
             "aria-pressed": editing ? "true" : "false",
@@ -130,81 +247,244 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
                 editing = !editing;
                 redraw();
             },
-        }, editing ? "Close the editor" : "Edit the shelf"));
-        const intro = h("p", { class: "fine" }, editing
-            ? "Change a look here to see what it would be. This page changes nothing in your game: when you are happy, copy the new looks.json into your repository and push it. Your game builds again and the new looks go live."
-            : "The looks your game sells now, with what each has sold in your own database. Nobody else sees these numbers.");
-        const list = h("div", { class: "shelf-list" });
-        draft.forEach((l, i) => list.append(card(l, i, st, own)));
-        const parts = [head, intro, list];
-        if (editing) {
-            parts.push(h("div", { class: "shelf-add" }, h("button", { class: "btn", type: "button", onclick: () => addLook() }, "Add a look"), " ", h("button", { class: "btn", type: "button", disabled: JSON.stringify(draft) === JSON.stringify(LOOKS), onclick: () => ((draft = clone(LOOKS)), redraw()) }, "Start over")), foot());
+        }, editing ? icon("close", 18) : icon("pencil", 18), editing ? "Close the editor" : "Edit the shelf"));
+        const parts = [head];
+        if (!editing) {
+            parts.push(h("ul", { class: "shelf-stats", "aria-label": "The shelf in numbers" }, h("li", {}, h("strong", {}, String(LOOKS.length)), ` ${LOOKS.length === 1 ? "look" : "looks"}`), h("li", {}, h("strong", {}, String(forSale)), " for sale"), h("li", {}, h("strong", {}, String(LOOKS.length - forSale)), " free"), h("li", {}, h("strong", {}, dollars(earned)), " earned")));
+            if (changedFromGame()) {
+                const diff = diffLooks(LOOKS, draft);
+                parts.push(h("div", { class: "draft-note", role: "status" }, icon("pencil", 18), h("span", {}, `You have a draft that is not in your game yet: ${changeText(diff)}.`), h("button", { class: "btn btn-small", type: "button", onclick: () => ((editing = true), redraw()) }, "Open the draft")));
+            }
+            parts.push(toolbar(st), viewGrid(st));
+        }
+        else {
+            parts.push(h("p", { class: "fine" }, "Change a look here to see what it would be. This page changes nothing in your game: when you are happy, copy the new looks.json into your repository and push it. Your game builds again and the new looks go live."), editGrid(st, own), ...foot());
         }
         el.replaceChildren(...parts.filter((p) => p !== null));
+        for (const k of [...pictures.keys()])
+            if (!used.has(k))
+                pictures.delete(k);
+    }
+    // ---- To see ----
+    function toolbar(st) {
+        const chips = h("div", { class: "seg", role: "group", "aria-label": "Show looks" });
+        for (const f of FILTERS) {
+            const n = LOOKS.filter((l) => shelfFilter(l, f.id, st.get(l.id))).length;
+            chips.append(h("button", { class: `seg-btn${filter === f.id ? " is-on" : ""}`, type: "button", "aria-pressed": filter === f.id ? "true" : "false", onclick: () => ((filter = f.id), redraw()) }, f.label, h("span", { class: "seg-count" }, String(n))));
+        }
+        const select = h("select", { class: "input select", "aria-label": "Sort the looks", onchange: (e) => ((sort = e.target.value), redraw()) }, ...SORTS.map((s) => h("option", { value: s.id }, s.label)));
+        select.value = sort;
+        return h("div", { class: "toolbar" }, chips, h("label", { class: "sort" }, h("span", {}, "Sort"), select));
+    }
+    function viewGrid(st) {
+        const total = [...st.values()].reduce((n, s) => n + s.paidCents, 0);
+        const shown = shelfSort(LOOKS.filter((l) => shelfFilter(l, filter, st.get(l.id))), sort, st);
+        const grid = h("div", { class: "shelf-list" });
+        if (!shown.length)
+            grid.append(h("p", { class: "empty" }, "No look matches this filter."));
+        for (const l of shown)
+            grid.append(viewCard(l, st.get(l.id), total));
+        return grid;
+    }
+    function stage(l, ...extra) {
+        const box = h("div", { class: "shelf-stage" }, h("div", { class: "shelf-pic" }, pictureOf(l)), ...extra);
+        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)
+            return null;
+        return h("ul", { class: "slot-chips shelf-slots", "aria-label": `Slots of ${l.name}` }, h("li", { class: "sr-only" }, "Slots:"), ...entries.map(([k, v]) => slotChip(k, v)));
+    }
+    function viewCard(l, s, total) {
+        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)"), 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) {
+        const bad = problems();
+        const diff = diffLooks(LOOKS, draft);
+        const added = new Set(diff.added.map((l) => l.id));
+        const changed = new Set(diff.changed.map((c) => c.id));
+        const grid = h("div", { class: "shelf-list is-editing" });
+        draft.forEach((l, i) => {
+            const mine = bad.filter((p) => p.look === i + 1);
+            const mark = added.has(l.id) ? "new" : changed.has(l.id) ? "changed" : null;
+            grid.append(l === open ? editCard(l, i, st, own, mine, mark) : compactCard(l, st, own, mine, mark));
+        });
+        for (const gone of diff.removed)
+            grid.append(ghostCard(gone));
+        grid.append(h("button", { class: "shelf-add-tile", type: "button", onclick: () => addLook() }, icon("plus", 22), h("span", {}, "Add a look")));
+        return grid;
+    }
+    function marks(l, own, mine, mark) {
+        return h("span", { class: "marks" }, ...markList(l, own, mine, mark));
     }
-    function card(l, i, st, own) {
-        const rung = rungOf(l.priceUsd);
-        const price = l.priceUsd === 0 ? "Free" : `${priceText(l.priceUsd)}${rung ? ` · ${rung.name}` : ""}`;
-        const pic = h("div", { class: "shelf-pic" }, picture(l));
-        const priceLine = h("span", { class: "shelf-price" }, price);
-        const top = h("div", { class: "shelf-top" }, pic, h("div", { class: "shelf-text" }, h("strong", {}, l.name || "(no name)"), 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"), l.slots && Object.keys(l.slots).length ? h("span", { class: "fine shelf-slots" }, `Slots: ${slotsText(l)}`) : null));
-        if (!editing)
-            return h("article", { class: "shelf-card" }, top);
+    function markList(l, own, mine, mark) {
+        return [
+            mark ? h("span", { class: `mark mark-${mark}` }, mark === "new" ? "New" : "Changed") : null,
+            isOriginal(l.id) && own.has(l.id) ? h("span", { class: "mark mark-owned", title: "A player owns this look" }, icon("lock", 14), "Owned") : null,
+            mine.length ? h("span", { class: "mark mark-bad" }, plural(mine.length, "problem")) : null,
+        ];
+    }
+    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)), 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", {
+            class: "btn btn-small",
+            type: "button",
+            onclick: () => {
+                const at = Math.min(LOOKS.findIndex((x) => x.id === l.id), draft.length);
+                draft = [...draft.slice(0, at), ...clone([l]), ...draft.slice(at)];
+                redraw();
+            },
+        }, "Put back"));
+    }
+    function openCard(l) {
+        open = l;
+        redraw();
+        const card = el.querySelector(".shelf-editing");
+        if (card) {
+            card.focus({ preventScroll: true });
+            card.scrollIntoView?.({ block: "nearest" });
+        }
+    }
+    function editCard(l, i, st, own, mine, mark) {
+        const pic = h("div", { class: "shelf-pic" }, pictureOf(l));
+        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 = () => (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;
         const sync = () => {
-            pic.replaceChildren(picture(l));
-            const r = rungOf(l.priceUsd);
-            priceLine.textContent = Number.isFinite(l.priceUsd) ? (l.priceUsd === 0 ? "Free" : `${priceText(l.priceUsd)}${r ? ` · ${r.name}` : ""}`) : "No price";
-            top.querySelector("strong").textContent = l.name || "(no name)";
+            nameLine.textContent = l.name || "(no name)";
+            priceLine.textContent = priceWords(l.priceUsd);
+            tint();
+            if (later)
+                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"));
+            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: "shelf-input", type: "text", maxlength: 40, value: l.name, "aria-label": `Name of look ${i + 1}`, oninput: (e) => {
+        const name = h("input", { class: "input", type: "text", maxlength: 40, value: l.name, "aria-label": `Name of look ${i + 1}`, oninput: (e) => {
                 l.name = e.target.value;
                 if (!isOriginal(l.id))
                     l.id = slugId(l.name, [...draft.filter((x) => x !== l).map((x) => x.id), ...owned()]);
                 sync();
             } });
-        const priceInput = h("input", { class: "shelf-input shelf-num", type: "number", step: 0.01, min: 0, max: 1000, inputmode: "decimal", value: Number.isFinite(l.priceUsd) ? l.priceUsd : "", "aria-label": `Price in US dollars of ${l.name}`, oninput: (e) => {
+        const priceInput = h("input", { class: "input input-num", type: "number", step: 0.01, min: 0, max: 1000, inputmode: "decimal", value: Number.isFinite(l.priceUsd) ? l.priceUsd : "", "aria-label": `Price in US dollars of ${l.name}`, oninput: (e) => {
                 const v = e.target.value;
                 l.priceUsd = v === "" ? Number.NaN : Number(v);
                 sync();
             } });
-        const ladder = h("div", { class: "shelf-ladder", role: "group", "aria-label": "Price ladder" });
+        const ladder = h("div", { class: "ladder", role: "group", "aria-label": "Price ladder" });
         const setPrice = (usd) => {
             l.priceUsd = usd;
             priceInput.value = String(usd);
             sync();
         };
-        ladder.append(h("button", { class: "chip", type: "button", onclick: () => setPrice(0) }, "Free"));
+        const step = (usd, price, word, title) => h("button", { class: "ladder-step", type: "button", title, "data-usd": usd, "aria-pressed": l.priceUsd === usd ? "true" : "false", onclick: () => setPrice(usd) }, h("strong", {}, price), h("span", {}, word));
+        ladder.append(step(0, "Free", "everyone", "Every player has it"));
         for (const r of PRICE_LADDER)
-            ladder.append(h("button", { class: "chip", type: "button", title: `${r.name}: ${r.for}`, onclick: () => setPrice(rungUsd(r)) }, priceText(rungUsd(r))));
-        const body = h("input", { class: "shelf-color", type: "color", value: l.change.body, "aria-label": `Body colour of ${l.name}`, oninput: (e) => {
+            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();
             } });
-        const hatColor = h("input", { class: "shelf-color", type: "color", value: l.change.hatColor ?? "#1c6e4f", "aria-label": `Hat colour of ${l.name}`, disabled: !l.change.hat, oninput: (e) => {
+        const swatches = h("div", { class: "swatches", role: "group", "aria-label": "Body colours" });
+        for (const c of BODY_COLOURS) {
+            const b = h("button", { class: "swatch-btn", type: "button", "data-colour": c, title: c, "aria-label": `Body colour ${c}`, "aria-pressed": c === l.change.body.toLowerCase() ? "true" : "false", onclick: () => {
+                    l.change.body = c;
+                    body.value = c;
+                    sync();
+                } }, h("span", { class: "swatch", "aria-hidden": "true" }));
+            b.firstChild.style.setProperty("--swatch", c);
+            swatches.append(b);
+        }
+        const hatColor = h("input", { class: "colour", type: "color", value: l.change.hatColor ?? "#1c6e4f", "aria-label": `Hat colour of ${l.name}`, disabled: !l.change.hat, oninput: (e) => {
                 l.change.hatColor = e.target.value;
                 sync();
             } });
-        const hat = h("select", { class: "shelf-input", "aria-label": `Hat of ${l.name}`, onchange: (e) => {
-                const v = e.target.value;
-                if (v === "") {
-                    delete l.change.hat;
-                    delete l.change.hatColor;
-                    hatColor.disabled = true;
-                }
-                else {
-                    l.change.hat = v;
-                    l.change.hatColor ??= hatColor.value;
-                    hatColor.disabled = false;
-                }
-                sync();
-            } }, h("option", { value: "" }, "No hat"), ...HATS.map((x) => h("option", { value: x }, x)));
-        hat.value = l.change.hat ?? "";
-        const lastFree = l.priceUsd === 0 && freeCount() === 1;
-        const keep = isOriginal(l.id) && own.has(l.id);
-        const remove = h("button", { class: "btn", 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)), redraw()) }, "Remove");
-        const dup = h("button", { class: "btn", type: "button", onclick: () => addLook(l) }, "Duplicate");
-        return h("article", { class: "shelf-card shelf-editing" }, top, h("label", { class: "shelf-field" }, h("span", {}, "Name"), name), h("div", { class: "shelf-field" }, h("span", {}, "Price in US dollars"), priceInput, ladder), h("div", { class: "shelf-colors" }, h("label", { class: "shelf-field" }, h("span", {}, "Body colour"), body), h("label", { class: "shelf-field" }, h("span", {}, "Hat"), hat), h("label", { class: "shelf-field" }, h("span", {}, "Hat colour"), hatColor)), slotsEditor(l, isOriginal(l.id) && own.has(l.id)), keep ? h("p", { class: "fine" }, "A player owns this look: its id stays, and it cannot be removed.") : null, h("div", { class: "shelf-actions" }, dup, " ", remove));
+        const hatName = `n133-hat-${i}`;
+        const hatChoices = h("div", { class: "hat-choices", role: "radiogroup", "aria-label": `Hat of ${l.name}` });
+        for (const x of [null, ...HATS]) {
+            const input = h("input", { type: "radio", name: hatName, value: x ?? "", checked: (l.change.hat ?? null) === x, onchange: () => {
+                    if (x === null) {
+                        delete l.change.hat;
+                        delete l.change.hatColor;
+                        hatColor.disabled = true;
+                    }
+                    else {
+                        l.change.hat = x;
+                        l.change.hatColor ??= hatColor.value;
+                        hatColor.disabled = false;
+                    }
+                    hatChoices.querySelectorAll(".hat-choice").forEach((c) => c.classList.toggle("is-on", c.querySelector("input").checked));
+                    sync();
+                } });
+            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 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) {
@@ -217,7 +497,7 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
                 setRows(l, cur);
                 refreshFoot();
             };
-            list.append(h("div", { class: "shelf-slot" }, h("input", { class: "shelf-input", type: "text", maxlength: 24, value: name, placeholder: "name", autocapitalize: "none", spellcheck: false, "aria-label": `Name of slot ${r + 1} of ${l.name}`, oninput: edit(0) }), h("input", { class: "shelf-input", type: "text", maxlength: 40, value: value, placeholder: "word or #rrggbb", autocapitalize: "none", spellcheck: false, "aria-label": `Value of slot ${r + 1} of ${l.name}`, oninput: edit(1) }), h("button", { class: "btn btn-small", type: "button", "aria-label": `Remove slot ${name || r + 1} of ${l.name}`, onclick: () => (setRows(l, rowsOf(l).filter((_, i) => i !== r)), redraw()) }, "Remove")));
+            list.append(h("div", { class: "shelf-slot" }, h("input", { class: "input", type: "text", maxlength: 24, value: name, placeholder: "name", autocapitalize: "none", spellcheck: false, "aria-label": `Name of slot ${r + 1} of ${l.name}`, oninput: edit(0) }), h("input", { class: "input", type: "text", maxlength: 40, value: value, placeholder: "word or #rrggbb", autocapitalize: "none", spellcheck: false, "aria-label": `Value of slot ${r + 1} of ${l.name}`, oninput: edit(1) }), h("button", { class: "btn btn-small btn-quiet", type: "button", "aria-label": `Remove slot ${name || r + 1} of ${l.name}`, onclick: () => (setRows(l, rowsOf(l).filter((_, i) => i !== r)), redraw()) }, "Remove")));
         });
         const add = h("button", { class: "btn btn-small", type: "button", disabled: rows.length >= SLOTS_MAX, onclick: () => {
                 const cur = rowsOf(l);
@@ -226,39 +506,60 @@ export function shelfView(first, looks, picture = lookPicture, repoHelp = "To ge
                     n++;
                 setRows(l, [...cur, [`slot-${n}`, ""]]);
                 redraw();
-            } }, "Add a slot");
-        return h("div", { class: "shelf-field shelf-slots-edit" }, h("span", {}, `Slots (${rows.length} of ${SLOTS_MAX}): words and colours that your game reads`), list, add, owned ? h("p", { class: "fine" }, "A player owns this look: its slots cannot change. Add a new look with the new slots instead.") : null);
+            } }, icon("plus", 16), "Add a slot");
+        return h("div", { class: "edit-group shelf-slots-edit" }, h("h3", {}, "Slots"), h("span", { class: "fine" }, `Slots (${rows.length} of ${SLOTS_MAX}): words and colours that your game reads`), rows.length ? list : null, add, owned ? h("p", { class: "fine" }, "A player owns this look: its slots cannot change. Add a new look with the new slots instead.") : null);
     }
     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()]);
-        draft = [...draft, base];
-        redraw();
-        el.querySelectorAll(".shelf-card:last-of-type input[type=text]").forEach((i) => i.focus());
+        const at = from ? draft.indexOf(from) + 1 : draft.length;
+        draft = [...draft.slice(0, at), base, ...draft.slice(at)];
+        openCard(base);
+        el.querySelector(".shelf-editing input[type=text]")?.focus();
     }
-    const footBox = h("div", { class: "shelf-foot" });
+    // ---- The change bar ----
+    //
+    // Two parts. The bar that stays at the bottom of the screen while the Shelf is edited holds only what is needed at every moment: the state of the draft
+    // and the two copy keys (on a phone it is about 110 px high). The rest comes after it in the page: the problems in full, GitHub, Start over, what changed,
+    // the new file.
+    const footBar = h("div", { class: "shelf-foot", role: "region", "aria-label": "Your draft" });
+    const footMore = h("div", { class: "shelf-foot-more" });
     const foot = () => {
         refreshFoot();
-        return footBox;
+        return [footBar, footMore];
     };
+    /** "1 changed", "2 added, 1 removed": only the parts that are not zero. */
+    const shortChange = (d) => [d.added.length && `${d.added.length} added`, d.changed.length && `${d.changed.length} changed`, d.removed.length && `${d.removed.length} removed`].filter(Boolean).join(", ");
     function refreshFoot() {
         const bad = problems();
         const diff = diffLooks(LOOKS, draft);
         const changed = diff.added.length + diff.removed.length + diff.changed.length > 0;
         const text = bad.length ? "" : looksJson(draft);
+        const ready = !bad.length && changed;
+        footBar.replaceChildren(h("div", { class: "foot-status" }, h("strong", {}, changed ? shortChange(diff) : "No change yet"), bad.length ? h("span", { class: "mark mark-bad" }, `${plural(bad.length, "problem")} to fix`) : changed ? h("span", { class: "mark mark-ok" }, icon("check", 14), "Ready to copy") : null), h("div", { class: "foot-keys" }, h("button", { class: "btn btn-primary", type: "button", disabled: !ready, onclick: (e) => void copy(text, e.currentTarget) }, "Copy looks.json"), h("button", { class: "btn", type: "button", title: "Copy a message for your AI assistant: the new looks.json, what changed and the rules", disabled: !ready, onclick: (e) => void copy(aiPrompt(text, diff, [...owned()].sort(), LOOKS), e.currentTarget) }, "Copy for my AI")));
         const out = [];
         if (bad.length)
-            out.push(h("div", { class: "late-note", role: "alert" }, h("strong", {}, "Fix these first"), h("ul", {}, ...bad.map((p) => h("li", {}, p.message)))));
-        out.push(h("div", { class: "shelf-changes" }, h("strong", {}, changed ? changeText(diff) : "No change yet"), changed
+            out.push(h("div", { class: "late-note foot-problems", role: "alert" }, h("strong", {}, "Fix these first"), h("ul", {}, ...bad.map((p) => h("li", {}, p.message)))));
+        out.push(h("div", { class: "foot-links" }, data.repo ? h("a", { class: "btn btn-small", href: `https://github.com/${data.repo}/edit/main/looks.json`, target: "_blank", rel: "noopener noreferrer" }, "Open looks.json on GitHub", icon("external", 16)) : null, h("button", { class: "btn btn-small btn-quiet", type: "button", disabled: !changedFromGame(), onclick: () => ((draft = clone(LOOKS)), (open = null), redraw()) }, "Start over")));
+        if (!data.repo)
+            out.push(h("p", { class: "fine" }, repoHelp));
+        out.push(h("details", { class: "foot-more shelf-changes" }, h("summary", {}, `What changed: ${changed ? changeText(diff) : "No change yet"}`), changed
             ? h("ul", {}, ...diff.added.map((l) => h("li", {}, `Added: ${l.name} (${l.priceUsd === 0 ? "free" : usdText(l.priceUsd)})`)), ...diff.changed.map((c) => h("li", {}, fieldWords(c))), ...diff.removed.map((l) => h("li", {}, `Removed: ${l.name}`)))
             : null));
-        const ready = !bad.length && changed;
-        const copyJson = h("button", { class: "btn btn-primary", type: "button", disabled: !ready, onclick: (e) => void copy(text, e.currentTarget) }, "Copy looks.json");
-        const copyAi = h("button", { class: "btn", type: "button", disabled: !ready, onclick: (e) => void copy(aiPrompt(text, diff, [...owned()].sort(), LOOKS), e.currentTarget) }, "Copy a message for my AI");
-        out.push(h("div", { class: "shelf-actions" }, copyJson, " ", copyAi, data.repo ? h("a", { class: "btn", href: `https://github.com/${data.repo}/edit/main/looks.json`, target: "_blank", rel: "noopener noreferrer" }, "Open looks.json on GitHub") : null), !data.repo ? h("p", { class: "fine" }, repoHelp) : null, ready ? h("details", { class: "shelf-file" }, h("summary", {}, "Show the new looks.json"), h("pre", {}, text)) : null);
-        footBox.replaceChildren(...out.filter((n) => n !== null));
+        if (ready)
+            out.push(h("details", { class: "foot-more shelf-file" }, h("summary", {}, "Show the new looks.json"), h("pre", {}, text)));
+        footMore.replaceChildren(...out.filter((n) => n !== null));
+        // The open card's own marks and problems, from the same check.
+        if (open && openParts) {
+            const at = draft.indexOf(open) + 1;
+            const mine = bad.filter((p) => p.look === at);
+            const mark = diff.added.some((l) => l === open) ? "new" : diff.changed.some((c) => c.after === open) ? "changed" : null;
+            openParts.marks.replaceChildren(...markList(open, owned(), mine, mark).filter((n) => n !== null));
+            openParts.problems.replaceChildren(...mine.map((p) => h("li", {}, p.message)));
+            openParts.problems.hidden = !mine.length;
+        }
     }
     redraw();
     return {