rpg-engine 0.0.0-stage → 0.1.0

package/dist/dashboard/icons.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The page's pictures (D-284): each die that is thrown, and the controls that have no words; lines on a grid of 24, in the colour of the text around them.
+import { drawnDiceOf, drawnDie } from "./labels.js";
+// The dice by their sides: the d% as two d10, one behind the other; the coin as 2.
+const diePaths = {
+    2: "M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18Z M12 7a5 5 0 1 0 0 10a5 5 0 1 0 0-10Z",
+    4: "M12 2.5 21.8 19.5H2.2Z M12 2.5 14.2 19.5",
+    6: "M12 2 20.7 7v10L12 22l-8.7-5V7Z M3.3 7 12 12l8.7-5 M12 12v10",
+    8: "M12 2 21 12 12 22 3 12Z M12 2 7.5 15.5h9Z M3 12l4.5 3.5 M21 12l-4.5 3.5 M7.5 15.5 12 22l4.5-6.5",
+    10: "M12 2 21.5 10.5v3L12 22l-9.5-8.5v-3Z M12 2 6.8 12.6 12 15.4l5.2-2.8Z M2.5 13.5l4.3-.9 M21.5 13.5l-4.3-.9 M12 15.4V22",
+    12: "M12 2 17.9 3.9 21.5 8.9v6.2L17.9 20.1 12 22 6.1 20.1 2.5 15.1V8.9L6.1 3.9Z M12 7 16.8 10.5 14.9 16.1H9.1L7.2 10.5Z M12 7V2 M16.8 10.5 21.5 8.9 M14.9 16.1 17.9 20.1 M9.1 16.1 6.1 20.1 M7.2 10.5 2.5 8.9",
+    20: "M12 2 20.7 7v10L12 22l-8.7-5V7Z M12 6.7 16.6 14.7H7.4Z M12 2v4.7 M3.3 7l8.7-.3 8.7.3 M3.3 7 7.4 14.7 3.3 17 M20.7 7l-4.1 7.7 4.1 2.3 M7.4 14.7 12 22l4.6-7.3",
+    100: "M8.5 6 14.5 12.4v2.2L8.5 21l-6-6.4v-2.2Z M8.5 6 5.2 13.95 8.5 16.05 11.8 13.95Z M8.5 16.05V21 M10.36 7.98 15.5 2.5l6 6.4v2.2l-6 6.4-1.86-1.98",
+};
+const iconPaths = {
+    clear: "M4 7h16 M10 4h4 M6.5 7l.9 12.2a1 1 0 0 0 1 .8h7.2a1 1 0 0 0 1-.8L17.5 7 M10 11v5.5 M14 11v5.5",
+    clearAll: "M7 8h14 M5 12h14 M3 16h14",
+    soundOn: "M4 9.5h3.5L12 5.5v13l-4.5-4H4Z M15.5 9a4 4 0 0 1 0 6 M18 6.5a7.5 7.5 0 0 1 0 11",
+    soundOff: "M4 9.5h3.5L12 5.5v13l-4.5-4H4Z M16 9.5l5 5 M21 9.5l-5 5",
+    minus: "M6 12h12",
+    plus: "M12 6v12 M6 12h12",
+    // The world map's tools and ways (D-318).
+    locate: "M12 3v3 M12 18v3 M3 12h3 M18 12h3 M12 7a5 5 0 1 0 0 10a5 5 0 1 0 0-10Z M12 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2Z",
+    fit: "M4 9V4h5 M15 4h5v5 M20 15v5h-5 M9 20H4v-5",
+    list: "M8 6h12 M8 12h12 M8 18h12 M4 6h.01 M4 12h.01 M4 18h.01",
+    road: "M4 20 10 4 M20 20 14 4 M12 6v2 M12 11v2 M12 16v2",
+    path: "M5 20c4-3 10-3 8-8s-4-6 2-8",
+    river: "M3 8c3 2 6-2 9 0s6-2 9 0 M3 14c3 2 6-2 9 0s6-2 9 0",
+    close: "M6 6l12 12 M18 6 6 18",
+    clock: "M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18Z M12 7.5V12l3 2",
+    hourglass: "M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9M16 3c0 5-8 5-8 9s8 4 8 9",
+    place: "M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z M12 7.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5Z",
+    aside: "M6 6l6 6-6 6 M12 6l6 6-6 6",
+    send: "M5 12h13 M13 6l6 6-6 6",
+    // The page's foot: the code, the package, a heart for support.
+    github: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4 M9 18c-4.51 2-5-2-7-2",
+    npm: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73Z M12 22V12 M3.29 7 12 12l8.71-5 M7.5 4.27l9 5.15",
+    heart: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",
+    check: "M5 12.5l4.5 4.5L19 7.5",
+    undo: "M9 14 4 9l5-5 M4 9h10.5a5.5 5.5 0 0 1 0 11H11",
+    pencil: "M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3 M13.5 8.5l3 3",
+    alert: "M12 3.5 21.5 20h-19Z M12 9.5v5 M12 17.2v.3",
+    info: "M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18Z M12 11v6 M12 7.6v.3",
+    sun: "M12 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9Z M12 2.5v2 M12 19.5v2 M4.6 4.6 6 6 M18 18l1.4 1.4 M2.5 12h2 M19.5 12h2 M4.6 19.4 6 18 M18 6l1.4-1.4",
+    moon: "M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z",
+    // The sections and the menu (D-309); the scene's is the place's pin, as its chip.
+    party: "M12 3.5a4 4 0 1 0 0 8a4 4 0 1 0 0-8Z M4.5 20.5c.6-4 3.6-6.5 7.5-6.5s6.9 2.5 7.5 6.5",
+    // Two blades crossed, for the fight (D-314).
+    combat: "M4 4l11 11 M4 4v3l9.5 9.5 M4 4h3l9.5 9.5 M14 17l3-3 M15.5 15.5 20 20 M20 4 9 15 M20 4v3l-2.5 2.5 M20 4h-3l-2.5 2.5 M10 17l-3-3 M8.5 15.5 4 20",
+    scene: "M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z M12 7.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5Z",
+    journal: "M6.5 3.5H18v17H6.5A1.5 1.5 0 0 1 5 19V5a1.5 1.5 0 0 1 1.5-1.5Z M9.5 3.5v7.5l2-1.5 2 1.5V3.5 M5 17h13",
+    world: "M3.5 6.5 9 4l6 2.5L20.5 4v13.5L15 20l-6-2.5-5.5 2.5Z M9 4v13.5 M15 6.5V20",
+    help: "M12 7c-1.8-1.5-4.8-2.2-8.5-2v13c3.7-.2 6.7.5 8.5 2c1.8-1.5 4.8-2.2 8.5-2V5c-3.7-.2-6.7.5-8.5 2Z M12 7v13",
+    menu: "M4 6.5h16 M4 12h16 M4 17.5h16",
+    saves: "M5 3.5h11l3 3V20.5H5Z M8 3.5v5h7v-5 M8 20.5v-6h8v6",
+    // A gear standing straight, a tooth at the top (D-409).
+    settings: "M10.33 5.3L10.42 2.53L13.58 2.53L13.67 5.3A6.9 6.9 0 0 1 15.55 6.09L17.57 4.18L19.82 6.43L17.91 8.45A6.9 6.9 0 0 1 18.7 10.33L21.47 10.42L21.47 13.58L18.7 13.67A6.9 6.9 0 0 1 17.91 15.55L19.82 17.57L17.57 19.82L15.55 17.91A6.9 6.9 0 0 1 13.67 18.7L13.58 21.47L10.42 21.47L10.33 18.7A6.9 6.9 0 0 1 8.45 17.91L6.43 19.82L4.18 17.57L6.09 15.55A6.9 6.9 0 0 1 5.3 13.67L2.53 13.58L2.53 10.42L5.3 10.33A6.9 6.9 0 0 1 6.09 8.45L4.18 6.43L6.43 4.18L8.45 6.09A6.9 6.9 0 0 1 10.33 5.3Z M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6Z",
+    about: "M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18Z M12 11v6 M12 7.6v.3",
+    // Help's parts (D-409): the chat with the master, and the dice.
+    chat: "M4.5 5h15v10.5H10l-4.5 3.5v-3.5h-1Z M8 9h8 M8 12h5",
+    dice: diePaths[20],
+    // A place without a picture, and someone the character does not know (D-309).
+    house: "M3 20.5h18 M5 20.5V10.5l7-6 7 6v10 M10 20.5v-5a2 2 0 0 1 4 0v5",
+    stranger: "M12 3c-4 0-6.5 3.5-6.5 8v3.5L4 20.5h16l-1.5-6V11c0-4.5-2.5-8-6.5-8Z M8.8 11.8c.8-1.7 1.9-2.6 3.2-2.6s2.4.9 3.2 2.6c-.7 1.7-1.8 2.6-3.2 2.6s-2.5-.9-3.2-2.6Z",
+    // Rolling by hand, from the sheet or the tray (D-330).
+    hand: "M8 12.5V5.5a1.5 1.5 0 0 1 3 0V11 M11 11V4a1.5 1.5 0 0 1 3 0v7 M14 11V5.5a1.5 1.5 0 0 1 3 0V13 M17 10.5a1.5 1.5 0 0 1 3 0V14a6.5 6.5 0 0 1-6.5 6.5H12c-2 0-3.3-.7-4.5-1.9l-3.3-3.4a1.5 1.5 0 0 1 2.1-2.1L8 14.8",
+    licence: "M6.5 3H14l4 4v14H6.5Z M14 3v4h4 M9.5 14l2 2 3.5-4",
+};
+/**
+ * The engine's states on a token and in Combat (D-419), for any game: dead, at 0, kept from acting; and the mark of a condition the system draws no picture
+ * for. The conditions' own pictures are the system's (`condition-icons`).
+ */
+export const statusIcons = {
+    dead: "M7 20V10.5a5 5 0 0 1 10 0V20 M4.5 20h15 M12 9v6 M9.8 11.2h4.4",
+    down: "M3 12.5h4.5l2-5 3 10 2.5-5H21",
+    inactive: "M12 3.5a8.5 8.5 0 1 0 0 17a8.5 8.5 0 1 0 0-17Z M10 9v6 M14 9v6",
+    condition: "M12 4l1.8 6.2L20 12l-6.2 1.8L12 20l-1.8-6.2L4 12l6.2-1.8Z",
+};
+/** The pictures of the page's own cards, and the plain one of a card whose system gives none (D-284). */
+export const cardIcons = {
+    description: "M6.5 3H14l4 4v14H6.5Z M14 3v4h4 M9.5 11h5 M9.5 14.5h5 M9.5 18h3",
+    backstory: "M20 3.5c-6.5 1-11.5 6-13.5 13.5L5.5 20.5l3.5-1C16.5 17.5 19 12.5 20 3.5Z M6.5 17 12 11.5 M4 20.5h16",
+    rolls: diePaths[20],
+    here: "M9 4.5a3 3 0 1 0 0 6a3 3 0 1 0 0-6Z M3 19.5c.5-3.3 2.8-5.5 6-5.5s5.5 2.2 6 5.5 M16 4.8a3 3 0 0 1 0 5.4 M17.5 14.3c2 .7 3.2 2.6 3.5 5.2",
+    plain: "M5 5.5a1 1 0 1 1 0 2a1 1 0 1 1 0-2Z M5 11a1 1 0 1 1 0 2a1 1 0 1 1 0-2Z M5 16.5a1 1 0 1 1 0 2a1 1 0 1 1 0-2Z M9 6.5h10.5 M9 12h10.5 M9 17.5h10.5",
+};
+// The icons that point a way, which turn in a language written from right to left.
+const turning = new Set(["send", "undo", "aside"]);
+/** A die's picture, by its sides; nothing for a die the page does not draw. */
+export function DieIcon({ sides, faded }) {
+    const drawn = drawnDie(sides);
+    return drawn === undefined ? null : (_jsx("svg", { class: faded ? "die faded" : "die", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: diePaths[drawn] }) }));
+}
+/**
+ * A die of a set, by its sides, a d20 by default: its body filled with its colour or the picture of its grain, its edges in the ink of its numbers, as Settings
+ * shows the sets (D-348); every other picture of a die is in the page's accent (D-374). Nothing for a die the page does not draw.
+ */
+export function DieSwatch({ sides = 20, body, ink, picture }) {
+    const drawn = drawnDie(sides);
+    if (drawn === undefined) {
+        return null;
+    }
+    const outline = diePaths[drawn].split(" M")[0];
+    const pattern = picture === undefined ? undefined : `grain-${picture.replace(/[^a-z0-9]+/gi, "-")}`;
+    return (_jsxs("svg", { class: pattern === undefined ? "die die-swatch" : "die die-swatch grained", viewBox: "0 0 24 24", "aria-hidden": "true", children: [pattern !== undefined && (_jsx("defs", { children: _jsx("pattern", { id: pattern, patternUnits: "userSpaceOnUse", width: "24", height: "24", children: _jsx("image", { href: picture, width: "48", height: "48", x: "-12", y: "-12" }) }) })), _jsx("path", { d: outline, fill: pattern === undefined ? body : `url(#${pattern})`, stroke: "none" }), _jsx("path", { d: diePaths[drawn], fill: "none", stroke: ink })] }));
+}
+/** The dice of a notation as pictures, two at most, one in front of the other, with how many past two of one kind. */
+export function NotationIcons({ notation }) {
+    const drawn = drawnDiceOf(notation);
+    return drawn.sides.length === 0 ? null : (_jsxs("span", { class: "die-icons", "aria-hidden": "true", children: [drawn.sides.map((sides, index) => _jsx(DieIcon, { sides: sides, faded: drawn.faded === true && index === 1 }, index)), drawn.count !== undefined && _jsxs("span", { class: "die-more", children: ["\u00D7", drawn.count] })] }));
+}
+/** A picture's drawing, for a card's header. */
+export function iconPath(name) {
+    return iconPaths[name];
+}
+/** Whether a name, as a text names it, is one of the page's pictures. */
+export function isIconName(name) {
+    return Object.hasOwn(iconPaths, name);
+}
+/** A control's picture, such as the bin that clears the dice. */
+export function Icon({ name }) {
+    return (_jsx("svg", { class: turning.has(name) ? "icon turns" : "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: iconPaths[name] }) }));
+}

package/dist/dashboard/journal.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The Journal section (D-367, D-369, D-371, D-384, D-388): the quests the character knows as a video game's quest log, each with the time left before its deadline at its top, its
+// goals, its counters as bars and its clock with its name, the main ones first and in gold; the one the player follows, the main one until they choose, shown
+// small in Scene and Combat too; the story by its scenes, as chapters, the last first, each with what the diary tells of it; and the player's own notes.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { sectionAddress } from "./address.js";
+import { readJournal } from "./api.js";
+import { byDateLabel, factLabel, gameDateLabel } from "./game-words.js";
+import { Icon } from "./icons.js";
+import { fieldLabel, phraseLabel, sceneTypeLabel } from "./labels.js";
+import { placeKinds } from "./map-symbols.js";
+import { Markdown } from "./markdown.js";
+import { Notes } from "./notes.js";
+import { PageHead } from "./pages.js";
+import { useChoice, useKeptText } from "./prefs.js";
+import { arrowStep, t } from "./text.js";
+// The tab the player last chose, kept in this browser.
+const tabChoice = { key: "rpg-engine.journal-tab", initial: "quests", values: ["quests", "story", "notes"] };
+export function JournalView({ version, campaign }) {
+    const journal = useJournal(version);
+    const [tab, setTab] = useChoice(tabChoice);
+    const [followed, setFollowed] = useFollowed(campaign, journal.read?.quests);
+    const tabs = useRef(null);
+    // The arrows move along the tabs, as in a tab list: the focus goes with the choice.
+    const move = (event) => {
+        const step = arrowStep(event.key, true);
+        if (step === 0) {
+            return;
+        }
+        event.preventDefault();
+        const next = tabChoice.values[(tabChoice.values.indexOf(tab) + step + tabChoice.values.length) % tabChoice.values.length];
+        setTab(next);
+        tabs.current?.querySelector(`#journal-tab-${next}`)?.focus();
+    };
+    return (_jsxs("section", { class: "journal", "aria-labelledby": "journal-title", children: [_jsx(PageHead, { section: "journal", id: "journal-title" }), _jsx("div", { class: "journal-tabs", role: "tablist", "aria-label": t("Journal"), ref: tabs, onKeyDown: move, children: tabChoice.values.map((value) => (_jsx("button", { type: "button", role: "tab", id: `journal-tab-${value}`, "aria-selected": tab === value, "aria-controls": tab === value ? "journal-panel" : undefined, tabIndex: tab === value ? 0 : -1, onClick: () => setTab(value), children: tabName(value) }, value))) }), _jsxs("div", { id: "journal-panel", role: "tabpanel", "aria-labelledby": `journal-tab-${tab}`, children: [journal.problem !== undefined && _jsx("p", { class: "journal-problem", role: "alert", children: journal.problem }), journal.read !== undefined && tab === "quests" && _jsx(QuestLog, { quests: journal.read.quests, followed: followed, onFollow: setFollowed }), journal.read !== undefined && tab === "story" && _jsx(Story, { chapters: journal.read.chapters, now: journal.read.now }), tab === "notes" && _jsx(Notes, { version: version }), journal.read === undefined && journal.problem === undefined && journal.done && tab !== "notes" && _jsx("p", { class: "journal-none", children: t("The journal starts with the player character.") })] })] }));
+}
+/** The quest the player follows, shown small at the top of Scene and Combat, with its next goal, its clock and the time left; nothing when it is none. */
+export function FollowedQuest({ version, campaign }) {
+    const journal = useJournal(version);
+    const [followed, setFollowed] = useFollowed(campaign, journal.read?.quests);
+    const quest = journal.read?.quests.find((one) => one.name === followed && one.status === "open");
+    if (quest === undefined) {
+        return null;
+    }
+    const next = quest.goals.find((goal) => !goal.done);
+    return (_jsxs("aside", { class: "followed", "aria-label": t("The quest you follow"), children: [_jsx("button", { type: "button", class: "followed-star on", "aria-label": `Follow ${quest.name}`, "aria-pressed": true, onClick: () => setFollowed(undefined), children: _jsx(Star, {}) }), _jsx(QuestFace, { quest: quest, small: true }), _jsxs("a", { class: "followed-what", href: sectionAddress("journal"), children: [_jsx("span", { class: "followed-name", children: quest.name }), next !== undefined && _jsx("span", { class: "followed-next", children: plainText(next.text) })] }), quest.clock !== undefined && _jsx(ClockFace, { clock: quest.clock, small: true }), quest.deadline !== undefined && _jsx(Deadline, { deadline: quest.deadline })] }));
+}
+/** The quests in three groups, open ones whole, done and failed ones folded. */
+function QuestLog({ quests, followed, onFollow }) {
+    const open = quests.filter((quest) => quest.status === "open");
+    const done = quests.filter((quest) => quest.status === "done");
+    const failed = quests.filter((quest) => quest.status === "failed");
+    if (quests.length === 0) {
+        return _jsx("p", { class: "journal-none", children: t("No quests yet: the ones your character takes come here.") });
+    }
+    const card = (quest) => _jsx(QuestCard, { quest: quest, followed: quest.name === followed, onFollow: onFollow }, quest.name);
+    return (_jsxs("div", { class: "quest-log", children: [_jsxs("h3", { class: "quest-group", children: [t("Active"), " ", _jsx("span", { children: open.length })] }), open.length === 0 ? _jsx("p", { class: "journal-none", children: t("None open now.") }) : _jsx("div", { class: "quest-cards", children: open.map(card) }), done.length > 0 && (_jsxs("details", { class: "quest-folded", children: [_jsxs("summary", { class: "quest-group", children: [t("Completed"), " ", _jsx("span", { children: done.length })] }), _jsx("div", { class: "quest-cards", children: done.map(card) })] })), failed.length > 0 && (_jsxs("details", { class: "quest-folded", children: [_jsxs("summary", { class: "quest-group", children: [t("Failed"), " ", _jsx("span", { children: failed.length })] }), _jsx("div", { class: "quest-cards", children: failed.map(card) })] }))] }));
+}
+/** A quest as its card shows it: the star that follows it, its name, its badge and the time left; who gave it, where and by when; its text, goals and measures. */
+function QuestCard({ quest, followed, onFollow }) {
+    const id = `quest-${quest.name.replace(/[^\p{L}\p{N}]+/gu, "-")}`;
+    const open = quest.status === "open";
+    const from = [
+        quest.giver === undefined ? undefined : t("from {who}", { who: quest.giver }),
+        quest.place === undefined ? undefined : t("at {place}", { place: quest.place }),
+        quest.deadline === undefined ? undefined : byDateLabel(quest.deadline.date),
+    ].filter((part) => part !== undefined);
+    return (_jsxs("article", { class: ["quest-card", quest.main ? "main" : "", quest.status].filter((name) => name !== "").join(" "), "aria-labelledby": id, children: [_jsxs("header", { class: "quest-cover", children: [_jsx(QuestFace, { quest: quest }), _jsxs("div", { class: "quest-cover-top", children: [open && (_jsx("button", { type: "button", class: followed ? "followed-star on" : "followed-star", "aria-pressed": followed, "aria-label": t("Follow {quest}", { quest: quest.name }), "data-tip": t("Shown in Scene and Combat"), onClick: () => onFollow(followed ? undefined : quest.name), children: _jsx(Star, {}) })), open && quest.deadline !== undefined && _jsx(Deadline, { deadline: quest.deadline }), quest.main && _jsx("span", { class: "quest-badge", children: t("Main") })] }), _jsx("h4", { class: "quest-name", id: id, title: quest.name, children: quest.name })] }), from.length > 0 && _jsx("p", { class: "quest-from", children: from.join(" · ") }), quest.text !== "" && (_jsx("div", { class: "quest-text", children: _jsx(Markdown, { text: quest.text }) })), quest.goals.length > 0 && (_jsx("ul", { class: "quest-goals", "aria-label": t("Goals"), children: quest.goals.map((goal, index) => (_jsxs("li", { class: goal.done ? "done" : quest.status === "failed" ? "missed" : undefined, children: [_jsx("span", { class: "quest-tick", "aria-hidden": "true", children: goal.done ? "✓" : quest.status === "failed" ? "–" : "" }), _jsx("span", { children: _jsx(Markdown, { text: goal.text }) }), _jsx("span", { class: "visually-hidden", children: goal.done ? t("done") : open ? t("to do") : t("not done") })] }, index))) })), (quest.counters.length > 0 || quest.clock !== undefined) && (_jsxs("div", { class: "quest-measures", children: [quest.counters.map((counter) => _jsx(QuestBar, { counter: counter }, counter.field)), quest.clock !== undefined && (_jsxs("span", { class: "quest-clock", children: [_jsx(ClockFace, { clock: quest.clock, hidden: true }), _jsxs("span", { children: [quest.clock.name ?? t("Clock"), " ", quest.clock.value, "/", quest.clock.max] })] }))] }))] }));
+}
+// The mark of a quest whose place has no kind the map draws: a flag.
+const questFlag = "M6 21V3.5 M6 4.5h11l-2.6 4 2.6 4H6";
+/**
+ * A quest's face (D-389), always there: its picture, else its place's, else the mark of its place's kind, or a flag, on the night's blue, the main quest's on
+ * dark gold; as the head of its card, or small in the followed quest's strip.
+ */
+function QuestFace({ quest, small = false }) {
+    const picture = quest.picture ?? quest.placePicture;
+    if (picture !== undefined) {
+        return _jsx("img", { class: small ? "followed-picture" : undefined, src: pictureAddress(picture), alt: "", "aria-hidden": "true", loading: "lazy" });
+    }
+    return (_jsx("div", { class: small ? "followed-picture quest-cover-mark" : "quest-cover-mark", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 24 24", children: _jsx("path", { d: placeKinds[quest.placeKind ?? ""]?.glyph ?? questFlag }) }) }));
+}
+/** A counter of a quest as a bar: clues 3/5. */
+function QuestBar({ counter }) {
+    const share = Math.max(0, Math.min(1, counter.value / counter.max));
+    const label = phraseLabel(fieldLabel(counter.field));
+    return (_jsxs("span", { class: "quest-bar", children: [_jsx("span", { class: "quest-bar-label", children: label }), _jsx("span", { class: "quest-bar-track", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": counter.max, "aria-valuenow": counter.value, "aria-valuetext": t("{value} of {max}", { value: counter.value, max: counter.max }), children: _jsx("span", { style: { width: `${share * 100}%` } }) }), _jsxs("span", { class: "quest-bar-value", "aria-hidden": "true", children: [counter.value, "/", counter.max] })] }));
+}
+/** A clock as a game draws one: a circle in as many slices as it has, those filled in gold; hidden from a screen reader where its words say it. */
+function ClockFace({ clock, small = false, hidden = false }) {
+    const slices = Math.max(1, Math.min(clock.max, 24));
+    const filled = Math.max(0, Math.min(clock.value, slices));
+    const size = small ? 22 : 34;
+    const radius = size / 2 - 1.5;
+    const centre = size / 2;
+    const point = (index) => {
+        const angle = (index / slices) * 2 * Math.PI - Math.PI / 2;
+        return `${centre + radius * Math.cos(angle)} ${centre + radius * Math.sin(angle)}`;
+    };
+    const label = `${clock.name ?? t("Clock")}: ${t("{value} of {max}", { value: clock.value, max: clock.max })}`;
+    return (_jsx("svg", { class: "clock-face", width: size, height: size, viewBox: `0 0 ${size} ${size}`, ...(hidden ? { "aria-hidden": "true" } : { role: "img", "aria-label": label }), children: Array.from({ length: slices }, (_, index) => (_jsx("path", { class: index < filled ? "clock-slice filled" : "clock-slice", d: slices === 1
+                ? `M ${centre} ${centre - radius} A ${radius} ${radius} 0 1 1 ${centre - 0.01} ${centre - radius} Z`
+                : `M ${centre} ${centre} L ${point(index)} A ${radius} ${radius} 0 0 1 ${point(index + 1)} Z` }, index))) }));
+}
+/** The time left before a deadline, as a game's timer: an hourglass and 1d 12h left, red under a day; Time is up once it has come. */
+function Deadline({ deadline }) {
+    const minutes = deadline.minutes;
+    const near = minutes !== undefined && minutes < 24 * 60;
+    const text = minutes === undefined ? byDateLabel(deadline.date) : minutes <= 0 ? t("Time is up") : durationText(minutes);
+    // Its word apart, which the followed quest's strip leaves to a screen reader on a phone.
+    const left = minutes !== undefined && minutes > 0;
+    return (_jsxs("span", { class: near ? "quest-deadline near" : "quest-deadline", "data-tip": phraseLabel(byDateLabel(deadline.date)), children: [_jsx(Icon, { name: "hourglass" }), _jsxs("span", { children: [text, left && _jsx("span", { class: "quest-deadline-left", children: ` ${t("left")}` })] })] }));
+}
+/** The story by its scenes, the last first: each with its place and date, its summary, and what the diary tells of it, folded. */
+function Story({ chapters, now }) {
+    if (chapters.length === 0) {
+        return _jsx("p", { class: "journal-none", children: t("The story starts with the first scene.") });
+    }
+    return (_jsxs("ol", { class: "story", children: [_jsxs("li", { class: "story-mark now", children: [_jsx("b", { children: t("Now") }), now !== undefined && _jsx("span", { children: phraseLabel(gameDateLabel(now)) })] }), chapters.map((chapter, index) => chapter.title === undefined
+                ? _jsx(Between, { chapter: chapter }, index)
+                : (_jsxs("li", { class: ["chapter", chapter.open ? "now" : "", chapter.picture === undefined && placeKinds[chapter.kind ?? ""] === undefined ? "bare" : ""].join(" ").trim(), children: [_jsx(ChapterPicture, { chapter: chapter }), _jsxs("div", { class: "chapter-body", children: [_jsxs("header", { class: "chapter-head", children: [chapter.number !== undefined && _jsx("span", { class: "chapter-number", children: t("Chapter {number}", { number: chapter.number }) }), _jsx("h3", { children: chapter.title }), chapter.open && _jsx("span", { class: "chapter-now", children: t("Now") }), chapter.type !== undefined && _jsx("span", { class: "chapter-type", children: phraseLabel(sceneTypeLabel(chapter.type)) })] }), (chapter.place !== undefined || chapter.date !== undefined) && (_jsx("p", { class: "chapter-when", children: [chapter.place, chapter.date === undefined ? undefined : phraseLabel(gameDateLabel(chapter.date))].filter((part) => part !== undefined).join(" · ") })), chapter.summary !== undefined && _jsx("p", { class: "chapter-summary", children: chapter.summary }), chapter.facts.length > 0 && (_jsxs("details", { class: "chapter-facts", children: [_jsx("summary", { children: chapter.facts.length === 1 ? t("1 thing that happened") : t("{count} things that happened", { count: chapter.facts.length }) }), _jsx(Facts, { facts: chapter.facts })] }))] })] }, index))), _jsx("li", { class: "story-mark start", children: _jsx("b", { children: t("The start") }) })] }));
+}
+/** The picture of a chapter's place, or the mark of its kind on the map's paper, as Saves has them; nothing for a place with neither (D-384). */
+function ChapterPicture({ chapter }) {
+    const kind = placeKinds[chapter.kind ?? ""];
+    if (chapter.picture !== undefined) {
+        return (_jsx("div", { class: "chapter-picture", "aria-hidden": "true", children: _jsx("img", { src: pictureAddress(chapter.picture), alt: "", loading: "lazy" }) }));
+    }
+    return kind === undefined ? null : (_jsx("div", { class: "chapter-picture kind", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 24 24", children: _jsx("path", { d: kind.glyph }) }) }));
+}
+/** What happened between two scenes, as a thin folded line between their chapters. */
+function Between({ chapter }) {
+    return (_jsx("li", { class: "chapter between", children: _jsxs("details", { class: "chapter-facts", children: [_jsx("summary", { children: `${t("Between scenes")} · ${chapter.facts.length === 1 ? t("1 thing") : t("{count} things", { count: chapter.facts.length })}` }), _jsx(Facts, { facts: chapter.facts })] }) }));
+}
+/** The facts of a chapter, the game date written once whenever it changes, as the days in a chat. */
+function Facts({ facts }) {
+    let last;
+    return (_jsx("ul", { children: facts.flatMap((fact, at) => {
+            const header = fact.date !== undefined && fact.date !== last ? [_jsx("li", { class: "fact-date", children: phraseLabel(gameDateLabel(fact.date)) }, `date-${at}`)] : [];
+            last = fact.date ?? last;
+            return [...header, _jsx("li", { children: factLabel(fact) }, at)];
+        }) }));
+}
+function Star() {
+    return (_jsx("svg", { class: "star", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 3.2l2.6 5.5 6 .8-4.4 4.1 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.5l6-.8Z" }) }));
+}
+/** The journal, read again whenever the campaign changes; only the last reading counts. */
+function useJournal(version) {
+    const [state, setState] = useState({ done: false });
+    const reads = useRef(0);
+    useEffect(() => {
+        const reading = ++reads.current;
+        void readJournal().then((read) => reading === reads.current && setState({ read, done: true }), (error) => reading === reads.current && setState({ problem: error instanceof Error ? error.message : String(error), done: true }));
+    }, [version]);
+    return state;
+}
+/**
+ * The quest the player follows in this campaign, kept in this browser (D-369): until they choose, the main open quest, or the only open one; none once they
+ * chose none.
+ */
+function useFollowed(campaign, quests) {
+    const [kept, keep] = useKeptText(`rpg-engine.followed-quest.${campaign ?? ""}`);
+    const open = (quests ?? []).filter((quest) => quest.status === "open");
+    const usual = open.find((quest) => quest.main)?.name ?? (open.length === 1 ? open[0].name : undefined);
+    return [kept === undefined ? usual : kept === "" ? undefined : kept, (name) => keep(name ?? "")];
+}
+/** A picture's address, with when its file last changed, so that it comes again only when it changes. */
+function pictureAddress(picture) {
+    return `/images/${encodeURIComponent(picture.file)}?v=${picture.version}`;
+}
+/** "1d 12h", "3h 20m", "45m": time in the game's days, hours and minutes. */
+function durationText(minutes) {
+    const days = Math.floor(minutes / (24 * 60));
+    const hours = Math.floor((minutes % (24 * 60)) / 60);
+    const rest = minutes % 60;
+    if (days > 0) {
+        return [t("{days}d", { days }), hours > 0 ? t("{hours}h", { hours }) : ""].filter((part) => part !== "").join(" ");
+    }
+    return hours > 0 ? [t("{hours}h", { hours }), rest > 0 ? t("{minutes}m", { minutes: rest }) : ""].filter((part) => part !== "").join(" ") : t("{minutes}m", { minutes: rest });
+}
+/** A goal's words without the marks of markdown, for the small strip. */
+function plainText(text) {
+    return text.replace(/\[\[([^\]|#]+)(?:#[^\]|]*)?(?:\|([^\]]+))?\]\]/g, (_, page, label) => label ?? page).replace(/[*_`]/g, "");
+}
+/** A tab's name in the page's language. */
+function tabName(tab) {
+    return tab === "quests" ? t("Quests") : tab === "story" ? t("Story") : t("Notes");
+}

package/dist/dashboard/labels.js

@@ -0,0 +1,226 @@
+// Labels from the names of the fields, in English (D-273): "hit-dice-d8" reads "hit dice d8", "str-save" "STR save"; names in the campaign's language come later.
+import { systemWord, t } from "./text.js";
+// The dice the page has a picture of: the d% as 100, the coin as 2.
+const drawnDice = [2, 4, 6, 8, 10, 12, 20, 100];
+/** A field's name as a label: its words apart, in capitals the short ones that name a field, such as str or ac, and those of two letters without a vowel, such as hp. */
+export function fieldLabel(field, fields = new Set()) {
+    return systemWord("fields", field) ?? words(field).map((word) => (isShortName(word, fields) ? word.toUpperCase() : word)).join(" ");
+}
+/**
+ * The dice of a notation, by their sides, with how many of each, in the order they come: 2d20kh1+5 is two d20, 1d20+1d4+3 a d20 and a d4, d% a d% (100), 4dF
+ * four dF; numbers alone are not dice.
+ */
+export function diceIn(notation) {
+    const dice = [];
+    for (const [, count, sides] of notation.matchAll(/(\d*)d(\d+|%|F)/gi)) {
+        const kind = sides === "%" ? 100 : sides.toUpperCase() === "F" ? "F" : Number(sides);
+        const known = dice.find((die) => die.sides === kind);
+        const many = count === "" ? 1 : Number(count);
+        if (known === undefined) {
+            dice.push({ sides: kind, count: many });
+        }
+        else {
+            known.count += many;
+        }
+    }
+    return dice;
+}
+/** The die the page draws for a die of these sides (D-284): the seven of the tray and the coin, a d3 and a dF as the d6 they are thrown with; none for a d30. */
+export function drawnDie(sides) {
+    const drawn = sides === "F" || sides === 3 ? 6 : sides;
+    return drawnDice.includes(drawn) ? drawn : undefined;
+}
+/**
+ * The dice of a notation as the page draws them (D-284): of one kind, its die once or twice, or once with how many past two, as 8d6; of more kinds, the first die
+ * of the first two, the notation beside saying the rest. Dice the page does not draw are left out.
+ */
+export function drawnDiceOf(notation) {
+    const kinds = diceIn(notation).flatMap((kind) => {
+        const sides = drawnDie(kind.sides);
+        return sides === undefined ? [] : [{ sides, count: kind.count }];
+    });
+    if (kinds.length !== 1) {
+        return { sides: kinds.slice(0, 2).map((kind) => kind.sides) };
+    }
+    const [{ sides, count }] = kinds;
+    // Of two dice, one kept or one dropped: the other is drawn faded, as on the plate (D-297).
+    const oneOfTwo = count === 2 && /\d*d(?:\d+|%|F)(?:k[hl]1|d[hl]1)(?![\d])/i.test(notation);
+    return count <= 2 ? { sides: Array.from({ length: count }, () => sides), ...(oneOfTwo ? { faded: true } : {}) } : { sides: [sides], count };
+}
+/** An item of a list as the page shows it: the short name of a field in capitals, as WIS; any other with its first letter a capital, as Light hammer. */
+export function itemLabel(item, fields = new Set()) {
+    const word = item.trim();
+    return systemWord("words", word) ?? systemWord("fields", word) ?? (isShortName(word.toLowerCase(), fields) ? word.toUpperCase() : phraseLabel(word));
+}
+/** A label of a sheet's line as a phrase, its first letter a capital: "sleight of hand" reads "Sleight of hand"; "STR save" stays as it is. */
+export function phraseLabel(label) {
+    return label.charAt(0).toUpperCase() + label.slice(1);
+}
+/** A button's label as a check: "Tiro: Atletica (1d20+5)" is the check Atletica with its dice (ASK-3); any other label is an answer, or the change of mind. */
+export function checkOf(label, title) {
+    const match = /^(.+?): (.+) \(([^()]+)\)$/.exec(label);
+    return match === null || match[1] !== title ? undefined : { check: match[2], dice: match[3] };
+}
+/** Whether two notations are the same dice and number, as the tray and a check write them: 1d20+2 and 1d20 + 2, 1d20−1 and 1d20-1, 1d20+0 and 1d20. */
+export function sameDice(first, second) {
+    return plainDice(first) === plainDice(second);
+}
+/** The labels of a group's values by field: a last word they all share, such as save in str-save and dex-save, is left out. */
+export function groupLabels(groupFields, fields = new Set()) {
+    const lasts = new Set(groupFields.map((field) => words(field).at(-1)));
+    const shared = groupFields.length > 1 && lasts.size === 1 && groupFields.every((field) => words(field).length > 1);
+    return new Map(groupFields.map((field) => [field, fieldLabel(shared ? words(field).slice(0, -1).join("-") : field, fields)]));
+}
+/** "wis-mod +3, Insight in skill-proficiencies" as "WIS mod +3, Insight in skill proficiencies": the names of fields in a text, as labels. */
+export function readableIds(text, fields = new Set()) {
+    return text.replace(/\b[a-z][a-z0-9]*(?:-[a-z0-9]+)+\b/g, (field) => fieldLabel(field, fields));
+}
+/** A number with its sign: +2, −1. */
+export function signed(value) {
+    return value < 0 ? `−${-value}` : `+${value}`;
+}
+/** The number added at the end of a notation, as the 5 of 2d20kh1+5; none, 0. */
+export function notationModifier(notation) {
+    const match = /([+-]\d+)$/.exec(notation.replace(/\s+/g, ""));
+    return match === null ? 0 : Number(match[1]);
+}
+/** A number as it reads: −1 with a minus sign rather than a hyphen. */
+export function shownText(text) {
+    return (systemWord("words", text) ?? text).replace(/(^|[\s(])-(?=\d)/g, "$1−");
+}
+/** Dice as they read: 1d20−1 with a minus sign rather than a hyphen. */
+export function shownNotation(notation) {
+    return notation.replace(/-(?=\d)/g, "−");
+}
+/** "Ettore Lanza" as "EL", for a token without a picture. */
+export function initials(name) {
+    return name.split(/\s+/).filter((word) => word !== "").slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+/** A hue from a name, the same every time: the colour of a token without a picture. */
+export function nameHue(name) {
+    return [...name].reduce((hash, character) => (hash * 31 + (character.codePointAt(0) ?? 0)) % 360, 7);
+}
+function words(field) {
+    return field.split("-").filter((word) => word !== "");
+}
+function isShortName(word, fields) {
+    return (/^[a-z]{2,3}$/.test(word) && fields.has(word)) || /^[b-df-hj-np-tv-z]{2}$/.test(word);
+}
+/** Dice written one way: of two dice dropping the lowest as keeping the highest, k as kh, 1d100 as 1d%, and the numbers added summed, as 1d20+2+1 is 1d20+3. */
+function plainDice(notation) {
+    const text = notation.toLowerCase().replace(/\s+/g, "").replaceAll("−", "-").replace(/\b2d(\d+)dl1/g, "2d$1kh1").replace(/\b2d(\d+)dh1/g, "2d$1kl1").replace(/(d(?:\d+|%))k(?=\d)/g, "$1kh")
+        .replace(/d100\b/g, "d%");
+    const terms = text.match(/[+-]?[^+-]+/g) ?? [];
+    const sum = terms.filter((term) => !term.includes("d")).reduce((total, term) => total + Number(term), 0);
+    return `${terms.filter((term) => term.includes("d")).join("")}${sum === 0 ? "" : sum > 0 ? `+${sum}` : String(sum)}`;
+}
+/** A moment in real time, as a save or a note was written, as a game says it: today or yesterday, else the day, with the year only when it is not this one; whole in full. */
+export function realTimeLabel(at, now = new Date()) {
+    const date = new Date(at);
+    if (Number.isNaN(date.getTime())) {
+        return undefined;
+    }
+    const language = document.documentElement.lang || undefined;
+    const time = new Intl.DateTimeFormat(undefined, { timeStyle: "short" }).format(date);
+    const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+    const daysAgo = date.toDateString() === now.toDateString() ? 0 : date.toDateString() === yesterday.toDateString() ? -1 : undefined;
+    const day = daysAgo === undefined
+        ? new Intl.DateTimeFormat(language, { month: "short", day: "numeric", ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }) }).format(date)
+        : new Intl.RelativeTimeFormat(language, { numeric: "auto" }).format(daysAgo, "day");
+    return { short: `${day}, ${time}`, full: new Intl.DateTimeFormat(language, { dateStyle: "full", timeStyle: "short" }).format(date) };
+}
+/** The name the page writes for someone the character does not know (D-331): Creature B2 for "creature B2", Someone for "someone", in the page's language. */
+export function strangerLabel(name) {
+    const creature = /^creature(?: (\w+))?$/.exec(name);
+    if (creature !== null) {
+        return creature[1] === undefined ? t("Creature") : t("Creature {mark}", { mark: creature[1] });
+    }
+    return name === "someone" ? t("Someone") : `${name[0]?.toUpperCase() ?? ""}${name.slice(1)}`;
+}
+/** A type of scene in the page's language: combat, social, exploration… */
+export function sceneTypeLabel(type) {
+    const labels = {
+        combat: t("combat"),
+        social: t("social"),
+        exploration: t("exploration"),
+        travel: t("travel"),
+        rest: t("rest"),
+        challenge: t("challenge"),
+        other: t("other"),
+    };
+    return labels[type] ?? type;
+}
+/** A setting by its name, in the page's language: Difficulty; a game system's own from its name. */
+export function settingLabel(name) {
+    const labels = {
+        difficulty: t("Difficulty"),
+        lethality: t("Lethality"),
+        saves: t("Saves"),
+        rigor: t("Rigor"),
+        mentor: t("Mentor"),
+        learned: t("Learned"),
+        prose: t("Prose"),
+        story: t("Stories"),
+        author: t("Write like"),
+        style: t("In your words"),
+        dice: t("Dice"),
+        units: t("Units"),
+        pictures: t("Pictures"),
+        lines: t("Lines"),
+        veils: t("Veils"),
+        language: t("Language"),
+        companions: t("Companions"),
+        preparation: t("Preparation"),
+        name: t("Name"),
+        premise: t("Premise"),
+        system: t("Game system"),
+    };
+    return labels[name] ?? phraseLabel(systemWord("words", name) ?? fieldLabel(name));
+}
+/** What a game system is, as its system.yaml titles it, in its words when it has them: The fifth edition from the SRD 5.1. */
+export function systemTitleLabel(title) {
+    return phraseLabel(systemWord("words", title) ?? title);
+}
+/** A value of a setting, in the page's language: Normal, On request; a game system's own from its words. */
+export function valueLabel(value) {
+    const labels = {
+        story: t("Story"),
+        easy: t("Easy"),
+        normal: t("Normal"),
+        hard: t("Hard"),
+        brutal: t("Brutal"),
+        narrative: t("Narrative"),
+        epic: t("Epic"),
+        dice: t("Dice"),
+        permadeath: t("Permadeath"),
+        checkpoint: t("Checkpoint"),
+        free: t("Free"),
+        smooth: t("Smooth"),
+        rules: t("Rules"),
+        simulation: t("Simulation"),
+        off: t("Off"),
+        hints: t("Hints"),
+        tutorial: t("Tutorial"),
+        digital: t("Digital"),
+        physical: t("Physical"),
+        metric: t("Metric"),
+        imperial: t("Imperial"),
+        none: t("None"),
+        "on request": t("On request"),
+        "new elements": t("New places, quests and those you meet"),
+        "made with the player": t("Made with the player"),
+        "made by the master": t("Made by the master"),
+        "met in play": t("Met in play"),
+        plain: t("Plain"),
+        literary: t("Literary"),
+        pulp: t("Pulp"),
+        wry: t("Wry"),
+        situations: t("Situations"),
+        arcs: t("Arcs"),
+        episodes: t("Episodes"),
+        mystery: t("Mystery"),
+        "on the fly": t("On the fly"),
+        "all at the start": t("All at the start"),
+    };
+    return labels[value] ?? itemLabel(value);
+}