chesspal 0.0.1 → 0.2.0

package/dist/page/talk/talk.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Torretta } from "../avatars/torretta.js";
+import { BadgeIcon, NoteIcon } from "../game/badges.js";
+import { Figurines } from "../game/move-list.js";
+import { talkLimits } from "../game/plies.js";
+import { signature } from "../players/model-name.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. */
+export function AiWords({ words, newestFirst, voice }) {
+    const list = useRef(null);
+    useOnlyWhole(list, words, newestFirst);
+    useSpokenNews(words, voice);
+    return (_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 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, reviewing, 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, words: text.drawn })] })), summary === undefined ? null : _jsx(GameReview, { by: name, summary: summary, text: text }), closing === undefined ? null : (_jsx("p", { class: "say closing", children: _jsx(Marked, { text: closing }) })), reviewing === true
+                ? (_jsxs("p", { class: "say reviewing", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(name)] }))
+                : null, _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 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: the board lights that square up. */
+export const PointSquare = createContext(() => undefined);
+// **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;
+/**
+ * What the colours drawn with a note or the coach's hint mean, the ones it uses, in the words of who drew them: the legend, for the player (D-69, Zoe).
+ */
+export function Legend({ review, words }) {
+    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" }), words[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: 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 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: _jsx(Takes, { move: part }) }, index))
+            : part) }));
+}
+/** A move with its capture's x light, as the move list writes it: the piece and the squares stand out (Stefano, for readers with ADHD). */
+function Takes({ move }) {
+    return _jsx(_Fragment, { children: move.split("x").map((part, index) => index === 0 ? part : [_jsx("span", { class: "takes", children: "x" }, 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];
+}
+/** 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))) }))] }));
+}
+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] }));
+}

package/dist/page/talk/voice.js

@@ -0,0 +1,38 @@
+// The AI's words read aloud (Stefano's idea, IDEE.md): the browser's own voices, a local one first, so the words stay on the computer where it can.
+/** Reads the words aloud in the language given, cutting short what was being read. */
+export function speak(words, language) {
+    if (typeof speechSynthesis === "undefined") {
+        return;
+    }
+    const said = words.replace(/\*\*/g, "").trim();
+    speechSynthesis.cancel();
+    clearTimeout(pending);
+    if (said === "") {
+        return;
+    }
+    // Chrome drops words spoken right after a cancel, and lists its voices late the first time: the words wait a moment.
+    pending = setTimeout(() => {
+        const utterance = new SpeechSynthesisUtterance(said);
+        const voice = voiceFor(language);
+        utterance.lang = voice?.lang ?? language;
+        if (voice !== undefined) {
+            utterance.voice = voice;
+        }
+        speechSynthesis.resume();
+        speechSynthesis.speak(utterance);
+    }, 150);
+}
+/** Stops reading. */
+export function hush() {
+    if (typeof speechSynthesis !== "undefined") {
+        clearTimeout(pending);
+        speechSynthesis.cancel();
+    }
+}
+let pending;
+/** A voice for the language: a local one first, the browser's default among them first. */
+function voiceFor(language) {
+    const voices = speechSynthesis.getVoices().filter((voice) => voice.lang.toLowerCase().startsWith(language.toLowerCase()));
+    const local = voices.filter((voice) => voice.localService);
+    return local.find((voice) => voice.default) ?? local[0] ?? voices[0];
+}