domma-cms 1.8.46 → 1.9.1

package/plugins/crossword/public/crossword.js

@@ -1,519 +0,0 @@
-/**
- * Crossword - the player, in the browser.
- *
- * Mounts on every `[data-crossword]` placeholder the [crossword] shortcode
- * wrote, and every `[data-crossword-board]` the leaderboard one wrote. The
- * server holds the answers: this gets the grid's shape and the clues when a
- * play starts, sends the letters to be checked or judged, and shows the clock
- * the server keeps. Letters typed so far are remembered per play, so a reload
- * keeps them (the clock never stopped).
- *
- * The screens (start, playing, result) are domma-reactive bindings. The grid
- * itself is built once per play as plain inputs, because it is all focus and
- * keystrokes: typing moves along the word, arrows move, clicking a square
- * twice turns the direction, Tab goes to the next clue.
- *
- * `mount(el, {test})` is the same player for an admin testing the crossword
- * from its Tool: `test.info()` and `test.start()` go through the admin's own
- * API, the play is a test one (never on a board), and nothing is remembered.
- */
-
-import {Stopwatch, Countdown, addStyles, celebrate, configOf, fmtDuration, memory, mountBoards, mountLeaderboard, ordinal, request, uid} from '/plugins/_lib/public/games/games.js';
-
-const M = window.M;
-const API = '/api/plugins/crossword/public';
-const NAME_KEY = 'games.name';
-const playKey = (slug) => `crossword.play.${slug}`;
-const cellsKey = (playId) => `crossword.cells.${playId}`;
-
-const TEMPLATE = `
-<p class="cw-live" role="status" aria-live="polite" data-bind-text="live.value"></p>
-
-<section class="gm-card" hidden data-bind-hidden="screen.value !== 'loading'"><p class="gm-muted">Loading the crossword…</p></section>
-<section class="gm-card" hidden data-bind-hidden="screen.value !== 'error'"><p class="gm-error" data-bind-text="problem.value"></p></section>
-
-<section class="gm-card" hidden data-bind-hidden="screen.value !== 'intro'">
-  <h2 class="gm-title" data-bind-text="info.value.title"></h2>
-  <p class="gm-intro" hidden data-bind-hidden="!info.value.intro" data-bind-text="info.value.intro"></p>
-  <ul class="gm-facts" data-each="facts.value key=k"><li data-bind-text="k"></li></ul>
-  <p class="gm-note" hidden data-bind-hidden="info.value.open" data-bind-text="info.value.reason"></p>
-  <form class="gm-start" hidden data-bind-hidden="!info.value.open" data-on-submit="start" novalidate>
-    <p class="gm-note gm-test-note" hidden data-bind-hidden="!testing">A test go: it plays exactly as your players see it, and it is not saved to the leaderboard.</p>
-    <div class="gm-field" hidden data-bind-hidden="testing">
-      <label for="%U%-name">Your name</label>
-      <input id="%U%-name" class="gm-input" maxlength="24" autocomplete="nickname" data-model="name.value" aria-describedby="%U%-err">
-    </div>
-    <div class="gm-hp" aria-hidden="true"><label>Website <input tabindex="-1" autocomplete="off" data-model="website.value"></label></div>
-    <button type="submit" class="btn btn-primary" data-bind-disabled="busy.value" data-bind-text="testing ? 'Start the test' : 'Start the clock'">Start the clock</button>
-  </form>
-  <p class="gm-error" id="%U%-err" hidden data-bind-hidden="!problem.value" data-bind-text="problem.value"></p>
-</section>
-
-<section class="gm-card cw-play" hidden data-bind-hidden="screen.value !== 'play' && screen.value !== 'result'">
-  <div class="gm-bar" hidden data-bind-hidden="screen.value !== 'play'">
-    <strong data-bind-text="info.value.title"></strong>
-    <span class="cw-clocks">
-      <span class="gm-muted" hidden data-bind-hidden="!penaltyText.value" data-bind-text="penaltyText.value"></span>
-      <span class="gm-clock" role="timer" aria-label="Time so far" data-bind-text="clock.shown.value"></span>
-      <span class="gm-clock" hidden data-bind-hidden="!leftShown.value" data-bind-class="leftLow.value && 'is-low'"
-        data-bind-aria-label="'Time left ' + leftText.value" data-bind-text="leftText.value"></span>
-    </span>
-  </div>
-  <div class="cw-result" hidden data-bind-hidden="screen.value !== 'result'">
-    <h2 class="gm-title" id="%U%-res" tabindex="-1" data-bind-text="res.value.title"></h2>
-    <p class="gm-result-score" hidden data-bind-hidden="!res.value.solved" data-bind-text="res.value.timeText"></p>
-    <p class="gm-muted" data-bind-text="res.value.detail"></p>
-    <p class="gm-result-place" hidden data-bind-hidden="!res.value.placeText" data-bind-text="res.value.placeText"></p>
-    <div class="gm-actions"><button type="button" class="btn btn-primary" data-on-click="again" data-bind-text="testing ? 'Test again' : 'Play again'">Play again</button></div>
-  </div>
-  <p class="cw-current" aria-hidden="true" hidden data-bind-hidden="screen.value !== 'play' || !currentClue.value" data-bind-text="currentClue.value"></p>
-  <div class="cw-layout">
-    <div class="cw-grid-wrap"><div class="cw-grid" role="grid" aria-label="Crossword grid"></div></div>
-    <div class="cw-clues">
-      <div><h3>Across</h3><ol class="cw-list" data-dir="across"></ol></div>
-      <div><h3>Down</h3><ol class="cw-list" data-dir="down"></ol></div>
-    </div>
-  </div>
-  <p class="gm-note cw-message" hidden data-bind-hidden="!message.value" data-bind-class="messageTone.value" data-bind-text="message.value"></p>
-  <div class="gm-actions" hidden data-bind-hidden="screen.value !== 'play'">
-    <button type="button" class="btn btn-primary" data-bind-disabled="busy.value" data-on-click="submit">I've finished</button>
-    <button type="button" class="btn btn-outline" hidden data-bind-hidden="!info.value.checks" data-bind-disabled="busy.value" data-on-click="check"
-      data-bind-text="checkLabel.value"></button>
-    <button type="button" class="btn btn-ghost" data-on-click="clearWord">Clear this word</button>
-  </div>
-</section>
-
-<div class="cw-board-slot"></div>`;
-
-function facts(info) {
-    const out = [`${info.answers} answers`, `${info.width} × ${info.height} grid`];
-    if (info.timeLimit) out.push(`${fmtDuration(info.timeLimit * 1000)} to solve it`);
-    if (info.checks) out.push(info.checkPenalty ? `Checking costs ${info.checkPenalty} seconds` : 'You can check your letters');
-    if (info.attemptsPerName === 1) out.push('One go each');
-    if (info.leaderboard) out.push('Fastest solve wins');
-    return out.map(k => ({k}));
-}
-
-/** The grid as a player works it: letters, the cursor, the direction. Plain DOM. */
-class Board {
-    constructor(el, clueLists, puzzle, {onChange, onClue}) {
-        this.el = el;
-        this.lists = clueLists;
-        this.p = puzzle;
-        this.onChange = onChange;
-        this.onClue = onClue;
-        this.letters = puzzle.shape.map(row => [...row].map(() => ''));
-        this.inputs = [];
-        this.dir = 'across';
-        this.pos = null;
-        this.entries = [...puzzle.across, ...puzzle.down];
-        this.build();
-    }
-
-    open(r, c) { return r >= 0 && c >= 0 && r < this.p.height && c < this.p.width && this.p.shape[r][c] === '.'; }
-
-    /** The entry through (r, c) in a direction, or null. */
-    entryAt(r, c, dir) {
-        return this.entries.find(e => e.dir === dir && (dir === 'across'
-            ? e.row === r && c >= e.col && c < e.col + e.length
-            : e.col === c && r >= e.row && r < e.row + e.length)) || null;
-    }
-
-    cellsOf(e) {
-        return Array.from({length: e.length}, (_, i) => (e.dir === 'across' ? [e.row, e.col + i] : [e.row + i, e.col]));
-    }
-
-    build() {
-        const {width, height, shape} = this.p;
-        const numbers = new Map(this.entries.map(e => [`${e.row},${e.col}`, e.number]));
-        this.el.innerHTML = '';
-        this.el.style.setProperty('--cw-cols', width);
-        for (let r = 0; r < height; r++) {
-            const rowEl = document.createElement('div');
-            rowEl.className = 'cw-row';
-            rowEl.setAttribute('role', 'row');
-            this.inputs[r] = [];
-            for (let c = 0; c < width; c++) {
-                const cell = document.createElement('div');
-                cell.className = shape[r][c] === '.' ? 'cw-cell' : 'cw-cell is-block';
-                cell.setAttribute('role', 'gridcell');
-                if (shape[r][c] === '.') {
-                    if (numbers.has(`${r},${c}`)) {
-                        const n = document.createElement('span');
-                        n.className = 'cw-num';
-                        n.textContent = numbers.get(`${r},${c}`);
-                        cell.append(n);
-                    }
-                    const input = document.createElement('input');
-                    input.className = 'cw-input';
-                    input.maxLength = 2;
-                    input.autocomplete = 'off';
-                    input.setAttribute('autocapitalize', 'characters');
-                    input.spellcheck = false;
-                    input.setAttribute('aria-label', this.labelFor(r, c));
-                    input.addEventListener('focus', () => this.focusCell(r, c, {fromFocus: true}));
-                    input.addEventListener('mousedown', (e) => {
-                        if (this.pos && this.pos[0] === r && this.pos[1] === c) { e.preventDefault(); this.turn(); }
-                    });
-                    input.addEventListener('keydown', (e) => this.key(e, r, c));
-                    input.addEventListener('input', (e) => this.typed(e, r, c));
-                    cell.append(input);
-                    this.inputs[r][c] = input;
-                }
-                rowEl.append(cell);
-            }
-            this.el.append(rowEl);
-        }
-        for (const list of this.lists) {
-            list.innerHTML = '';
-            for (const e of this.entries.filter(x => x.dir === list.dataset.dir)) {
-                const li = document.createElement('li');
-                li.dataset.key = `${e.dir}${e.number}`;
-                li.value = e.number;
-                const b = document.createElement('button');
-                b.type = 'button';
-                b.className = 'cw-clue';
-                const num = document.createElement('strong');
-                num.textContent = `${e.number} `;
-                b.append(num, document.createTextNode(`${e.clue} (${e.enumeration})`));
-                b.addEventListener('click', () => { this.dir = e.dir; this.focusCell(e.row, e.col); });
-                li.append(b);
-                list.append(li);
-            }
-        }
-    }
-
-    labelFor(r, c) {
-        const parts = ['across', 'down'].map(d => this.entryAt(r, c, d)).filter(Boolean).map(e => `${e.number} ${e.dir}`);
-        return `Square in ${parts.join(' and ')}`;
-    }
-
-    focusCell(r, c, {fromFocus = false} = {}) {
-        if (!this.open(r, c)) return;
-        if (!this.entryAt(r, c, this.dir)) this.dir = this.dir === 'across' ? 'down' : 'across';
-        this.pos = [r, c];
-        if (!fromFocus) this.inputs[r][c].focus();
-        this.paint();
-    }
-
-    turn() {
-        const other = this.dir === 'across' ? 'down' : 'across';
-        if (this.pos && this.entryAt(...this.pos, other)) { this.dir = other; this.paint(); }
-    }
-
-    current() { return this.pos ? this.entryAt(...this.pos, this.dir) : null; }
-
-    paint() {
-        const e = this.current();
-        const inWord = new Set(e ? this.cellsOf(e).map(([r, c]) => `${r},${c}`) : []);
-        this.inputs.forEach((row, r) => row.forEach((input, c) => {
-            if (!input) return;
-            const cell = input.parentElement;
-            cell.classList.toggle('is-word', inWord.has(`${r},${c}`));
-            cell.classList.toggle('is-cursor', Boolean(this.pos) && this.pos[0] === r && this.pos[1] === c);
-        }));
-        for (const list of this.lists) {
-            for (const li of list.children) {
-                const on = e && li.dataset.key === `${e.dir}${e.number}`;
-                li.classList.toggle('is-on', Boolean(on));
-                if (on && typeof li.scrollIntoView === 'function' && list.scrollHeight > list.clientHeight) li.scrollIntoView({block: 'nearest'});
-            }
-        }
-        this.onClue(e ? `${e.number} ${e.dir}: ${e.clue} (${e.enumeration})` : '');
-    }
-
-    set(r, c, ch) {
-        this.letters[r][c] = ch;
-        this.inputs[r][c].value = ch;
-        this.inputs[r][c].parentElement.classList.remove('is-wrong');
-        this.onChange();
-    }
-
-    /** The next open square along the word (or the same one at its end). */
-    step(r, c, by) {
-        const [dr, dc] = this.dir === 'across' ? [0, by] : [by, 0];
-        return this.open(r + dr, c + dc) ? [r + dr, c + dc] : null;
-    }
-
-    typed(e, r, c) {
-        const ch = (e.target.value.toUpperCase().match(/[A-Z]/g) || []).pop() || '';
-        this.set(r, c, ch);
-        if (ch) { const next = this.step(r, c, 1); if (next) this.focusCell(...next); }
-    }
-
-    key(e, r, c) {
-        const moves = {ArrowUp: [-1, 0, 'down'], ArrowDown: [1, 0, 'down'], ArrowLeft: [0, -1, 'across'], ArrowRight: [0, 1, 'across']};
-        if (moves[e.key]) {
-            e.preventDefault();
-            const [dr, dc, dir] = moves[e.key];
-            if (this.dir !== dir && this.entryAt(r, c, dir)) { this.dir = dir; this.paint(); return; }
-            let [rr, cc] = [r + dr, c + dc];
-            while (rr >= 0 && cc >= 0 && rr < this.p.height && cc < this.p.width && !this.open(rr, cc)) { rr += dr; cc += dc; }
-            if (this.open(rr, cc)) this.focusCell(rr, cc);
-        } else if (e.key === 'Backspace') {
-            e.preventDefault();
-            if (this.letters[r][c]) this.set(r, c, '');
-            else { const prev = this.step(r, c, -1); if (prev) { this.focusCell(...prev); this.set(...prev, ''); } }
-        } else if (e.key === 'Delete') {
-            e.preventDefault();
-            this.set(r, c, '');
-        } else if (e.key === ' ') {
-            e.preventDefault();
-            this.turn();
-        } else if (e.key === 'Tab') {
-            const cur = this.current();
-            const i = this.entries.indexOf(cur);
-            const next = this.entries[(i + (e.shiftKey ? -1 : 1) + this.entries.length) % this.entries.length];
-            if (next) { e.preventDefault(); this.dir = next.dir; this.focusCell(next.row, next.col); }
-        } else if (/^[a-z]$/i.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
-            // Overtype: a letter replaces what is there, without waiting for the input event's quirks.
-            e.preventDefault();
-            this.set(r, c, e.key.toUpperCase());
-            const next = this.step(r, c, 1);
-            if (next) this.focusCell(...next);
-        }
-    }
-
-    clearCurrent() {
-        const e = this.current();
-        if (!e) return;
-        for (const [r, c] of this.cellsOf(e)) this.set(r, c, '');
-        this.focusCell(e.row, e.col);
-    }
-
-    /** Rows of letters, a space for an empty square - what the server reads. */
-    rows() {
-        return this.letters.map((row, r) => row.map((ch, c) => (this.open(r, c) ? (ch || ' ') : ' ')).join(''));
-    }
-
-    load(rows) {
-        if (!Array.isArray(rows) || rows.length !== this.p.height) return;
-        rows.forEach((row, r) => [...String(row)].forEach((ch, c) => {
-            if (this.open(r, c) && /[A-Z]/.test(ch)) { this.letters[r][c] = ch; this.inputs[r][c].value = ch; }
-        }));
-    }
-
-    markWrong(list) {
-        for (const [r, c] of list) this.inputs[r]?.[c]?.parentElement.classList.add('is-wrong');
-    }
-
-    reveal(rows, {lock = true} = {}) {
-        rows.forEach((row, r) => [...row].forEach((ch, c) => {
-            const input = this.inputs[r]?.[c];
-            if (!input) return;
-            input.value = ch.trim();
-            if (lock) input.readOnly = true;
-            input.parentElement.classList.remove('is-wrong', 'is-word', 'is-cursor');
-        }));
-        this.pos = null;
-        for (const list of this.lists) for (const li of list.children) li.classList.remove('is-on');
-    }
-}
-
-/** The server's words: the public request's Error, or the admin's (its reply is on `err.body`). */
-const errText = (err) => err?.body?.error || err?.message || String(err);
-
-/**
- * @param {HTMLElement} el
- * @param {{test?: {info: () => Promise<object>, start: () => Promise<{playId: string, token: string, name: string, info: object}>}}} [opts]
- */
-export function mount(el, {test = null} = {}) {
-    const cfg = test ? {slug: 'test'} : configOf(el, 'data-crossword');
-    if (!cfg?.slug || !M) return;
-    addStyles(['/plugins/crossword/public/crossword.css?v=1.1.0']);
-    const U = uid('cw');
-    el.innerHTML = TEMPLATE.replaceAll('%U%', U);
-
-    const s = {
-        testing: Boolean(test),
-        screen: M.observable('loading'), live: M.observable(''), problem: M.observable(''), busy: M.observable(false),
-        info: M.observable({title: '', intro: '', open: false, reason: '', checks: false}), facts: M.observable([]),
-        name: M.observable(String(memory.get(NAME_KEY) || '')), website: M.observable(''),
-        clock: new Stopwatch(), leftText: M.observable(''), leftShown: M.observable(false), leftLow: M.observable(false),
-        penaltyText: M.observable(''), currentClue: M.observable(''), message: M.observable(''), messageTone: M.observable(''),
-        checkLabel: M.observable('Check my letters'), res: M.observable({})
-    };
-
-    let play = test ? null : memory.get(playKey(cfg.slug)) || null;
-    let board = null;
-    let grid = null;
-    let penaltyMs = 0;
-    const left = new Countdown(() => { if (s.screen.peek() === 'play') setTimeout(load, 3500); });
-    const stopLeft = M.effect(() => {
-        const ms = left.left.value;
-        s.leftText.value = `${fmtDuration(ms)} left`;
-        s.leftLow.value = ms > 0 && ms <= 60000;
-    });
-
-    const say = (t) => { s.live.value = ''; setTimeout(() => { s.live.value = t; }, 20); };
-    const tell = (text, tone = '') => { s.message.value = text; s.messageTone.value = tone ? `is-${tone}` : ''; say(text); };
-    const forget = () => { if (!test) memory.remove(playKey(cfg.slug)); play = null; };
-    const saveCells = () => { if (play && grid && !test) memory.set(cellsKey(play.playId), grid.rows()); };
-
-    function setClock(v) {
-        penaltyMs = v.penaltyMs || 0;
-        s.penaltyText.value = penaltyMs ? `+${Math.round(penaltyMs / 1000)}s` : '';
-        s.clock.start((v.elapsedMs || 0) + penaltyMs);
-        s.leftShown.value = v.totalLeftMs != null;
-        if (v.totalLeftMs != null) left.start(v.totalLeftMs); else left.stop();
-    }
-
-    async function loadInfo() {
-        const info = test ? await test.info() : await request(`${API}/crossword/${encodeURIComponent(cfg.slug)}`);
-        showInfo(info);
-    }
-
-    function showInfo(info) {
-        s.info.value = info;
-        s.facts.value = facts(info);
-        s.checkLabel.value = info.checkPenalty ? `Check my letters (+${info.checkPenalty}s)` : 'Check my letters';
-        if (info.leaderboard && !board && !test) {
-            board = mountLeaderboard(el.querySelector('.cw-board-slot'), {url: `${API}/crossword/${encodeURIComponent(cfg.slug)}/leaderboard`,
-                limit: info.leaderboardSize, showScore: false, title: 'Fastest solvers'});
-        }
-    }
-
-    async function load() {
-        if (!play) { s.screen.value = 'intro'; return; }
-        try {
-            const v = await request(`${API}/play/${encodeURIComponent(play.playId)}`, {token: play.token});
-            if (v.status !== 'playing') return showResult();
-            if (!grid) {
-                grid = new Board(el.querySelector('.cw-grid'), [...el.querySelectorAll('.cw-list')], v.puzzle, {
-                    onChange: () => { saveCells(); s.message.value = ''; },
-                    onClue: (t) => { s.currentClue.value = t; }
-                });
-                if (!test) grid.load(memory.get(cellsKey(play.playId)));
-            }
-            setClock(v);
-            s.busy.value = false;
-            s.screen.value = 'play';
-            const first = v.puzzle.across[0] || v.puzzle.down[0];
-            if (first && !grid.pos) setTimeout(() => { grid.dir = first.dir; grid.focusCell(first.row, first.col); }, 50);
-        } catch (err) {
-            if (err.code === 'gone' || err.status === 404) { forget(); s.screen.value = 'intro'; return; }
-            s.problem.value = err.message;
-            s.screen.value = 'error';
-        }
-    }
-
-    async function showResult() {
-        s.clock.stop();
-        left.stop();
-        try {
-            const r = await request(`${API}/play/${encodeURIComponent(play.playId)}/result`, {token: play.token});
-            const placeText = r.test
-                ? `A test go, so it is not on the leaderboard.${r.wouldPlace ? ` It would have come ${ordinal(r.wouldPlace)} of all time.` : ''}`
-                : r.place ? `You came ${ordinal(r.place)} of all time${r.placeToday && r.placeToday !== r.place ? `, ${ordinal(r.placeToday)} today` : ''}.` : '';
-            s.res.value = {
-                solved: r.solved,
-                title: r.solved ? `Solved, ${r.name}!` : `Time's up, ${r.name}.`,
-                timeText: fmtDuration(r.timeMs),
-                detail: r.solved
-                    ? (r.penaltyMs ? `Including ${Math.round(r.penaltyMs / 1000)} seconds of penalties${r.checks ? ` (${r.checks} check${r.checks === 1 ? '' : 's'})` : ''}.` : 'No penalties. Clean solve!')
-                    : 'The clock ran out before the grid was finished.',
-                placeText
-            };
-            s.message.value = '';
-            s.currentClue.value = '';
-            if (r.solution && grid) grid.reveal(r.solution);
-            else if (r.solution && !grid) { /* a finished play from an earlier visit: no grid to show */ }
-            s.screen.value = 'result';
-            say(`${s.res.peek().title} ${r.solved ? fmtDuration(r.timeMs) : ''} ${placeText}`);
-            setTimeout(() => el.querySelector(`#${U}-res`)?.focus(), 30);
-            board?.refresh(play.playId);
-            if (r.place === 1 && !r.test) celebrate();
-            memory.remove(cellsKey(play.playId));
-        } catch (err) {
-            if (err.status === 404) { forget(); s.screen.value = 'intro'; return; }
-            s.problem.value = err.message;
-            s.screen.value = 'error';
-        }
-    }
-
-    async function begin() {
-        if (s.busy.peek()) return;
-        s.problem.value = '';
-        s.busy.value = true;
-        try {
-            const r = test ? await test.start() : await request(`${API}/crossword/${encodeURIComponent(cfg.slug)}/start`, {
-                method: 'POST', body: {name: s.name.peek(), website: s.website.peek()}
-            });
-            play = {playId: r.playId, token: r.token};
-            if (test) {
-                if (r.info) showInfo(r.info);
-            } else {
-                memory.set(NAME_KEY, r.name);
-                memory.set(playKey(cfg.slug), play);
-            }
-            await load();
-        } catch (err) {
-            s.problem.value = errText(err);
-            s.busy.value = false;
-            if (!test) el.querySelector(`#${U}-name`)?.focus();
-        }
-    }
-
-    async function judge(path) {
-        if (s.busy.peek() || !grid) return;
-        s.busy.value = true;
-        try {
-            const r = await request(`${API}/play/${encodeURIComponent(play.playId)}/${path}`, {method: 'POST', token: play.token, body: {cells: grid.rows()}});
-            setClock(r.play);
-            if (path === 'check') {
-                grid.markWrong(r.wrong);
-                tell(r.wrong.length ? `${r.wrong.length} square${r.wrong.length === 1 ? ' is' : 's are'} wrong (marked in red).`
-                    : r.empty ? `Everything so far is right. ${r.empty} to go.` : 'Everything is right. Press "I\'ve finished"!', r.wrong.length ? 'bad' : 'good');
-            } else if (r.solved) {
-                return showResult();
-            } else {
-                tell(r.message, 'bad');
-            }
-        } catch (err) {
-            if (err.code === 'finished' || err.code === 'gone') return load();
-            tell(err.message, 'bad');
-        } finally {
-            s.busy.value = false;
-        }
-    }
-
-    const methods = {
-        start() { begin(); return false; },
-        check() { judge('check'); },
-        submit() { judge('submit'); },
-        clearWord() { grid?.clearCurrent(); },
-        async again() {
-            forget();
-            grid = null;
-            el.querySelector('.cw-grid').innerHTML = '';
-            el.querySelectorAll('.cw-list').forEach(l => { l.innerHTML = ''; });
-            s.busy.value = false;
-            await loadInfo().catch(() => {});
-            s.screen.value = 'intro';
-        }
-    };
-
-    const bindings = M.applyBindings({...s, ...methods}, el, {methods});
-
-    loadInfo().then(load).catch((err) => {
-        s.problem.value = err.status === 404 ? 'This crossword is not available.' : errText(err);
-        s.screen.value = 'error';
-    });
-
-    const dispose = () => { s.clock.stop(); left.stop(); stopLeft?.(); board?.dispose(); bindings?.dispose?.(); watch.disconnect(); };
-    const watch = new MutationObserver(() => { if (!el.isConnected) dispose(); });
-    watch.observe(document.body, {childList: true, subtree: true});
-    return {dispose};
-}
-
-function mountAll() {
-    for (const el of document.querySelectorAll('[data-crossword]')) {
-        if (el.dataset.gmMounted) continue;
-        el.dataset.gmMounted = '1';
-        mount(el);
-    }
-    mountBoards('data-crossword-board', (slug) => `${API}/crossword/${encodeURIComponent(slug)}/leaderboard`, {showScore: false});
-}
-
-if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mountAll);
-else mountAll();