chesspal 0.0.1 → 0.1.0

package/dist/page/talk.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+// The talk on the board page (D-51, D-53): the AI's words in bubbles that point at the Torretta, the player's above the box they write in.
+import { createContext } from "preact";
+import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { BadgeIcon, NoteIcon } from "./badges.js";
+import { signature } from "./model-name.js";
+import { Figurines } from "./move-list.js";
+import { talkLimits } from "./plies.js";
+import { Torretta } from "./torretta.js";
+import { hush, speak } from "./voice.js";
+/**
+ * The AI's words of the game, a bubble each, the newest by the Torretta: below it, or above it on a board turned round; the first points at it. With the helps
+ * on, its judgment of the player's last move comes newest, in a line that opens on its note (D-78).
+ */
+export function AiWords({ words, newestFirst, voice, judged, text }) {
+    const list = useRef(null);
+    useOnlyWhole(list, words, newestFirst);
+    useSpokenNews(words, voice);
+    const says = (_jsx("ol", { ref: list, class: "says", "aria-live": "polite", children: inOrder(words.map((word, index) => (_jsx("li", { class: "say", style: aged(words.length - 1 - index), children: _jsx(Marked, { text: word }) }, index))), newestFirst) }));
+    // The judgment sits by the Torretta, out of the bubbles' order: it never pushes the AI's words away.
+    if (judged === undefined) {
+        return says;
+    }
+    const line = _jsx(Judged, { ply: judged, text: text });
+    return newestFirst ? _jsxs(_Fragment, { children: [line, says] }) : _jsxs(_Fragment, { children: [says, line] });
+}
+/**
+ * The AI's word on the move shown of a game in analysis (D-69), in a bubble that points down at the Torretta beside the AI's name: the move, its badge by name,
+ * and its note when it wrote one; read out as the player steps through the game. The Torretta and the name stay when the move has no word.
+ */
+export function AiNote({ ply, opening, closing, summary, name, by, mood, voice, text }) {
+    // On a move of the book without the AI's note, the AI reports what the book says: the opening in the title, the variation under it.
+    const book = ply?.review?.note === undefined ? opening : undefined;
+    const shown = ply?.review ?? (book === undefined ? undefined : { badge: "book" });
+    const title = [shown?.badge === undefined || (book !== undefined && shown.badge === "book") ? undefined : text.badges[shown.badge], book?.family].filter((part) => part !== undefined).join(" · ");
+    const note = shown?.note ?? book?.variation;
+    const spoken = [ply === undefined || shown === undefined ? undefined : title, ply === undefined ? undefined : note, summary?.replace(/\s*•\s+/g, ". "), closing].filter((part) => part !== undefined && part !== "").join(". ");
+    useEffect(() => {
+        if (voice !== undefined) {
+            speak(spoken, voice);
+        }
+        return hush;
+    }, [spoken, voice]);
+    // The Torretta stays in sight through the whole analysis, under its bubbles, which show only where it wrote something.
+    return (_jsxs("div", { class: "ai-note", "aria-live": "polite", children: [ply === undefined || shown === undefined ? null : (_jsxs("p", { class: `say move-note ${shown.badge ?? ""}`, children: [_jsxs("span", { class: "head", children: [shown.badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: shown.badge }), _jsxs("b", { children: [_jsxs("span", { class: "visually-hidden", children: [ply.number, ply.side === "white" ? "." : "...", ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }), " ", title] }), note === undefined ? null : (_jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })), shown.arrows === undefined && shown.squares === undefined ? null : _jsx(Legend, { review: shown, text: text })] })), summary === undefined ? null : _jsx(GameReview, { by: name, summary: summary, text: text }), closing === undefined ? null : (_jsx("p", { class: "say closing", children: _jsx(Marked, { text: closing }) })), _jsxs("p", { class: "who", children: [_jsx(Torretta, { size: 36, mood: mood }), _jsxs("span", { class: "signed", children: [name, by === undefined ? null : _jsx("small", { children: signature(by.annotator, by.effort) })] })] })] }));
+}
+/** The AI's judgment of the player's move, with the helps on: its badge and the move in a line, which opens on its note (D-78). */
+function Judged({ ply, text }) {
+    const { badge, note } = ply.review ?? {};
+    const head = (_jsxs(_Fragment, { children: [badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: badge }), _jsxs("b", { children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] }), " ", badge === undefined ? null : text.badges[badge]] }));
+    return (_jsx("div", { class: `say move-note judged ${badge ?? ""}`, children: note === undefined ? _jsx("span", { class: "head", children: head }) : (_jsxs("details", { children: [_jsx("summary", { class: "head", children: head }), _jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })] })) }));
+}
+/** The squares and moves in the AI's words, such as e3, Cxe4, 7.Nd4 or O-O: in bold, as the player looks for them on the board. */
+export function Marked({ text }) {
+    // The words the AI wrote between two asterisks first, in bold as it chose; the squares and moves in the rest, and in them, in the accent.
+    return (_jsx(_Fragment, { children: text.split(boldWords).map((part, index) => index % 2 === 1
+            ? (_jsx("b", { children: _jsx(OnBoard, { text: part }) }, index))
+            : _jsx(OnBoard, { text: part }, index)) }));
+}
+/** Where the pointer is among the squares and moves in the AI's words (T-111): the board lights that square up. */
+export const PointSquare = createContext(() => undefined);
+function OnBoard({ text }) {
+    const point = useContext(PointSquare);
+    return (_jsx(_Fragment, { children: text.split(boardWords).map((part, index) => index % 2 === 1
+            ? _jsx("b", { class: "on-board", onPointerEnter: () => point(squareIn(part)), onPointerLeave: (event) => event.pointerType === "mouse" && point(undefined), children: part }, index)
+            : part) }));
+}
+/** The square a word names: a square, or where a move goes, the last square in it; none for a castling. */
+function squareIn(word) {
+    return /[a-h][1-8](?!.*[a-h][1-8])/.exec(word)?.[0];
+}
+// **a few words** the AI put in bold, as Markdown writes them.
+const boldWords = /\*\*(.+?)\*\*/;
+// A square or a move in SAN or with the pieces' figurines (D-86, D-87), with its number if it has one; the capture group keeps it in split's parts.
+const boardWords = /(?<![\p{L}\d])((?:\d+\.(?:\.\.)?\s?)?(?:O-O(?:-O)?|[KQRBN♔-♟]?[a-h]?[1-8]?x?[a-h][1-8](?:=[QRBN♔-♟])?)[+#]?[!?]{0,2})(?![\p{L}\d])/u;
+/** The AI's word on the whole game (D-69), in the Torretta's bubble at the start of the game: a paragraph, and its points as a list. */
+function GameReview({ by, summary, text }) {
+    const [lead = "", ...points] = summary.split(/\s*•\s+/);
+    return (_jsxs("section", { class: "say review", "aria-label": text.reviewBy(by), children: [_jsxs("p", { class: "head", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 4V20M8 20H16M5 7H19M5 7L2.5 13A2.5 2 0 0 0 7.5 13ZM19 7L16.5 13A2.5 2 0 0 0 21.5 13Z" }) }), text.reviewBy(by)] }), lead === "" ? null : (_jsx("p", { children: _jsx(Marked, { text: lead }) })), points.length === 0 ? null : (_jsx("ul", { children: points.map((point, index) => (_jsx("li", { children: _jsx(Marked, { text: point }) }, index))) }))] }));
+}
+/** What the colours drawn with a note mean, the ones it uses: the AI's legend, for the player (D-69). */
+function Legend({ review, text }) {
+    const used = [...new Set([...(review.arrows ?? []), ...(review.squares ?? [])].map((drawn) => drawn.colour))];
+    return (_jsx("span", { class: "legend", children: used.map((colour) => (_jsxs("span", { class: colour, children: [_jsx("i", { "aria-hidden": "true" }), text.drawn[colour]] }, colour))) }));
+}
+/**
+ * The player's words of the game, the newest by the box they write in with how far it got, and the box: Enter or the button sends the words alone, the next
+ * move takes them with it. 200 characters from one move of the AI's to the next: once they are written, the box goes until its move (D-54).
+ */
+export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, canMove, name, problem, text }) {
+    const list = useRef(null);
+    useOnlyWhole(list, lines.map((line) => line.text));
+    const left = talkLimits.line - spent;
+    const blank = draft.trim() === "";
+    const submit = () => {
+        if (!blank) {
+            onSend();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { ref: list, class: "sent", "aria-live": "polite", children: inOrder(lines.map((line, index) => (_jsxs("li", { style: aged(lines.length - 1 - index), children: [_jsx("p", { class: "said", children: line.text }), index === lines.length - 1 ? _jsx(Status, { heard: line.heard, name: name, text: text }) : null] }, index))), newestFirst) }), left <= 0 ? null : (_jsxs("form", { class: "compose", onSubmit: (event) => {
+                    event.preventDefault();
+                    submit();
+                }, children: [_jsx("p", { class: "limit", role: "status", children: problem ?? "" }), _jsx("textarea", { rows: 2, maxLength: left, placeholder: text.writeTo(name), "aria-label": text.writeTo(name), value: draft, onInput: (event) => onDraft(event.currentTarget.value), onKeyDown: (event) => {
+                            if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+                                event.preventDefault();
+                                submit();
+                            }
+                        } }), _jsxs("div", { class: "foot", children: [spent + draft.length >= talkLimits.line - 50
+                                ? _jsxs("span", { class: "count", children: [spent + draft.length, "/", talkLimits.line] })
+                                : _jsx("span", { class: "hint", children: !blank && canMove ? text.withMove : "" }), _jsxs("button", { class: "send", type: "submit", disabled: blank, children: [text.send, _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H18M13 7L18 12L13 17" }) })] })] })] }))] }));
+}
+/**
+ * The talk narrowed to a card beside the board (T-84): the Torretta above, the player below, each with their name and side written down the card, a ring on
+ * whoever moves and a dot on the Torretta when the AI spoke meanwhile.
+ */
+export function TalkFaces({ name, aiPicture, you, picture, ai, player, aiMoves, playerMoves, unread, text }) {
+    return (_jsxs("div", { class: "faces", children: [_jsx(RailPlayer, { place: "ai", picture: aiPicture ?? _jsx(Torretta, { size: 40 }), name: name, ...(ai === undefined ? {} : { side: text.sides[ai] }), moves: aiMoves, unread: unread }), _jsx(RailPlayer, { place: "you", picture: picture, name: you, ...(player === undefined ? {} : { side: text.sides[player] }), moves: playerMoves })] }));
+}
+function RailPlayer({ place, picture, name, side, moves, unread = false }) {
+    return (_jsxs("div", { class: `rail-player ${place}${moves ? " moving" : ""}`, children: [_jsx("span", { class: `face${unread ? " unread" : ""}`, children: picture }), _jsxs("span", { class: "rail-name", children: [name, " ", side === undefined ? null : _jsxs("span", { class: "note", children: ["\u00B7 ", side] })] })] }));
+}
+/** Reads aloud each word the AI adds while the page is open, not those already there. */
+function useSpokenNews(words, voice) {
+    const heard = useRef(words.length);
+    useEffect(() => {
+        if (voice !== undefined && words.length > heard.current) {
+            speak(words.slice(heard.current).join(" "), voice);
+        }
+        heard.current = words.length;
+    }, [words.length, voice]);
+}
+/** A list's items, the newest first when it asks. */
+function inOrder(items, newestFirst) {
+    return newestFirst ? items.reverse() : items;
+}
+/** A word fades with age: the newest whole, the older ones far back, so they never pass for the newest (Stefano), each fainter down to a floor. */
+function aged(age) {
+    return { opacity: age === 0 ? 1 : Math.max(0.2, 0.4 - (age - 1) * 0.1) };
+}
+/**
+ * A list that never scrolls: a bubble that does not fit whole in it is hidden, the oldest first since the newest sit by the card, and shows again when the
+ * window grows.
+ */
+function useOnlyWhole(list, lines, newestFirst = false) {
+    useLayoutEffect(() => {
+        const element = list.current;
+        if (element === null) {
+            return;
+        }
+        const fit = () => {
+            const box = element.getBoundingClientRect();
+            const newest = newestFirst ? element.firstElementChild : element.lastElementChild;
+            for (const item of element.children) {
+                const place = item.getBoundingClientRect();
+                const style = item.style;
+                // The newest never hides: one longer than the column, as a note with the helps on (D-78), scrolls in itself.
+                style.maxHeight = item === newest ? box.height + "px" : "";
+                style.overflowY = item === newest && item.scrollHeight > box.height ? "auto" : "";
+                style.visibility = item === newest || (place.top >= box.top - 1 && place.bottom <= box.bottom + 1) ? "" : "hidden";
+            }
+        };
+        fit();
+        const observer = new ResizeObserver(fit);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [list, lines.length, lines.at(-1)]);
+}
+/** Under the player's last line: one check once written, two once the AI has read it. */
+function Status({ heard, name, text }) {
+    const read = heard === "read" || heard === "answered";
+    return (_jsxs("span", { class: read ? "status read" : "status", children: [_jsx("svg", { class: "icon", viewBox: "0 0 21 24", "aria-hidden": "true", children: read ? _jsx("path", { d: "M2 12.5L6 16.5L13.5 8M10 15.5L11 16.5L18.5 8" }) : _jsx("path", { d: "M3.5 12.5L7.5 16.5L15 8" }) }), read ? text.readBy(name) : text.sent] }));
+}