rpg-engine 0.0.0-stage → 0.1.0

package/dist/dashboard/assets/master.svg

@@ -0,0 +1,71 @@
+<svg class="robot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img">
+  <title>Robot game master</title>
+  <g class="robot-head">
+    <g class="robot-antenna" fill="#DCAA32"><rect x="409" y="47" width="14" height="117" rx="7"/><circle cx="416" cy="45" r="19"/></g>
+    <g class="robot-ears" fill="#DCAA32"><rect x="74" y="154" width="64" height="91" rx="20"/><rect x="374" y="154" width="64" height="91" rx="20"/></g>
+    <path class="robot-housing" fill="#F4C84C" d="M158 66H354Q396 66 396 108V254Q396 292 354 292H158Q116 292 116 254V108Q116 66 158 66Z"/>
+    <rect class="robot-display" x="143" y="126" width="226" height="135" rx="29" fill="#192D4D"/>
+    <g class="robot-mood robot-mood-neutral">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="208" r="16"/><circle cx="288" cy="208" r="16"/></g>
+      <g class="robot-mouth" fill="#FFF4D5"><rect x="242" y="232" width="28" height="12" rx="6"/></g>
+    </g>
+    <g class="robot-mood robot-mood-happy" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="208" r="16"/><circle cx="288" cy="208" r="16"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M240 232Q256 251 272 232"/></g>
+    </g>
+    <g class="robot-mood robot-mood-surprised" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="208" r="16"/><circle cx="288" cy="208" r="16"/></g>
+      <g class="robot-mouth" fill="#FFF4D5"><ellipse cx="256" cy="239" rx="11" ry="13"/></g>
+    </g>
+    <g class="robot-mood robot-mood-curious" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="208" r="16"/><circle cx="288" cy="208" r="16"/></g>
+      <g class="robot-mouth" fill="#FFF4D5"><rect x="244" y="232" width="24" height="12" rx="6"/></g>
+    </g>
+    <g class="robot-mood robot-mood-focused" display="none">
+      <g class="robot-eyes" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M211 208H237M275 208H301"/></g>
+      <g class="robot-mouth" fill="#FFF4D5"><rect x="242" y="232" width="28" height="12" rx="6"/></g>
+    </g>
+    <g class="robot-mood robot-mood-worried" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="208" r="16"/><circle cx="288" cy="208" r="16"/></g>
+      <g class="robot-mouth" fill="#FFF4D5"><rect x="244" y="233" width="24" height="12" rx="6"/></g>
+      <g class="robot-brows" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M211 182L234 174M278 174L301 182"/></g>
+    </g>
+    <g class="robot-mood robot-mood-sad" display="none">
+      <g class="robot-eyes" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M208 215Q224 187 240 215M272 215Q288 187 304 215"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M242 245Q256 227 270 245"/></g>
+    </g>
+    <g class="robot-mood robot-mood-mischievous" display="none">
+      <g class="robot-eyes" fill="#FFF4D5" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><circle cx="224" cy="208" r="16" stroke="none"/><path d="M276 208H300" fill="none"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M240 234Q257 250 274 230"/></g>
+    </g>
+    <g class="robot-mood robot-mood-delighted" display="none">
+      <g class="robot-eyes" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M208 215Q224 187 240 215M272 215Q288 187 304 215"/></g>
+      <g class="robot-mouth" fill="#FFF4D5"><path d="M240 232H272Q272 254 256 254Q240 254 240 232Z"/></g>
+    </g>
+    <g class="robot-mood robot-mood-determined" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="210" r="15"/><circle cx="288" cy="210" r="15"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M240 242Q258 240 274 234"/></g>
+      <g class="robot-brows" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M209 180L237 187M275 187L303 180"/></g>
+    </g>
+    <g class="robot-mood robot-mood-afraid" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="210" r="18"/><circle cx="288" cy="210" r="18"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"><path d="M236 246L246 239L256 246L266 239L276 246"/></g>
+      <g class="robot-brows" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M208 177L234 165M278 165L304 177"/></g>
+    </g>
+    <g class="robot-mood robot-mood-angry" display="none">
+      <g class="robot-eyes robot-can-blink" fill="#FFF4D5"><circle cx="224" cy="212" r="14"/><circle cx="288" cy="212" r="14"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M238 247Q256 233 274 247"/></g>
+      <g class="robot-brows" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M207 172L238 189M274 189L305 172"/></g>
+    </g>
+    <g class="robot-mood robot-mood-disgusted" display="none">
+      <g class="robot-eyes" fill="#FFF4D5"><path d="M208 206H240A16 16 0 0 1 208 206ZM272 206H304A16 16 0 0 1 272 206Z"/></g>
+      <g class="robot-mouth" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"><path d="M238 246Q247 236 256 243Q265 249 274 238"/></g>
+      <g class="robot-brows" fill="none" stroke="#FFF4D5" stroke-width="12" stroke-linecap="round"><path d="M210 186H237M276 178L302 168"/></g>
+    </g>
+  </g>
+  <g class="robot-screen">
+    <path class="robot-screen-side" fill="#29477F" d="M50 252Q38 248 38 262V415Q38 424 48 430L132 478H380L464 430Q474 424 474 415V262Q474 248 462 252L380 280H132Z"/>
+    <path class="robot-screen-front" fill="#4268B2" d="M132 280H380V478H132Z"/>
+    <path class="robot-die" fill="#29477F" d="M256 313L313 346V412L256 445L199 412V346Z"/>
+  </g>
+</svg>

package/dist/dashboard/card.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+// Up to this width the cards start closed.
+const narrow = "(max-width: 600px)";
+// The chevron: down while the card is closed, turned up once it is open.
+const chevronPath = "M6 9.5l6 6 6-6";
+/**
+ * Whether a card is open, and what opens and closes it: only the player's click, which the browser remembers by the card's name; the page setting it is not.
+ * Until then a card starts closed on a phone, but the one that is `first`.
+ */
+export function useOpen(name, first = false) {
+    const [open, setOpen] = useState(() => storedOpen(name, first));
+    const toggle = (event) => {
+        event.preventDefault();
+        setOpen(!open);
+        storeOpen(name, !open);
+    };
+    return [open, toggle];
+}
+/** Whether the window matches a media query, as it changes. */
+export function useMedia(query) {
+    const [matches, setMatches] = useState(() => matchMedia(query).matches);
+    useEffect(() => {
+        const list = matchMedia(query);
+        const follow = () => setMatches(list.matches);
+        list.addEventListener("change", follow);
+        return () => list.removeEventListener("change", follow);
+    }, [query]);
+    return matches;
+}
+/**
+ * A card's header, all of it the toggle: its icon, its title, what it holds while closed, for the eye alone, and the chevron; a card that stays open has no
+ * chevron and does not close.
+ */
+export function CardHeader({ icon, title, preview, open, onToggle, fixed }) {
+    return (_jsxs("summary", { class: fixed ? "fixed" : undefined, onClick: fixed ? (event) => event.preventDefault() : onToggle, children: [_jsx("svg", { class: "card-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: icon }) }), title, !open && preview !== undefined && _jsx("span", { class: "preview", "aria-hidden": "true", children: preview }), !fixed && (_jsx("svg", { class: "chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: chevronPath }) }))] }));
+}
+/** The header of a card that is always open, as Combat's (D-419): the look of a card's header, its icon, its title, and a note at its end; no toggle. */
+export function CardHead({ icon, title, note }) {
+    return (_jsxs("header", { class: "card-head", children: [_jsx("svg", { class: "card-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: icon }) }), title, note !== undefined && _jsx("span", { class: "card-head-note", children: note })] }));
+}
+function storedOpen(name, first) {
+    try {
+        const stored = localStorage.getItem(`rpg-group:${name}`);
+        if (stored !== null) {
+            return stored === "open";
+        }
+    }
+    catch {
+        // No storage, as in a private window: the default.
+    }
+    return first || !matchMedia(narrow).matches;
+}
+function storeOpen(name, open) {
+    try {
+        localStorage.setItem(`rpg-group:${name}`, open ? "open" : "closed");
+    }
+    catch {
+        // No storage: it is only remembered while the page is open.
+    }
+}

package/dist/dashboard/columns.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import { columnsByHeight } from "./layout.js";
+// The narrowest a column gets, and the room between two, in pixels: the page's one room, --gap in the style sheet.
+const columnWidth = 300;
+const columnGap = 16;
+export function FixedColumns({ cards }) {
+    const holder = useRef(null);
+    const [count, setCount] = useState(1);
+    const [placed, setPlaced] = useState();
+    const keys = cards.map((card) => card.key).join("\n");
+    const current = placed !== undefined && placed.count === count && placed.keys === keys ? placed : undefined;
+    // As many columns as fit the width.
+    useLayoutEffect(() => {
+        const element = holder.current;
+        if (element === null) {
+            return;
+        }
+        const measure = () => setCount(Math.max(1, Math.floor((element.clientWidth + columnGap) / (columnWidth + columnGap))));
+        measure();
+        const watcher = new ResizeObserver(measure);
+        watcher.observe(element);
+        return () => watcher.disconnect();
+    }, []);
+    // Placed again only when the columns or the cards change: each card in its order into the shortest column, by the heights the cards have now.
+    useLayoutEffect(() => {
+        if (current !== undefined || holder.current === null) {
+            return;
+        }
+        const heights = new Map([...holder.current.querySelectorAll("[data-card]")].map((slot) => [slot.dataset.card ?? "", slot.offsetHeight]));
+        const columns = columnsByHeight(cards.map((card) => heights.get(card.key) ?? 0), count);
+        setPlaced({ count, keys, columns: new Map(cards.map((card, index) => [card.key, columns[index]])) });
+    });
+    // Until they are measured, the cards go round the columns in their order.
+    const columnOf = (key, index) => current?.columns.get(key) ?? index % count;
+    return (_jsx("div", { ref: holder, class: "fixed-columns", children: Array.from({ length: count }, (_, column) => (_jsx("div", { class: "fixed-column", children: cards.map((card, index) => columnOf(card.key, index) === column && (_jsx("div", { "data-card": card.key, children: card.node }, card.key))) }, column))) }));
+}

package/dist/dashboard/combat.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The Combat section (D-314, D-315): only while the open scene is a fight. On top the band: the round, who acts, who comes next, the line of now; gold when it is
+// the player's turn. Under it the order of the turns, fixed, the mark moving, each one a small card (D-419): their place in a strip that lights up on their
+// turn, their counter, the party's as numbers and a foe's in words, their state as icons, what they keep, the death saves at 0. Beside it what the player's
+// character has at hand, the fields and groups of its sheet the system names; every card with its header. The page never decides a rule: it shows.
+import { sectionAddress } from "./address.js";
+import { CardHead } from "./card.js";
+import { Icon, iconPath } from "./icons.js";
+import { fieldLabel, shownText, strangerLabel } from "./labels.js";
+import { stripCounter } from "./layout.js";
+import { PageHead } from "./pages.js";
+import { sideOf, Token } from "./party.js";
+import { PlaceMap } from "./place-map-view.js";
+import { SheetAtHand } from "./sheet.js";
+import { StatusIcons, StatusPip } from "./status.js";
+import { t } from "./text.js";
+import { Bar, DeathSaves } from "./widgets.js";
+export function CombatView({ scene, lead, party, own, map, place }) {
+    const fighters = scene?.type === "combat" ? scene.fighters ?? [] : undefined;
+    if (scene === undefined || fighters === undefined) {
+        return (_jsxs("section", { class: "page-stack", "aria-labelledby": "combat-title", children: [_jsx(PageHead, { section: "combat", id: "combat-title" }), _jsxs("div", { class: "upcoming", children: [_jsx("p", { children: t("There is no fight now.") }), _jsx("p", { class: "upcoming-note", children: _jsx("a", { href: sectionAddress("scene"), children: t("Where the party is") }) })] })] }));
+    }
+    const acting = fighters.findIndex((fighter) => fighter.name === scene.turn);
+    const next = acting < 0 || fighters.length < 2 ? undefined : fighters[(acting + 1) % fighters.length];
+    const mine = lead !== undefined && scene.turn === lead.name;
+    const self = fighters.find((fighter) => fighter.role === "pc");
+    const order = (_jsxs("section", { class: "turns-card", "aria-labelledby": "turns-title", children: [_jsx(CardHead, { icon: iconPath("list"), title: _jsx("h3", { id: "turns-title", children: t("Turns") }), ...(scene.round === undefined ? {} : { note: t("Round {round}", { round: scene.round }) }) }), _jsx("ol", { class: "turn-order", "aria-label": t("The order of the turns"), children: fighters.map((fighter, index) => (_jsx(FighterRow, { fighter: fighter, member: party.find((one) => one.role === fighter.role && one.name === fighter.name), place: index + 1, acting: index === acting }, `${fighter.name} ${index}`))) })] }));
+    const atHand = lead && self && (own.cards?.atHand.length ?? 0) > 0 ? _jsx(AtHand, { lead: lead, fighter: self, own: own }) : null;
+    return (_jsxs("section", { class: "combat", "aria-labelledby": "combat-title", children: [_jsxs("header", { class: mine ? "turn-band mine" : `turn-band ${acting < 0 ? "" : fighters[acting].role}`, children: [scene.round !== undefined && (_jsxs("p", { class: "round", children: [_jsx("span", { class: "eyebrow", children: t("Round") }), _jsx("span", { class: "round-number", children: scene.round })] })), _jsxs("div", { class: "turn-now", children: [acting >= 0 && _jsx(FighterToken, { fighter: fighters[acting] }), _jsxs("div", { "aria-live": "polite", "aria-atomic": "true", children: [_jsx("p", { class: "eyebrow", children: mine ? t("Your turn") : t("Now acting") }), _jsx("h2", { id: "combat-title", children: mine ? lead?.name : acting < 0 ? scene.title : shownName(fighters[acting]) })] })] }), next && (_jsxs("p", { class: "turn-next", children: [_jsx("span", { class: "eyebrow", children: t("Next") }), _jsxs("span", { class: "next-who", children: [_jsx(FighterToken, { fighter: next, pip: false }), next.role === "pc" ? t("You") : shownName(next)] })] })), scene.now && _jsx("p", { class: "scene-line", children: scene.now })] }), map === undefined
+                ? (_jsxs("div", { class: "combat-body", children: [order, atHand] }))
+                : (_jsxs("div", { class: "combat-body with-map", children: [_jsxs("div", { class: "lm-side", children: [order, atHand] }), _jsx(PlaceMap, { map: map, place: place ?? scene.title, acting: scene.turn })] }))] }));
+}
+/**
+ * One in the order (D-315), as a small card (D-419): their place, token and name, their counter, their state as icons (whether they act, at 0, what is on
+ * them), what they keep; the death saves at 0. Their token has no pip of state: the icons beside it say it.
+ */
+function FighterRow({ fighter, member, place, acting }) {
+    // One of the party has the bar of their strip (D-419), the icons under it.
+    const counter = member === undefined ? undefined : stripCounter(member);
+    return (_jsxs("li", { class: ["turn-row", fighter.role, acting ? "now" : ""].filter((part) => part !== "").join(" "), "aria-current": acting ? "step" : undefined, children: [_jsx("span", { class: "turn-place", children: place }), _jsx(FighterToken, { fighter: fighter, state: false }), _jsxs("div", { class: "turn-main", children: [_jsxs("p", { class: "turn-name", children: [shownName(fighter), fighter.role === "pc" && _jsx("span", { class: "you", children: t("You") })] }), counter !== undefined && _jsx(Bar, { value: counter, label: fieldLabel(counter.field) }), _jsxs("div", { class: "turn-facts", children: [counter === undefined && fighter.health && (fighter.role === "other" ? _jsx("span", { class: `wound ${fighter.health}`, children: healthLabel(fighter.health) }) : _jsx("span", { class: "turn-health num", children: shownText(fighter.health) })), _jsx(StatusIcons, { status: fighterStatus(fighter) })] }), fighter.keeps && _jsx("p", { class: "keeping", children: t("Keeping {what}", { what: fighter.keeps.join(", ") }) }), fighter.dying && _jsx(DeathSaves, { dying: fighter.dying })] })] }));
+}
+/** What the player's character has at hand (D-315): what it keeps, the fields and groups of its sheet the system names; at 0 only the death saves. */
+function AtHand({ lead, fighter, own }) {
+    return (_jsxs("aside", { class: "at-hand", "aria-labelledby": "at-hand-title", children: [_jsx(CardHead, { icon: iconPath("party"), title: _jsx("h3", { id: "at-hand-title", children: lead.name }), note: t("At hand") }), fighter.dying ? _jsx(DeathSaves, { dying: fighter.dying }) : (_jsxs(_Fragment, { children: [fighter.keeps && _jsx("p", { class: "keeping", children: t("Keeping {what}", { what: fighter.keeps.join(", ") }) }), _jsx(SheetAtHand, { member: lead, sheet: own.sheet, names: own.cards?.atHand ?? [], version: own.version, onRoll: own.onRoll })] }))] }));
+}
+/**
+ * A fighter's token; a foe the master marked glows red a little, with no pip (D-415); one of the party with the pip of their side unless it is too small for one
+ * (D-414); with the pip of their state unless `state` is false (D-419).
+ */
+function FighterToken({ fighter, pip = true, state = true }) {
+    const status = state ? fighterStatus(fighter) : undefined;
+    // A stranger's number, as Creature 2's or, with more kinds, Creature B1's, the same on their token on the map (D-325, D-331).
+    const number = fighter.stranger ? /[A-Z]?\d+$/.exec(fighter.name)?.[0] : undefined;
+    const hostile = fighter.hostile === true;
+    // A stranger with a picture of their own, made from what is seen, shows it, with their number in its corner (D-420).
+    return fighter.stranger && fighter.image === undefined
+        ? (_jsxs("span", { class: ["token stranger", number === undefined ? "" : "numbered", hostile ? "hostile" : ""].filter((name) => name !== "").join(" "), "aria-hidden": "true", children: [number ?? _jsx(Icon, { name: "stranger" }), _jsx(StatusPip, { status: status })] }))
+        : (_jsx(Token, { member: { name: fighter.name, role: fighter.role, ...(fighter.image === undefined ? {} : { image: fighter.image }), ...(fighter.icon === undefined ? {} : { icon: fighter.icon }) }, hostile: hostile, side: pip ? sideOf(fighter.role) : undefined, ...(status === undefined ? {} : { status }), number: number }));
+}
+/** A fighter's state: what is on them, whether they act, and at 0 the party's dying point or a foe down. */
+function fighterStatus(fighter) {
+    return { effects: fighter.effects, inactive: fighter.inactive === true, down: fighter.dying !== undefined || fighter.health === "down" };
+}
+/** A fighter's name as the page writes it: Creature 2 for "creature 2", Someone for "someone". */
+function shownName(fighter) {
+    return fighter.stranger ? strangerLabel(fighter.name) : fighter.name;
+}
+/** How hurt a foe looks, in the page's language (D-314): unhurt, hurt, bloodied, down. */
+function healthLabel(health) {
+    const labels = { unhurt: t("unhurt"), hurt: t("hurt"), bloodied: t("bloodied"), down: t("down") };
+    return labels[health] ?? health;
+}

package/dist/dashboard/data.js

@@ -0,0 +1,3 @@
+// What the page reads from view (D-272), as its JSON comes: test/dashboard.test.ts checks that what view gives fits these types.
+/** A mood of the master or of a character (MOOD-1, D-305): the engine's closed list, which the robot and the badges draw. */
+export const moods = ["neutral", "happy", "delighted", "curious", "focused", "determined", "worried", "surprised", "afraid", "sad", "angry", "disgusted", "mischievous"];

package/dist/dashboard/dice/burn.js

@@ -0,0 +1,200 @@
+// A die that does not count burns away (D-358): going out in a blink (D-414), it stays a moment where it fell, then consumed as paper by a fire, holes opening through it with a glowing,
+// charred edge, until nothing is left; with reduced motion it fades instead. A die that shows its lowest face cracks, dark lines spreading from a point, no
+// fire (D-363, D-382). Its materials, body and ink, burn or crack together, by its own shape.
+import * as THREE from "three";
+// How long a die set aside stays in sight before it burns, how long it burns, and how long it fades with reduced motion, in milliseconds.
+const pause = 350;
+const goingOut = 120;
+const burning = 1300;
+const fading = 400;
+// The colour of the fire at the edge of the holes, and how wide that edge is, and the charred band behind it, in the noise's own measure.
+const fire = new THREE.Color("#ff8a3d");
+const edge = 0.06;
+const charred = 0.16;
+// How long the cracks take to spread, in milliseconds, and how far from where they start, in the die's measure; how big the cells between them are, how much
+// their edges zigzag, how many of them crack, and how wide a crack is at most, tapering, in the cells' measure.
+const cracking = 260;
+const crackReach = 2.6;
+const crackCellScale = "1.1";
+const crackJagging = "0.12";
+const crackSparseness = "0.42";
+const crackWidth = "0.024";
+/** Burns a die away from now: its object and its materials, gone out by the amount given first; its update says whether it still moves. */
+export function burnAway(object, materials, instant, goOut) {
+    const started = performance.now();
+    const progress = { value: 0 };
+    // Each die catches fire in its own places.
+    const offset = new THREE.Vector3(Math.random(), Math.random(), Math.random()).multiplyScalar(50);
+    object.traverse((part) => {
+        part.castShadow = false;
+    });
+    // As much as each material showed: a crystal fades from what it was.
+    const opacities = materials.map((material) => material.opacity);
+    if (instant) {
+        materials.forEach((material) => {
+            material.transparent = true;
+            material.needsUpdate = true;
+        });
+    }
+    else {
+        materials.forEach((material) => burnable(material, progress, offset));
+    }
+    return {
+        update(now) {
+            goOut(Math.min(1, (now - started) / goingOut));
+            const elapsed = now - started - pause;
+            if (elapsed < 0) {
+                return true;
+            }
+            const done = Math.min(1, elapsed / (instant ? fading : burning));
+            if (instant) {
+                materials.forEach((material, index) => {
+                    material.opacity = (opacities[index] ?? 1) * (1 - done);
+                });
+            }
+            else {
+                // Slow at first, as a fire catching, then faster; from where the noise starts to past where it ends.
+                progress.value = 0.2 + done ** 1.6 * 0.85;
+            }
+            object.visible = done < 1;
+            return done < 1;
+        },
+        dispose() {
+            object.visible = false;
+        },
+    };
+}
+/** Cracks a die from now, as resin breaks, not as paper burns: a few long dark fractures, zigzag and tapering, with a lighter chipped rim, spread from a point
+ * of the die until the dice go; no fire, which says a die goes away (D-382). At once with reduced motion. */
+export function crack(materials, instant) {
+    const started = performance.now();
+    const reach = { value: instant ? crackReach : 0 };
+    const offset = new THREE.Vector3(Math.random(), Math.random(), Math.random()).multiplyScalar(50);
+    const origin = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
+    materials.forEach((material) => {
+        // After what the material does already, as a glass's engraved far numbers.
+        const before = material.onBeforeCompile.bind(material);
+        material.onBeforeCompile = (shader, renderer) => {
+            before(shader, renderer);
+            shader.uniforms.crackReach = reach;
+            shader.uniforms.crackOrigin = { value: origin };
+            shader.uniforms.burnOffset = { value: offset };
+            shader.vertexShader = withPlace(shader.vertexShader);
+            shader.fragmentShader = shader.fragmentShader
+                .replace("#include <common>", `#include <common>
+varying vec3 burnPlace;
+uniform float crackReach;
+uniform vec3 crackOrigin;
+uniform vec3 burnOffset;
+${noise}${cells}`)
+                .replace("#include <emissivemap_fragment>", `#include <emissivemap_fragment>
+                    vec3 crackJag = vec3(burnNoise(burnPlace * 11.0), burnNoise(burnPlace * 11.0 + 17.0), burnNoise(burnPlace * 11.0 + 31.0)) - 0.5;
+                    float crackEdge = crackCells(burnPlace * ${crackCellScale} + burnOffset + crackJag * ${crackJagging});
+                    float crackHere = step(distance(burnPlace, crackOrigin), crackReach) * step(${crackSparseness}, burnNoise(burnPlace * 1.1 + burnOffset));
+                    float crackWide = ${crackWidth} * (0.35 + 1.1 * burnNoise(burnPlace * 2.5 + burnOffset + 5.0));
+                    float crackLine = (1.0 - smoothstep(crackWide, crackWide * 1.5, crackEdge)) * crackHere;
+                    float crackChip = (smoothstep(crackWide * 1.5, crackWide * 2.0, crackEdge) - smoothstep(crackWide * 2.0, crackWide * 3.0, crackEdge)) * crackHere;
+                    diffuseColor.rgb *= (1.0 - 0.9 * crackLine) * (1.0 + 0.35 * crackChip);`);
+        };
+        material.needsUpdate = true;
+    });
+    return {
+        update(now) {
+            const done = instant ? 1 : Math.min(1, (now - started) / cracking);
+            reach.value = crackReach * (1 - (1 - done) ** 3);
+            return done < 1;
+        },
+        dispose() {
+            // The die goes with its materials.
+        },
+    };
+}
+/** A vertex shader that hands each point's place on the die to the fragments. */
+function withPlace(vertexShader) {
+    return vertexShader.replace("#include <common>", "#include <common>\nvarying vec3 burnPlace;").replace("#include <begin_vertex>", "#include <begin_vertex>\nburnPlace = position;");
+}
+/** Teaches a material to burn: each point of the die, by a noise of where it is on the die, goes when the fire's progress passes it. */
+function burnable(material, progress, offset) {
+    const before = material.onBeforeCompile.bind(material);
+    material.onBeforeCompile = (shader, renderer) => {
+        before(shader, renderer);
+        shader.uniforms.burnProgress = progress;
+        shader.uniforms.burnFire = { value: fire };
+        shader.uniforms.burnOffset = { value: offset };
+        shader.vertexShader = withPlace(shader.vertexShader);
+        shader.fragmentShader = shader.fragmentShader
+            .replace("#include <common>", `#include <common>\nvarying vec3 burnPlace;\nuniform float burnProgress;\nuniform vec3 burnFire;\nuniform vec3 burnOffset;\n${noise}`)
+            .replace("#include <emissivemap_fragment>", `#include <emissivemap_fragment>
+                float burnLeft = burnNoise(burnPlace * 2.2 + burnOffset) - burnProgress;
+                float burnLit = step(0.001, burnProgress);
+                if (burnLeft < 0.0) discard;
+                diffuseColor.rgb *= mix(1.0, mix(0.08, 1.0, smoothstep(${edge.toFixed(2)}, ${charred.toFixed(2)}, burnLeft)), burnLit);
+                totalEmissiveRadiance += burnFire * 4.0 * (1.0 - smoothstep(0.0, ${edge.toFixed(2)}, burnLeft)) * burnLit;`);
+    };
+    material.needsUpdate = true;
+}
+// A smooth 3D value noise in three octaves, from 0 to 1: where the fire starts and how it spreads.
+const noise = `
+float burnHash(vec3 point) {
+    return fract(sin(dot(point, vec3(127.1, 311.7, 74.7))) * 43758.5453);
+}
+
+float burnValue(vec3 point) {
+    vec3 cell = floor(point);
+    vec3 inside = fract(point);
+    vec3 eased = inside * inside * (3.0 - 2.0 * inside);
+    return mix(
+        mix(mix(burnHash(cell), burnHash(cell + vec3(1, 0, 0)), eased.x), mix(burnHash(cell + vec3(0, 1, 0)), burnHash(cell + vec3(1, 1, 0)), eased.x), eased.y),
+        mix(mix(burnHash(cell + vec3(0, 0, 1)), burnHash(cell + vec3(1, 0, 1)), eased.x), mix(burnHash(cell + vec3(0, 1, 1)), burnHash(cell + vec3(1, 1, 1)), eased.x), eased.y),
+        eased.z
+    );
+}
+
+float burnNoise(vec3 point) {
+    return 0.55 * burnValue(point) + 0.3 * burnValue(point * 2.1) + 0.15 * burnValue(point * 4.3);
+}
+`;
+// The cells of a crack, as resin breaks into: how far a point is from the edge between the cell it is in and the nearest other one, 0 on the edge, the same
+// along an edge and where edges meet.
+const cells = `
+vec3 crackPoint(vec3 cell) {
+    return cell + fract(sin(vec3(dot(cell, vec3(127.1, 311.7, 74.7)), dot(cell, vec3(269.5, 183.3, 246.1)), dot(cell, vec3(113.5, 271.9, 124.6)))) * 43758.5453);
+}
+
+float crackCells(vec3 point) {
+    vec3 home = floor(point);
+    vec3 nearest = vec3(0.0);
+    float least = 8.0;
+
+    for (int x = -1; x <= 1; x++) {
+        for (int y = -1; y <= 1; y++) {
+            for (int z = -1; z <= 1; z++) {
+                vec3 seed = crackPoint(home + vec3(x, y, z));
+                float away = distance(point, seed);
+
+                if (away < least) {
+                    least = away;
+                    nearest = seed;
+                }
+            }
+        }
+    }
+
+    float edge = 8.0;
+
+    for (int x = -2; x <= 2; x++) {
+        for (int y = -2; y <= 2; y++) {
+            for (int z = -2; z <= 2; z++) {
+                vec3 seed = crackPoint(home + vec3(x, y, z));
+                vec3 between = seed - nearest;
+
+                if (dot(between, between) > 1e-5) {
+                    edge = min(edge, dot(0.5 * (nearest + seed) - point, normalize(between)));
+                }
+            }
+        }
+    }
+
+    return edge;
+}
+`;