rpg-engine 0.0.0-stage → 0.1.0

package/dist/dashboard/prefs.js

@@ -0,0 +1,97 @@
+// The page's own preferences, kept in this browser alone (D-341): the dice's sound, their colours and rolling by hand, the tokens' symbols and conditions, and the theme's change. A change,
+// from Settings or from where the switch is, reaches every part of the page that shows it at once.
+import { useEffect, useState } from "preact/hooks";
+/** Whether the dice make a sound (D-284). */
+export const soundPref = { key: "rpg-engine.dice-sound", on: true };
+/** Whether the player rolls by hand, the checks with no button (D-330 (2)). */
+export const byHandPref = { key: "rpg-engine.rolls-by-hand", on: false };
+/** Whether the tokens show the pip of their side, or their class (D-414). */
+export const tokenSymbolsPref = { key: "rpg-engine.token-symbols", on: true };
+/** When the tokens show the pip of their state, the conditions on them and who is down (D-419): always, only under the mouse, or never. */
+export const conditionsPref = { key: "rpg-engine.token-conditions", initial: "always", values: ["always", "hover", "never"] };
+// The event that tells the page a preference changed.
+const changed = "rpg-engine:pref";
+/** A preference's value, and what changes it, on every part of the page that uses it. */
+export function usePref(pref) {
+    const [value, setValue] = useState(() => readPref(pref));
+    useEffect(() => {
+        const follow = () => setValue(readPref(pref));
+        window.addEventListener(changed, follow);
+        return () => window.removeEventListener(changed, follow);
+    }, [pref.key]);
+    return [value, (on) => writePref(pref, on)];
+}
+/** A choice's value, and what changes it, on every part of the page that uses it. */
+export function useChoice(choice) {
+    const [value, setValue] = useState(() => readChoice(choice));
+    useEffect(() => {
+        const follow = () => setValue(readChoice(choice));
+        window.addEventListener(changed, follow);
+        return () => window.removeEventListener(changed, follow);
+    }, [choice.key]);
+    return [value, (picked) => writeKept(choice.key, picked)];
+}
+/** A choice's value now, for what reads it once, as the dice when they are thrown. */
+export function readChoice(choice) {
+    const value = readKept(choice.key);
+    return value !== undefined && choice.values.includes(value) ? value : choice.initial;
+}
+/**
+ * A text the page keeps by its key, as the quest the player follows, and what changes it, on every part of the page that uses it: undefined while the player
+ * never chose, empty once they chose none.
+ */
+export function useKeptText(key) {
+    const read = () => readKept(key);
+    const [value, setValue] = useState(read);
+    useEffect(() => {
+        setValue(read());
+        const follow = () => setValue(read());
+        window.addEventListener(changed, follow);
+        return () => window.removeEventListener(changed, follow);
+    }, [key]);
+    return [value, (text) => writeKept(key, text)];
+}
+/** Tells every part of the page that a preference changed, as the theme does. */
+export function announcePref() {
+    window.dispatchEvent(new Event(changed));
+}
+/** Draws again what shows a preference kept elsewhere, as the theme, when one changes. */
+export function usePrefChange() {
+    const [, setChanges] = useState(0);
+    useEffect(() => {
+        const follow = () => setChanges((changes) => changes + 1);
+        window.addEventListener(changed, follow);
+        return () => window.removeEventListener(changed, follow);
+    }, []);
+}
+// What the page keeps of each preference while it is open, for a browser that keeps nothing.
+const kept = new Map();
+function readPref(pref) {
+    const value = readKept(pref.key);
+    return value === undefined ? pref.on : value === "on";
+}
+function writePref(pref, on) {
+    writeKept(pref.key, on ? "on" : "off");
+}
+function readKept(key) {
+    const known = kept.get(key);
+    if (known !== undefined) {
+        return known;
+    }
+    try {
+        return localStorage.getItem(key) ?? undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function writeKept(key, value) {
+    kept.set(key, value);
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // The page keeps it until it is closed.
+    }
+    announcePref();
+}

package/dist/dashboard/reactions.js

@@ -0,0 +1,28 @@
+// Near the top or the bottom: within this share of the range, as 18–19 and 2–3 on a d20.
+const near = 0.15;
+const faces = {
+    party: { top: "surprised", high: "happy", low: "worried", bottom: "sad" },
+    others: { top: "mischievous", high: "mischievous", low: "sad", bottom: "surprised" },
+};
+/** The robot's moment for a new roll, or none when the roll is unremarkable; `party` names the party's members, whose rolls the robot cheers. */
+export function rollReaction(roll, party) {
+    const reach = rollReach(roll.dice);
+    if (reach === undefined) {
+        return undefined;
+    }
+    const forParty = roll.who === undefined ? roll.by === "player" : party.includes(roll.who);
+    return { id: `roll-${roll.id}`, mood: faces[forParty ? "party" : "others"][reach] };
+}
+/** Where the kept dice of a roll fall in their range; none for a roll without dice that can fall, or in the middle. */
+export function rollReach(dice) {
+    const kept = dice.filter((die) => !die.dropped);
+    const least = kept.reduce((sum, die) => sum + (die.sides === "F" ? -1 : 1), 0);
+    const most = kept.reduce((sum, die) => sum + (die.sides === "F" ? 1 : die.sides), 0);
+    const total = kept.reduce((sum, die) => sum + die.value, 0);
+    if (kept.length === 0 || most <= least) {
+        return undefined;
+    }
+    // An exploded die can go past the top.
+    const share = (total - least) / (most - least);
+    return share >= 1 ? "top" : share <= 0 ? "bottom" : share >= 1 - near ? "high" : share <= near ? "low" : undefined;
+}

package/dist/dashboard/requested.js

@@ -0,0 +1,32 @@
+// A roll the master asks now (D-330, ASK-12), for the sheet and the dice: the row of the sheet whose field a check names lights up and answers it, as do the
+// tray's dice when they are a check's own; every other roll of the page is free.
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { checkOf, sameDice } from "./labels.js";
+export const RequestedRoll = createContext(undefined);
+/** The roll the master asks now, when it is one, and what answers its checks. */
+export function requestedOf(asked, answer) {
+    const checks = asked?.labels.flatMap((label, index) => {
+        const check = checkOf(label, asked.title);
+        return check === undefined ? [] : [{ index, ...check }];
+    }) ?? [];
+    if (asked === undefined || checks.length === 0) {
+        return undefined;
+    }
+    // A field two checks name answers neither, as the tray's dice do not.
+    const fields = asked.fields?.map((field) => field?.toLowerCase() ?? null) ?? [];
+    const rows = new Map(fields.flatMap((field, index) => (field === null || fields.indexOf(field) !== fields.lastIndexOf(field) ? [] : [[field, index]])));
+    return { ...(asked.who === undefined ? {} : { who: asked.who }), rows, checks, answer };
+}
+export function useRequested() {
+    return useContext(RequestedRoll);
+}
+/** The check a row of someone's sheet answers, by its place: only on the sheet of whom the master asks. */
+export function requestedRow(requested, member, field) {
+    return requested === undefined || requested.who !== member ? undefined : requested.rows.get(field.toLowerCase());
+}
+/** The check the tray's dice answer, by its place: the one whose dice and number they are, when one alone is. */
+export function trayCheck(requested, notation) {
+    const matching = requested?.checks.filter((check) => sameDice(check.dice, notation)) ?? [];
+    return matching.length === 1 ? matching[0].index : undefined;
+}

package/dist/dashboard/rolls.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The rolls the player may see (D-279), the newest first: theirs with their character's token, the master's shown ones with the robot and for whom; hidden
+// rolls never come here. The player's free rolls come in too, dashed and dimmed, from this browser alone (D-330 (4)). A card like the sheet's, which shows the
+// newest roll while it is closed (D-284); beside the sheet, it is always open (D-289). Those of the last half hour, older ones at a click at the end of the
+// list; Clear starts the list again, the log untouched, and forgets the free rolls; Restore brings the log back, never them (D-302, D-304).
+import { useEffect, useRef, useState } from "preact/hooks";
+import { CardHeader, useMedia, useOpen } from "./card.js";
+import { DiceFaces } from "./faces.js";
+import { gameDateLabel, notationLabel } from "./game-words.js";
+import { cardIcons, DieIcon, Icon } from "./icons.js";
+import { notationModifier, strangerLabel } from "./labels.js";
+import { rollWindow } from "./layout.js";
+import { Token } from "./party.js";
+import { t } from "./text.js";
+// From this width the rolls are a column beside the sheet, as in the style sheet; where the browser remembers that the player put it away, and when they last
+// cleared the list of a campaign; how many older rolls each Load more shows.
+const besideSheet = "(min-width: 900px)";
+const awayKey = "rpg-engine.rolls-away";
+const clearedKey = "rpg-engine.rolls-cleared";
+const moreRolls = 10;
+// How long a new roll keeps its mark, which the style sheet fades at the end (D-303).
+const markLength = 9000;
+// Beside the sheet, the gap between the rolls' card and the window's foot, and the least room their list keeps (D-304).
+const windowMargin = 12;
+const leastRoom = 160;
+export function RollLog({ rolls, free, unread, campaign, party, fresh, onMore, onClearFree }) {
+    const lead = party.find((member) => member.role === "pc");
+    const [chosen, toggle] = useOpen("Rolls");
+    const beside = useMedia(besideSheet);
+    const [away, setAway] = useState(readAway);
+    const [cleared, setCleared] = useState(() => readCleared(campaign));
+    const [older, setOlder] = useState(0);
+    // The rolls already drawn: a new one comes in only the first time, not again when the column comes back.
+    const greeted = useRef(new Set());
+    const [track, setTrack] = useState(null);
+    const [scroller, setScroller] = useState(null);
+    const open = beside || chosen;
+    // The log's rolls and the free ones, by when each was rolled.
+    const all = [...rolls, ...free].toSorted((first, second) => Date.parse(first.at) - Date.parse(second.at));
+    const listed = rollWindow(all, { now: Date.now(), cleared, older, unread });
+    const newest = listed.shown.at(-1);
+    const below = useMoreBelow(scroller);
+    useListRoom(track, beside);
+    const clear = () => {
+        const now = Date.now();
+        setCleared(now);
+        setOlder(0);
+        writeCleared(campaign, now);
+        onClearFree();
+    };
+    // The whole log again, from the last half hour, older rolls at Load more as before the clearing.
+    const restore = () => {
+        setCleared(0);
+        setOlder(0);
+        writeCleared(campaign, 0);
+    };
+    // Older rolls: those read already, then more of the log once the page has shown all it read.
+    const loadMore = () => {
+        setOlder(older + moreRolls);
+        if (listed.before < older + moreRolls && unread) {
+            onMore();
+        }
+    };
+    const putAway = (now) => {
+        setAway(now);
+        writeAway(now);
+    };
+    if (beside && away) {
+        return (_jsx("aside", { class: "rolls away", "aria-label": t("Rolls"), children: _jsxs("button", { type: "button", class: "rolls-tab", "aria-label": t("Show the rolls"), onClick: () => putAway(false), children: [_jsx(DieIcon, { sides: 20 }), _jsx("span", { children: t("Rolls") })] }) }));
+    }
+    return (_jsx("aside", { class: "rolls", "aria-labelledby": "rolls-title", ref: setTrack, children: _jsxs("details", { class: "rolls-card", open: open, children: [_jsx(CardHeader, { icon: cardIcons.rolls, title: _jsx("h2", { id: "rolls-title", class: "rolls-title", children: t("Rolls") }), preview: newest === undefined ? undefined : `${[nameOf(newest, lead), newest.check].filter((part) => part !== undefined && part !== "").join(" · ")} · ${newest.total}`, open: open, onToggle: toggle, fixed: beside }), _jsxs("div", { class: beside ? "rolls-tools" : "rolls-tools folding", children: [(listed.shown.length > 0 || listed.more) && (_jsx("button", { type: "button", class: "icon-button tip-left", "aria-label": t("Clear the rolls"), "data-tip": t("Clear the list"), onClick: clear, children: _jsx(Icon, { name: "clearAll" }) })), beside && (_jsx("button", { type: "button", class: "icon-button tip-left", "aria-label": t("Hide the rolls"), "data-tip": t("Hide"), onClick: () => putAway(true), children: _jsx(Icon, { name: "aside" }) }))] }), _jsxs("div", { class: "roll-frame", children: [_jsxs("div", { class: "roll-scroll", ref: setScroller, children: [listed.shown.length === 0
+                                    ? _jsx("p", { class: "rolls-none", children: emptyText(rolls.length, listed.before) })
+                                    : (_jsx("ol", { class: "roll-list", children: [...listed.shown].reverse().map((roll) => _jsx(RollRow, { roll: roll, name: nameOf(roll, lead), token: tokenOf(roll, party, lead), fresh: fresh.has(roll.id), greeted: greeted.current }, roll.id)) })), listed.more
+                                    ? _jsx("button", { type: "button", class: "rolls-more", onClick: loadMore, children: t("Load more") })
+                                    : cleared > 0 && _jsx("button", { type: "button", class: "rolls-more", onClick: restore, children: t("Restore the cleared rolls") })] }), below && _jsx("div", { class: "rolls-below", "aria-hidden": "true" })] })] }) }));
+}
+/**
+ * One roll, in three lines (D-292): whom it is for, by their token and name; what it is; its dice as chips and the number added. Its total on the right; in
+ * its tooltip the whole roll, which the lines may cut, with the notation in words; the chat's text for a screen reader. A new one first opens its place, then
+ * appears in it, with a yellow corner for a while (D-303): as it first shows, whatever the readings after, and once.
+ */
+function RollRow({ roll, name, token, fresh, greeted }) {
+    const [entering] = useState(() => fresh && !greeted.has(roll.id));
+    const [marked, setMarked] = useState(entering);
+    useEffect(() => {
+        greeted.add(roll.id);
+        if (!entering) {
+            return;
+        }
+        const timer = window.setTimeout(() => setMarked(false), markLength);
+        return () => window.clearTimeout(timer);
+    }, []);
+    const player = roll.by === "player";
+    const free = "free" in roll;
+    // The whole roll, which the lines may cut: whom and what, the dice as the chat writes them, the notation in words, and when (D-299).
+    const said = [roll.check === undefined ? name : `${name} · ${roll.check}`, roll.text, notationLabel(roll.words), rolledWhen(roll), free ? t("Free roll · not logged") : undefined]
+        .filter((line) => line !== undefined && line !== "")
+        .join("\n");
+    return (_jsxs("li", { class: ["roll", player ? "by-player" : "by-master", free ? "free" : "", entering ? "entering" : ""].filter((part) => part !== "").join(" "), "data-roll": roll.id, title: said, children: [marked && _jsx("span", { class: "roll-flag", "aria-hidden": "true", children: "!" }), token === undefined ? _jsx("img", { class: "roll-robot", src: "/assets/favicon.svg", alt: "" }) : _jsx(Token, { member: token }), _jsxs("span", { class: "roll-who", children: [_jsx("span", { class: "visually-hidden", children: `${marked ? t("New.") + " " : ""}${free ? t("Your free roll, not logged:") : player ? t("Your roll:") : t("The master's roll:")} ` }), name] }), roll.check && _jsx("span", { class: "roll-check", children: roll.check }), _jsx("span", { class: "roll-total num", children: roll.total }), _jsxs("span", { class: "roll-dice", children: [_jsx(DiceFaces, { dice: roll.dice, modifier: notationModifier(roll.notation) }), _jsx("span", { class: "visually-hidden", children: roll.text })] })] }));
+}
+/** What the list says with no roll in it: what comes there, that the last half hour had none, or that the player cleared it. */
+function emptyText(read, older) {
+    if (read === 0) {
+        return t("The checks the master asks of you come here, and the master's rolls you may see.");
+    }
+    return older > 0 ? t("No rolls in the last half hour.") : t("Cleared: the new rolls come here.");
+}
+/** Whom a roll is for, by name: the player's character for the player's own, whom the master named, or the master for a roll for no one. */
+function nameOf(roll, lead) {
+    return roll.who === undefined ? (roll.by === "player" ? lead?.name ?? "" : t("The master")) : roll.stranger ? strangerLabel(roll.who) : roll.who;
+}
+/**
+ * The token of whom a roll is for (D-286): the player's character for the player's own; a member of the party; anyone else with their picture, or a question mark
+ * for someone the character does not know; none, so the robot, for a roll the master makes for no one.
+ */
+function tokenOf(roll, party, lead) {
+    const member = party.find((candidate) => candidate.name === roll.who);
+    if (roll.by === "player") {
+        return member ?? lead ?? { name: "?", role: "pc" };
+    }
+    if (member !== undefined || roll.who === undefined) {
+        return member;
+    }
+    return { name: roll.stranger ? "?" : roll.who, role: "other", ...(roll.image === undefined ? {} : { image: roll.image }) };
+}
+function readAway() {
+    try {
+        return localStorage.getItem(awayKey) === "away";
+    }
+    catch {
+        return false;
+    }
+}
+function writeAway(away) {
+    try {
+        localStorage.setItem(awayKey, away ? "away" : "beside");
+    }
+    catch {
+        // The page forgets it at the next reload.
+    }
+}
+function readCleared(campaign) {
+    try {
+        return Number(localStorage.getItem(`${clearedKey}:${campaign ?? ""}`) ?? 0) || 0;
+    }
+    catch {
+        return 0;
+    }
+}
+function writeCleared(campaign, at) {
+    try {
+        if (at === 0) {
+            localStorage.removeItem(`${clearedKey}:${campaign ?? ""}`);
+        }
+        else {
+            localStorage.setItem(`${clearedKey}:${campaign ?? ""}`, String(at));
+        }
+    }
+    catch {
+        // The page forgets it at the next reload.
+    }
+}
+/** Whether a list that scrolls has more under what it shows (D-304): as it scrolls, and as it, its rolls or its end change. */
+function useMoreBelow(scroller) {
+    const [below, setBelow] = useState(false);
+    useEffect(() => {
+        if (scroller === null) {
+            return;
+        }
+        const update = () => setBelow(scroller.scrollTop + scroller.clientHeight < scroller.scrollHeight - 2);
+        const sizes = new ResizeObserver(update);
+        const watch = () => {
+            sizes.disconnect();
+            sizes.observe(scroller);
+            for (const child of scroller.children) {
+                sizes.observe(child);
+            }
+            update();
+        };
+        const children = new MutationObserver(watch);
+        children.observe(scroller, { childList: true });
+        scroller.addEventListener("scroll", update, { passive: true });
+        watch();
+        return () => {
+            sizes.disconnect();
+            children.disconnect();
+            scroller.removeEventListener("scroll", update);
+        };
+    }, [scroller]);
+    return below;
+}
+/**
+ * Beside the sheet, how tall the rolls' list may be (D-304): from where their card stands, under the page's top, to the window's foot or the sheet's end,
+ * whichever comes first, so that the card never leaves the window, slides under the page's top or makes the page taller.
+ */
+function useListRoom(track, beside) {
+    useEffect(() => {
+        if (track === null || !beside) {
+            return;
+        }
+        let asked = 0;
+        const measure = () => {
+            asked = 0;
+            const card = track.querySelector(".rolls-card");
+            const list = track.querySelector(".roll-scroll");
+            if (card === null || list === null) {
+                return;
+            }
+            const box = track.getBoundingClientRect();
+            const top = Math.max(Number.parseFloat(getComputedStyle(card).top) || 0, box.top);
+            const bottom = Math.min(window.innerHeight - windowMargin, box.bottom);
+            const around = card.offsetHeight - list.offsetHeight;
+            track.style.setProperty("--list-room", `${Math.max(leastRoom, Math.floor(bottom - top - around))}px`);
+        };
+        const update = () => {
+            asked ||= requestAnimationFrame(measure);
+        };
+        const sizes = new ResizeObserver(update);
+        sizes.observe(track);
+        window.addEventListener("scroll", update, { passive: true });
+        window.addEventListener("resize", update);
+        // The card's place changes as the page's top or what the master asks come and go.
+        track.addEventListener("transitionend", update);
+        update();
+        return () => {
+            cancelAnimationFrame(asked);
+            sizes.disconnect();
+            window.removeEventListener("scroll", update);
+            window.removeEventListener("resize", update);
+            track.removeEventListener("transitionend", update);
+            track.style.removeProperty("--list-room");
+        };
+    }, [track, beside]);
+}
+/** When a roll was made: the game's day and hour, and the real time, as "day 1, 18:00 in the game · rolled at 18:15". */
+function rolledWhen(roll) {
+    const real = new Date(roll.at);
+    const time = Number.isNaN(real.getTime()) ? undefined : t("rolled at {time}", { time: real.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) });
+    return [roll.date === undefined ? undefined : t("{date} in the game", { date: gameDateLabel(roll.date) }), time].filter((part) => part !== undefined).join(" · ");
+}

package/dist/dashboard/saves.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { sectionAddress } from "./address.js";
+import { changeSaves, readSaves } from "./api.js";
+import { gameDateLabel } from "./game-words.js";
+import { Icon } from "./icons.js";
+import { phraseLabel, realTimeLabel, valueLabel } from "./labels.js";
+import { placeKinds } from "./map-symbols.js";
+import { PageHead } from "./pages.js";
+import { t } from "./text.js";
+export function SavesView({ version, campaign }) {
+    const [saves, setSaves] = useState();
+    const [problem, setProblem] = useState();
+    const [said, setSaid] = useState();
+    const [asking, setAsking] = useState();
+    const [busy, setBusy] = useState(false);
+    const reads = useRef(0);
+    const saying = useRef(null);
+    // Only the last reading counts, as after a change made here and the one the game sends.
+    const read = () => {
+        const reading = ++reads.current;
+        void readSaves().then((read) => {
+            if (reading === reads.current) {
+                setSaves(read);
+                setProblem(undefined);
+            }
+        }, (error) => setProblem(error instanceof Error ? error.message : String(error)));
+    };
+    useEffect(read, [version]);
+    // After going back the button pressed is gone with its card: what happened takes the focus, in view.
+    useEffect(() => {
+        if (said?.went === true) {
+            saying.current?.focus({ preventScroll: true });
+            saying.current?.scrollIntoView({ block: "nearest" });
+        }
+    }, [said]);
+    const send = async (change, done) => {
+        setBusy(true);
+        const refused = await changeSaves(change);
+        setBusy(false);
+        setAsking(undefined);
+        const went = change.action === "load" || change.action === "reset";
+        setSaid(refused === undefined ? { problem: false, text: done, went } : { problem: true, text: refused, went });
+        read();
+    };
+    const points = saves?.reset ?? [];
+    return (_jsxs("section", { class: "saves", "aria-labelledby": "saves-title", children: [_jsx(PageHead, { section: "saves", id: "saves-title" }), saves !== undefined && (_jsxs("p", { class: "saves-lead", children: [_jsxs("strong", { children: [valueLabel(saves.mode), ":"] }), " ", modeText(saves.mode) ?? saves.rule, " ", _jsx("a", { href: sectionAddress("settings"), children: t("Change it in Settings.") })] })), problem !== undefined && _jsx("p", { class: "saves-said problem", role: "alert", children: problem }), said !== undefined && _jsx("p", { ref: saying, tabIndex: -1, class: said.problem ? "saves-said problem" : "saves-said", role: "status", children: said.text }), saves?.wentBack !== undefined && (_jsx(NewChat, { back: wentBackTitle(saves.wentBack, saves.saves), busy: busy, onConfirm: () => void send({ action: "new chat" }, `✓ ${t("The game goes on in the new chat: write «continua» there.")}`) })), saves?.make === true && _jsx(SaveNow, { busy: busy, onSave: (label) => void send({ action: "make", ...(label === "" ? {} : { label }) }, `✓ ${t("Saved.")}`) }), saves !== undefined && saves.saves.length === 0 && _jsx("p", { class: "saves-none", children: t("No saves yet: the game saves its start when play begins, then at the end of each scene.") }), saves !== undefined && saves.saves.length > 0 && (_jsx("ol", { class: "save-cards", children: saves.saves.map((save, index) => (_jsxs("li", { class: "save-card", children: [_jsx(SaveFace, { save: save }), save.load && (_jsx("button", { type: "button", class: "save-button", "aria-label": t("Go back here: {save}", { save: saveTitle(save) }), disabled: busy, onClick: () => setAsking(save), children: t("Go back here") })), saves.mode === "checkpoint" && index === 0 && !save.load && save.point === undefined && _jsx("p", { class: "save-note", children: t("Back here if your character dies") })] }, save.number))) })), points.length > 0 && (_jsxs("section", { class: "saves-over", "aria-labelledby": "saves-over-title", children: [_jsx("h3", { id: "saves-over-title", children: t("Start over") }), _jsx("p", { children: points.length > 1
+                            ? t("Back to the campaign's start: everything that happened since is gone from the story, with the same character or a new one.")
+                            : t("Back to the campaign's start: everything that happened since is gone from the story.") }), _jsx("button", { type: "button", class: "save-button danger", disabled: busy, onClick: () => setAsking("reset"), children: t("Start the campaign over…") })] })), asking !== undefined && asking !== "reset" && saves !== undefined && (_jsx(GoBack, { save: asking, later: saves.saves.filter((save) => save.number > asking.number).length, busy: busy, onClose: () => setAsking(undefined), onConfirm: () => void send({ action: "load", save: asking.number }, t("Back to {save}.", { save: saveTitle(asking) })) })), asking === "reset" && saves !== undefined && points.length > 0 && (_jsx(StartOver, { saves: saves.saves, points: points, campaign: campaign, busy: busy, onClose: () => setAsking(undefined), onConfirm: (name, to) => void send({ action: "reset", campaign: name, to }, to === "session zero" ? t("The campaign starts over, your character to make again.") : t("The campaign starts over.")) }))] }));
+}
+/** A save as its card shows it: the picture of the place, or the mark of its kind; its name, the badge of a point to start over from, the place and the time. */
+function SaveFace({ save }) {
+    const kind = save.kind === undefined ? undefined : placeKinds[save.kind];
+    const when = save.at === undefined ? undefined : realTimeLabel(save.at);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: save.picture === undefined && kind !== undefined ? "save-picture kind" : "save-picture", children: [save.picture !== undefined
+                        ? _jsx("img", { src: `/images/${encodeURIComponent(save.picture.file)}?v=${save.picture.version}`, alt: "", loading: "lazy" })
+                        : kind !== undefined
+                            ? (_jsx("svg", { class: "save-kind", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: kind.glyph }) }))
+                            : _jsx(Icon, { name: "place" }), save.point !== undefined && _jsx("span", { class: "save-badge", "aria-hidden": save.name === save.point ? "true" : undefined, children: pointLabel(save.point) })] }), _jsxs("div", { class: "save-what", children: [_jsx("h3", { class: "save-title", children: saveTitle(save) }), (save.place !== undefined || save.date !== undefined) && (_jsxs("span", { class: "save-place", children: [save.place !== undefined && _jsx("span", { children: save.place }), save.place !== undefined && save.date !== undefined && " · ", save.date !== undefined && _jsx("span", { children: phraseLabel(gameDateLabel(save.date)) })] })), when !== undefined && _jsx("time", { class: "save-at", dateTime: save.at, title: when.full, children: t("Saved {when}", { when: when.short }) })] })] }));
+}
+/**
+ * After going back, until the player confirms it (D-361, D-362): the chat they played in remembers what is gone, so the master goes on only in a new one, which
+ * the player opens and confirms here, or tells the master there.
+ */
+function NewChat({ back, busy, onConfirm }) {
+    return (_jsxs("div", { class: "saves-chat", children: [_jsxs("p", { children: [_jsx("strong", { children: t("Open a new chat with the master.") }), " ", t("The game went back to {save}, and the chat you were playing in remembers what is gone: the master goes on only in a new one (/clear in Claude Code, a new conversation elsewhere). Once it is open, press here, or tell the master there.", { save: back })] }), _jsx("button", { type: "button", class: "save-button gold", disabled: busy, onClick: onConfirm, children: t("I opened a new chat") })] }));
+}
+/** The save the game went back to, by its card's title when it is still there. */
+function wentBackTitle(back, saves) {
+    const save = saves.find((one) => back.startsWith(`${one.number} - `));
+    return save === undefined ? back : saveTitle(save);
+}
+/** Saving now, with a name if the player likes. */
+function SaveNow({ busy, onSave }) {
+    const [label, setLabel] = useState("");
+    return (_jsxs("form", { class: "saves-make", onSubmit: (event) => {
+            event.preventDefault();
+            onSave(label.trim());
+            setLabel("");
+        }, children: [_jsx("input", { type: "text", value: label, maxLength: 80, placeholder: t("Name (optional)"), "aria-label": t("The save's name, if you like"), onInput: (event) => setLabel(event.currentTarget.value) }), _jsx("button", { type: "submit", class: "save-button gold", disabled: busy, children: t("Save now") })] }));
+}
+/** Going back to a save, once confirmed: what is lost said first. */
+function GoBack({ save, later, busy, onClose, onConfirm }) {
+    const lost = later === 0
+        ? t("The game goes back to how it was then. What happened after it is gone from the story.")
+        : later === 1
+            ? t("The game goes back to how it was then. What happened after it is gone from the story, and so is the save after it.")
+            : t("The game goes back to how it was then. What happened after it is gone from the story, and so are the {count} saves after it.", { count: later });
+    return (_jsxs(Confirm, { title: t("Go back to this save?"), onClose: onClose, children: [_jsx("div", { class: "save-card shown", children: _jsx(SaveFace, { save: save }) }), _jsx("p", { children: lost }), _jsx("p", { class: "confirm-note", children: t("Your settings stay as they are. A copy of the game as it is now stays in the campaign's .saves folder.") }), _jsxs("div", { class: "confirm-buttons", children: [_jsx("button", { type: "button", class: "save-button", autoFocus: true, onClick: onClose, children: t("Cancel") }), _jsx("button", { type: "button", class: "save-button danger final", disabled: busy, onClick: onConfirm, children: t("Go back") })] })] }));
+}
+/**
+ * Starting the campaign over, in two steps: from where, with the same character or a new one, and what is lost; then the campaign's name written, as for
+ * anything that cannot be taken back from the page.
+ */
+function StartOver({ saves, points, campaign, busy, onClose, onConfirm }) {
+    const [to, setTo] = useState(points[0]);
+    const [sure, setSure] = useState(false);
+    const [name, setName] = useState("");
+    const field = useRef(null);
+    const matches = campaign !== undefined && comparable(name) === comparable(campaign);
+    const target = saves.find((save) => save.point === to);
+    // The second step takes the focus to the name, which the dialog gave the first step's Cancel.
+    useEffect(() => {
+        if (sure) {
+            field.current?.focus();
+        }
+    }, [sure]);
+    return (_jsxs(Confirm, { title: t("Start the campaign over?"), onClose: onClose, children: [!sure && (_jsxs(_Fragment, { children: [points.length > 1 && (_jsxs("fieldset", { class: "over-choice", children: [_jsx("legend", { children: t("From where") }), points.map((point) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "start-over-from", checked: to === point, onChange: () => setTo(point) }), _jsxs("span", { children: [_jsx("strong", { children: pointTexts(point).title }), _jsx("span", { children: pointTexts(point).about })] })] }, point)))] })), target !== undefined && (_jsx("div", { class: "save-card shown", children: _jsx(SaveFace, { save: target }) })), _jsx("p", { children: to === "session zero"
+                            ? t("Everything that happened since is gone from the story, and so is every save after it, your character too.")
+                            : t("Everything that happened since is gone from the story, and so is every save after it.") }), _jsx("p", { class: "confirm-note", children: t("Your settings stay as they are. A copy of the game as it is now stays in the campaign's .saves folder.") }), _jsxs("div", { class: "confirm-buttons", children: [_jsx("button", { type: "button", class: "save-button", autoFocus: true, onClick: onClose, children: t("Cancel") }), _jsx("button", { type: "button", class: "save-button danger", onClick: () => setSure(true), children: t("Continue") })] })] })), sure && (_jsxs("form", { class: "confirm-name", onSubmit: (event) => {
+                    event.preventDefault();
+                    if (matches) {
+                        onConfirm(name, to);
+                    }
+                }, children: [_jsxs("label", { for: "start-over-name", children: [t("To start it over, write the campaign's name"), campaign === undefined ? "" : (_jsxs(_Fragment, { children: [": ", _jsx("strong", { children: campaign })] }))] }), _jsx("input", { ref: field, id: "start-over-name", type: "text", value: name, autoComplete: "off", spellcheck: false, onInput: (event) => setName(event.currentTarget.value) }), _jsxs("div", { class: "confirm-buttons", children: [_jsx("button", { type: "button", class: "save-button", onClick: onClose, children: t("Cancel") }), _jsx("button", { type: "submit", class: "save-button danger final", disabled: !matches || busy, children: t("Start over") })] })] }))] }));
+}
+/** A modal question over the whole page, the dice too, which Escape closes. */
+function Confirm({ title, onClose, children }) {
+    const dialog = useRef(null);
+    useEffect(() => {
+        dialog.current?.showModal();
+    }, []);
+    return (_jsxs("dialog", { ref: dialog, class: "confirm", "aria-labelledby": "confirm-title", onClose: onClose, children: [_jsx("h2", { id: "confirm-title", children: title }), children] }));
+}
+/** The words that name a save, else its label; the points the game saved by itself, by what they are. */
+function saveTitle(save) {
+    if (save.point !== undefined && save.name === save.point) {
+        return pointLabel(save.point);
+    }
+    return phraseLabel(save.name ?? save.label);
+}
+/** A name as the game compares it: its case and its curly quotes aside. */
+function comparable(text) {
+    return text.trim().normalize("NFC").toLowerCase().replace(/[‘’]/g, "'");
+}
+/** What a mode of saves lets the player do, in their words; undefined for one the page does not know. */
+function modeText(mode) {
+    const texts = {
+        free: t("save when you like, and go back to any save."),
+        checkpoint: t("the game saves at the end of each scene, and goes back to the last save only if your character dies."),
+        permadeath: t("the game saves at the end of each scene, but never goes back: what happens stays. You can only start the campaign over."),
+    };
+    return texts[mode];
+}
+/** A point the campaign starts over from, by name: the start, or before session zero. */
+function pointLabel(point) {
+    return point === "start" ? t("The start") : t("Before session zero");
+}
+/** The two ways to start over, when the campaign has both. */
+function pointTexts(point) {
+    return point === "start"
+        ? { title: t("With the same character"), about: t("Back to the start of play, after session zero.") }
+        : { title: t("With a new character"), about: t("Back to before session zero: the world and your settings stay, your character is made again.") };
+}

package/dist/dashboard/scene.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The Scene section (D-309, VIEW-6): where the party is, its picture with the places around it, its name and what holds there; the open scene, who is in it and
+// whose turn it is; outside a scene who is there of those the character knows; then the place's text.
+import { sectionAddress } from "./address.js";
+import { effectLabel, sinceDateLabel, terrainLabel } from "./game-words.js";
+import { cardIcons, Icon } from "./icons.js";
+import { phraseLabel, sceneTypeLabel, strangerLabel } from "./labels.js";
+import { biomeLabel } from "./map-symbols.js";
+import { Markdown, plainLine } from "./markdown.js";
+import { sideOf, Token } from "./party.js";
+import { PlaceMap } from "./place-map-view.js";
+import { Card } from "./sheet.js";
+import { StatusPip } from "./status.js";
+import { t } from "./text.js";
+export function SceneView({ place, scene }) {
+    if (place === undefined && scene === undefined) {
+        return (_jsxs("section", { class: "upcoming", "aria-labelledby": "place-name", children: [_jsx("h2", { id: "place-name", children: t("In the open") }), _jsx("p", { children: t("The party is in no place the character knows, as on a road between two.") })] }));
+    }
+    return (_jsxs("section", { class: scene === undefined && place?.map === undefined ? "place-view" : "place-view with-scene", "aria-labelledby": "place-name", children: [place && _jsx(PlaceBand, { place: place }), scene && _jsx(SceneCard, { scene: scene }), place?.map && _jsx(PlaceMap, { map: place.map, place: place.name }), _jsxs("div", { class: "groups", children: [scene === undefined && place && place.here.length > 0 && place.map === undefined && (_jsx(Card, { name: "Here", title: t("Here"), icon: cardIcons.here, layout: "lore", preview: place.here.map((person) => person.name).join(" · "), children: _jsx(People, { people: place.here }) })), place && place.text.trim() !== "" && (_jsx(Card, { name: "Description", title: t("Description"), icon: cardIcons.description, layout: "lore", preview: plainLine(place.text), children: _jsx(Markdown, { text: place.text }) }))] })] }));
+}
+/** The place's band (D-309): its picture with its name over it, or without one a compact band; the places that hold it, and what holds there. */
+function PlaceBand({ place }) {
+    const caption = (_jsxs("div", { class: "place-caption", children: [place.within.length > 0 && (_jsx("ol", { class: "place-path", "aria-label": t("Within"), children: place.within.map((name) => _jsx("li", { children: name }, name)) })), _jsx("h2", { id: "place-name", children: place.name }), place.around.length > 0 && (_jsx("ul", { class: "place-env", "aria-label": t("Around"), children: place.around.map((item) => _jsx(Surrounding, { item: item, name: place.name }, `${"effect" in item ? item.effect : item.name} ${item.place ?? ""}`)) }))] }));
+    return place.image === undefined
+        ? (_jsxs("header", { class: "place-band compact", children: [_jsx("div", { class: "place-disc", children: _jsx(Icon, { name: "house" }) }), caption] }))
+        : (_jsxs("header", { class: "place-band over", children: [_jsx("figure", { class: "place-image", children: _jsx("img", { src: `/images/${encodeURIComponent(place.image.file)}?v=${place.image.version}`, alt: "" }) }), caption] }));
+}
+/**
+ * One thing that holds there: an entry of the environment as its name and value, as light dim, the biome and the terrain the engine reads in the page's language;
+ * an effect with its end; the place it comes from, when another.
+ */
+function Surrounding({ item, name }) {
+    const from = item.place === undefined || item.place === name ? undefined : item.place;
+    const entry = "effect" in item ? undefined : environmentLabel(item.name, item.value);
+    return (_jsxs("li", { children: ["effect" in item ? effectLabel({ name: item.effect, end: item.end }) : (_jsxs(_Fragment, { children: [entry?.name !== "" && _jsx("span", { class: "k", children: entry?.name }), entry?.value] })), from && _jsx("span", { class: "from", children: ` · ${from}` })] }));
+}
+/** An entry of a place's environment: the biome and the terrain, which the engine reads, in the page's language; any other as the master wrote it. */
+function environmentLabel(name, value) {
+    const known = name.trim().toLowerCase();
+    return known === "biome" ? { name: t("biome"), value: biomeLabel(value)?.toLowerCase() ?? value } : known === "terrain" ? { name: "", value: phraseLabel(terrainLabel(value)) } : { name, value };
+}
+/** The open scene (D-309): its title, type and since when, who is in it, and in a fight the round and whose turn it is. */
+function SceneCard({ scene }) {
+    const turn = scene.turn === undefined
+        ? undefined
+        : [scene.round === undefined ? undefined : t("Round {round}", { round: scene.round }), t("{name}'s turn", { name: strangerLabel(scene.turn) })].filter((part) => part !== undefined).join(" · ");
+    return (_jsxs("section", { class: "scene-now", "aria-labelledby": "scene-title", children: [_jsxs("header", { children: [_jsx("p", { class: "eyebrow", children: t("Scene") }), _jsx("h3", { id: "scene-title", children: scene.title }), _jsx("span", { class: "scene-type", "data-type": scene.type, children: sceneTypeLabel(scene.type) }), scene.since && _jsx("span", { class: "scene-since", children: sinceDateLabel(scene.since) })] }), scene.now && _jsx("p", { class: "scene-line", children: scene.now }), _jsx(People, { people: scene.who }), scene.type === "combat"
+                ? (_jsxs("p", { class: "scene-turn", children: [turn && `${turn} · `, _jsx("a", { href: sectionAddress("combat"), children: t("Turn order") })] }))
+                : turn && _jsx("p", { class: "scene-turn", children: turn })] }));
+}
+/**
+ * Who is there: their tokens with their names under them, the party first; someone the character does not know as a hood, the copies with how many; a foe the
+ * master marked glows red a little (D-415); one of the party with the pip of their side (D-414); anyone with the pip of their state (D-419).
+ */
+function People({ people }) {
+    return (_jsx("ul", { class: "present", children: people.map((person, index) => (_jsxs("li", { class: person.role === "other" && index > 0 && people[index - 1].role !== "other" ? "after-party" : undefined, children: [person.stranger && person.image === undefined
+                    ? (_jsxs("span", { class: ["token stranger", letterOf(person.name) === undefined ? "" : "numbered", person.hostile === true ? "hostile" : ""].filter((name) => name !== "").join(" "), "aria-hidden": "true", children: [letterOf(person.name) ?? _jsx(Icon, { name: "stranger" }), _jsx(StatusPip, { status: person })] }))
+                    : (_jsx(Token, { member: { name: person.name, role: person.role, ...(person.image === undefined ? {} : { image: person.image }), ...(person.icon === undefined ? {} : { icon: person.icon }) }, hostile: person.hostile === true, side: sideOf(person.role), status: person, number: person.stranger ? letterOf(person.name) : undefined })), _jsxs("span", { children: [person.stranger ? strangerLabel(person.name) : person.name, person.count !== undefined && person.count > 1 && _jsx("span", { class: "count", children: ` ×${person.count}` })] })] }, `${person.name} ${index}`))) }));
+}
+/** The letter of a kind of creature the character does not know, as "creature B" has: none for one kind alone, or for someone. */
+function letterOf(name) {
+    return /^creature ([A-Z])$/.exec(name)?.[1];
+}