chesspal 0.1.0 → 0.2.0

package/dist/page/dialogs/analyses.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The list of the analyses (D-92): the games analysed or brought to study, found by a search, to open again, analyse again or delete, each row with its
+// menu over the dialog and the question it asks in its place.
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { ResultTile } from "../game/result-tile.js";
+import { signature } from "../players/model-name.js";
+import { searched } from "./search.js";
+import { accountSide, playerIn, studiedSides } from "./studied.js";
+/** The list, read anew at each opening: the search, the row that loads a game, then a row for each game found, with its menu or its question. */
+export function Analyses({ onStudy, onLoad, you, accounts, ai, text }) {
+    const words = text.study;
+    const [analyses, reload] = useAnalyses();
+    const [query, setQuery] = useState("");
+    const [menu, setMenu] = useState(undefined);
+    const [asking, setAsking] = useState(undefined);
+    const [busy, setBusy] = useState(false);
+    const [problem, setProblem] = useState(undefined);
+    useClosing(menu !== undefined, () => setMenu(undefined));
+    useClosing(asking !== undefined, () => setAsking(undefined));
+    const act = async (name, asked) => {
+        setBusy(true);
+        const refused = asked === "remove" ? await deletion("/api/delete-game", name) : await deletion("/api/delete-review", name);
+        // Analysing again opens the game without its review: the chat's analyst goes over it (D-89).
+        const after = refused === undefined && asked === "redo" ? await onStudy({ game: name }) : refused;
+        setBusy(false);
+        setAsking(undefined);
+        setProblem(after);
+        reload();
+    };
+    const open = (name) => {
+        setBusy(true);
+        void onStudy({ game: name }).then((refused) => {
+            setBusy(false);
+            setProblem(refused);
+        });
+    };
+    const rows = analyses.map((item) => {
+        const named = namedSides(item, you, accounts, ai, text);
+        // How it went only for the player's own games: played here, or loaded and named by their name on the site (D-93).
+        const played = item.name.startsWith("games/") ? named.you : accountSide(tagsOf(item), accounts);
+        const outcome = played === undefined ? undefined : outcomeOf(item.result, played);
+        return { item, named, outcome };
+    });
+    const found = searched(rows, query, ({ item, named, outcome }) => searchText(item, named.sides, outcome, text));
+    return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, children: found.map(({ item, named, outcome }) => asking?.name === item.name
+                    ? (_jsx(Question, { asked: asking.asked, game: named.sides, when: dayOf(item.date, text.language), by: by(item), busy: busy, onYes: () => void act(item.name, asking.asked), onNo: () => setAsking(undefined), words: words }, item.name))
+                    : (_jsxs("li", { class: "game", children: [_jsxs("button", { class: "reopen", type: "button", disabled: busy, onClick: () => open(item.name), children: [_jsx(ResultTile, { result: item.result }), _jsxs("span", { class: "what", children: [_jsx("b", { class: "who", children: named.sides }), _jsx("span", { class: "meta", children: [dayOf(item.date, text.language), words.moves(item.moves), item.opening].filter((part) => part !== undefined).join(" · ") }), item.reviewed ? _jsx(Reviewed, { by: by(item), words: words }) : null] }), _jsxs("span", { class: "score", children: [_jsx("b", { children: scoreOf(item.result) }), outcome === undefined ? _jsx("span", {}) : _jsx(OutcomeBadge, { outcome: outcome, words: words })] })] }), _jsx("span", { class: "row-actions", children: _jsx("button", { class: `icon-button${menu?.name === item.name ? " on" : ""}`, type: "button", title: words.more, "aria-label": words.more, "aria-expanded": menu?.name === item.name, disabled: busy, onClick: (event) => setMenu(menu?.name === item.name ? undefined : { name: item.name, anchor: event.currentTarget }), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H5.01M12 12H12.01M19 12H19.01" }) }) }) }), menu?.name === item.name
+                                ? (_jsx(RowMenu, { anchor: menu.anchor, reviewed: item.reviewed, onPick: (asked) => {
+                                        setMenu(undefined);
+                                        setAsking({ name: item.name, asked });
+                                    }, onClose: () => setMenu(undefined), words: words }))
+                                : null] }, item.name))) }))] }));
+}
+/**
+ * A row's menu, over the dialog and the page in the browser's top layer, under its button or above it when there is no room: analyse again and delete the
+ * analysis, for a game reviewed; delete the game, apart and in red. Scrolling closes it, which would leave its button.
+ */
+function RowMenu({ anchor, reviewed, onPick, onClose, words }) {
+    const menu = useRef(null);
+    useLayoutEffect(() => {
+        const element = menu.current;
+        element.showPopover();
+        placeUnder(element, anchor);
+        element.querySelector("button")?.focus();
+        window.addEventListener("scroll", onClose, true);
+        window.addEventListener("resize", onClose);
+        return () => {
+            window.removeEventListener("scroll", onClose, true);
+            window.removeEventListener("resize", onClose);
+        };
+    }, []);
+    return (_jsxs("div", { ref: menu, class: "row-menu", popover: "manual", children: [reviewed
+                ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => onPick("redo"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M19 12A7 7 0 1 1 16.5 6.6M17 3V7H13" }) }), _jsxs("span", { children: [words.redo, _jsx("small", { children: words.redoNote })] })] }), _jsxs("button", { type: "button", onClick: () => onPick("unreview"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 19H19M8 15L4.5 11.5L12 4L18 10L11 17H8ZM8.5 7.5L14.5 13.5" }) }), _jsxs("span", { children: [words.unreview, _jsx("small", { children: words.unreviewNote })] })] }), _jsx("hr", {})] }))
+                : null, _jsxs("button", { class: "danger", type: "button", onClick: () => onPick("remove"), children: [_jsx(TrashIcon, {}), _jsx("span", { children: words.remove })] })] }));
+}
+/** The question a row asks in place of the row: deleting in red, analysing again in the accent. */
+function Question({ asked, game, when, by, busy, onYes, onNo, words }) {
+    const { question, note, yes } = asked === "redo" ? words.askRedo(game, by) : asked === "unreview" ? words.askUnreview(game) : words.askRemove(game, when);
+    // The safe answer takes the focus, as the menu's item had it.
+    const cancel = useRef(null);
+    useEffect(() => cancel.current?.focus(), []);
+    return (_jsxs("li", { class: `ask ${asked === "redo" ? "redo" : "danger"}`, role: "alertdialog", "aria-label": question, children: [_jsxs("p", { children: [_jsx("b", { children: question }), _jsx("small", { children: note })] }), _jsxs("span", { class: "buttons", children: [_jsx("button", { ref: cancel, type: "button", disabled: busy, onClick: onNo, children: words.cancel }), _jsxs("button", { class: "yes", type: "button", disabled: busy, onClick: onYes, children: [asked === "remove" ? _jsx(TrashIcon, {}) : null, yes] })] })] }));
+}
+function TrashIcon() {
+    return (_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M4 7H20M9 7V4.5H15V7M6.5 7L7.5 20H16.5L17.5 7M10.5 11V16M13.5 11V16" }) }));
+}
+// The gap between the menu and its button, and the least margin it keeps from the window's edges.
+const menuGap = 4;
+const edge = 8;
+/** Puts a menu under its button, its right edges aligned, or above the button when it would go past the window's bottom. */
+function placeUnder(menu, anchor) {
+    const button = anchor.getBoundingClientRect();
+    const box = menu.getBoundingClientRect();
+    const below = button.bottom + menuGap + box.height <= window.innerHeight - edge;
+    menu.style.top = `${below ? button.bottom + menuGap : Math.max(edge, button.top - menuGap - box.height)}px`;
+    menu.style.left = `${Math.max(edge, button.right - box.width)}px`;
+}
+/** Who played a game listed, as its analysis names them, «Stefano – Opus 5.5 · xhigh», and the player's side when they played one. */
+function namedSides(item, you, accounts, ai, text) {
+    const model = item.aiModel === undefined ? ai : signature(item.aiModel.model, item.aiModel.effort);
+    const sides = studiedSides(tagsOf(item), you, model, text.sides, accounts);
+    const side = playerIn(sides);
+    return { sides: `${sides.white.name} – ${sides.black.name}`, ...(side === undefined ? {} : { you: side }) };
+}
+/** What the search looks through in a row: who played, the models, the date, the opening and its variation, how it went and whether it is reviewed. */
+function searchText(item, sides, outcome, text) {
+    const words = text.study;
+    const state = item.reviewed ? words.reviewed : words.unreviewed;
+    const went = outcome === undefined ? undefined : words.outcome[outcome];
+    return [sides, item.aiModel?.model, by(item), item.annotator?.model, dayOf(item.date, text.language), item.opening, scoreOf(item.result), went, state].join(" ");
+}
+/** How a game went for the player, as chess.com marks it: a green square with a plus, a red one with a minus, a grey one with an equals sign. */
+function OutcomeBadge({ outcome, words }) {
+    return (_jsxs("svg", { class: `outcome ${outcome}`, viewBox: "0 0 16 16", role: "img", "aria-label": words.outcome[outcome], children: [_jsx("title", { children: words.outcome[outcome] }), _jsx("rect", { width: "16", height: "16", rx: "4" }), _jsx("path", { d: outcomeSigns[outcome] })] }));
+}
+/** A game the AI reviewed: its speech bubble, and the model that wrote the review when the tags say it. */
+function Reviewed({ by, words }) {
+    return (_jsxs("span", { class: "state reviewed", title: by === undefined ? words.reviewed : `${words.reviewed}: ${by}`, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", role: "img", "aria-label": words.reviewed, children: _jsx("path", { d: "M5 5H19V15.5H11L7 19.5V15.5H5Z" }) }), by === undefined ? null : _jsx("span", { children: by })] }));
+}
+const outcomeSigns = { won: "M5 8h6M8 5v6", lost: "M5 8h6", drawn: "M5 6.5h6M5 9.5h6" };
+/** The tags of a game listed that name its sides. */
+function tagsOf(item) {
+    return { White: item.white, Black: item.black, ...(item.site === undefined ? {} : { Site: item.site }) };
+}
+/** Who reviewed a game, «Opus 5.5 · high», when its tags say it (D-81). */
+function by(item) {
+    return item.annotator === undefined ? undefined : signature(item.annotator.model, item.annotator.effort);
+}
+/** A result as the row shows it: 1–0, 0–1, ½–½ or *. */
+function scoreOf(result) {
+    return result === "1/2-1/2" ? "½–½" : result.replace("-", "–");
+}
+/** How a game went for the player: won, lost or drawn; nothing for a game without a result. */
+function outcomeOf(result, you) {
+    if (result === "1/2-1/2") {
+        return "drawn";
+    }
+    return result === "1-0" || result === "0-1" ? (result === "1-0") === (you === "white") ? "won" : "lost" : undefined;
+}
+/** A PGN date, 2026.11.04, as the player reads it: «4 nov», with the year when it is not this one. */
+function dayOf(date, language) {
+    const [, year, month, day] = /^(\d{4})\.(\d{2})\.(\d{2})$/.exec(date ?? "") ?? [];
+    if (year === undefined || month === undefined || day === undefined) {
+        return date;
+    }
+    const when = new Date(Number(year), Number(month) - 1, Number(day));
+    return when.toLocaleDateString(language, { day: "numeric", month: "short", ...(when.getFullYear() === new Date().getFullYear() ? {} : { year: "numeric" }) });
+}
+/** A deletion asked of the server: undefined once done, else why it refused. */
+async function deletion(route, game) {
+    try {
+        const response = await fetch(route, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ game }) });
+        return response.ok ? undefined : (await response.json()).error ?? response.statusText;
+    }
+    catch (error) {
+        return error.message;
+    }
+}
+/** Closes a menu, or a row's question, at a click outside it or at Escape, which would otherwise close the whole dialog. */
+function useClosing(open, close) {
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const outside = (event) => {
+            if (!event.target.closest(".row-menu, .row-actions, .ask")) {
+                close();
+            }
+        };
+        const escape = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                close();
+            }
+        };
+        document.addEventListener("pointerdown", outside);
+        document.addEventListener("keydown", escape, true);
+        return () => {
+            document.removeEventListener("pointerdown", outside);
+            document.removeEventListener("keydown", escape, true);
+        };
+    }, [open]);
+}
+/** The analyses of the player's folder, read once the dialog opens and again on demand; none while they come, or when the server cannot give them. */
+function useAnalyses() {
+    const [analyses, setAnalyses] = useState([]);
+    const [reads, setReads] = useState(0);
+    useEffect(() => {
+        void fetch("/api/analyses")
+            .then(async (response) => response.ok ? await response.json() : [])
+            .catch(() => [])
+            .then(setAnalyses);
+    }, [reads]);
+    return [analyses, () => setReads((count) => count + 1)];
+}

package/dist/page/{dialog.js → dialogs/dialog.js}

@@ -22,5 +22,5 @@ export function Dialog({ open, title, onBack, onClose, text, children }) {
             onClose();
         }
     };
-    return (_jsxs("dialog", { ref: dialog, class: "settings profiles", "aria-label": title, onClose: onClose, onClick: closeOutside, children: [_jsxs("header", { children: [onBack === undefined ? null : (_jsx("button", { class: "theme", type: "button", title: text.profile.back, "aria-label": text.profile.back, onClick: onBack, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M15 6L9 12L15 18" }) }) })), _jsx("h2", { children: title }), _jsx("button", { class: "theme", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), open ? children : null] }));
+    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": title, onClose: onClose, onClick: closeOutside, children: [_jsxs("header", { children: [onBack === undefined ? null : (_jsx("button", { class: "icon-button", type: "button", title: text.profile.back, "aria-label": text.profile.back, onClick: onBack, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M15 6L9 12L15 18" }) }) })), _jsx("h2", { children: title }), _jsx("button", { class: "icon-button", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), open ? children : null] }));
 }