@nano133/nanoterra 0.7.0 → 0.8.0

package/src/emotes/panel/style.css

@@ -0,0 +1,415 @@
+/* The Emotes key and the emote wheel (mountEmotes in ./mount.ts). Every rule is under .n133-emotes, so nothing leaks into the game's page.
+   Phone first: the key is 44 px, each place of the wheel 58 px or more, each tile of Edit 70 px. The wheel's sizes follow the screen's short side
+   (a phone on its side too): --r is the ring's radius, --slot a place's size, as on nano133.com's island.
+   To theme it, set the --n133-* custom properties on the element that holds the key (or a parent): --n133-ink, --n133-ink-soft, --n133-paper,
+   --n133-ground, --n133-line, --n133-gem, --n133-gem-dark, --n133-radius, --n133-font and --n133-emotes-z (the wheel's z-index, default 1000).
+   Those set the LIGHT theme; the dark one reads the twins with "dark-" in the name (--n133-dark-ink and so on), as the admin panel does.
+   mountEmotes sets data-theme="light" or "dark" on .n133-emotes. */
+
+.n133-emotes {
+  --font: var(--n133-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  --radius: var(--n133-radius, 18px);
+  --ink: var(--n133-ink, #16202e);
+  --ink-soft: var(--n133-ink-soft, #4a5568);
+  --paper: var(--n133-paper, #ffffff);
+  --ground: var(--n133-ground, #f4f7fb);
+  --line: var(--n133-line, #dbe4ee);
+  --gem: var(--n133-gem, #20c9a6);
+  --gem-dark: var(--n133-gem-dark, #0e8a72);
+  --on-gem: var(--n133-on-gem, #062b23);
+  --dim: rgb(16 24 40 / 0.36);
+  --shade: 16 24 40;
+  display: inline-block;
+  color: var(--ink);
+  color-scheme: light;
+  font: 15px/1.4 var(--font);
+}
+
+.n133-emotes[data-theme="dark"] {
+  --ink: var(--n133-dark-ink, #e7edf5);
+  --ink-soft: var(--n133-dark-ink-soft, #a9b5c5);
+  --paper: var(--n133-dark-paper, #171f2b);
+  --ground: var(--n133-dark-ground, #0f151e);
+  --line: var(--n133-dark-line, #3a475b);
+  --gem: var(--n133-dark-gem, #20c9a6);
+  --gem-dark: var(--n133-dark-gem-dark, #3fd8b6);
+  --on-gem: var(--n133-dark-on-gem, #062b23);
+  --dim: rgb(0 0 0 / 0.5);
+  --shade: 0 0 0;
+  color-scheme: dark;
+}
+
+.n133-emotes *,
+.n133-emotes *::before,
+.n133-emotes *::after {
+  box-sizing: border-box;
+}
+
+/* The key. A hold on it that slides onto the wheel must not scroll or zoom the page, nor open the phone's own menu. */
+.n133-emotes .n133e-key {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  font: 650 15px/1 var(--font);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.n133-emotes .n133e-key[hidden] {
+  display: none;
+}
+
+/* The dim page and the wheel in the middle of it. */
+.n133-emotes .n133e-layer {
+  position: fixed;
+  z-index: var(--n133-emotes-z, 1000);
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
+  background: var(--dim);
+  touch-action: none;
+}
+
+.n133-emotes .n133e-layer[hidden] {
+  display: none;
+}
+
+.n133-emotes .n133e-wheel {
+  --r: clamp(96px, 29vmin, 140px);
+  --slot: clamp(66px, 20vmin, 90px);
+  position: relative;
+  flex: none;
+  width: calc(2 * var(--r) + var(--slot) + 8px);
+  height: calc(2 * var(--r) + var(--slot) + 8px);
+}
+
+/* A low screen (a phone on its side): a little smaller, so the top place stays inside the screen. */
+@media (max-height: 500px) {
+  .n133-emotes .n133e-wheel {
+    --r: clamp(84px, 26vmin, 120px);
+    --slot: clamp(60px, 18vmin, 80px);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .n133-emotes .n133e-wheel {
+    animation: n133e-in 0.12s ease-out;
+  }
+}
+
+@keyframes n133e-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+}
+
+.n133-emotes .n133e-ring {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: calc(2 * var(--r) + var(--slot) * 0.7);
+  height: calc(2 * var(--r) + var(--slot) * 0.7);
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--paper) 94%, transparent);
+  box-shadow: 0 10px 40px rgb(var(--shade) / 0.28);
+}
+
+.n133-emotes .n133e-slot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: var(--slot);
+  height: var(--slot);
+  margin: calc(var(--slot) / -2) 0 0 calc(var(--slot) / -2);
+  padding: 0 0 4px;
+  transform: translate(calc(var(--x) * var(--r)), calc(var(--y) * var(--r)));
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  background: var(--ground);
+  color: var(--ink);
+  box-shadow: 0 2px 6px rgb(var(--shade) / 0.14);
+  font: 700 11px/1.05 var(--font);
+  cursor: pointer;
+  touch-action: none;
+  /* Over the middle disc, so a place's corner key is never under it. */
+  z-index: 1;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.n133-emotes .n133e-slot.is-lit {
+  border-color: var(--gem-dark);
+  background: var(--gem);
+  color: var(--on-gem);
+  scale: 1.1;
+}
+
+.n133-emotes .n133e-slot.is-empty {
+  border-style: dashed;
+  background: transparent;
+  box-shadow: none;
+}
+
+.n133-emotes .n133e-pic,
+.n133-emotes .n133e-tile-pic {
+  background-repeat: no-repeat;
+}
+
+.n133-emotes .n133e-pic {
+  width: 62%;
+  height: 62%;
+}
+
+.n133-emotes .is-own {
+  background-position: center;
+  background-size: contain;
+}
+
+.n133-emotes .n133e-name {
+  max-width: 92%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.n133-emotes .n133e-plus {
+  font: 700 26px/1 var(--font);
+  opacity: 0.55;
+}
+
+/* A place's key (1 to 8): only where there is a keyboard and a mouse. Edit's × sits in the same corner. */
+.n133-emotes .n133e-num,
+.n133-emotes .n133e-off {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 22px;
+  height: 22px;
+  border-radius: 11px;
+  background: var(--ink);
+  color: var(--paper);
+  font: 700 12px/22px var(--font);
+  text-align: center;
+}
+
+.n133-emotes .n133e-num {
+  display: none;
+}
+
+.n133-emotes .n133e-off {
+  font-size: 16px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .n133-emotes .n133e-num {
+    display: block;
+  }
+
+  .n133-emotes .n133e-slot:hover:not(.is-empty) {
+    border-color: var(--gem-dark);
+    background: var(--gem);
+    color: var(--on-gem);
+  }
+}
+
+/* The middle disc: the name of the place under the finger, and Edit. */
+.n133-emotes .n133e-hub {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: calc(2 * (var(--r) - var(--slot) / 2) - 14px);
+  height: calc(2 * (var(--r) - var(--slot) / 2) - 14px);
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  background: var(--paper);
+  color: var(--ink);
+  text-align: center;
+}
+
+.n133-emotes .n133e-hub-name {
+  max-width: 90%;
+  font: 750 15px/1.1 var(--font);
+}
+
+.n133-emotes .n133e-edit,
+.n133-emotes .n133e-tile {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.n133-emotes .n133e-edit {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 14px;
+  border-radius: 12px;
+  font: 650 14px/1 var(--font);
+}
+
+.n133-emotes .n133e-edit[aria-pressed="true"] {
+  border-color: var(--gem-dark);
+  background: var(--gem);
+  color: var(--on-gem);
+}
+
+.n133-emotes :is(.n133e-key, .n133e-slot, .n133e-edit, .n133e-tile):focus-visible {
+  outline: 3px solid var(--gem);
+  outline-offset: 2px;
+}
+
+/* Edit: every emote under the wheel (beside it on a low screen); a tap puts one on or takes it off. */
+.n133-emotes .n133e-layer.is-edit .n133e-wheel {
+  --r: clamp(84px, 24vmin, 118px);
+  --slot: clamp(58px, 17vmin, 78px);
+}
+
+.n133-emotes .n133e-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 46vh;
+  max-width: 100%;
+  padding: 10px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--paper);
+  box-shadow: 0 10px 40px rgb(var(--shade) / 0.28);
+  touch-action: pan-y;
+}
+
+.n133-emotes .n133e-list[hidden] {
+  display: none;
+}
+
+.n133-emotes .n133e-list-line {
+  margin: 0;
+  color: var(--ink-soft);
+  font: 600 13px/1.25 var(--font);
+  text-align: center;
+}
+
+.n133-emotes .n133e-list-line.is-full {
+  color: var(--ink);
+  font-weight: 750;
+}
+
+.n133-emotes .n133e-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 74px);
+  gap: 6px;
+  justify-content: center;
+}
+
+.n133-emotes .n133e-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1px;
+  width: 74px;
+  height: 78px;
+  padding: 2px 2px 5px;
+  border-radius: 12px;
+  font: 650 12px/1.1 var(--font);
+}
+
+.n133-emotes .n133e-tile.is-on {
+  border-color: var(--gem-dark);
+  background: color-mix(in srgb, var(--gem) 22%, var(--paper));
+}
+
+.n133-emotes .n133e-tile-pic {
+  width: 54px;
+  height: 54px;
+}
+
+.n133-emotes .n133e-tile-name {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.n133-emotes .n133e-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 22px;
+  height: 22px;
+  border-radius: 11px;
+  background: var(--gem);
+  color: var(--on-gem);
+  font: 700 12px/22px var(--font);
+  text-align: center;
+}
+
+@media (hover: hover) {
+  .n133-emotes .n133e-tile:hover {
+    border-color: var(--gem-dark);
+  }
+}
+
+@media (orientation: landscape) and (max-height: 600px) {
+  .n133-emotes .n133e-layer.is-edit {
+    flex-direction: row;
+  }
+
+  .n133-emotes .n133e-layer.is-edit .n133e-list {
+    max-height: calc(100vh - 24px);
+    max-height: calc(100dvh - 24px);
+  }
+
+  .n133-emotes .n133e-grid {
+    grid-template-columns: repeat(4, 70px);
+  }
+
+  .n133-emotes .n133e-tile {
+    width: 70px;
+    height: 70px;
+  }
+
+  .n133-emotes .n133e-tile-pic {
+    width: 46px;
+    height: 46px;
+  }
+}
+
+/* A narrow phone held upright: three tiles a row, so Edit stays inside the screen. */
+@media (max-width: 340px) {
+  .n133-emotes .n133e-grid {
+    grid-template-columns: repeat(3, 74px);
+  }
+}

package/src/emotes/player.ts

@@ -0,0 +1,131 @@
+// "@nano133/nanoterra/emotes/player": Nanoterra's emotes on the kit's character (createCharacter of "@nano133/nanoterra/character"). Three.js, as the
+// character is. A clip plays as a layer over the character's pose (../character/layer.ts), so the game calls nothing new each frame: its usual
+// `character.update(dt, motion)` plays the emote too, after the walk and before the tail, the wings and the long hair.
+//
+//   const emotes = createEmotes(hero, { onEmote: (e) => send(emoteMessage(e)) }); // the local player
+//   emotes.play("dance");                                                          // from the wheel's onPlay
+//   playRemote(other, { id: msg.emote });                                          // another player's emote, from your network
+//
+// The Wave is the character's own `wave()`; the ten others are clips, which load on the first emote (`loadEmotes`, one chunk of their own).
+
+import type { Character } from "../character/create.js";
+import { setPoseLayer } from "../character/layer.js";
+import { newRun, startClip, stepClip, stopClip, type ClipRun } from "./clip.js";
+import { LOOP_AGAIN_MS, type EmoteEvent, type EmoteStop } from "./events.js";
+import { emoteOf, isEmote } from "./list.js";
+import { readEmoteOptions, type EmoteOptionsStore } from "./options.js";
+
+export { emoteClip, emotesLoaded, loadEmotes, FADE_END, FADE_IN, FADE_STOP } from "./clip.js";
+
+/** How fast a character must go before a full clip stops (m/s, the pose's eased speed): the island's. */
+const MOVING = 0.4;
+
+/** What a character keeps for its emotes: its clip run, the last play it was given (by `at`), and the local player's events. */
+type State = {
+  run: ClipRun;
+  seen: number;
+  /** The age of the run when its loop was last sent. */
+  sent: number;
+  local: EmotesOptions | null;
+};
+const states = new WeakMap<Character, State>();
+
+const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+
+/** The character's state, and its layer, made on its first emote. */
+function stateOf(character: Character): State {
+  let st = states.get(character);
+  if (st) return st;
+  const s: State = { run: newRun(), seen: Number.NaN, sent: 0, local: null };
+  setPoseLayer(character, (bones, f) => {
+    const was = s.run.id;
+    stepClip(s.run, bones, { dt: f.dt, moving: f.speed > MOVING, air: f.airborne, swim: false, calm: f.reducedMotion });
+    if (!s.local) return;
+    if (was && !s.run.id && s.run.ended) s.local.onStop?.({ id: was, at: now(), why: s.run.ended });
+    else if (s.run.id && emoteOf(s.run.id)?.loop && s.run.stopAge < 0 && s.run.age - s.sent >= LOOP_AGAIN_MS / 1000) {
+      // A loop is sent again while it plays, so a player who comes later sees it.
+      s.sent = s.run.age;
+      s.local.onEmote?.({ id: s.run.id, loop: true, at: now(), again: true });
+    }
+  });
+  states.set(character, s);
+  st = s;
+  return st;
+}
+
+/** Plays a Nanoterra emote on a character: the Wave is its own `wave()`, the others start a clip. False for an id that is not one. */
+function start(character: Character, id: unknown, age = 0): id is string {
+  if (!isEmote(id)) return false;
+  if (id === "wave") {
+    character.wave();
+    return true;
+  }
+  const st = stateOf(character);
+  startClip(st.run, id, age);
+  return true;
+}
+
+export type EmotesOptions = {
+  /** The player played an emote (and again every 10 s while a loop plays): send `emoteMessage(e)` to the other players. */
+  onEmote?: (e: EmoteEvent) => void;
+  /** The player's clip ended: its end, a move, the water or `stop`. Nothing to send for a move (the others see it); see the README for `stop`. */
+  onStop?: (e: EmoteStop) => void;
+};
+
+export type LocalEmotes = {
+  /** Plays a Nanoterra emote on the player's character (the wheel's onPlay). False, and nothing happens, for an id that is not one. */
+  play(id: string): boolean;
+  /** Stops the player's clip, with its fade. A game with water calls it when the character goes in. */
+  stop(): void;
+  /** The clip on show, or null (the Wave is not a clip: it is never here). */
+  readonly playing: string | null;
+  /** Stops listening (`onEmote`, `onStop`). The character keeps playing what it plays. */
+  destroy(): void;
+};
+
+/** The local player's emotes on their character, with the events a multiplayer game sends on. */
+export function createEmotes(character: Character, options: EmotesOptions = {}): LocalEmotes {
+  const st = stateOf(character);
+  st.local = options;
+  return {
+    play(id) {
+      if (!start(character, id)) return false;
+      st.sent = 0;
+      options.onEmote?.({ id, loop: emoteOf(id)?.loop === true, at: now(), again: false });
+      return true;
+    },
+    stop() {
+      stopClip(st.run);
+    },
+    get playing() {
+      return st.run.id;
+    },
+    destroy() {
+      if (st.local === options) st.local = null;
+    },
+  };
+}
+
+/** Another player's emote: its id, and when it came (performance.now(); left out: now). */
+export type RemotePlay = { id: unknown; at?: number };
+
+/**
+ * Plays another player's emote on their character (from the game's network). An id that is not a Nanoterra emote is ignored (false). The same play
+ * given again (the same `at`) is ignored, so a game may pass the last one every frame; a loop that is on show goes on through a repeat. With an
+ * options store whose `emotes.others` is off, nothing plays.
+ */
+export function playRemote(character: Character, play: RemotePlay, opts: { options?: EmoteOptionsStore | null } = {}): boolean {
+  if (!play || typeof play !== "object" || !isEmote(play.id)) return false;
+  if (!readEmoteOptions(opts.options).others) return false;
+  const at = typeof play.at === "number" && Number.isFinite(play.at) ? play.at : now();
+  const st = stateOf(character);
+  if (st.seen === at) return false;
+  st.seen = at;
+  return start(character, play.id, (now() - at) / 1000);
+}
+
+/** Stops a character's clip with its fade (a remote player's, when the game hears a stop, or any character that goes into water). */
+export function stopEmote(character: Character): void {
+  const st = states.get(character);
+  if (st) stopClip(st.run);
+}

package/src/emotes/wheel.ts

@@ -0,0 +1,131 @@
+// The player's emote wheel: eight places round the wheel, slot 1 at the top and on clockwise, each an emote or empty. The player picks which emotes sit
+// there from every emote the game offers (Edit in the panel), so the list can grow past eight. Kept in this browser per game, under `n133-emotes:<game>`;
+// a browser with nothing kept, or a storage that is refused (some private windows), has the game's default wheel and keeps changes for the page's life.
+// No DOM and no Three.js here: the panel (./panel) draws it.
+
+import { EMOTES } from "./list.js";
+
+export const WHEEL_SLOTS = 8;
+/** The localStorage key of a game's wheel. */
+export const wheelKey = (game: string) => `n133-emotes:${game}`;
+/** A wheel: eight places, each an emote's id once, or null (empty). */
+export type Slots = readonly (string | null)[];
+/** Nanoterra's wheel before the player changes it (the island's): the eight most social emotes. Bow, Shrug and Facepalm wait in Edit. */
+export const DEFAULT_WHEEL: Slots = ["wave", "cheer", "clap", "dance", "laugh", "point", "sit", "spin"];
+/** What the player is told when they put a ninth emote on the wheel. */
+export const WHEEL_FULL = "Your wheel is full. Take one off first.";
+
+/** Eight places from a list (cut, or filled with empty places), each id of `known` once. */
+function fit(list: readonly unknown[], known: ReadonlySet<string>): Slots {
+  const seen = new Set<string>();
+  return Array.from({ length: WHEEL_SLOTS }, (_, i) => {
+    const x = list[i];
+    if (typeof x !== "string" || !known.has(x) || seen.has(x)) return null;
+    seen.add(x);
+    return x;
+  });
+}
+
+/** The first wheel for a list of emotes: `defaults` when given (each id of the list once), else the island's wheel for Nanoterra's list, else the list's first eight. */
+export function defaultWheel(ids: readonly string[], defaults?: readonly (string | null)[]): Slots {
+  const known = new Set(ids);
+  if (defaults) return fit(defaults, known);
+  const island = fit(DEFAULT_WHEEL, known);
+  return island.some((x) => x !== null) ? island : fit(ids, known);
+}
+
+/** A kept wheel: eight places, each an emote of `ids` once or empty. Anything else (no key, broken text, another length) is `fallback`. */
+export function readWheel(raw: string | null | undefined, ids: readonly string[], fallback: Slots): Slots {
+  if (!raw) return fallback;
+  try {
+    const v = JSON.parse(raw) as unknown;
+    if (!Array.isArray(v) || v.length !== WHEEL_SLOTS) return fallback;
+    return fit(v, new Set(ids));
+  } catch {
+    return fallback;
+  }
+}
+
+/** The emote put on (in the first empty place), taken off, or refused because all eight places are full. */
+export function toggleSlot(slots: Slots, id: string): { slots: Slots; did: "added" | "removed" | "full" } {
+  const at = slots.indexOf(id);
+  if (at >= 0) return { slots: slots.map((x, i) => (i === at ? null : x)), did: "removed" };
+  const free = slots.indexOf(null);
+  if (free < 0) return { slots, did: "full" };
+  return { slots: slots.map((x, i) => (i === free ? id : x)), did: "added" };
+}
+
+type Store = Pick<Storage, "getItem" | "setItem">;
+
+/** The page's localStorage, or null where reading it throws. */
+function pageStorage(): Store | null {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export type WheelOptions = {
+  /** The game's id: each game keeps its own wheel. */
+  game: string;
+  /** Every emote the player may put on the wheel, by id. Default: Nanoterra's eleven. */
+  ids?: readonly string[];
+  /** The eight places before the player changes them. Default: see `defaultWheel`. */
+  defaults?: readonly (string | null)[];
+  /** Where the wheel is kept (default: the page's localStorage). null keeps it only for the life of the page. */
+  storage?: Store | null;
+};
+
+export type Wheel = {
+  /** The eight places now. */
+  readonly slots: Slots;
+  /** Puts an emote on (its first empty place) or takes it off; "full" changes nothing. */
+  toggle(id: string): "added" | "removed" | "full";
+  /** Takes the emote off a place. */
+  clear(slot: number): void;
+  /** Hears every change. Returns the call that stops it. */
+  subscribe(listen: (slots: Slots) => void): () => void;
+};
+
+/** A game's wheel, read from this browser (or the default), and kept there on each change. */
+export function createWheel(options: WheelOptions): Wheel {
+  const ids = options.ids ?? EMOTES.map((e) => e.id);
+  const storage = options.storage === undefined ? pageStorage() : options.storage;
+  const key = wheelKey(options.game);
+  let raw: string | null = null;
+  try {
+    raw = storage?.getItem(key) ?? null;
+  } catch {
+    raw = null;
+  }
+  let slots = readWheel(raw, ids, defaultWheel(ids, options.defaults));
+  const listeners = new Set<(slots: Slots) => void>();
+  const set = (next: Slots) => {
+    slots = next;
+    try {
+      storage?.setItem(key, JSON.stringify(next));
+    } catch {
+      // A full or refused storage: the wheel still works for this page.
+    }
+    for (const l of listeners) l(slots);
+  };
+  return {
+    get slots() {
+      return slots;
+    },
+    toggle(id) {
+      const r = toggleSlot(slots, id);
+      if (r.did !== "full") set(r.slots);
+      return r.did;
+    },
+    clear(slot) {
+      if (slots[slot] == null) return;
+      set(slots.map((x, i) => (i === slot ? null : x)));
+    },
+    subscribe(listen) {
+      listeners.add(listen);
+      return () => listeners.delete(listen);
+    },
+  };
+}