@nano133/nanoterra 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.5.0 (2026-10-30)
+
+- **Wear slots** (`@nano133/nanoterra/looks`, and the Shelf of `/admin/panel`): a look fills one wear slot, and a player wears one look in each slot at once. An outfit (no
+  `wear`, or `"outfit"`: `OUTFIT`) is the character's own look, with its `change` (the body colour and the hat), as before. Any other `wear` is the game's own slot (a tool's
+  skin, a charm: `"wear": "shovel"`): an item there has no `change`. `lookProblems` refuses a bad slot name (field `wear`) and a `change` on an item (field `change`), and
+  now asks for one free OUTFIT (a list of outfits only keeps the starter's words); `checkLooks` leaves `wear` out for an outfit and `change` out for an item; `looksJson`
+  writes `wear` after `priceUsd`; `removalProblems` refuses a changed wear slot on an owned look (field `wear`); `diffLooks` lists `"wear"`. New: `OUTFIT`, `wearOf`,
+  `isOutfit`, the type `Change`. **`Look.change` is optional in the type now** (read an outfit's colours after `isOutfit`): a game that reads `look.change.body` directly
+  changes that line. The Shelf shows an item's slot and a tag picture, edits its wear slot (locked for an owned look and the last free outfit) in place of the body and hat,
+  and its message for an AI assistant names the wear rule. A file of outfits only reads and writes exactly as before. Echo Island sells shovel and Pinger skins and charms
+  with it (Wes, 2026-10-30).
+
 ## 0.4.0 (2026-10-30)
 
 - **The admin panel (`@nano133/nanoterra/admin/panel`) has a new layout: the game at a glance, in tabs.** A top bar (who is signed in, Live or Test mode, the bot

package/README.md

@@ -380,11 +380,38 @@ type Look = {
   id: string; // 1 to 40 lowercase letters, digits or dashes: "mint-cap"
   name: string; // 1 to 40 characters
   priceUsd: number; // US dollars, at most 2 decimals; 0 is the free look
-  change: { body: string; hat?: "cap" | "beanie" | "crown" | "tophat"; hatColor?: string }; // colours are "#rrggbb"
+  wear?: string; // the wear slot it fills: none (an outfit), or your game's own slot ("shovel"): see "Wear slots" below
+  change?: { body: string; hat?: "cap" | "beanie" | "crown" | "tophat"; hatColor?: string }; // an outfit's colours ("#rrggbb"); an item of another slot has none
   slots?: Record<string, string>; // what YOUR game defines for itself: see "Slots" below. Optional.
 };
 ```
 
+### Wear slots: an outfit, and the items beside it
+
+A look fills one **wear slot**, and a player wears one look in each slot at once. An **outfit** (no `wear`, or `"wear": "outfit"`) is the character's own look: its body colour and
+its hat (`change`). Every other wear slot is **your game's own**: a tool's skin, a charm, a trail. An item there has **no `change`** (it does not change the body); your game knows
+what it is from its id or its `slots`:
+
+```json
+{ "id": "classic", "name": "Classic", "priceUsd": 0, "change": { "body": "#4aa8ff" } },
+{ "id": "toy-spade", "name": "Toy Spade", "priceUsd": 0.1, "wear": "shovel" },
+{ "id": "echo-bat", "name": "Echo Bat", "priceUsd": 1, "wear": "pinger", "slots": { "ring": "ripples" } }
+```
+
+- A wear slot's name is like a slot's: 1 to 24 lowercase letters, digits or dashes, starting with a letter (`SLOT_NAME_PATTERN`); `outfit` (`OUTFIT`) is the outfit's.
+- **Keep one free OUTFIT:** every player starts with it. A free item is fine beside it, but it does not count.
+- `"change"` on an item is a mistake (`lookProblems`, field `change`): an item never changes the body. An outfit still needs its `change.body`.
+- `checkLooks` leaves `wear` out for an outfit (no `wear` and `"wear": "outfit"` are the same look) and `change` out for an item; `looksJson` writes `wear` after `priceUsd`, on the
+  look's own line. `wearOf(look)` gives the slot (`OUTFIT` for an outfit); `isOutfit(look)` tells an outfit (with its `change`) from an item.
+- **Players own a look by its id, so the wear slot of a look that a player owns must not change:** a shovel that a player owns stays a shovel. `removalProblems` reports it with the
+  field `"wear"`; `diffLooks` lists it as `"wear"`.
+- The Shelf shows an item's slot on its card ("Worn in the shovel slot") and a tag in place of the character picture (give the Shelf your own `picture` to draw the real item), and
+  its editor has a **Wear slot** field (locked for an owned look and the last free outfit) in place of the body and hat of an outfit.
+- What a player wears in each slot is your game's to keep (the starter keeps the outfit in the browser); ownership stays by id, as before.
+
+A file of outfits only reads and writes exactly as it did. `change` is optional in the type now: read an outfit's colours after `isOutfit(look)` (or `look.change?.body`). This is a
+minor change (0.5.0); a game on 0.4 or before drops `wear`, so a game with items must move to the new version in the game, the server and the Shelf.
+
 ### Slots: what your game defines on a look
 
 A game with its own parts (a pair of wings, a trail colour) needs a place for them on a look. That place is `slots`, an optional object of names and values:

package/ai/SPEC.md

@@ -100,9 +100,10 @@ export const LOOKS = checkLooks(rawLooksJson); // throws with the first mistake
 - One free look (`priceUsd: 0`) at least. Never change or remove the id of a look that someone owns. Prices in US dollars with at most 2 decimals; the server reads the price from the file.
 - A look only changes how the character looks. No random look, no loot box, no look that changes a score.
 - `slots` (optional, at most 8: a name and a word or a `#rrggbb` colour) is where the game keeps its own parts of a look. Read `look.slots` from `checkLooks`. Never change the slots of a look that someone owns: add a new look.
+- `wear` (optional) is the wear slot a look fills: none for an outfit (the character's colours and hat, `change`), or the game's own slot (`"shovel"`, `"charm"`) for an item, which has no `change`. A player wears one look in each slot. Keep one free outfit. Never change the wear slot of a look that someone owns. Read outfits with `isOutfit(look)`.
 - The game is the seller. Never send looks, prices or sales to another site.
 
-**Check:** `checkLooks` passes at start; a removed look that is owned is refused; a changed slot on an owned look is refused.
+**Check:** `checkLooks` passes at start; a removed look that is owned is refused; a changed slot or wear slot on an owned look is refused.
 
 ## 8. Leaving the page (any game that a player walks in with keys or a stick)
 

package/dist/admin/panel/mount.js

@@ -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/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/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.4.0",
+  "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/mount.ts

@@ -156,8 +156,8 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
     return shelf.el;
   }
 
-  /** A look's body colour, while the game still has the look (for the dots in the lists). */
-  const colourOf = (id: string): string | null => options.looks.find((l) => l.id === id)?.change.body ?? null;
+  /** 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: string): string | null => options.looks.find((l) => l.id === id)?.change?.body ?? null;
 
   function build(): Dashboard {
     const tabs = tabBar("overview");

package/src/admin/panel/shelf.ts

@@ -10,7 +10,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, type Hat, type Look, type Problem } from "../../looks/look.js";
+import { COLOR_PATTERN, HATS, isOutfit, lookProblems, OUTFIT, SLOT_NAME_PATTERN, usdText, wearOf, type Change, type Hat, type Look, type Problem } from "../../looks/look.js";
 import { copy, dollars, h, plural } from "./dom.js";
 import { icon } from "./icons.js";
 import { aiPrompt, changeText, ownedIds, shelfStats, soldText, type LookStats, type ShelfOrder, type ShelfPlayer } from "./shelfData.js";
@@ -38,8 +38,23 @@ function hatShapes(hat: Hat, fill: string): Element[] {
   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: Look): Element {
+  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",
@@ -72,7 +87,7 @@ export function previewPicture(load: () => Promise<(l: Look) => Promise<string |
   return (l) => {
     const box = h("span", { class: "shelf-preview" }, fallback(l));
     ready ??= load().catch(() => null);
-    const look: Look = { ...l, change: { ...l.change }, ...(l.slots ? { slots: { ...l.slots } } : {}) };
+    const look = copyLook(l);
     void ready
       .then((render) => (render ? render(look) : null))
       .then((src) => {
@@ -85,7 +100,9 @@ export function previewPicture(load: () => Promise<(l: Look) => Promise<string |
   };
 }
 
-const clone = (ls: readonly Look[]): Look[] => 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: Look): Look => ({ 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: readonly Look[]): Look[] => ls.map(copyLook);
 
 /** The names of the slots that differ between two looks (added, removed or another value). */
 function slotNamesChanged(before: Look, after: Look): string {
@@ -98,7 +115,8 @@ function fieldWords(d: ReturnType<typeof diffLooks>["changed"][number]): string
     if (f === "name") return `name "${d.before.name}" to "${d.after.name}"`;
     if (f === "priceUsd") return `price ${usdText(d.before.priceUsd)} to ${usdText(d.after.priceUsd)}`;
     if (f === "body") return "body colour";
-    if (f === "hat") return `hat ${d.before.change.hat ?? "none"} to ${d.after.change.hat ?? "none"}`;
+    if (f === "hat") 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";
   });
@@ -187,7 +205,12 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
   const stats = () => shelfStats(data.orders, data.players);
   const owned = () => ownedIds(data.players);
   const isOriginal = (id: string) => 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: Look, s: LookStats | undefined) => (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);
 
@@ -198,7 +221,7 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
   const pictures = new Map<string, Element>();
   let used = new Set<string>();
   function pictureOf(l: Look): Element {
-    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);
@@ -331,10 +354,16 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
 
   function stage(l: Look, ...extra: (Node | null)[]): HTMLElement {
     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: Look): HTMLElement | null {
+    return wearOf(l) === OUTFIT ? null : h("span", { class: "fine shelf-wear" }, `Worn in the ${wearOf(l)} slot`);
+  }
+
   function slotList(l: Look): HTMLElement | null {
     const entries = Object.entries(l.slots ?? {});
     if (!entries.length) return null;
@@ -353,7 +382,8 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
         "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)),
+        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),
       ),
@@ -400,7 +430,8 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
         { 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"),
+        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(
@@ -448,7 +479,7 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (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 = () => (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: ReturnType<typeof setTimeout> | null = null;
@@ -459,8 +490,10 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
       if (later) clearTimeout(later);
       later = setTimeout(() => pic.replaceChildren(pictureOf(l)), 150);
       ladder.querySelectorAll<HTMLButtonElement>("button").forEach((c) => c.setAttribute("aria-pressed", Number(c.dataset.usd) === l.priceUsd ? "true" : "false"));
-      swatches.querySelectorAll<HTMLButtonElement>("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<HTMLButtonElement>("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();
     };
 
@@ -486,6 +519,85 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
     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: string, ...kids: (Node | null)[]) => 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: Look, locked: boolean, i: number): HTMLElement {
+    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: Event) => {
+      const v = (e.target as HTMLInputElement).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: Look & { change: Change }, i: number, sync: () => void): { group: HTMLElement; swatches: HTMLElement; hatChoices: HTMLElement } {
     const body = h("input", { class: "colour", type: "color", value: l.change.body, "aria-label": `Body colour of ${l.name}`, oninput: (e: Event) => {
       l.change.body = (e.target as HTMLInputElement).value;
       sync();
@@ -524,61 +636,19 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
       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: string, ...kids: (Node | null)[]) => 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,
+    const group = h(
+      "div",
+      { class: "edit-group group-look" },
+      h("h3", {}, "Look"),
       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)),
+        { 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),
       ),
-      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),
     );
+    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. */
@@ -622,7 +692,7 @@ export function shelfView(first: ShelfData, looks: readonly Look[], picture: (l:
 
   function addLook(from?: Look) {
     const name = from ? `${from.name} copy`.slice(0, 40) : "New look";
-    const base: Look = from ? { id: "", name, priceUsd: from.priceUsd, change: { ...from.change }, ...(from.slots ? { slots: { ...from.slots } } : {}) } : { id: "", name, priceUsd: 0.05, change: { body: "#4aa8ff" } };
+    const base: Look = 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/src/admin/panel/shelfData.ts

@@ -76,7 +76,7 @@ export function aiPrompt(text: string, diff: LooksDiff, owned: readonly string[]
     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/src/looks/change.ts

@@ -1,4 +1,4 @@
-import { COLOR_PATTERN, cleanSlots, type Look, type Problem, type Slots } from "./look.js";
+import { COLOR_PATTERN, cleanSlots, wearOf, type Look, type Problem, type Slots } 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: Slots | undefined, b: Slots | undefined): boolean {
@@ -14,9 +14,9 @@ export 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 function removalProblems(before: readonly Look[], after: readonly Look[], owned: Iterable<string>): Problem[] {
   const now = new Set(after.map((l) => l.id));
@@ -28,6 +28,8 @@ export function removalProblems(before: readonly Look[], after: readonly Look[],
     const kept = next.get(l.id);
     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.` });
     }
@@ -35,12 +37,12 @@ export function removalProblems(before: readonly Look[], after: readonly Look[],
   return out;
 }
 
-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; after: Look; fields: LookField[] }[];
 };
 
@@ -55,9 +57,10 @@ export function diffLooks(before: readonly Look[], after: readonly Look[]): Look
     const fields: LookField[] = [];
     if (a.name !== b.name) fields.push("name");
     if (a.priceUsd !== b.priceUsd) fields.push("priceUsd");
-    if (a.change.body.toLowerCase() !== b.change.body.toLowerCase()) fields.push("body");
-    if (a.change.hat !== b.change.hat) fields.push("hat");
-    if ((a.change.hatColor ?? "").toLowerCase() !== (b.change.hatColor ?? "").toLowerCase()) fields.push("hatColor");
+    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) fields.push("hat");
+    if ((a.change?.hatColor ?? "").toLowerCase() !== (b.change?.hatColor ?? "").toLowerCase()) fields.push("hatColor");
     if (!sameSlots(a.slots, b.slots)) fields.push("slots");
     if (fields.length) diff.changed.push({ id: a.id, before: b, after: a, fields });
   }

package/src/looks/index.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/src/looks/json.ts

@@ -1,17 +1,22 @@
-import { cleanSlots, ID_PATTERN, type Look } from "./look.js";
+import { cleanSlots, ID_PATTERN, isOutfit, OUTFIT, wearOf, 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 function looksJson(looks: readonly Look[]): string {
   const row = (l: Look) => {
-    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: string;
+    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/src/looks/look.ts

@@ -1,10 +1,17 @@
 // 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"] as const;
 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;
@@ -12,7 +19,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
@@ -25,6 +39,8 @@ export type Look = {
 export type Slots = Record<string, string>;
 
 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;
@@ -41,7 +57,10 @@ export 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;
 };
@@ -59,7 +78,7 @@ export function lookProblems(raw: unknown): Problem[] {
   const out: Problem[] = [];
   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<string>();
-  let free = false;
+  let freeOutfit = false;
   raw.forEach((l: unknown, i: number) => {
     const where = `looks.json, look ${i + 1}`;
     const v = (l ?? {}) as Record<string, any>;
@@ -70,13 +89,24 @@ export function lookProblems(raw: unknown): Problem[] {
     if (typeof v.name !== "string" || !v.name.trim() || v.name.length > NAME_MAX) add("name", '"name" must be 1 to 40 characters');
     if (typeof v.priceUsd !== "number" || !Number.isFinite(v.priceUsd) || v.priceUsd < 0 || v.priceUsd > PRICE_MAX_USD) 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 as readonly unknown[]).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 as readonly unknown[]).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: unknown) => {
+    const w = (l as { wear?: unknown } | null)?.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;
 }
 
@@ -123,9 +153,17 @@ export function checkLooks(rawInput: unknown): Look[] {
   if (first) throw new Error(first.message);
   return (raw as Look[]).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: number): string => `$${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: Pick<Look, "wear">): string => 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: Look): l is Look & { change: Change } => wearOf(l) === OUTFIT && l.change !== undefined;