rpg-engine 0.0.0-stage → 0.1.0

package/dist/dashboard/notes.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The player's notes (D-371), a tab of the Journal: free notes, a title and a text each, saved by themselves as the player writes, kept outside the game; one may
+// be shared with the master, who hears it at their next call, and taken back until then (D-381).
+import { useEffect, useRef, useState } from "preact/hooks";
+import { readNotes, sendNote } from "./api.js";
+import { Icon } from "./icons.js";
+import { realTimeLabel } from "./labels.js";
+import { t } from "./text.js";
+// How long the page waits after the last key before it saves a note, in milliseconds.
+const savePause = 800;
+export function Notes({ version }) {
+    const [notes, setNotes] = useState();
+    // The notes shared that the master has not heard yet, as the game says them: read again whenever the campaign changes.
+    const [pending, setPending] = useState(new Set());
+    const [problem, setProblem] = useState();
+    // The note whose title takes the focus, a new one or the one after a note taken away, each time anew.
+    const [focus, setFocus] = useState();
+    // The notes just made here and still empty: New note goes back to one rather than making another.
+    const empty = useRef(new Set());
+    const newNote = useRef(null);
+    useEffect(() => {
+        void readNotes().then((read) => {
+            setNotes((before) => before ?? read.notes);
+            setPending(new Set(read.pending));
+        }, (error) => setProblem(error instanceof Error ? error.message : String(error)));
+    }, [version]);
+    const add = () => {
+        const waiting = notes?.find((note) => empty.current.has(note.id));
+        if (waiting !== undefined) {
+            setFocus({ id: waiting.id });
+            return;
+        }
+        const note = { id: newNoteId(), title: "", text: "", at: new Date().toISOString() };
+        empty.current.add(note.id);
+        setNotes((all) => [note, ...(all ?? [])]);
+        setFocus({ id: note.id });
+    };
+    const removed = (id) => {
+        const at = notes?.findIndex((note) => note.id === id) ?? -1;
+        const rest = notes?.filter((note) => note.id !== id) ?? [];
+        const next = rest[Math.min(at, rest.length - 1)];
+        empty.current.delete(id);
+        setNotes(rest);
+        if (next === undefined) {
+            newNote.current?.focus();
+        }
+        else {
+            setFocus({ id: next.id });
+        }
+    };
+    const waiting = (id, still) => {
+        setPending((before) => new Set(still ? [...before, id] : [...before].filter((one) => one !== id)));
+    };
+    if (problem !== undefined) {
+        return _jsx("p", { class: "journal-problem", role: "alert", children: problem });
+    }
+    return (_jsxs("div", { class: "player-notes", children: [_jsxs("div", { class: "player-notes-head", children: [_jsx("p", { class: "player-notes-about", children: t("Names, clues, what you suspect. The master does not read them: share one when you want them to know.") }), _jsxs("button", { ref: newNote, type: "button", class: "save-button gold", onClick: add, disabled: notes === undefined, children: [_jsx(Icon, { name: "plus" }), " ", t("New note")] })] }), notes?.length === 0 && _jsx("p", { class: "journal-none", children: t("No notes yet.") }), notes !== undefined && notes.length > 0 && (_jsx("div", { class: "note-cards", children: notes.map((note) => (_jsx(NoteCard, { note: note, pending: pending.has(note.id), focus: focus?.id === note.id ? focus : undefined, onWritten: () => empty.current.delete(note.id), onPending: (still) => waiting(note.id, still), onRemoved: () => removed(note.id) }, note.id))) }))] }));
+}
+/**
+ * A note as its card shows it, to write in: its title and text saved a moment after the last key, when the card is left, before it is shared, and when the page
+ * is hidden or closed; when it was written; Share, then Shared with Undo until the master hears it, then Read.
+ */
+function NoteCard({ note, pending, focus, onWritten, onPending, onRemoved }) {
+    const [title, setTitle] = useState(note.title);
+    const [text, setText] = useState(note.text);
+    const [at, setAt] = useState(note.at);
+    const [shared, setShared] = useState(note.shared);
+    const [saved, setSaved] = useState(false);
+    // Told to a screen reader too: what went wrong.
+    const [said, setSaid] = useState();
+    const [removing, setRemoving] = useState(false);
+    const titleField = useRef(null);
+    const trash = useRef(null);
+    const keepButton = useRef(null);
+    // What is written and not saved yet, and whether the note was ever sent to be saved: an empty new note is never written, and one sent is taken away there too.
+    const unsaved = useRef(undefined);
+    const sent = useRef(note.title !== "" || note.text !== "");
+    const timer = useRef(undefined);
+    // What is waiting to be saved, as it goes; undefined when nothing needs to go.
+    const take = () => {
+        window.clearTimeout(timer.current);
+        const written = unsaved.current;
+        unsaved.current = undefined;
+        if (written === undefined || (!sent.current && written.title.trim() === "" && written.text.trim() === "")) {
+            return undefined;
+        }
+        sent.current = true;
+        return { id: note.id, ...written };
+    };
+    const save = async () => {
+        const change = take();
+        if (change === undefined) {
+            return true;
+        }
+        const problem = await sendNote(change);
+        setAt(new Date().toISOString());
+        // Written again, a note is no longer shared: the master would hear the words before.
+        if (problem === undefined) {
+            setShared(undefined);
+            onPending(false);
+        }
+        setSaved(problem === undefined);
+        setSaid(problem);
+        return problem === undefined;
+    };
+    const write = (change) => {
+        const next = { title: change.title ?? title, text: change.text ?? text };
+        setTitle(next.title);
+        setText(next.text);
+        unsaved.current = next;
+        setSaved(false);
+        onWritten();
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => void save(), savePause);
+    };
+    const share = async () => {
+        if (!(await save())) {
+            return;
+        }
+        const problem = await sendNote({ share: note.id });
+        setSaid(problem);
+        if (problem === undefined) {
+            setShared(new Date().toISOString());
+            onPending(true);
+        }
+    };
+    const unshare = async () => {
+        const problem = await sendNote({ unshare: note.id });
+        setSaid(problem);
+        onPending(false);
+        if (problem === undefined) {
+            setShared(undefined);
+        }
+    };
+    const keep = () => {
+        setRemoving(false);
+        // The trash comes back after the question: the focus goes to it once it is drawn.
+        window.setTimeout(() => trash.current?.focus());
+    };
+    const remove = async () => {
+        window.clearTimeout(timer.current);
+        unsaved.current = undefined;
+        const problem = sent.current ? await sendNote({ remove: note.id }) : undefined;
+        if (problem === undefined) {
+            onPending(false);
+            onRemoved();
+        }
+        else {
+            setSaid(problem);
+            keep();
+        }
+    };
+    useEffect(() => {
+        if (focus !== undefined) {
+            titleField.current?.focus();
+        }
+    }, [focus]);
+    // Asked whether to delete it, Keep takes the focus.
+    useEffect(() => {
+        if (removing) {
+            keepButton.current?.focus();
+        }
+    }, [removing]);
+    // A page hidden or closed saves what is waiting at once, the request outliving the page; leaving the tab saves it too.
+    useEffect(() => {
+        const leave = () => {
+            const change = take();
+            if (change !== undefined) {
+                void sendNote(change, true);
+            }
+        };
+        const hidden = () => {
+            if (document.visibilityState === "hidden") {
+                leave();
+            }
+        };
+        window.addEventListener("pagehide", leave);
+        document.addEventListener("visibilitychange", hidden);
+        return () => {
+            window.removeEventListener("pagehide", leave);
+            document.removeEventListener("visibilitychange", hidden);
+            void save();
+        };
+    }, []);
+    const written = realTimeLabel(at);
+    const empty = title.trim() === "" && text.trim() === "";
+    const waiting = shared !== undefined && pending;
+    return (_jsxs("article", { class: "note-card", "aria-label": title.trim() === "" ? t("Note") : title.trim(), onFocusOut: (event) => !event.currentTarget.contains(event.relatedTarget) && void save(), children: [_jsx("input", { ref: titleField, class: "note-title", type: "text", value: title, maxLength: 200, placeholder: t("Title"), "aria-label": title.trim() === "" ? t("The note's title") : t("The title of the note {title}", { title: title.trim() }), onInput: (event) => write({ title: event.currentTarget.value }) }), _jsx("textarea", { class: "note-text", value: text, maxLength: 20_000, rows: 4, placeholder: t("Write here…"), "aria-label": title.trim() === "" ? t("The note") : t("The note {title}", { title: title.trim() }), onInput: (event) => write({ text: event.currentTarget.value }) }), _jsx("p", { class: "note-said", role: "alert", children: said }), _jsxs("footer", { class: "note-foot", children: [_jsxs("span", { class: "note-when", children: [written !== undefined && sent.current ? written.short : "", saved && _jsx("span", { "aria-hidden": "true", children: `· ${t("Saved")}` })] }), removing
+                        ? (_jsxs("span", { class: "note-remove", onKeyDown: (event) => {
+                                if (event.key === "Escape") {
+                                    keep();
+                                }
+                            }, children: [t("Delete it?"), _jsx("button", { ref: keepButton, type: "button", class: "save-button", onClick: keep, children: t("Keep") }), _jsx("button", { type: "button", class: "save-button danger", onClick: () => void remove(), children: t("Delete") })] }))
+                        : (_jsxs(_Fragment, { children: [_jsxs("span", { class: "note-state", role: "status", children: [waiting && (_jsxs("span", { class: "note-chip", "data-tip": t("The master hears it at their next call"), children: [_jsx(Icon, { name: "send" }), " ", t("Shared")] })), shared !== undefined && !pending && (_jsxs("span", { class: "note-chip read", "data-tip": t("The master has read it"), children: [_jsx(Icon, { name: "check" }), " ", t("Read")] }))] }), waiting
+                                    ? (_jsxs("button", { type: "button", class: "save-button note-share", "aria-label": t("Take it back from the master"), onClick: () => void unshare(), children: [_jsx(Icon, { name: "undo" }), " ", t("Take it back")] }))
+                                    : shared !== undefined
+                                        ? (_jsxs("button", { type: "button", class: "save-button note-share", "aria-label": t("Share it again with the master"), disabled: empty, onClick: () => void share(), children: [_jsx(Icon, { name: "send" }), " ", t("Share again")] }))
+                                        : (_jsxs("button", { type: "button", class: "save-button note-share", "aria-label": t("Share with the master"), "data-tip": t("Share with the master"), disabled: empty, onClick: () => void share(), children: [_jsx(Icon, { name: "send" }), " ", t("Share")] })), _jsx("button", { ref: trash, type: "button", class: "icon-button note-trash tip-left", "aria-label": t("Delete the note"), "data-tip": t("Delete"), onClick: () => setRemoving(true), children: _jsx(Icon, { name: "clear" }) })] }))] })] }));
+}
+/** A new note's id: the time and a few random letters, unique enough for one player's notes. */
+function newNoteId() {
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}

package/dist/dashboard/notices.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The page's own messages, not the master's (D-298): over the page, under its top, each in its kind's colour and with its icon: a problem, the game away, a
+// word to know. The master's questions keep the robot.
+import { Icon } from "./icons.js";
+import { languageName } from "./languages.js";
+import { pageTranslation, t } from "./text.js";
+export function Notices({ notices }) {
+    return notices.length === 0 ? null : (_jsx("div", { class: "notices", children: notices.map((notice) => (_jsxs("p", { class: `notice ${notice.kind}`, role: notice.kind === "problem" ? "alert" : "status", children: [_jsx(Icon, { name: notice.kind === "info" ? "info" : "alert" }), _jsx("span", { children: notice.text })] }, notice.text))) }));
+}
+/** What the page has to say of the game: the campaign's files that do not read, which the master fixes; the page being translated, or out of reach (D-406). */
+export function gameNotices(problems) {
+    const translation = pageTranslation();
+    const language = translation === undefined ? "" : languageName(translation.language, document.documentElement.lang || "en") ?? translation.language;
+    return [
+        ...(problems === undefined || problems === 0
+            ? []
+            : [{
+                    kind: "problem",
+                    text: problems === 1 ? t("The campaign has a problem in its files: the master sees it and fixes it.") : t("The campaign has {count} problems in its files: the master sees them and fixes them.", { count: problems }),
+                }]),
+        ...(translation?.state === "translating" ? [{ kind: "info", text: t("This computer is translating the page into {language}: until then it stays in English.", { language }) }] : []),
+        ...(translation?.state === "unable" ? [{ kind: "info", text: t("The page stays in English: Codex or Claude Code would translate it into {language} on this computer.", { language }) }] : []),
+    ];
+}

package/dist/dashboard/pages.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { sectionLabel } from "./address.js";
+import { CardHeader } from "./card.js";
+import { footLinks } from "./footer.js";
+import { Icon, iconPath } from "./icons.js";
+import { systemTitleLabel } from "./labels.js";
+import { t } from "./text.js";
+/** A page's head, out of Party and Scene: its section's icon and its title, both in the accent (D-409). */
+export function PageHead({ section, id, title }) {
+    return (_jsxs("div", { class: "page-head", children: [_jsx("span", { class: "page-mark", children: _jsx(Icon, { name: section }) }), _jsx("h2", { id: id, children: title ?? sectionLabel(section) })] }));
+}
+/** A section the page does not have yet: what it will hold. */
+export function Upcoming({ section }) {
+    return (_jsxs("section", { class: "page-stack", "aria-labelledby": "upcoming-title", children: [_jsx(PageHead, { section: section, id: "upcoming-title" }), _jsxs("div", { class: "upcoming", children: [_jsx("p", { children: upcoming(section) }), _jsx("p", { class: "upcoming-note", children: t("It comes in a next step.") })] })] }));
+}
+/**
+ * What the page is (D-409): a card of the product, with the robot and its links; a card of the game system the campaign plays; a card of how it was made, with
+ * Stefano's motto, as in the READMEs; a card of the licences and the system's credits; then, out of the cards and small, the copyright.
+ */
+export function About({ product, system }) {
+    return (_jsxs("section", { class: "page-stack about", "aria-labelledby": "about-title", children: [_jsx(PageHead, { section: "about", id: "about-title" }), _jsxs("article", { class: "about-hero", children: [_jsx("img", { src: "/assets/icon-180.png", alt: "" }), _jsxs("div", { children: [_jsx("h3", { children: product }), _jsx("p", { children: t("The dashboard of the campaign, beside the chat where you play.") }), _jsxs("p", { class: "about-links", children: [_jsxs("a", { class: "about-link", href: footLinks.github, target: "_blank", rel: "noreferrer", children: [_jsx(Icon, { name: "github" }), "GitHub"] }), _jsxs("a", { class: "about-link", href: footLinks.npm, target: "_blank", rel: "noreferrer", children: [_jsx(Icon, { name: "npm" }), "npm"] }), _jsxs("a", { class: "about-link", href: footLinks.support, target: "_blank", rel: "noreferrer", children: [_jsx(Icon, { name: "heart" }), t("Support {product}", { product })] })] })] })] }), system && (_jsxs("details", { class: "group about-card about-system", open: true, children: [_jsx(CardHeader, { icon: iconPath("dice"), title: _jsx("h3", { children: t("Game system") }), open: true, onToggle: () => undefined, fixed: true }), _jsxs("p", { children: [_jsx("span", { class: "system-chip", children: system.name }), systemTitleLabel(system.title)] })] })), _jsxs("details", { class: "group about-card", open: true, children: [_jsx(CardHeader, { icon: iconPath("pencil"), title: _jsx("h3", { children: t("Development notes") }), open: true, onToggle: () => undefined, fixed: true }), _jsx("p", { children: t("Developed with the help of AI coding agents. Everything is designed, reviewed and tested by the project's human maintainer.") }), _jsxs("p", { class: "about-motto", children: [_jsx("strong", { children: t("We encourage everyone to use AI for their own purposes.") }), _jsx("br", {}), t("The means of production should belong to the people."), _jsx("br", {}), t("Fight corporate control of technology, not our right to use it.")] })] }), _jsxs("details", { class: "group about-card", open: true, children: [_jsx(CardHeader, { icon: iconPath("licence"), title: _jsx("h3", { children: t("Licence") }), open: true, onToggle: () => undefined, fixed: true }), _jsxs("div", { class: "about-licence", children: [_jsx(Icon, { name: "github" }), _jsxs("div", { children: [_jsx("h4", { children: product }), _jsx("p", { children: t("Open source, under the MIT licence.") }), _jsxs("a", { class: "about-link", href: mitLicence, target: "_blank", rel: "noreferrer", children: [_jsx(Icon, { name: "licence" }), t("Read the MIT licence")] })] })] }), system?.attribution && (_jsxs("div", { class: "about-licence", children: [_jsx(Icon, { name: "dice" }), _jsxs("div", { children: [_jsx("h4", { children: `${t("Credits")} · ${system.name}` }), _jsx("p", { class: "about-credits", children: withLinks(system.attribution) })] })] })), _jsxs("div", { class: "about-licence", children: [_jsx(Icon, { name: "journal" }), _jsxs("div", { children: [_jsx("h4", { children: t("Your game") }), _jsx("p", { children: t("{product} ships only original or open-licensed content. Anything else that appears in your game is written by your AI or by you, as pages of your campaign on your computer: it is not part of {product}, and we do not distribute it.", { product }) })] })] })] }), _jsx("footer", { class: "about-fine", children: _jsxs("p", { children: ["© 2026 ", _jsx("a", { href: footLinks.author, target: "_blank", rel: "noreferrer", children: "Stefano Caronia" }), ` · ${product}`] }) })] }));
+}
+/** The MIT licence's text, where it is read: the repository is private. */
+const mitLicence = "https://opensource.org/license/mit";
+/** A credit's text with its addresses as links, the full stop after one left out of it. */
+function withLinks(text) {
+    return text.split(/(https?:\/\/[^\s]*[^\s.,;)])/).map((part, index) => (index % 2 === 1 ? _jsx("a", { href: part, target: "_blank", rel: "noreferrer", children: part }, index) : part));
+}
+/** What a section to come will hold, as the plan says (D-269). */
+function upcoming(section) {
+    return section === "world" ? t("What your character knows, the documents found and the calendar; the world map later.") : undefined;
+}

package/dist/dashboard/party.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { fieldLabel, initials, nameHue } from "./labels.js";
+import { stripCounter } from "./layout.js";
+import { tokenSymbolsPref, usePref } from "./prefs.js";
+import { memberStatus, StatusPip, statusWords } from "./status.js";
+import { t } from "./text.js";
+import { Bar, Effects } from "./widgets.js";
+/** The address of someone's sheet, which the AI can give the player too (D-276). */
+export function sheetAddress(name) {
+    return `#/party/${encodeURIComponent(name)}`;
+}
+export function PartyStrip({ party, chosen, scene }) {
+    const ordered = [...party.filter((member) => !member.dead), ...party.filter((member) => member.dead)];
+    return (_jsx("nav", { class: "party", "aria-label": t("Party"), children: ordered.map((member) => {
+            const counter = stripCounter(member);
+            const status = memberStatus(member, scene);
+            // One name for a screen reader, which the drawing inside would say twice.
+            const said = [member.name, counter === undefined ? "" : `${fieldLabel(counter.field)} ${counter.text}`, ...statusWords(status)];
+            return (_jsxs("a", { href: sheetAddress(member.name), class: `member${member.dead ? " dead" : ""}`, "aria-current": member.name === chosen ? "page" : undefined, "aria-label": said.filter((part) => part !== "").join(", "), children: [_jsx(MemberToken, { member: member, status: status }), _jsx("span", { class: "name", children: member.name }), member.dead ? _jsx("span", { class: "dead-mark", children: t("dead") }) : counter && _jsx(Bar, { value: counter, label: fieldLabel(counter.field) }), _jsx(Effects, { effects: member.effects, most: 2 })] }, member.name));
+        }) }));
+}
+/** A party member's token with the pip of their state (D-419), in the strip and the sheet's band; never in the rolls. Their class in its tooltip (D-409). */
+export function MemberToken({ member, large, status }) {
+    return (_jsx("span", { class: "token-holder", "data-tip": member.headline === undefined ? undefined : `${member.name} · ${member.headline}`, children: _jsx(Token, { member: member, large: large, side: sideOf(member.role), status: status }) }));
+}
+/** The side of one of the party by their role; anyone else has none. */
+export function sideOf(role) {
+    return role === "pc" ? "you" : role === "companion" ? "ally" : undefined;
+}
+/** The symbol of each side, for one whose class the view does not give: a star, a shield (D-414); the d of a path on a grid of 24, centred on 12, 12, drawn as a line. */
+export const sideIcons = {
+    you: "M12 3.75l2.6 5.3 5.9 .9-4.3 4.1 1 5.8L12 17.15l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9Z",
+    ally: "M12 3.25 19 5.75V11.25c0 4.6-3 8.1-7 9.5-4-1.4-7-4.9-7-9.5V5.75Z",
+};
+/**
+ * Someone's round token, as a coin (D-267, D-409): their picture, or their initials on a colour of their own; in a fight a foe the master marked glows red a little (D-415).
+ * With a side, the pip of that side at the start of its lower edge, with their class's symbol or the side's (D-414); with a state, its pip at the end (D-419); with a
+ * number, a stranger's as Creature 2's or B1's, a small dark coin at the end of its upper edge, off the face (D-420).
+ */
+export function Token({ member, large, hostile, side, status, number }) {
+    const classes = ["token", member.role, member.dead ? "dead" : "", large ? "large" : "", hostile ? "hostile" : ""].filter((name) => name !== "").join(" ");
+    return (_jsxs("span", { class: classes, "aria-hidden": "true", children: [member.image === undefined
+                ? _jsx("span", { class: "initials", style: { "--hue": String(nameHue(member.name)) }, children: initials(member.name) })
+                // A new address when the picture changes; the same one comes back as not modified on a reload (D-277).
+                : _jsx("img", { src: `/images/${encodeURIComponent(member.image.file)}?v=${member.image.version}`, alt: "" }), side !== undefined && _jsx(TokenPip, { side: side, icon: member.icon }), _jsx(StatusPip, { status: status }), number !== undefined && _jsx(TokenNumber, { number: number })] }));
+}
+/**
+ * A stranger's number on their token (D-420), drawn as on the map: HTML text snaps to whole pixels and sits half a pixel off in so small a coin, a drawing does
+ * not. On a coin 13 high, wider for B1.
+ */
+function TokenNumber({ number }) {
+    const width = Math.max(13, number.length * 6 + 4);
+    return (_jsx("span", { class: "token-number", style: { "--wide": String(width / 13) }, children: _jsx("svg", { viewBox: `0 0 ${width} 13`, children: _jsx("text", { x: width / 2 + opticalShift(number), y: 7.25, "text-anchor": "middle", "dominant-baseline": "middle", children: number }) }) }));
+}
+/** How far right a number's figures sit from their middle to look centred: a final 1 has its ink left of its box, measured on the page (D-420). */
+function opticalShift(number) {
+    return number.endsWith("1") ? 0.35 : 0;
+}
+/** A token's pip (D-414): a small disc in the side's colour with a symbol, their class's or the side's; none while the player keeps them off. */
+export function TokenPip({ side, icon }) {
+    const [shown] = usePref(tokenSymbolsPref);
+    return shown
+        ? (_jsx("span", { class: `side-pip ${side}`, children: _jsx("svg", { viewBox: "-5 -5 34 34", children: _jsx("path", { d: icon ?? sideIcons[side] }) }) }))
+        : null;
+}