rpg-engine 0.0.0-stage → 0.1.1

package/dist/dashboard/dice/throw.js

@@ -0,0 +1,242 @@
+// A throw of dice (D-278): simulated with Rapier before it is shown, and recorded frame by frame, with the knocks of the dice, for their sound. The same
+// frames, shown, are the physics: the dice land where they landed. A die stops only lying on the floor with a whole face; when one comes to rest leaning
+// on a wall or on another die, or on top of one, the throw goes back to a moment the dice still ran and goes on from there, their speeds a little changed,
+// so that nobody sees the throw that leaned (D-400).
+// Rapier by its default export: its declarations name their files without extension, which the tests' NodeNext cannot follow, so only there it is any;
+// the page's own build reads them whole and checks its types.
+import RAPIER from "@dimforge/rapier3d-compat";
+import { faceNormals, rotate } from "./models.js";
+const step = 1 / 60;
+// A throw stops by itself well before this; past it, the dice are taken as they lie.
+const longest = 8 / step;
+// A knock softer than this makes no sound, as a die settling; a die knocks on the floor, and two dice on each other, at most once in so many frames, as one
+// that rattles.
+const softest = 1.5;
+const knockGap = 3;
+// More than the farthest corner of any die from its centre.
+const startClearance = 1.3;
+// How far left of the middle the dice leave the hand at most: in a common window's tray, three quarters of its half width; and that half width.
+const farthestStart = 6.5;
+const commonWidth = 7;
+// Dice that went less than this in the last frames are at rest.
+const restingMove = 0.02;
+const restingFrames = 12;
+// A die lies flat when a face looks down within this angle, and on the floor when its lowest corner is this near it; dice at rest with one that does not,
+// this long, lean: before, it may still be tipping over.
+const flatAngle = (3 * Math.PI) / 180;
+const floorContact = 0.1;
+const leaningFrames = 30;
+// A throw that leaned goes back to the last frame the dice that leaned ran faster than so much, and so many frames more at each try, never before the
+// dice have flown this long; it changes the speed of the dice still running by this much at most; past so many tries, the dice are thrown anew.
+const runningSpeed = 3;
+const rewind = 15;
+const earliest = 20;
+const nudge = 0.06;
+const stillSpeed = 0.5;
+const tries = 12;
+// How long a throw may be simulated again, in milliseconds, while the page waits: past it, the throw that leaned least is taken. Ten dice fit on a
+// computer's tray; on a phone's, past six they crowd, and one may lean at times.
+const budget = 400;
+// How the dice touch: friction and bounce are the average of the two bodies', so that a die slides on a die as resin on resin and grips the floor as felt.
+const dieFriction = 0.2;
+const floorFriction = 1.2;
+const dieBounce = 0.35;
+const floorBounce = 0.25;
+let loading;
+/** Loads the physics, once: a throw needs it. */
+export function loadPhysics() {
+    const loaded = loading ?? RAPIER.init();
+    loading = loaded;
+    return loaded;
+}
+/**
+ * Throws dice of these shapes into the tray together, from its left side, spinning, with the randomness given, until they all lie flat; past lying dice, if
+ * any; within a budget of time, by the clock given.
+ */
+export function throwDice(shapes, tray, random = Math.random, lying = [], clock = () => performance.now()) {
+    const normals = shapes.map(faceNormals);
+    const started = clock();
+    let best;
+    for (;;) {
+        let frames = [];
+        let motions = [];
+        let knocks = [];
+        let from = 0;
+        let start = leavingHand(shapes, tray, random);
+        for (let attempt = 1; attempt <= tries; attempt++) {
+            const run = simulate(shapes, normals, tray, lying, start, from);
+            frames = [...frames.slice(0, from), ...run.frames];
+            motions = [...motions.slice(0, from), ...run.motions];
+            knocks = [...knocks.filter((knock) => knock.frame < from), ...run.knocks];
+            if (!run.leaned) {
+                return { frames, knocks };
+            }
+            const leaning = leaningDice(shapes, normals, motions);
+            if (best === undefined || leaning.length < best.leaning) {
+                best = { thrown: { frames, knocks }, leaning: leaning.length };
+            }
+            if (clock() - started > budget) {
+                return best.thrown;
+            }
+            const running = leaning.map((index) => motions.findLastIndex((frame) => Math.hypot(...(frame[index]?.velocity ?? [0, 0, 0])) > runningSpeed));
+            from = Math.min(motions.length, Math.max(earliest, Math.min(...running) - rewind * (attempt - 1)));
+            start = nudged(motions[from - 1] ?? [], random);
+        }
+    }
+}
+/** The dice that rest at the end not lying flat on the floor. */
+function leaningDice(shapes, normals, motions) {
+    return (motions.at(-1) ?? []).flatMap((motion, index) => (onTheFloor(shapes[index], normals[index] ?? [], motion) ? [] : [index]));
+}
+/** How the dice leave the hand: one beside the other across the tray's depth, from its left, spinning. */
+function leavingHand(shapes, tray, random) {
+    return shapes.map((_, index) => {
+        const spin = () => (random() - 0.5) * 40;
+        const across = shapes.length === 1 ? (random() - 0.5) * tray.depth : ((index + 0.5) / shapes.length - 0.5) * tray.depth * 0.8;
+        // From the tray's left, as far as a common window's, so that in a wide one the dice still come to its middle; clear of the left wall, where a die
+        // would be pushed out with a knock, in the air, before it ever falls.
+        const position = [Math.max(-Math.min(tray.width * 0.75, farthestStart) - random(), -tray.width + startClearance), 2.5 + random() + index * 0.3, across];
+        // In a narrow tray, as a phone's, more gently: the dice would all end against its far wall.
+        const strength = Math.min(1, tray.width / commonWidth);
+        return { position, quaternion: randomTurn(random), velocity: [(11 + random() * 6) * strength, 2 + random() * 4, (random() - 0.5) * 10], spin: [spin(), spin(), spin()] };
+    });
+}
+/** The dice as they move, the speed of those still running changed a little, as unseen as a breath. */
+function nudged(motions, random) {
+    const change = (vector) => vector.map((part) => part * (1 + (random() - 0.5) * 2 * nudge));
+    return motions.map((motion) => (Math.hypot(...motion.velocity) < stillSpeed ? motion : { ...motion, velocity: change(motion.velocity), spin: change(motion.spin) }));
+}
+/** The throw from these motions, its frames counted from the one given, until the dice lie flat on the floor, or rest with one that does not. */
+function simulate(shapes, normals, tray, lying, start, from) {
+    const world = new RAPIER.World({ x: 0, y: -60, z: 0 });
+    world.timestep = step;
+    const events = new RAPIER.EventQueue(true);
+    try {
+        const fixed = world.createRigidBody(RAPIER.RigidBodyDesc.fixed());
+        const thickness = 1;
+        // The floor, under y = 0, and the four walls around it, reaching high.
+        const sides = [
+            [0, -thickness, 0, 100, thickness, 100],
+            [-tray.width - thickness, 50, 0, thickness, 50, 100],
+            [tray.width + thickness, 50, 0, thickness, 50, 100],
+            [0, 50, -tray.depth - thickness, 100, 50, thickness],
+            [0, 50, tray.depth + thickness, 100, 50, thickness],
+        ];
+        for (const [x, y, z, halfWidth, halfHeight, halfDepth] of sides) {
+            world.createCollider(RAPIER.ColliderDesc.cuboid(halfWidth, halfHeight, halfDepth).setTranslation(x, y, z).setFriction(floorFriction).setRestitution(floorBounce), fixed);
+        }
+        // The colliders of the dice, lying and thrown; and of each thrown die, its place among them.
+        const dice = new Set();
+        const thrownIndex = new Map();
+        for (const die of lying) {
+            const body = world.createRigidBody(RAPIER.RigidBodyDesc.fixed().setTranslation(...die.frame.position).setRotation(rotation(die.frame.quaternion)));
+            dice.add(world.createCollider(dieCollider(die.shape), body).handle);
+        }
+        const bodies = shapes.map((shape, index) => {
+            const motion = start[index];
+            const description = RAPIER.RigidBodyDesc.dynamic().setLinearDamping(0.5).setAngularDamping(0.8).setCcdEnabled(true);
+            if (motion !== undefined) {
+                description.setTranslation(...motion.position).setRotation(rotation(motion.quaternion)).setLinvel(...motion.velocity).setAngvel(vector(motion.spin));
+            }
+            const body = world.createRigidBody(description);
+            const handle = world.createCollider(dieCollider(shape).setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS), body).handle;
+            dice.add(handle);
+            thrownIndex.set(handle, index);
+            return body;
+        });
+        const frames = [];
+        const motions = [];
+        const knocks = [];
+        const now = () => from + frames.length;
+        // When a die last knocked the floor or a wall, and two dice each other, by the pair: a rattle knocks once in a few frames.
+        const lastKnock = new Map();
+        // Since when the dice rest with one not lying flat on the floor.
+        let leaningSince;
+        while (now() < longest) {
+            const before = motions.at(-1) ?? start;
+            world.step(events);
+            events.drainCollisionEvents((first, second, started) => {
+                // In the first frames of a throw taken again, the dice's contacts begin anew though they went on: no knock.
+                const resumed = from > 0 && frames.length < knockGap;
+                const onDie = dice.has(first) && dice.has(second);
+                // A die on the floor or a wall knocks once for both; two dice, once for the pair.
+                const key = onDie ? [first, second].sort((one, other) => one - other).join(" ") : String(dice.has(first) ? first : second);
+                const strength = started && !resumed ? impact(world, first, second, before, thrownIndex) : 0;
+                if (strength > softest && now() - (lastKnock.get(key) ?? -knockGap) >= knockGap) {
+                    knocks.push({ frame: now(), strength, onDie });
+                    lastKnock.set(key, now());
+                }
+            });
+            const motion = bodies.map((body) => {
+                const { x, y, z } = body.translation();
+                const turn = body.rotation();
+                const velocity = body.linvel();
+                const spin = body.angvel();
+                return { position: [x, y, z], quaternion: [turn.x, turn.y, turn.z, turn.w], velocity: [velocity.x, velocity.y, velocity.z], spin: [spin.x, spin.y, spin.z] };
+            });
+            const frame = motion.map(({ position, quaternion }) => ({ position, quaternion }));
+            const earlier = frames.at(-restingFrames);
+            frames.push(frame);
+            motions.push(motion);
+            if (earlier === undefined || !frame.every((die, index) => moved(earlier[index], die) < restingMove)) {
+                leaningSince = undefined;
+                continue;
+            }
+            if (frame.every((die, index) => onTheFloor(shapes[index], normals[index] ?? [], die))) {
+                return { frames, motions, knocks, leaned: false };
+            }
+            leaningSince ??= now();
+            if (now() - leaningSince >= leaningFrames) {
+                return { frames, motions, knocks, leaned: true };
+            }
+        }
+        return { frames, motions, knocks, leaned: leaningDice(shapes, normals, motions).length > 0 };
+    }
+    finally {
+        events.free();
+        world.free();
+    }
+}
+/** How hard two colliders that began to touch met: how fast they came together along their contact, the frame before; at least one of them a thrown die. */
+function impact(world, first, second, before, thrownIndex) {
+    const velocity = (handle) => before[thrownIndex.get(handle) ?? -1]?.velocity ?? [0, 0, 0];
+    const [one, other] = [velocity(first), velocity(second)];
+    const closing = [one[0] - other[0], one[1] - other[1], one[2] - other[2]];
+    let normal;
+    world.contactPair(world.getCollider(first), world.getCollider(second), (manifold) => {
+        const { x, y, z } = manifold.normal();
+        normal ??= [x, y, z];
+    });
+    return normal === undefined ? Math.hypot(...closing) : Math.abs(closing[0] * normal[0] + closing[1] * normal[1] + closing[2] * normal[2]);
+}
+/** A die's body for the physics: its shape's hull. */
+function dieCollider(shape) {
+    const hull = RAPIER.ColliderDesc.convexHull(new Float32Array(shape.vertices.flat()));
+    if (hull === null) {
+        throw new Error("A die's shape has no hull: its corners in dice.json are fewer than four or lie in a plane. Write the dice again with make-dice.py.");
+    }
+    return hull.setFriction(dieFriction).setRestitution(dieBounce);
+}
+/** Whether a die lies on the floor with a whole face: not on an edge, leaning, nor on another die. */
+function onTheFloor(shape, normals, frame) {
+    const lowest = Math.min(...(shape?.vertices ?? []).map((corner) => rotate(frame.quaternion, corner)[1] + frame.position[1]));
+    return lowest < floorContact && normals.some((normal) => -rotate(frame.quaternion, normal)[1] > Math.cos(flatAngle) * Math.hypot(...normal));
+}
+/** A turn at random, every turn as likely. */
+function randomTurn(random) {
+    const [first, second, third] = [random(), random(), random()];
+    const [one, other] = [Math.sqrt(1 - first), Math.sqrt(first)];
+    return [one * Math.sin(2 * Math.PI * second), one * Math.cos(2 * Math.PI * second), other * Math.sin(2 * Math.PI * third), other * Math.cos(2 * Math.PI * third)];
+}
+function rotation([x, y, z, w]) {
+    return { x, y, z, w };
+}
+function vector([x, y, z]) {
+    return { x, y, z };
+}
+/** How far a die went between two frames, in its place and in its turn. */
+function moved(before, after) {
+    const place = Math.hypot(after.position[0] - before.position[0], after.position[1] - before.position[1], after.position[2] - before.position[2]);
+    const turn = Math.hypot(...after.quaternion.map((part, index) => part - before.quaternion[index]));
+    return Math.max(place, turn);
+}

package/dist/dashboard/dice/tray.js

@@ -0,0 +1,365 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The dice tray (D-278, D-279, D-284): the dice of a roll the master asked land on the numbers the engine rolled, and a plate says the check, each die and the
+// total. The player can also always throw dice from the column of dice over the button, as many as they like and a modifier: dice that make a check the master
+// asks answer it, and the engine rolls it (D-330); any other throw is free, the engine does not hear of it, the dice fade away and its line stays in this
+// browser's rolls alone. With two dice or more of a kind, which count: all, the highest one or the lowest one (D-337, D-397). The dice show as pictures, never as their
+// notation. The dice and their physics load at the first throw.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { DiceFaces } from "../faces.js";
+import { DieIcon, Icon } from "../icons.js";
+import { notationModifier, shownText, signed } from "../labels.js";
+import { Token } from "../party.js";
+import { soundPref, useChoice, usePref } from "../prefs.js";
+import { trayCheck, useRequested } from "../requested.js";
+import { arrowStep, t } from "../text.js";
+import { diceToThrow, rareFace } from "./models.js";
+import { diceText, dieName, keptOf, notation, trayDice, withDropped } from "./pool.js";
+import { diceEdgesPref, diceSetPref } from "./sets.js";
+import { wakeSound } from "./sounds.js";
+// After a throw, how long the dice stay before they fade: a roll the master asked stays longer, to be read, then flies into its line of the rolls.
+const lingers = { free: 3200, asked: 4200 };
+// As --long and --flight in the style sheet.
+const fadeLength = 600;
+const flight = 450;
+// At most so many dice at once, which the page throws in a moment.
+const mostDice = 20;
+// The choices of what counts, as the tray says them.
+const keepModes = ["sum", "highest", "lowest"];
+export function DiceTray({ requested, sheetThrow, party, onShown, onFree }) {
+    const asked = useRequested();
+    const canvas = useRef(null);
+    const shownPlate = useRef(null);
+    const measuredPlate = useRef(null);
+    const button = useRef(null);
+    const controls = useRef(null);
+    const tray = useRef(null);
+    const roller = useRef();
+    // The number of the throw shown now: a newer throw ends an older one's animation and timers.
+    const throwing = useRef(0);
+    const skipping = useRef(false);
+    const [plate, setPlate] = useState();
+    const [rolling, setRolling] = useState(false);
+    const [fading, setFading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [pool, setPool] = useState([]);
+    const [keeps, setKeeps] = useState({});
+    const [modifier, setModifier] = useState(0);
+    const [sound, setSound] = usePref(soundPref);
+    const [diceSet] = useChoice(diceSetPref);
+    const [edges] = useChoice(diceEdgesPref);
+    const shownSet = useRef(`${diceSet} ${edges}`);
+    useEffect(() => {
+        const onResize = () => void roller.current?.then((loaded) => loaded?.resize());
+        // Escape lets the dice land at once, and closes the tray, giving the focus back to its button.
+        const onKey = (event) => {
+            wakeSound();
+            if (event.key === "Escape") {
+                skipping.current = true;
+                setOpen(false);
+                if (controls.current?.contains(document.activeElement) === true) {
+                    button.current?.focus();
+                }
+            }
+        };
+        window.addEventListener("resize", onResize);
+        window.addEventListener("keydown", onKey);
+        window.addEventListener("pointerdown", wakeSound);
+        return () => {
+            window.removeEventListener("resize", onResize);
+            window.removeEventListener("keydown", onKey);
+            window.removeEventListener("pointerdown", wakeSound);
+        };
+    }, []);
+    // A text field that takes the focus comes whole above this button: the browser brings in only its caret, the page's scroll-padding keeps the button's room.
+    useEffect(() => {
+        const onFocus = (event) => {
+            if (event.target instanceof HTMLElement && event.target.matches("textarea, input:not([type=radio], [type=checkbox])")) {
+                event.target.scrollIntoView({ block: "nearest" });
+            }
+        };
+        window.addEventListener("focusin", onFocus);
+        return () => window.removeEventListener("focusin", onFocus);
+    }, []);
+    // The open tray takes the focus to the d20, and closes at a click elsewhere on the page, keeping the dice chosen.
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        tray.current?.querySelector(`[data-sides="20"]`)?.focus();
+        const onPointer = (event) => {
+            if (!(event.target instanceof Node && controls.current?.contains(event.target) === true)) {
+                setOpen(false);
+            }
+        };
+        window.addEventListener("pointerdown", onPointer);
+        return () => window.removeEventListener("pointerdown", onPointer);
+    }, [open]);
+    /** The dice and their stage, loaded once; undefined when the browser cannot draw them, and then the plate comes alone. */
+    const loadRoller = () => {
+        const surface = canvas.current;
+        roller.current ??= surface === null ? Promise.resolve(undefined) : import("./roller.js").then((module) => module.makeRoller(surface)).catch(() => undefined);
+        return roller.current;
+    };
+    /** Throws these dice, each landing on its value, then shows the plate, and fades it all after a while; the plate alone when the dice cannot be thrown. */
+    const throwAndShow = async (given, linger) => {
+        const shown = { ...given, ...rareOf(given.dice) };
+        const number = ++throwing.current;
+        const current = () => number === throwing.current;
+        skipping.current = false;
+        setFading(false);
+        setRolling(true);
+        setPlate({ ...shown, shown: false });
+        const loaded = await loadRoller();
+        // The plate is measured, unseen, before the dice fly: they land above it, however many rows its dice take (D-366).
+        await new Promise((painted) => requestAnimationFrame(painted));
+        const plateTop = measuredPlate.current?.getBoundingClientRect().top;
+        if (plateTop !== undefined && plateTop > 0) {
+            loaded?.cover(window.innerHeight - plateTop);
+        }
+        try {
+            const toThrow = loaded === undefined ? [] : diceToThrow(given.dice, loaded.kinds);
+            if (toThrow.length === 0) {
+                loaded?.hide();
+            }
+            else if (await loaded?.roll(toThrow, { instant: matchMedia("(prefers-reduced-motion: reduce)").matches, sound, skipping: () => skipping.current, current }) !== true) {
+                return;
+            }
+        }
+        catch {
+            // Dice written by hand in the log, which the page cannot throw: the plate says the roll all the same.
+            loaded?.hide();
+        }
+        if (!current()) {
+            return;
+        }
+        setRolling(false);
+        setPlate({ ...shown, shown: true });
+        const done = () => {
+            if (current()) {
+                loaded?.hide();
+                setPlate(undefined);
+                setFading(false);
+            }
+        };
+        window.setTimeout(() => {
+            if (!current()) {
+                return;
+            }
+            // The roll's line comes into the rolls only now, as its dice go (D-300); a free throw's into this browser's rolls (D-330 (4)). The plate waits for
+            // its place to open, then flies into it, wherever the rolls are, out of the window on a phone; into the rolls' title when their card is closed, or
+            // their tab when they are put away (D-281, D-303, D-366). It fades with reduced motion.
+            if (shown.roll !== undefined) {
+                onShown?.(shown.roll);
+            }
+            const free = shown.free ? pageRoll(shown, number) : undefined;
+            if (free !== undefined) {
+                onFree?.(free);
+            }
+            const line = shown.roll ?? free?.id;
+            const flies = line !== undefined && matchMedia("(prefers-reduced-motion: no-preference)").matches;
+            window.setTimeout(() => {
+                if (!current()) {
+                    return;
+                }
+                const row = [line === undefined ? null : document.querySelector(`[data-roll="${CSS.escape(line)}"]`), document.querySelector(".rolls-card > summary"), document.querySelector(".rolls-tab")]
+                    .find((target) => target !== null && target.getBoundingClientRect().height > 0);
+                setFading(true);
+                if (flies && row !== undefined && row !== null && shownPlate.current !== null) {
+                    flyInto(shownPlate.current, row, done);
+                }
+                else {
+                    window.setTimeout(done, fadeLength);
+                }
+            }, flies ? flight : 0);
+        }, linger);
+    };
+    // A roll the master asked, as the engine rolled it: its dice land on its numbers.
+    useEffect(() => {
+        if (requested !== undefined) {
+            const title = requested.check ?? requested.notation;
+            const member = party.find((candidate) => candidate.name === requested.who) ?? party.find((candidate) => candidate.role === "pc");
+            void throwAndShow({
+                free: false,
+                title,
+                ...(title === requested.notation ? {} : { notation: requested.notation }),
+                dice: requested.dice,
+                modifier: notationModifier(requested.notation),
+                total: requested.total,
+                text: requested.text,
+                ...(member === undefined ? {} : { member }),
+                roll: requested.id,
+            }, lingers.asked);
+        }
+    }, [requested?.id]);
+    // A set of dice or their edges chosen in Settings: a d20 of them rolls, to be seen, with no plate and no line in the rolls, then goes (D-352, D-354).
+    useEffect(() => {
+        if (`${diceSet} ${edges}` === shownSet.current) {
+            return;
+        }
+        shownSet.current = `${diceSet} ${edges}`;
+        const number = ++throwing.current;
+        const current = () => number === throwing.current;
+        skipping.current = false;
+        setPlate(undefined);
+        setRolling(false);
+        void loadRoller().then(async (loaded) => {
+            const showing = { instant: matchMedia("(prefers-reduced-motion: reduce)").matches, sound, skipping: () => skipping.current, current };
+            if (await loaded?.roll([{ kind: "d20", values: [fairDie(20)], dropped: false }], showing) === true) {
+                window.setTimeout(() => current() && loaded?.hide(), lingers.free);
+            }
+        });
+    }, [diceSet, edges]);
+    // A number of the sheet, rolled for fun: its dice and its number, which counts for nothing (D-280).
+    useEffect(() => {
+        if (sheetThrow !== undefined) {
+            const { roll, label, who } = sheetThrow;
+            const dice = roll.dice.map((sides) => ({ sides, value: fairDie(sides) }));
+            const total = dice.reduce((sum, die) => sum + die.value, roll.modifier);
+            void throwAndShow({ free: true, title: label, notation: roll.notation, dice, modifier: roll.modifier, total, text: diceText(dice, roll.modifier), ...(who === undefined ? {} : { who }) }, lingers.free);
+        }
+    }, [sheetThrow?.number]);
+    // Only the kinds with two dice or more keep a choice of which count.
+    const shownKeeps = keptOf(pool, keeps);
+    // The check the master asks whose dice and number the tray's dice are, when one alone is (D-330).
+    const answering = pool.length === 0 ? undefined : asked?.checks.find((check) => check.index === trayCheck(asked, notation(pool, modifier, shownKeeps)));
+    const throwPool = () => {
+        // Dice that make a check the master asks answer it: the engine rolls it, and its dice land as for its button. The tray closes, keeping its dice for the
+        // next throw until the player clears them (D-405).
+        setOpen(false);
+        if (answering !== undefined) {
+            asked?.answer(answering.index);
+            return;
+        }
+        // A free throw: the page decides it, as fairly as the browser can, leaving the dice in sight.
+        const dice = withDropped(pool.map((sides) => ({ sides, value: fairDie(sides) })), shownKeeps);
+        const total = dice.reduce((sum, die) => sum + (die.dropped === true ? 0 : die.value), modifier);
+        void throwAndShow({ free: true, title: t("Dice"), notation: notation(pool, modifier, shownKeeps), dice, modifier, total, text: diceText(dice, modifier) }, lingers.free);
+    };
+    const toggleSound = () => {
+        setSound(!sound);
+    };
+    // One die of a kind less; when none is left, the focus goes to the die itself, as its minus goes away.
+    const less = (sides) => {
+        const at = pool.lastIndexOf(sides);
+        setPool(pool.filter((_, index) => index !== at));
+        if (pool.filter((chosen) => chosen === sides).length === 1) {
+            tray.current?.querySelector(`[data-sides="${sides}"]`)?.focus();
+        }
+    };
+    // The arrows choose among what counts, the focus going with the choice, as in a radio group.
+    const moveKeep = (event, sides) => {
+        const step = arrowStep(event.key);
+        if (step === 0) {
+            return;
+        }
+        event.preventDefault();
+        const next = keepModes[(keepModes.indexOf(shownKeeps[sides] ?? "sum") + step + keepModes.length) % keepModes.length];
+        setKeeps({ ...keeps, [sides]: next === "sum" ? undefined : next });
+        const buttons = event.currentTarget.querySelectorAll("button");
+        buttons[keepModes.indexOf(next)]?.focus();
+    };
+    const clear = () => {
+        setPool([]);
+        setKeeps({});
+        setModifier(0);
+        button.current?.focus();
+    };
+    // The button opens the tray; open, it closes it while no die is chosen, and throws the dice chosen.
+    const press = () => {
+        if (!open) {
+            setOpen(true);
+        }
+        else if (pool.length === 0) {
+            setOpen(false);
+        }
+        else if (!rolling) {
+            throwPool();
+        }
+    };
+    const chosen = open && pool.length > 0;
+    // The dice kept from the last throw, the tray closed: their throw and their clearing beside its button, a click away (D-410).
+    const kept = !open && pool.length > 0;
+    // What a throw of the dice chosen says: their pictures, or the check of the master's they answer.
+    const rollWords = answering === undefined
+        ? (_jsxs("span", { class: "tray-roll", children: [t("Roll"), _jsx(PoolIcons, { pool: pool, keeps: shownKeeps }), modifier !== 0 && _jsx("span", { class: "notation", children: signed(modifier) }), _jsx("span", { class: "visually-hidden", children: notation(pool, modifier, shownKeeps) })] }))
+        : t("Answer: {check}", { check: answering.check });
+    return (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvas, class: fading ? "dice-stage fading" : "dice-stage", "aria-hidden": "true" }), _jsx("div", { ref: shownPlate, class: ["dice-result", plate?.free ? "free" : "", plate?.shown && !fading ? "shown" : "", plate?.shown && fading ? "going" : "", plate?.rare === undefined ? "" : plate.rare.face].filter((name) => name !== "").join(" "), role: "status", "aria-live": "polite", children: plate?.shown && _jsx(PlateContent, { plate: plate }) }), _jsx("div", { ref: measuredPlate, class: ["dice-result", "measured", plate?.free ? "free" : "", plate?.rare === undefined ? "" : plate.rare.face].filter((name) => name !== "").join(" "), "aria-hidden": "true", children: plate !== undefined && !plate.shown && _jsx(PlateContent, { plate: plate }) }), open && _jsx("div", { class: "tray-scrim", "aria-hidden": "true" }), _jsxs("div", { ref: controls, class: "dice-controls", children: [open && (_jsxs("div", { ref: tray, class: "dice-tray", role: "group", "aria-label": asked === undefined ? t("Free roll: it counts for nothing") : t("Dice: a check the master asks, or a free roll"), children: [_jsx("p", { class: "tray-note", children: _jsx("button", { type: "button", class: "icon-button", "aria-label": t("Dice sound"), "aria-pressed": sound, "data-tip": sound ? t("Sound: on") : t("Sound: off"), onClick: toggleSound, children: _jsx(Icon, { name: sound ? "soundOn" : "soundOff" }) }) }), _jsx("ul", { class: "tray-dice", children: trayDice.map((sides) => {
+                                    const count = pool.filter((one) => one === sides).length;
+                                    return (_jsxs("li", { class: count > 0 ? "chosen" : undefined, children: [count >= 2 && sides !== 100 && (_jsx("span", { class: "tray-keep", role: "radiogroup", "aria-label": t("Of the {die}, which count", { die: dieName(sides) }), onKeyDown: (event) => moveKeep(event, sides), children: keepModes.map((mode) => (_jsx("button", { type: "button", role: "radio", "aria-checked": (shownKeeps[sides] ?? "sum") === mode, "aria-label": keepWords(mode, dieName(sides)), "data-tip": keepWords(mode, dieName(sides)), tabIndex: (shownKeeps[sides] ?? "sum") === mode ? 0 : -1, onClick: () => setKeeps({ ...keeps, [sides]: mode === "sum" ? undefined : mode }), children: mode === "sum" ? t("All") : mode === "highest" ? t("High") : t("Low") }, mode))) })), count > 0 && (_jsx("button", { type: "button", class: "tray-less", "aria-label": t("One {die} less", { die: dieName(sides) }), "data-tip": t("One less"), onClick: () => less(sides), children: _jsx(Icon, { name: "minus" }) }, "less")), _jsxs("button", { type: "button", class: "tray-die", "data-sides": sides, disabled: pool.length >= mostDice, "aria-label": count > 0 ? t("Add a {die}: {count} chosen", { die: dieName(sides), count }) : t("Add a {die}", { die: dieName(sides) }), onClick: () => setPool([...pool, sides]), children: [_jsxs("span", { class: "tray-die-name", children: [count > 0 && _jsx("span", { class: "tray-count", children: count }), dieName(sides)] }), _jsx(DieIcon, { sides: sides })] }, "die")] }, sides));
+                                }) }), _jsxs("div", { class: "tray-modifier", children: [_jsx("button", { type: "button", "aria-label": t("Modifier: one less"), "data-tip": "\u22121", onClick: () => setModifier(modifier - 1), children: _jsx(Icon, { name: "minus" }) }), _jsxs("span", { class: "tray-modifier-value", children: [_jsx("span", { class: "tray-modifier-label", children: t("Mod") }), _jsx("output", { "aria-live": "polite", children: signed(modifier) })] }), _jsx("button", { type: "button", "aria-label": t("Modifier: one more"), "data-tip": "+1", onClick: () => setModifier(modifier + 1), children: _jsx(Icon, { name: "plus" }) })] })] })), _jsxs("div", { class: "dice-fab", children: [(open || kept) && (pool.length > 0 || modifier !== 0) && (_jsx("button", { type: "button", class: "icon-button tonal", "aria-label": t("Clear the dice"), "data-tip": t("Clear"), onClick: clear, children: _jsx(Icon, { name: "clear" }) })), kept && (_jsxs("button", { type: "button", class: "dice-button extended", "aria-disabled": rolling, onClick: () => !rolling && throwPool(), children: [_jsx(DieIcon, { sides: 20 }), _jsx("span", { children: rollWords })] })), _jsxs("button", { type: "button", ref: button, class: chosen ? "dice-button extended" : "dice-button tip-left", "aria-expanded": open, "aria-disabled": chosen && rolling, ...(chosen ? {} : { "aria-label": open ? t("Close the free roll") : t("Free roll"), "data-tip": open ? t("Close") : t("Free roll") }), onClick: press, children: [open && !chosen ? _jsx(Icon, { name: "close" }) : _jsx(DieIcon, { sides: 20 }), chosen && _jsx("span", { children: rollWords })] })] })] })] }));
+}
+/** What the plate says: whose roll and which, the dice one by one with the modifier, the total large, a rare face's words, and for a screen reader the chat's text. */
+function PlateContent({ plate }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "plate-head", children: [plate.member && _jsx(Token, { member: plate.member }), _jsxs("span", { class: "plate-what", children: [_jsx("span", { class: "plate-title", children: plate.title }), plate.free && (_jsx("span", { class: "plate-under", children: _jsx("span", { class: "plate-tag", children: "Free roll \u00B7 not logged" }) }))] })] }), _jsx(DiceFaces, { dice: plate.dice, modifier: plate.modifier, className: "plate-dice" }), _jsx("span", { class: "plate-total num", children: shownText(String(plate.total)) }), plate.rare && _jsx("p", { class: "plate-rare", children: plate.rare.words }), _jsx("span", { class: "visually-hidden", children: plate.free ? t("{dice}, free roll, not logged", { dice: plate.text }) : plate.text })] }));
+}
+/** A free throw as this browser's rolls keep it (D-330 (4)): whose sheet it is from, the number's label as its check, its dice and total. */
+function pageRoll(plate, number) {
+    return {
+        id: `free-${Date.now()}-${number}`,
+        at: new Date().toISOString(),
+        by: "player",
+        // A number of the sheet keeps its label as its check; the tray's dice have none.
+        ...(plate.who === undefined ? {} : { who: plate.who, check: plate.title }),
+        notation: (plate.notation ?? plate.title).replaceAll("−", "-"),
+        total: plate.total,
+        text: plate.text,
+        dice: plate.dice,
+        free: true,
+    };
+}
+/** The rare face of the dice that count, the highest first, with its words: natural 20, natural 1 (D-281). */
+function rareOf(dice) {
+    const rare = dice.flatMap((die) => {
+        const face = rareFace(die);
+        return face === undefined ? [] : [{ face, words: t("natural {value}", { value: face === "highest" ? die.value : 1 }) }];
+    }).sort((first, second) => (first.face === second.face ? 0 : first.face === "highest" ? -1 : 1))[0];
+    return rare === undefined ? {} : { rare };
+}
+/** Flies the plate into a line of the rolls, small, as the line appears; then what comes after. */
+function flyInto(plate, row, then) {
+    const from = plate.getBoundingClientRect();
+    const to = row.getBoundingClientRect();
+    const across = to.left + to.width / 2 - (from.left + from.width / 2);
+    const down = to.top + to.height / 2 - (from.top + from.height / 2);
+    // On its way it closes the side it came out of, a card again: its border all round, its corners rounded below (D-374).
+    const drawn = getComputedStyle(plate);
+    plate.style.transition = ["transform", "border-radius", "border-bottom-width"].map((property) => `${property} var(--flight) var(--ease)`).concat("opacity var(--flight) var(--ease-in)").join(", ");
+    plate.style.borderBottom = `${drawn.borderTopWidth} ${drawn.borderTopStyle} ${drawn.borderTopColor}`;
+    plate.style.borderRadius = drawn.borderTopLeftRadius;
+    plate.style.transform = `translate(calc(var(--plate-x) + ${across}px), ${down}px) scale(${Math.min(1, to.height / from.height)})`;
+    plate.style.opacity = "0.25";
+    window.setTimeout(() => {
+        plate.style.visibility = "hidden";
+        then();
+        // Once gone, the plate takes back its own place, unseen.
+        requestAnimationFrame(() => {
+            plate.style.transition = "";
+            plate.style.transform = "";
+            plate.style.opacity = "";
+            plate.style.borderBottom = "";
+            plate.style.borderRadius = "";
+            plate.style.visibility = "";
+        });
+    }, flight);
+}
+/** The dice chosen as pictures, the biggest first: of a kind its die once or twice, the one that may not count faded, or once with how many past two. */
+function PoolIcons({ pool, keeps }) {
+    const kinds = [...new Set(pool)].sort((first, second) => second - first);
+    return (_jsx(_Fragment, { children: kinds.map((sides) => {
+            const count = pool.filter((chosen) => chosen === sides).length;
+            return (_jsxs("span", { class: "die-icons", children: [Array.from({ length: Math.min(count, 2) }, (_, index) => _jsx(DieIcon, { sides: sides, faded: index === 1 && keeps[sides] !== undefined && count === 2 }, index)), count > 2 && _jsxs("span", { class: "die-more", children: ["\u00D7", count] })] }, sides));
+        }) }));
+}
+/** A die's face, as fairly as the browser can: a random number of the system's, without the bias of a remainder. */
+function fairDie(sides) {
+    const limit = Math.floor(0x1_0000_0000 / sides) * sides;
+    const draw = new Uint32Array(1);
+    do {
+        crypto.getRandomValues(draw);
+    } while (draw[0] >= limit);
+    return 1 + (draw[0] % sides);
+}
+/** Which of a kind count, in full, as a screen reader says the short choice and its tooltip shows it (D-396, D-397). */
+function keepWords(mode, die) {
+    return mode === "sum" ? t("Every {die} counts", { die }) : mode === "highest" ? t("Only the highest {die} counts", { die }) : t("Only the lowest {die} counts", { die });
+}

package/dist/dashboard/faces.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { rareFace } from "./dice/models.js";
+import { DieIcon } from "./icons.js";
+import { signed } from "./labels.js";
+export function DiceFaces({ dice, modifier, className }) {
+    return (_jsxs("ol", { class: className === undefined ? "dice-faces" : `dice-faces ${className}`, "aria-hidden": "true", children: [dice.map((die, index) => _jsx(DieChip, { die: die }, index)), modifier !== 0 && _jsx("li", { class: "die-modifier", children: signed(modifier) })] }));
+}
+function DieChip({ die }) {
+    const rare = rareFace(die);
+    const faces = die.faces !== undefined && die.faces.length > 1 ? die.faces.map((value) => faceText(die.sides, value)).join("+") : faceText(die.sides, die.value);
+    return (_jsxs("li", { class: ["die-chip", die.dropped === true ? "dropped" : "", rare === undefined ? "" : `rare-${rare}`].filter((name) => name !== "").join(" "), children: [_jsx(DieIcon, { sides: die.sides }), _jsxs("span", { children: [die.rerolledFrom !== undefined && (_jsxs(_Fragment, { children: [_jsx("s", { children: faceText(die.sides, die.rerolledFrom) }), "\u2192"] })), faces] })] }));
+}
+/** A face as a chip shows it: a number, or a dF's −, 0 and +. */
+function faceText(sides, value) {
+    return sides === "F" ? (value < 0 ? "−" : value > 0 ? "+" : "0") : String(value);
+}

package/dist/dashboard/footer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The page's foot, under a line across the whole page as the head's: our copyright, the code on GitHub and the package on npm, a heart to support the project,
+// and the game system with the credit its source asks for (PLAN, phase 2).
+import { Icon } from "./icons.js";
+import { systemTitleLabel } from "./labels.js";
+import { t } from "./text.js";
+/** Where the project lives, and how to support it. */
+export const footLinks = {
+    author: "https://stefanocaronia.it",
+    github: "https://github.com/stefanocaronia/rpg-engine",
+    npm: "https://www.npmjs.com/package/rpg-engine",
+    support: "https://www.paypal.com/paypalme/stefanocaronia",
+};
+/** The foot of the page: who made it and where it lives, how to support it, and the game system's credits. */
+export function PageFoot({ product, system }) {
+    return (_jsxs("footer", { class: "page-foot", children: [_jsxs("p", { class: "foot-own", children: [_jsxs("span", { children: ["© 2026 ", _jsx("a", { href: footLinks.author, target: "_blank", rel: "noreferrer", children: "Stefano Caronia" }), ` · ${product}`] }), _jsx("a", { href: footLinks.github, target: "_blank", rel: "noreferrer", "aria-label": t("{product} on GitHub", { product }), "data-tip": "GitHub", children: _jsx(Icon, { name: "github" }) }), _jsx("a", { href: footLinks.npm, target: "_blank", rel: "noreferrer", "aria-label": t("{product} on npm", { product }), "data-tip": "npm", children: _jsx(Icon, { name: "npm" }) }), _jsxs("a", { class: "foot-support", href: footLinks.support, target: "_blank", rel: "noreferrer", children: [_jsx(Icon, { name: "heart" }), t("Support {product}", { product })] })] }), system && (_jsxs("p", { class: "foot-system", children: [_jsx("span", { children: `${system.name} · ${systemTitleLabel(system.title)}` }), system.attribution && (_jsxs("details", { children: [_jsx("summary", { children: t("Credits") }), _jsx("p", { children: system.attribution })] }))] }))] }));
+}