rpg-engine 0.0.0-stage → 0.1.1

package/dist/dashboard/sheet.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "preact/hooks";
+import { readExplanations } from "./api.js";
+import { CardHeader, useOpen } from "./card.js";
+import { FixedColumns } from "./columns.js";
+import { besideLabel, memberPlaceLabel } from "./game-words.js";
+import { cardIcons, DieIcon, Icon } from "./icons.js";
+import { fieldLabel, groupLabels, phraseLabel, readableIds, shownNotation, shownText } from "./labels.js";
+import { arrangedGroups, groupLayout, orderedValues, widgetOf } from "./layout.js";
+import { Markdown, plainLine } from "./markdown.js";
+import { MoodFace, moodLabel } from "./mood.js";
+import { MemberToken } from "./party.js";
+import { requestedRow, useRequested } from "./requested.js";
+import { memberStatus } from "./status.js";
+import { StoryBox } from "./story.js";
+import { arrowStep, systemWord, t } from "./text.js";
+import { DeathSaves, Effects, ProgressBar, ValueDrawing } from "./widgets.js";
+// The cards of the page's text, after the system's groups, the whole width: the player character's story in the player's words, then the rest of the text.
+const descriptionCard = "Description";
+const backstoryCard = "Backstory";
+export function MemberSheet({ member, headline, sheet, cards, text, story, version, onRoll, scene }) {
+    const { rail, others } = arrangedGroups(sheet, cards);
+    const fields = sheetFields(member, sheet);
+    const group = (shown) => _jsx(Group, { member: member.name, group: shown, fields: fields, version: version, onRoll: onRoll, first: shown === others[0] }, shown.name);
+    // At the dying point its counters leave the line for their panel, large, under the name (D-310, 7).
+    const dying = new Set(member.dying?.map((counter) => counter.field));
+    // The player character's story has its own card: the rest of the page's text is its description (D-386).
+    const described = story !== undefined && story.trim() !== "" && text.startsWith(story) ? text.slice(story.length).trimStart() : text;
+    return (_jsxs("section", { class: "sheet", "aria-label": member.name, children: [_jsxs("header", { class: "band", children: [_jsxs("div", { class: "identity", children: [_jsx(MemberToken, { member: member, large: true, status: memberStatus(member, scene) }), _jsxs("div", { class: "who", children: [_jsx("h2", { children: member.name }), (headline !== undefined && headline !== "") || member.mood !== undefined
+                                        ? (_jsxs("p", { class: "headline", children: [headline, headline !== undefined && headline !== "" && member.mood !== undefined && " · ", member.mood !== undefined && (_jsxs("span", { class: "mood-word", children: [_jsx(MoodFace, { mood: member.mood }), moodLabel(member.mood)] }))] }))
+                                        : null, member.place && (_jsxs("p", { class: "place", children: [_jsx(Icon, { name: "place" }), memberPlaceLabel(member.place)] }))] })] }), member.dying && _jsx(DeathSaves, { dying: member.dying }), _jsx(ValueLine, { values: member.counters.filter((value) => !dying.has(value.field)), fields: fields }), _jsx(Effects, { effects: member.effects })] }), _jsxs("div", { class: "sheet-body", children: [rail.length > 0 && _jsx("div", { class: "rail", children: rail.map(group) }), _jsxs("div", { class: "sheet-main", children: [_jsx(FixedColumns, { cards: others.map((shown) => ({ key: shown.name, node: group(shown) })) }), _jsxs("div", { class: "wide-cards", children: [story !== undefined && (_jsxs(Card, { name: backstoryCard, title: t("Backstory"), icon: cardIcons.backstory, layout: "lore", preview: plainLine(story) ?? t("Not written yet"), children: [story.trim() !== "" && _jsx(Markdown, { text: story }), _jsx(StoryBox, { story: story })] })), described.trim() !== "" && (_jsx(Card, { name: descriptionCard, title: t("Description"), icon: cardIcons.description, layout: "lore", preview: plainLine(described), children: _jsx(Markdown, { text: described }) }))] })] })] })] }));
+}
+/** What of someone's sheet the Combat section keeps at hand (D-315): the fields it names in a line of boxes, as under the name, then the groups it names as their cards. */
+export function SheetAtHand({ member, sheet, names, version, onRoll }) {
+    const fields = sheetFields(member, sheet);
+    const same = (name, wanted) => name.toLowerCase() === wanted.toLowerCase();
+    const line = names.flatMap((wanted) => sheet.flatMap((group) => group.values).filter((value) => same(value.field, wanted)));
+    const groups = names.flatMap((wanted) => sheet.filter((group) => same(group.name, wanted)));
+    return (_jsxs(_Fragment, { children: [line.length > 0 && _jsx(ValueLine, { values: line, fields: fields }), groups.map((group) => _jsx(Group, { member: member.name, group: group, fields: fields, version: version, onRoll: onRoll }, group.name))] }));
+}
+/** Values in a line of boxes, as under someone's name (D-299): each its label and its drawing, flashing when it changes. */
+function ValueLine({ values, fields }) {
+    return (_jsx("div", { class: "line", children: values.map((value) => (_jsxs("span", { class: "line-value", children: [_jsx("span", { class: "label", children: fieldLabel(value.field, fields) }), _jsx(Changing, { text: value.text, children: _jsx(ValueDrawing, { value: value, label: fieldLabel(value.field, fields) }) })] }, value.field))) }));
+}
+/** A group of the sheet as its card; the `first` after the rail starts open on a phone too, the one play needs most as the system orders them. */
+function Group({ member, group, fields, version, onRoll, first }) {
+    const [explanations, setExplanations] = useState();
+    const [current, setCurrent] = useState(0);
+    const requested = useRequested();
+    // The reading asked last, and whether one is on its way: one from before a change is left out.
+    const asked = useRef(0);
+    const reading = useRef(false);
+    const layout = groupLayout(group);
+    const labels = groupLabels(group.values.map((value) => value.field), fields);
+    const label = (field) => labels.get(field) ?? fieldLabel(field, fields);
+    const values = layout === "rows" ? orderedValues(group.values) : group.values;
+    // How the numbers are made is read again after a change.
+    useEffect(() => {
+        asked.current++;
+        reading.current = false;
+        setExplanations(undefined);
+    }, [version, member]);
+    // How each number is made (FOR-8), read when the pointer or the keyboard first comes into the card: the numbers' tooltips.
+    const explain = () => {
+        if (reading.current) {
+            return;
+        }
+        reading.current = true;
+        const question = ++asked.current;
+        void readExplanations(member, group.name).then((all) => question === asked.current && setExplanations(all), () => (reading.current = false));
+    };
+    // The check the master asks that a number answers, on the sheet of whom it is asked of (ASK-12).
+    const answersOf = (value) => {
+        const index = requestedRow(requested, member, value.field) ?? (value.besideField === undefined ? undefined : requestedRow(requested, member, value.besideField));
+        const check = requested?.checks.find((one) => one.index === index);
+        return requested === undefined || index === undefined || check === undefined ? undefined : { check: check.check, dice: check.dice, answer: () => requested.answer(index) };
+    };
+    // A number's tooltip: the check it answers, how it is made, without its own name, and else its free roll when the system rolls it (D-280).
+    const tip = (value) => {
+        const parts = explanations?.get(value.field)?.map((part) => shownText(readableIds(part, fields)));
+        const answers = answersOf(value);
+        const free = value.roll === undefined || answers !== undefined ? undefined : t("Free roll {dice} · not logged", { dice: shownNotation(value.roll.notation) });
+        const lines = [answers === undefined ? undefined : t("Answers the master: {check}", { check: answers.check }), parts?.join(" · "), free].filter((line) => line !== undefined);
+        return lines.length === 0 ? undefined : lines.join("\n");
+    };
+    // One stop of the Tab key for a group's numbers; the arrows move among them.
+    const onKeyDown = (event) => {
+        const step = arrowStep(event.key);
+        const stops = [...event.currentTarget.querySelectorAll("[data-stop]")];
+        const at = stops.indexOf(document.activeElement);
+        if (step !== 0 && at >= 0) {
+            event.preventDefault();
+            const next = Math.min(stops.length - 1, Math.max(0, at + step));
+            setCurrent(next);
+            stops[next].focus();
+        }
+    };
+    const reachable = values.filter((value) => value.roll !== undefined || tip(value) !== undefined).map((value) => value.field);
+    const stop = (field) => (!reachable.includes(field) ? undefined : reachable.indexOf(field) === Math.min(current, reachable.length - 1) ? 0 : -1);
+    const throwOf = (roll, shown) => onRoll(roll, shown, member);
+    const line = (value) => ({ value, label: label(value.field), fields, tip: tip(value), tabIndex: stop(value.field), onRoll: throwOf, answers: answersOf(value) });
+    // A card with the number the master asks stays open while it is asked.
+    const lit = values.some((value) => answersOf(value) !== undefined);
+    return (_jsxs(Card, { name: group.name, title: systemWord("groups", group.name), icon: group.icon ?? cardIcons.plain, layout: layout, preview: preview(group, label), onReach: explain, held: lit, first: first, children: [layout === "table" && _jsx(ItemsTable, { group: group, fields: fields }), layout === "tiles" && (_jsx("div", { class: "tiles", onKeyDown: onKeyDown, children: values.map((value) => _jsx(Tile, { ...line(value) }, value.field)) })), layout === "rows" && (_jsx("div", { class: "rows", onKeyDown: onKeyDown, children: values.map((value) => _jsx(Row, { ...line(value) }, value.field)) }))] }));
+}
+/** A card of the sheet the player opens and closes (D-284): its icon and title on the left, what it holds while closed, the chevron on the right. */
+export function Card({ name, title, icon, layout, preview, onReach, held, first, children }) {
+    const [chosen, toggle] = useOpen(name, first);
+    const open = chosen || held === true;
+    return (_jsxs("details", { class: `group group-${layout}`, open: open, onPointerEnter: onReach, onFocusIn: onReach, children: [_jsx(CardHeader, { icon: icon, title: _jsx("h3", { children: title ?? name }), preview: preview, open: open, onToggle: toggle }), children] }));
+}
+/** A short number in a box: what is beside it large, such as a modifier, and the value in a little tab below, as on a paper sheet. */
+function Tile(props) {
+    const { value, label } = props;
+    const beside = besideLabel(value);
+    return (_jsxs(NumberBox, { ...props, kind: "tile", said: `${label} ${shownText(beside ?? value.text)}`, children: [_jsx("span", { class: "label", children: label }), _jsx(Changing, { text: beside ?? value.text, children: _jsx("span", { class: "big num", children: shownText(beside ?? value.text) }) }), _jsx("span", { class: "small num", children: beside === undefined ? "" : shownText(value.text) }), value.roll && _jsx(RollMark, { roll: value.roll })] }));
+}
+/** A value on a line: its marks, its label as a phrase, its drawing, what is beside it, and under a number's progress its bar; a counter that the band shows as a bar, as hit points, reads here as its number. */
+function Row(props) {
+    const { value, label } = props;
+    const widget = widgetOf(value);
+    const shownLabel = phraseLabel(label);
+    const beside = besideLabel(value);
+    const marks = value.marks === 0 ? null : _jsx("span", { class: "marks", "aria-label": value.marks === 1 ? t("1 mark") : t("{count} marks", { count: value.marks }), children: "●".repeat(value.marks) });
+    return (_jsxs(NumberBox, { ...props, label: shownLabel, kind: `row row-${widget}`, said: [shownLabel, shownText(value.text), beside === undefined ? "" : shownText(beside)].filter((part) => part !== "").join(" "), children: [_jsxs("span", { class: "label", children: [marks, shownLabel] }), _jsxs(Changing, { text: value.text, children: [value.roll && _jsx(RollMark, { roll: value.roll }), widget === "progress" || widget === "bar" ? _jsx("span", { class: "num", children: shownText(value.text) }) : _jsx(ValueDrawing, { value: value, label: shownLabel, fields: props.fields })] }), beside !== undefined && _jsx("span", { class: "beside num", dir: value.levelNeed === undefined ? undefined : "auto", children: shownText(beside) }), widget === "progress" && _jsx(ProgressBar, { value: value, label: shownLabel })] }));
+}
+/**
+ * What a number is drawn in: a button that throws it for fun when the system rolls it (D-280), or answers the master's check that names it, lit (ASK-12);
+ * else, when it has a tooltip, a box the keyboard reaches. Its tooltip says how it is made (FOR-8), shown when pointed at or reached, and read to a screen
+ * reader as its description.
+ */
+function NumberBox({ value, label, tip, tabIndex, onRoll, answers, kind, said, children }) {
+    const described = useId();
+    const shared = {
+        class: [kind, tip === undefined ? "" : "tip-wide", answers === undefined ? "" : "requested"].filter((name) => name !== "").join(" "),
+        "data-field": value.field,
+        "data-tip": tip,
+        "data-stop": tabIndex === undefined ? undefined : "",
+        tabIndex,
+        "aria-describedby": tip === undefined ? undefined : described,
+    };
+    const description = tip !== undefined && _jsx("span", { id: described, class: "visually-hidden", children: tip });
+    return value.roll === undefined && answers === undefined
+        ? (_jsxs("div", { ...shared, "aria-label": tip === undefined ? undefined : said, role: tip === undefined ? undefined : "group", children: [children, description] }))
+        : (_jsxs("button", { type: "button", ...shared, "aria-label": answers === undefined ? said : t("{said}: answer the master", { said }), onClick: () => (answers === undefined ? value.roll && onRoll(value.roll, label) : answers.answer()), children: [children, description] }));
+}
+/** The die inside a number the system rolls: a click throws it. */
+function RollMark({ roll }) {
+    return (_jsx("span", { class: "roll-mark", "aria-hidden": "true", children: _jsx(DieIcon, { sides: roll.dice[0] ?? 20 }) }));
+}
+/** A group the items of a list give, as the attacks: a head with the labels of their values, then an item a line, with its values. */
+function ItemsTable({ group, fields }) {
+    const items = group.items ?? [];
+    const columns = items[0]?.values.map((value) => value.field) ?? [];
+    const labels = groupLabels(columns, fields);
+    return (_jsxs("table", { class: "items", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: _jsx("span", { class: "visually-hidden", children: t("Name") }) }), columns.map((field) => _jsx("th", { scope: "col", children: phraseLabel(labels.get(field) ?? fieldLabel(field, fields)) }, field))] }) }), _jsx("tbody", { children: items.map((item) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: item.item }), item.values.map((value) => _jsx("td", { class: widgetOf(value) === "text" ? undefined : "num", children: shownText(value.text) }, value.field))] }, item.item))) })] }));
+}
+/** Flashes its content once when its text changes, as when a number goes down. */
+function Changing({ text, children }) {
+    const before = useRef(text);
+    const [flash, setFlash] = useState(0);
+    useEffect(() => {
+        if (before.current !== text) {
+            before.current = text;
+            setFlash((count) => count + 1);
+        }
+    }, [text]);
+    return _jsx("span", { class: flash === 0 ? "changing" : "changing changed", children: children }, flash);
+}
+/** The fields of someone's line and sheet, which the labels read to tell a field's short name. */
+function sheetFields(member, sheet) {
+    return new Set([...member.counters, ...sheet.flatMap((group) => group.values)].map((value) => value.field));
+}
+/** What a closed group says of itself: its first values, or its items. */
+function preview(group, label) {
+    if (group.items !== undefined) {
+        return group.items.map((item) => item.item).join(" · ");
+    }
+    return group.values.slice(0, 4).map((value) => `${label(value.field)} ${shownText(besideLabel(value) ?? value.text)}`).join(" · ");
+}

package/dist/dashboard/status.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { effectLabel } from "./game-words.js";
+import { statusIcons } from "./icons.js";
+import { conditionsPref, useChoice } from "./prefs.js";
+import { t } from "./text.js";
+/** The marks of someone's state, the one that counts most first: dead, at 0, kept from acting, then the conditions, the last put on first; with `all`, their other effects after them. */
+export function statusMarks(status, all = false) {
+    const effects = status.effects ?? [];
+    const states = status.dead === true
+        ? [{ icon: statusIcons.dead, label: t("dead"), kind: "state" }]
+        : [
+            ...(status.down === true ? [{ icon: statusIcons.down, label: t("down"), kind: "state" }] : []),
+            ...(status.inactive === true ? [{ icon: statusIcons.inactive, label: t("Can't act"), kind: "state" }] : []),
+        ];
+    const conditions = effects.filter((effect) => effect.condition === true).reverse().map((effect) => ({ icon: effect.icon ?? statusIcons.condition, label: effectLabel(effect), kind: "condition" }));
+    const others = all ? effects.filter((effect) => effect.condition !== true).map((effect) => ({ icon: statusIcons.condition, label: effectLabel(effect), kind: "other" })) : [];
+    return [...states, ...conditions, ...others];
+}
+/** The state of one of the party: their effects, whether dead or at their dying point, and whether the open scene says they cannot act. */
+export function memberStatus(member, scene) {
+    const inScene = scene?.fighters?.find((fighter) => fighter.name === member.name) ?? scene?.who.find((person) => person.name === member.name);
+    return { effects: member.effects, dead: member.dead, down: member.dying !== undefined, inactive: inScene?.inactive === true };
+}
+/** The pip of someone's state on their token, its marks in its tooltip; none without a mark, or while the player keeps them off. */
+export function StatusPip({ status }) {
+    const [shown] = useChoice(conditionsPref);
+    const marks = status === undefined ? [] : statusMarks(status);
+    if (shown === "never" || marks.length === 0) {
+        return null;
+    }
+    const classes = ["status-pip", marks[0].kind === "state" ? "strong" : "", marks.length > 1 ? "stacked" : "", shown === "hover" ? "on-hover" : ""];
+    return (_jsx("span", { class: classes.filter((name) => name !== "").join(" "), "data-tip": marks.map((mark) => mark.label).join(", "), children: _jsx("svg", { viewBox: "-3 -3 30 30", "aria-hidden": "true", children: _jsx("path", { d: marks[0].icon }) }) }));
+}
+/** Each mark of someone's state as an icon with its words, for a screen reader too and for the keyboard, as Combat's order shows them (D-419). */
+export function StatusIcons({ status }) {
+    const marks = statusMarks(status, true);
+    return marks.length === 0 ? null : (_jsx("span", { class: "status-icons", children: marks.map((mark, index) => (_jsx("span", { class: `status-icon ${mark.kind}`, role: "img", "aria-label": mark.label, "data-tip": mark.label, tabIndex: 0, children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: mark.icon }) }) }, `${mark.label} ${index}`))) }));
+}
+/** The words of someone's state for a screen reader, as a token's name says them. */
+export function statusWords(status) {
+    return statusMarks(status, true).map((mark) => mark.label);
+}

package/dist/dashboard/story.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The player character's story in the player's words (D-373, D-386): a proposal from the sheet's Description, which the master hears quoted and writes in the
+// page in their own words, with the player's yes; until then the box says it was sent.
+import { useEffect, useId, useRef, useState } from "preact/hooks";
+import { readStory, sendStory } from "./api.js";
+import { Icon } from "./icons.js";
+import { t } from "./text.js";
+export function StoryBox({ story }) {
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(story);
+    // The proposal the master has not written yet, as the game keeps it: read again whenever the page's story changes.
+    const [proposed, setProposed] = useState();
+    const [problem, setProblem] = useState();
+    const [busy, setBusy] = useState(false);
+    const id = useId();
+    const field = useRef(null);
+    const pencil = useRef(null);
+    const wasEditing = useRef(false);
+    useEffect(() => {
+        void readStory().then(setProposed, () => setProposed(undefined));
+    }, [story]);
+    // Opened, the field takes the focus; closed, the button that opens it.
+    useEffect(() => {
+        if (editing) {
+            field.current?.focus();
+        }
+        else if (wasEditing.current) {
+            pencil.current?.focus();
+        }
+        wasEditing.current = editing;
+    }, [editing]);
+    const send = async (event) => {
+        event.preventDefault();
+        setBusy(true);
+        const refused = await sendStory(draft);
+        setBusy(false);
+        setProblem(refused);
+        if (refused === undefined) {
+            setProposed(draft.trim());
+            setEditing(false);
+        }
+    };
+    if (!editing) {
+        return (_jsxs("div", { class: "story-box", children: [proposed !== undefined && (_jsxs("p", { class: "story-sent", children: [_jsx(Icon, { name: "send" }), " ", t("Sent to the master: they write it in your page once you agree in the chat.")] })), _jsxs("button", { ref: pencil, type: "button", class: "save-button", onClick: () => {
+                        setDraft(proposed ?? story);
+                        setProblem(undefined);
+                        setEditing(true);
+                    }, children: [_jsx(Icon, { name: "pencil" }), " ", proposed !== undefined ? t("Change what you sent") : story === "" ? t("Write your character's story") : t("Propose changes to your story")] })] }));
+    }
+    return (_jsxs("form", { class: "story-box editing", onSubmit: (event) => void send(event), children: [_jsx("label", { for: id, children: t("Your character's story and look, in your words. It goes to the master, who writes it in your page with you.") }), _jsx("textarea", { ref: field, id: id, value: draft, rows: 10, maxLength: 20_000, onInput: (event) => setDraft(event.currentTarget.value) }), _jsxs("div", { class: "story-buttons", children: [_jsx("span", { class: "story-status", role: "alert", children: problem }), _jsx("button", { type: "button", class: "save-button", onClick: () => setEditing(false), children: t("Cancel") }), _jsxs("button", { type: "submit", class: "save-button gold", disabled: busy || draft.trim() === "" || draft.trim() === (proposed ?? story).trim(), children: [_jsx(Icon, { name: "send" }), " ", t("Send to the master")] })] })] }));
+}