@nano133/nanoterra 0.3.2 → 0.5.0

package/src/admin/panel/tabs.ts

@@ -0,0 +1,94 @@
+// The panel's tab bar: Overview, Cosmetics, Orders, Players and Settings. Real tabs (role tablist, tab and tabpanel): a press or the arrow keys, Home and End
+// choose one, and only the chosen tab is in the Tab order. Every panel is made once and only hidden, so a draft, a search or a switch keeps its state when
+// the creator goes to another tab and back. The choice lives in this page's memory only: the panel never writes the page's address (the host page owns it).
+
+import { h } from "./dom.js";
+import { icon, type IconName } from "./icons.js";
+
+export type TabId = "overview" | "cosmetics" | "orders" | "players" | "settings";
+
+export const TABS: readonly { id: TabId; label: string; icon: IconName }[] = [
+  { id: "overview", label: "Overview", icon: "overview" },
+  { id: "cosmetics", label: "Cosmetics", icon: "shirt" },
+  { id: "orders", label: "Orders", icon: "receipt" },
+  { id: "players", label: "Players", icon: "players" },
+  { id: "settings", label: "Settings", icon: "settings" },
+];
+
+export type TabBar = {
+  /** The bar (role tablist). */
+  bar: HTMLElement;
+  /** The panel of each tab (role tabpanel), empty: the caller fills it. */
+  panels: Record<TabId, HTMLElement>;
+  /**
+   * Shows a tab. `focus` moves the keyboard to it (an arrow key does; a link from another tab does not). When the page was scrolled into the panels, the top of
+   * the new panel comes up under the bar (a short tab after a long one must not open at its end).
+   */
+  select(id: TabId, focus?: boolean): void;
+  /** The tab that shows now. */
+  readonly current: TabId;
+  /** The small number on a tab ("Orders 25"); null takes it away. */
+  setCount(id: TabId, n: number | null): void;
+};
+
+export function tabBar(first: TabId = "overview"): TabBar {
+  let current: TabId = first;
+  const bar = h("div", { class: "tabbar", role: "tablist", "aria-label": "Admin sections" });
+  const buttons = {} as Record<TabId, HTMLButtonElement>;
+  const counts = {} as Record<TabId, HTMLElement>;
+  const panels = {} as Record<TabId, HTMLElement>;
+
+  for (const t of TABS) {
+    counts[t.id] = h("span", { class: "tab-count" });
+    counts[t.id].hidden = true;
+    const b = h(
+      "button",
+      { class: "tabbar-tab", type: "button", role: "tab", id: `n133-tab-${t.id}`, "aria-controls": `n133-panel-${t.id}` },
+      icon(t.icon, 18),
+      h("span", { class: "tab-label" }, t.label),
+      counts[t.id],
+    );
+    b.addEventListener("click", () => select(t.id));
+    b.addEventListener("keydown", (e: KeyboardEvent) => {
+      const i = TABS.findIndex((x) => x.id === t.id);
+      const next = e.key === "ArrowRight" ? i + 1 : e.key === "ArrowLeft" ? i - 1 : e.key === "Home" ? 0 : e.key === "End" ? TABS.length - 1 : null;
+      if (next === null) return;
+      e.preventDefault();
+      select(TABS[(next + TABS.length) % TABS.length].id, true);
+    });
+    buttons[t.id] = b;
+    bar.append(b);
+    panels[t.id] = h("section", { class: `tabpanel tabpanel-${t.id}`, role: "tabpanel", id: `n133-panel-${t.id}`, "aria-labelledby": `n133-tab-${t.id}`, tabindex: 0 });
+  }
+
+  function select(id: TabId, focus = false) {
+    current = id;
+    for (const t of TABS) {
+      const on = t.id === id;
+      buttons[t.id].setAttribute("aria-selected", on ? "true" : "false");
+      buttons[t.id].tabIndex = on ? 0 : -1;
+      buttons[t.id].classList.toggle("is-on", on);
+      panels[t.id].hidden = !on;
+    }
+    if (focus) buttons[id].focus({ preventScroll: true });
+    // Keep the chosen tab in view in the bar, when the bar scrolls sideways (only the bar moves).
+    const b = buttons[id];
+    if (bar.scrollWidth > bar.clientWidth) bar.scrollLeft = Math.max(0, b.offsetLeft - (bar.clientWidth - b.offsetWidth) / 2);
+    const panel = panels[id];
+    if (panel.isConnected && panel.getBoundingClientRect().top < bar.getBoundingClientRect().bottom) panel.scrollIntoView?.({ block: "start" });
+  }
+
+  select(first);
+  return {
+    bar,
+    panels,
+    select,
+    get current() {
+      return current;
+    },
+    setCount(id, n) {
+      counts[id].hidden = n === null;
+      counts[id].textContent = n === null ? "" : n.toLocaleString("en-US");
+    },
+  };
+}

package/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;