rpg-engine 0.0.0-stage → 0.1.1

package/dist/dashboard/settings.js

@@ -0,0 +1,362 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { changeSetting, readSettings } from "./api.js";
+import { diceEdgesPref, diceLook, diceSetPref, diceSets, texturePath } from "./dice/sets.js";
+import { DieSwatch, Icon } from "./icons.js";
+import { settingLabel, valueLabel } from "./labels.js";
+import { LanguageChoice, languageLine } from "./language-choice.js";
+import { PageHead } from "./pages.js";
+import { byHandPref, conditionsPref, soundPref, tokenSymbolsPref, useChoice, usePref, usePrefChange } from "./prefs.js";
+import { arrowStep, t } from "./text.js";
+import { pickTheme, shownTheme } from "./theme.js";
+// The groups of the campaign's settings, in order; a setting the game system adds goes with the dice.
+const groups = [
+    { names: ["difficulty", "lethality", "saves", "rigor"] },
+    { names: ["mentor", "learned"] },
+    { names: ["prose", "story", "author", "style"] },
+    { names: ["dice", "units"], system: true },
+    { names: ["lines", "veils"] },
+    { names: ["pictures", "language"] },
+];
+export function SettingsView({ version }) {
+    const [settings, setSettings] = useState();
+    const [problem, setProblem] = useState();
+    const reads = useRef(0);
+    // Only the last reading counts, as after quick changes.
+    const read = () => {
+        const reading = ++reads.current;
+        void readSettings().then((read) => reading === reads.current && setSettings(read), (error) => setProblem(error instanceof Error ? error.message : String(error)));
+    };
+    // Read again whenever the campaign changes, as after a change made here or by the master.
+    useEffect(read, [version]);
+    // While a setting says how to have what this computer lacks, as pictures without Codex, read again each minute: the engine asks again.
+    const waiting = settings?.some((setting) => setting.note?.fix === true) === true;
+    useEffect(() => {
+        const timer = waiting ? setInterval(read, 60_000) : undefined;
+        return () => clearInterval(timer);
+    }, [waiting]);
+    const change = async (body) => {
+        const said = await changeSetting(body);
+        read();
+        return said;
+    };
+    const known = new Set(groups.flatMap((group) => group.names));
+    return (_jsxs("section", { class: "settings", "aria-labelledby": "settings-title", children: [_jsx(PageHead, { section: "settings", id: "settings-title" }), _jsx("p", { class: "settings-lead", children: t("A change counts at once, from now on: what is already in play stays as it is. The master hears of it at their next move, and of nothing you put back as it was.") }), problem !== undefined && _jsx("p", { class: "settings-problem", role: "alert", children: problem }), settings !== undefined && groups.map((group, index) => {
+                const shown = [
+                    ...group.names.flatMap((name) => settings.filter((setting) => setting.name === name)),
+                    ...(group.system ? settings.filter((setting) => !known.has(setting.name)) : []),
+                ];
+                return (_jsxs("section", { class: "settings-group", children: [_jsx("h3", { children: groupTitle(index) }), shown.map((setting) => _jsx(SettingRow, { setting: setting, off: offBy(setting, settings), onChange: change }, setting.name))] }, group.names[0]));
+            }), _jsx(PageSettings, {})] }));
+}
+/** Why a setting counts for nothing now, as the prose while an author is written (D-395); undefined for one that counts. */
+function offBy(setting, settings) {
+    const author = settings.find((one) => one.name === "author")?.value;
+    return setting.name === "prose" && author !== undefined ? t("The author you wrote takes its place: this counts again once you clear the author.") : undefined;
+}
+/**
+ * One setting: its name and what it is, its values to choose from, a list's items to add and take off, the player's own words, or the language; what the chosen
+ * value means; why it counts for nothing now, its values still to choose.
+ */
+function SettingRow({ setting, off, onChange }) {
+    // The value just picked shows at once, until the setting is read again.
+    const [picked, setPicked] = useState();
+    const resting = useRef();
+    const said = useSaid();
+    const value = picked ?? setting.value;
+    const id = `setting-${idOf(setting.name)}`;
+    useEffect(() => setPicked(undefined), [setting]);
+    // A choice the arrows left still resting goes when the section closes.
+    useEffect(() => () => {
+        if (resting.current !== undefined) {
+            clearTimeout(resting.current.timer);
+            void onChange({ setting: setting.name, value: resting.current.choice });
+        }
+    }, []);
+    const send = (change) => {
+        void onChange(change).then(said.show);
+    };
+    // A click chooses at once; the arrows show each value and send the one they rest on, so that the game is changed once.
+    const choose = (choice, byKey) => {
+        setPicked(choice);
+        clearTimeout(resting.current?.timer);
+        resting.current = undefined;
+        if (!byKey) {
+            send({ setting: setting.name, value: choice });
+            return;
+        }
+        const timer = setTimeout(() => {
+            resting.current = undefined;
+            send({ setting: setting.name, value: choice });
+        }, 700);
+        resting.current = { choice, timer };
+    };
+    const chosen = setting.choices?.find((choice) => choice.value === value);
+    const unset = setting.most === undefined && (setting.choices === undefined ? setting.items === undefined && setting.value === undefined : chosen === undefined);
+    const described = [`${id}-about`, ...(chosen?.means === undefined ? [] : [`${id}-means`]), ...(off === undefined ? [] : [`${id}-off`])].join(" ");
+    return (_jsxs("div", { class: off === undefined ? "setting" : "setting off", children: [_jsxs("div", { class: "setting-what", children: [_jsx("span", { class: "setting-name", id: id, children: settingLabel(setting.name) }), _jsx("span", { class: "setting-about", id: `${id}-about`, children: t(setting.about) })] }), setting.choices !== undefined
+                ? (_jsx(Segmented, { label: id, described: described, options: setting.choices.map((choice) => ({ value: choice.value, label: valueLabel(choice.value) })), value: value, onPick: choose }))
+                : setting.name === "language"
+                    ? _jsx(LanguageChoice, { value: value, labelledBy: id, describedBy: `${id}-about`, onPick: (code) => choose(code, false) })
+                    : setting.most !== undefined
+                        ? _jsx(TextSetting, { setting: setting, label: id, onChange: send })
+                        : _jsx(ListSetting, { setting: setting, label: id, onChange: send }), _jsxs("div", { class: "setting-after", children: [off !== undefined && _jsx("p", { class: "setting-off", id: `${id}-off`, children: off }), chosen?.means !== undefined && (_jsxs("p", { class: "setting-means", id: `${id}-means`, children: [_jsxs("strong", { children: [valueLabel(chosen.value), ":"] }), " ", t(chosen.means)] })), setting.name === "language" && value !== undefined && _jsx("p", { class: "setting-means", children: languageLine(value) }), unset && _jsx("p", { class: "setting-unset", children: setting.choices === undefined ? t("Not answered yet: add them here, or the master asks you.") : t("Not chosen yet: choose here, or the master asks you.") }), setting.note !== undefined && _jsx(SettingNote, { note: setting.note }), _jsx("p", { class: said.now?.problem ? "setting-said problem" : "setting-said", role: "status", children: said.now?.text })] })] }));
+}
+/** What a change said, in its row: saved for a few seconds, what went wrong until the next change. */
+function useSaid() {
+    const [now, setNow] = useState();
+    const timer = useRef();
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const show = (problem) => {
+        clearTimeout(timer.current);
+        setNow(problem === undefined ? { problem: false, text: `✓ ${t("Saved")}` } : { problem: true, text: problem });
+        if (problem === undefined) {
+            timer.current = setTimeout(() => setNow(undefined), 4000);
+        }
+    };
+    return { now, show };
+}
+/** A list's items, each to take off, and a field to add one; the focus goes on to the next item when one is taken off. */
+function ListSetting({ setting, label, onChange }) {
+    const [item, setItem] = useState("");
+    const [focusAt, setFocusAt] = useState();
+    const list = useRef(null);
+    useEffect(() => {
+        if (focusAt !== undefined) {
+            const buttons = list.current?.querySelectorAll("li button") ?? [];
+            (buttons[Math.min(focusAt, buttons.length - 1)] ?? list.current?.querySelector("input"))?.focus();
+            setFocusAt(undefined);
+        }
+    }, [setting.items]);
+    return (_jsxs("div", { class: "setting-list", ref: list, children: [_jsx("ul", { "aria-labelledby": label, children: (setting.items ?? []).map((one, index) => (_jsxs("li", { children: [one, _jsx("button", { type: "button", class: "icon-button", "aria-label": t("Take {item} off", { item: one }), "data-tip": t("Take off"), onClick: () => {
+                                setFocusAt(index);
+                                onChange({ setting: setting.name, remove: one });
+                            }, children: _jsx(Icon, { name: "close" }) })] }, one))) }), _jsxs("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    if (item.trim() !== "") {
+                        onChange({ setting: setting.name, add: item.trim() });
+                        setItem("");
+                    }
+                }, children: [_jsx("input", { type: "text", value: item, maxLength: 200, placeholder: exampleOf(setting.name) ?? t("Add…"), "aria-label": t("Add to {setting}", { setting: settingLabel(setting.name) }), onInput: (event) => setItem(event.currentTarget.value) }), _jsx("button", { type: "submit", class: "setting-button", disabled: item.trim() === "", children: t("Add") })] })] }));
+}
+/**
+ * The player's own words, as the author the master writes like (D-395): sent with Enter or Save, back as they were with Escape, cleared with Clear or by
+ * saving them empty; the focus stays in the field.
+ */
+function TextSetting({ setting, label, onChange }) {
+    const saved = setting.value ?? "";
+    const [text, setText] = useState(saved);
+    const field = useRef(null);
+    const form = useRef(null);
+    // As the engine keeps them: on one line, without spaces around.
+    const said = text.replace(/\s+/g, " ").trim();
+    useEffect(() => setText(saved), [saved]);
+    const send = (words) => {
+        onChange({ setting: setting.name, value: words === "" ? "none" : words });
+    };
+    const keys = (event) => {
+        if (event.key === "Escape" && text !== saved) {
+            event.preventDefault();
+            setText(saved);
+        }
+        else if (event.key === "Enter" && !event.isComposing && field.current instanceof HTMLTextAreaElement) {
+            // A line break would be folded anyway: Enter sends, as in the field of one line; not while it picks a word of a script, as Japanese.
+            event.preventDefault();
+            form.current?.requestSubmit();
+        }
+    };
+    const attributes = {
+        ref: field,
+        value: text,
+        maxLength: setting.most,
+        placeholder: exampleOf(setting.name),
+        "aria-labelledby": label,
+        "aria-describedby": `${label}-about`,
+        onInput: (event) => setText(event.currentTarget.value),
+        onKeyDown: keys,
+    };
+    return (_jsxs("form", { class: "setting-text", ref: form, onSubmit: (event) => {
+            event.preventDefault();
+            if (said !== saved) {
+                send(said);
+            }
+        }, children: [(setting.most ?? 0) > 100 ? _jsx("textarea", { rows: 2, ...attributes }) : _jsx("input", { type: "text", ...attributes }), _jsxs("span", { class: "setting-text-buttons", children: [_jsx("button", { type: "submit", class: "setting-button", disabled: said === saved, children: t("Save") }), saved !== "" && (_jsx("button", { type: "button", class: "setting-button", "aria-label": t("Clear {setting}", { setting: settingLabel(setting.name) }), onClick: () => {
+                            setText("");
+                            send("");
+                            field.current?.focus();
+                        }, children: t("Clear") }))] })] }));
+}
+/** What the player should know of a setting on this computer, as how to have pictures: its lines, its steps in order, and the commands to copy. */
+function SettingNote({ note }) {
+    const blocks = noteBlocks(t(note.text));
+    return (_jsxs("div", { class: note.fix ? "setting-note fix" : "setting-note", children: [_jsx(Icon, { name: "info" }), _jsx("div", { class: "setting-note-text", children: blocks.map((block, index) => typeof block === "string" ? _jsx("p", { children: withCommands(block) }, index) : (_jsx("ol", { children: block.map((step) => _jsx("li", { children: withCommands(step) }, step)) }, index))) })] }));
+}
+/** A note's lines, those numbered as steps together. */
+function noteBlocks(text) {
+    const blocks = [];
+    for (const line of text.split("\n")) {
+        const step = /^\d+\.\s+(.+)$/.exec(line)?.[1];
+        const last = blocks.at(-1);
+        if (step === undefined) {
+            blocks.push(line);
+        }
+        else if (Array.isArray(last)) {
+            last.push(step);
+        }
+        else {
+            blocks.push([step]);
+        }
+    }
+    return blocks;
+}
+/** A line with its commands, written between backticks, as code with a button that copies them. */
+function withCommands(line) {
+    return line.split(/(`[^`]+`)/).map((part, index) => part.startsWith("`") && part.endsWith("`") && part.length > 2 ? _jsx(Command, { text: part.slice(1, -1) }, index) : part);
+}
+/** A command to type in a terminal, and a button that copies it. */
+function Command({ text }) {
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Where the browser keeps the clipboard, the command stays there to select.
+        }
+    };
+    return (_jsxs("span", { class: "setting-command", children: [_jsx("code", { children: text }), _jsx("button", { type: "button", class: "setting-copy", "aria-label": t("Copy {command}", { command: text }), onClick: () => void copy(), children: copied ? t("Copied") : t("Copy") })] }));
+}
+/** A name as a part of an element's id, without spaces: "dice sound" is dice-sound. */
+function idOf(name) {
+    return name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+}
+/** The page's own settings, in this browser alone: the theme, the tokens' symbols and conditions, the dice's sound, set and edges, rolling by hand. */
+function PageSettings() {
+    usePrefChange();
+    const [sound, setSound] = usePref(soundPref);
+    const [diceSet, setDiceSet] = useChoice(diceSetPref);
+    const [edges, setEdges] = useChoice(diceEdgesPref);
+    const [byHand, setByHand] = usePref(byHandPref);
+    const [symbols, setSymbols] = usePref(tokenSymbolsPref);
+    const [conditions, setConditions] = useChoice(conditionsPref);
+    // A row with many values has them under its name.
+    const rows = [
+        {
+            name: t("Theme"),
+            about: t("the page's look"),
+            options: [{ value: "light", label: t("Light") }, { value: "dark", label: t("Dark") }],
+            value: shownTheme(),
+            pick: (value) => pickTheme(value === "dark" ? "dark" : "light"),
+        },
+        {
+            name: t("Token symbols"),
+            about: t("a mark on each token: you, your companions, your foes"),
+            options: [{ value: "on", label: t("On") }, { value: "off", label: t("Off") }],
+            value: symbols ? "on" : "off",
+            pick: (value) => setSymbols(value === "on"),
+        },
+        {
+            name: t("Conditions on tokens"),
+            about: t("a mark on each token: what is on them, who is down"),
+            options: [{ value: "always", label: t("Always") }, { value: "hover", label: t("On hover") }, { value: "never", label: t("Never") }],
+            value: conditions,
+            pick: setConditions,
+        },
+        { name: t("Dice sound"), about: t("the dice as they roll"), options: [{ value: "on", label: t("On") }, { value: "off", label: t("Off") }], value: sound ? "on" : "off", pick: (value) => setSound(value === "on") },
+        {
+            name: t("Dice set"),
+            about: t("what your dice are made of"),
+            options: diceSets.map((set) => ({ value: set.value, label: diceSetLabel(set.value) ?? set.label, picture: _jsx(SetSwatch, { value: set.value }) })),
+            value: diceSet,
+            pick: setDiceSet,
+            under: true,
+        },
+        {
+            name: t("Dice edges"),
+            about: t("how the dice's edges are cut"),
+            options: [{ value: "rounded", label: t("Rounded") }, { value: "sharp", label: t("Sharp") }],
+            value: edges,
+            pick: setEdges,
+        },
+        {
+            name: t("Checks"),
+            about: t("what the master asks you to roll"),
+            options: [
+                { value: "ready", label: t("Ready buttons"), means: t("a button for each roll the master asks") },
+                { value: "hand", label: t("By hand"), means: t("you find the row on your sheet, or roll from the tray, as at the table") },
+            ],
+            value: byHand ? "hand" : "ready",
+            pick: (value) => setByHand(value === "hand"),
+        },
+    ];
+    return (_jsxs("section", { class: "settings-group", children: [_jsx("h3", { children: t("This page") }), _jsx("p", { class: "setting-about", children: t("Kept in this browser alone.") }), rows.map((row) => {
+                const id = `page-${idOf(row.name)}`;
+                const chosen = row.options.find((option) => option.value === row.value);
+                return (_jsxs("div", { class: row.under === true ? "setting under" : "setting", children: [_jsxs("div", { class: "setting-what", children: [_jsx("span", { class: "setting-name", id: id, children: row.name }), _jsx("span", { class: "setting-about", id: `${id}-about`, children: row.about })] }), _jsx(Segmented, { label: id, described: chosen?.means === undefined ? `${id}-about` : `${id}-about ${id}-means`, options: row.options, value: row.value, onPick: row.pick }), chosen?.means !== undefined && (_jsx("div", { class: "setting-after", children: _jsxs("p", { class: "setting-means", id: `${id}-means`, children: [_jsxs("strong", { children: [chosen.label, ":"] }), " ", chosen.means] }) }))] }, row.name));
+            })] }));
+}
+/** A set of dice's d20, in its colours or its grain. */
+function SetSwatch({ value }) {
+    const look = diceLook(value);
+    return _jsx(DieSwatch, { body: look.swatch ?? look.body, ink: look.ink, picture: look.finish.texture === undefined ? undefined : texturePath(look.finish.texture) });
+}
+/** Values to choose one of, as a radio group: the arrows move among them and choose, one stop of Tab; the chosen one in gold. */
+function Segmented({ label, described, options, value, onPick }) {
+    const at = options.findIndex((option) => option.value === value);
+    const move = (event) => {
+        const step = arrowStep(event.key);
+        if (step === 0) {
+            return;
+        }
+        event.preventDefault();
+        // From the value the focus is on, which a quick key reaches before the page draws the last choice.
+        const buttons = [...event.currentTarget.querySelectorAll("button")];
+        const from = buttons.indexOf(event.target);
+        const next = ((from >= 0 ? from : Math.max(at, 0)) + step + options.length) % options.length;
+        onPick(options[next].value, true);
+        buttons[next]?.focus();
+    };
+    return (_jsx("span", { class: "segmented", role: "radiogroup", "aria-labelledby": label, "aria-describedby": described, onKeyDown: move, children: options.map((option, index) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": option.value === value, tabIndex: index === Math.max(at, 0) ? 0 : -1, onClick: () => option.value !== value && onPick(option.value, false), children: [option.picture, option.label] }, option.value))) }));
+}
+/** A group of the campaign's settings by its place, in the page's language. */
+function groupTitle(index) {
+    return [t("The game"), t("Learning the game"), t("The master's style"), t("Dice and measures"), t("Limits"), t("Pictures and language")][index] ?? "";
+}
+/** What a list's field suggests, as an example. */
+function exampleOf(name) {
+    const examples = {
+        lines: t("Add, e.g. spiders"),
+        veils: t("Add, e.g. torture"),
+        learned: t("Add what you know, e.g. Advantage"),
+        author: t("An author's name"),
+        style: t("e.g. third person, past tense; more dialogue"),
+    };
+    return examples[name];
+}
+/** A set of dice by its name in the page's language; undefined for one the page does not name. */
+function diceSetLabel(value) {
+    const labels = {
+        theme: t("Theme"),
+        ivory: t("Ivory"),
+        obsidian: t("Obsidian"),
+        ruby: t("Ruby"),
+        emerald: t("Emerald"),
+        sapphire: t("Sapphire"),
+        amethyst: t("Amethyst"),
+        "ruby-crystal": t("Crystal ruby"),
+        "sapphire-crystal": t("Crystal sapphire"),
+        "amethyst-crystal": t("Crystal amethyst"),
+        glass: t("Glass"),
+        ice: t("Ice"),
+        steel: t("Steel"),
+        brass: t("Brass"),
+        walnut: t("Walnut"),
+        ash: t("Ash"),
+        marble: t("Marble"),
+        onyx: t("Onyx"),
+        granite: t("Granite"),
+    };
+    return labels[value];
+}

package/dist/dashboard/setup.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The Setup view (D-343, D-370): while the campaign is in its setup, the page is its first configuration, as a portal's: the robot as the host, the campaign's
+// name to change, the three steps, and one question at a time, its choices large with what each means and the one the game suggests, as Settings has them; a
+// choice can be left to the master. The master hears each choice at their next call (D-341), and the premise and the world stay in the chat.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { changeSetting, readSetup, sendSetupWord } from "./api.js";
+import { Icon } from "./icons.js";
+import { phraseLabel, settingLabel, valueLabel } from "./labels.js";
+import { Master } from "./master.js";
+import { arrowStep, t } from "./text.js";
+// The steps of a campaign before play (MOD-1).
+const steps = ["setup", "session zero", "play"];
+// The lists of the setup, answered with items or with none: limits are the player's alone, never left to the master.
+const lists = new Set(["lines", "veils"]);
+// How long the arrows rest on a choice before it goes to the game, in milliseconds: the game is changed once.
+const keyRest = 700;
+/** The setup, read again whenever the campaign changes; undefined until read, or when it cannot be. */
+export function useSetup(version) {
+    const [setup, setSetup] = useState();
+    const reads = useRef(0);
+    useEffect(() => {
+        const reading = ++reads.current;
+        void readSetup().then((read) => reading === reads.current && setSetup(read), () => reading === reads.current && setSetup(undefined));
+    }, [version]);
+    return setup;
+}
+export function SetupView({ setup }) {
+    const questions = setup.questions;
+    // The choices left to the master, as the game keeps them until the master makes them, and those just left here.
+    const [leftHere, setLeftHere] = useState(new Set());
+    const left = new Set([...(setup.left ?? []), ...leftHere].filter((name) => questions.some((question) => question.name === name && !answered(question))));
+    // The first question still open, once: the player moves on from there; with none, the last card.
+    const [at, setAt] = useState(() => {
+        const first = questions.findIndex((question) => !answered(question) && !(setup.left ?? []).includes(question.name));
+        return first < 0 ? questions.length : first;
+    });
+    // Whether the player moved among the cards: then the new card's title takes the focus, never at the first reading.
+    const [moved, setMoved] = useState(false);
+    const [said, setSaid] = useState();
+    const done = at >= questions.length;
+    const question = questions[Math.min(at, questions.length - 1)];
+    const step = steps.indexOf(setup.mode);
+    const go = (index) => {
+        setMoved(true);
+        setAt(index);
+    };
+    const leave = async (name) => {
+        const refused = await sendSetupWord({ leave: name });
+        setSaid(refused);
+        if (refused === undefined) {
+            setLeftHere((before) => new Set([...before, name]));
+            go(at + 1);
+        }
+    };
+    return (_jsxs("section", { class: "setup", "aria-labelledby": "setup-title", children: [_jsx("div", { class: "setup-host", children: _jsx(Master, { mood: "happy" }) }), _jsx(CampaignName, { name: setup.name }), _jsx("h1", { id: "setup-title", class: "visually-hidden", children: t("Setting up {campaign}", { campaign: setup.name }) }), _jsx("ol", { class: "setup-steps", "aria-label": t("Steps"), children: steps.map((one, index) => (_jsxs("li", { class: index < step ? "done" : index === step ? "now" : undefined, "aria-current": index === step ? "step" : undefined, children: [_jsx("span", { class: "setup-step-dot", "aria-hidden": "true", children: index < step ? "✓" : index + 1 }), stepName(one)] }, one))) }), said !== undefined && _jsx("p", { class: "setup-problem", role: "alert", children: said }), !done && question !== undefined && (_jsx(Question, { question: question, count: t("{value} of {max}", { value: at + 1, max: questions.length }), left: left.has(question.name), focus: moved, onBack: at > 0 ? () => go(at - 1) : undefined, onNext: () => go(at + 1), onLeave: () => void leave(question.name), onProblem: setSaid }, question.name)), done && _jsx(Ready, { setup: setup, left: left, focus: moved, onGo: go, onProblem: setSaid }), _jsx("ol", { class: "setup-dots", "aria-label": t("Questions"), children: questions.map((one, index) => (_jsx("li", { children: _jsx("button", { type: "button", class: [answered(one) ? "answered" : left.has(one.name) ? "left" : "", index === at ? "here" : ""].filter((name) => name !== "").join(" "), "aria-label": answered(one) ? t("{setting}: answered", { setting: settingLabel(one.name) }) : left.has(one.name) ? t("{setting}: left to the master", { setting: settingLabel(one.name) }) : settingLabel(one.name), "aria-current": index === at ? "step" : undefined, onClick: () => go(index) }) }, one.name))) }), _jsx("p", { class: "setup-chat", children: t("You can also tell the master in the chat: they hear what you choose here.") })] }));
+}
+/**
+ * One question as its card shows it: what it is, its choices large with what each means and the one the game suggests, or a list's items; back, next, or left
+ * to the master. Its title takes the focus when the player moved to it.
+ */
+function Question({ question, count, left, focus, onBack, onNext, onLeave, onProblem }) {
+    const [picked, setPicked] = useState();
+    const resting = useRef();
+    const heading = useRef(null);
+    const value = picked ?? question.value;
+    const title = question.question === undefined ? settingLabel(question.name) : t(question.question);
+    const id = `setup-${question.name.replace(/[^a-z0-9]+/gi, "-")}`;
+    const isList = lists.has(question.name);
+    const open = value === undefined && question.items === undefined && !left;
+    useEffect(() => {
+        if (focus) {
+            heading.current?.focus();
+        }
+        // A choice the arrows left resting goes when the card closes.
+        return () => {
+            if (resting.current !== undefined) {
+                clearTimeout(resting.current.timer);
+                void changeSetting({ setting: question.name, value: resting.current.choice }).then(onProblem);
+            }
+        };
+    }, []);
+    // A click chooses at once; the arrows show each choice and send the one they rest on.
+    const pick = (choice, byKey) => {
+        setPicked(choice);
+        clearTimeout(resting.current?.timer);
+        resting.current = undefined;
+        if (!byKey) {
+            void changeSetting({ setting: question.name, value: choice }).then(onProblem);
+            return;
+        }
+        const timer = setTimeout(() => {
+            resting.current = undefined;
+            void changeSetting({ setting: question.name, value: choice }).then(onProblem);
+        }, keyRest);
+        resting.current = { choice, timer };
+    };
+    return (_jsxs("article", { class: "setup-card", "aria-labelledby": id, children: [_jsx("p", { class: "setup-count", children: count }), _jsx("h2", { id: id, ref: heading, tabIndex: -1, children: title }), _jsx("p", { class: "setup-about", children: phraseLabel(t(question.about)) }), question.choices !== undefined && _jsx(Choices, { question: question, value: value, labelledBy: id, onPick: pick }), isList && _jsx(ListQuestion, { question: question, onProblem: onProblem }), left && value === undefined && _jsx("p", { class: "setup-left", children: t("Left to the master: they choose, and tell you.") }), _jsxs("div", { class: "setup-moves", children: [onBack !== undefined && _jsx("button", { type: "button", class: "setup-button setup-back", onClick: onBack, children: t("Back") }), open && !isList && _jsx("button", { type: "button", class: "setup-button quiet", onClick: onLeave, children: t("You decide") }), _jsxs("button", { type: "button", class: open ? "setup-button quiet" : "setup-button gold", onClick: onNext, children: [open ? t("Skip") : t("Next"), " ", _jsx(Icon, { name: "send" })] })] })] }));
+}
+/** A question's choices as a radio group: one stop of Tab, the arrows move among them and choose; each with what it means, the suggested one marked. */
+function Choices({ question, value, labelledBy, onPick }) {
+    const choices = question.choices ?? [];
+    const at = choices.findIndex((choice) => choice.value === value);
+    const stop = at >= 0 ? at : Math.max(0, choices.findIndex((choice) => choice.value === question.suggested));
+    const move = (event) => {
+        const step = arrowStep(event.key);
+        if (step === 0) {
+            return;
+        }
+        event.preventDefault();
+        const buttons = [...event.currentTarget.querySelectorAll("button")];
+        const from = buttons.indexOf(event.target);
+        const next = ((from >= 0 ? from : stop) + step + choices.length) % choices.length;
+        onPick(choices[next].value, true);
+        buttons[next]?.focus();
+    };
+    return (_jsx("div", { class: "setup-choices", role: "radiogroup", "aria-labelledby": labelledBy, onKeyDown: move, children: choices.map((choice, index) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === choice.value, tabIndex: index === stop ? 0 : -1, class: "setup-choice", onClick: () => onPick(choice.value, false), children: [_jsxs("strong", { children: [choice.label === undefined ? valueLabel(choice.value) : phraseLabel(t(choice.label)), choice.value === question.suggested && _jsx("span", { class: "setup-suggested", children: t("Suggested") })] }), choice.means !== undefined && _jsx("span", { children: phraseLabel(t(choice.means)) })] }, choice.value))) }));
+}
+/** A list of the setup, lines or veils: its items to take off, a field to add one, and None for a player who wants none. */
+function ListQuestion({ question, onProblem }) {
+    const [item, setItem] = useState("");
+    const field = useRef(null);
+    const send = (change) => void changeSetting(change).then(onProblem);
+    return (_jsxs("div", { class: "setup-list", children: [(question.items ?? []).length > 0 && (_jsx("ul", { children: (question.items ?? []).map((one) => (_jsxs("li", { children: [one, _jsx("button", { type: "button", class: "icon-button", "aria-label": t("Take {item} off", { item: one }), onClick: () => {
+                                send({ setting: question.name, remove: one });
+                                field.current?.focus();
+                            }, children: _jsx(Icon, { name: "close" }) })] }, one))) })), question.items !== undefined && question.items.length === 0 && _jsx("p", { class: "setup-left", children: t("None: nothing kept out.") }), _jsxs("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    if (item.trim() !== "") {
+                        send({ setting: question.name, add: item.trim() });
+                        setItem("");
+                    }
+                }, children: [_jsx("input", { ref: field, type: "text", value: item, maxLength: 80, placeholder: question.name === "lines" ? t("Add, e.g. spiders") : question.name === "veils" ? t("Add, e.g. torture") : t("Add…"), "aria-label": t("Add to {setting}", { setting: settingLabel(question.name) }), onInput: (event) => setItem(event.currentTarget.value) }), _jsx("button", { type: "submit", class: "setup-button", disabled: item.trim() === "", children: t("Add") }), question.items === undefined && _jsx("button", { type: "button", class: "setup-button quiet", onClick: () => send({ setting: question.name, value: "none" }), children: t("None") })] })] }));
+}
+/**
+ * The last card: the questions still open, each a chip back to its card; those left to the master; what only the chat settles, as the premise; and the word that
+ * the player is ready.
+ */
+function Ready({ setup, left, focus, onGo, onProblem }) {
+    const [sent, setSent] = useState(false);
+    const heading = useRef(null);
+    const open = setup.questions.flatMap((question, index) => (answered(question) || left.has(question.name) ? [] : [{ question, index }]));
+    const asked = new Set(setup.questions.map((question) => question.name));
+    const inChat = setup.missing.map((item) => item.split(" (")[0]).filter((name) => !asked.has(name));
+    useEffect(() => {
+        if (focus) {
+            heading.current?.focus();
+        }
+    }, []);
+    return (_jsxs("article", { class: "setup-card", "aria-labelledby": "setup-ready", children: [_jsx("h2", { id: "setup-ready", ref: heading, tabIndex: -1, children: open.length === 0 ? t("All set") : t("Almost there") }), open.length > 0 && (_jsxs("div", { class: "setup-open", children: [_jsx("span", { class: "setup-open-label", children: t("Still open") }), open.map(({ question, index }) => _jsx("button", { type: "button", class: "setup-chip", onClick: () => onGo(index), children: settingLabel(question.name) }, question.name))] })), left.size > 0 && _jsx("p", { class: "setup-about", children: t("Left to the master: {settings}.", { settings: [...left].map((name) => settingLabel(name).toLowerCase()).join(", ") }) }), inChat.length > 0 && _jsx("p", { class: "setup-about", children: t("In the chat, with the master: {settings}.", { settings: inChat.map((name) => settingLabel(name).toLowerCase()).join(" · ") }) }), sent ? _jsx("p", { class: "setup-left", children: t("The master knows: write to them in the chat, and the story begins.") }) : (_jsxs("div", { class: "setup-moves", children: [_jsx("button", { type: "button", class: "setup-button setup-back", onClick: () => onGo(setup.questions.length - 1), children: t("Back") }), _jsx("button", { type: "button", class: "setup-button gold", onClick: () => void sendSetupWord({ ready: true }).then((refused) => {
+                            onProblem(refused);
+                            setSent(refused === undefined);
+                        }), children: t("I'm ready") })] }))] }));
+}
+/** The campaign's name, with a pencil to change it, as the master hears (D-370); Esc leaves it as it was. */
+function CampaignName({ name }) {
+    const [editing, setEditing] = useState(false);
+    const [text, setText] = useState(name);
+    const pencil = useRef(null);
+    const field = useRef(null);
+    const wasEditing = useRef(false);
+    useEffect(() => setText(name), [name]);
+    // The field takes the focus; back from it, the pencil.
+    useEffect(() => {
+        if (editing) {
+            field.current?.focus();
+        }
+        else if (wasEditing.current) {
+            pencil.current?.focus();
+        }
+        wasEditing.current = editing;
+    }, [editing]);
+    if (!editing) {
+        return (_jsxs("p", { class: "setup-name", children: [_jsx("span", { children: name }), _jsx("button", { ref: pencil, type: "button", class: "icon-button", "aria-label": t("Change the campaign's name"), onClick: () => setEditing(true), children: _jsx(Icon, { name: "pencil" }) })] }));
+    }
+    return (_jsxs("form", { class: "setup-name editing", onSubmit: (event) => {
+            event.preventDefault();
+            if (text.trim() !== "" && text.trim() !== name) {
+                void changeSetting({ setting: "name", value: text.trim() });
+            }
+            setEditing(false);
+        }, children: [_jsx("input", { ref: field, type: "text", value: text, maxLength: 80, "aria-label": t("The campaign's name"), onInput: (event) => setText(event.currentTarget.value), onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        setText(name);
+                        setEditing(false);
+                    }
+                } }), _jsx("button", { type: "submit", class: "setup-button gold", children: t("Save") })] }));
+}
+/** Whether a question is answered: a value chosen, or a list given, even with none. */
+function answered(question) {
+    return question.value !== undefined || question.items !== undefined;
+}
+/** A step of a campaign before play, by its name in the page's language. */
+function stepName(mode) {
+    return mode === "setup" ? t("Settings") : mode === "session zero" ? t("Session zero") : t("Play");
+}