domma-cms 1.8.31 → 1.8.33

package/plugins/crossword/admin/views/crossword.js

@@ -0,0 +1,449 @@
+/**
+ * Crossword - the Tool. One view, four screens by address:
+ *
+ *   #/plugins/crossword                 every crossword
+ *   #/plugins/crossword/new             a new crossword
+ *   #/plugins/crossword/edit/<id>       its words, clues and settings, with the grid previewed live
+ *   #/plugins/crossword/test/<id>       solve it as a player would - a test go, never on the leaderboard
+ *   #/plugins/crossword/plays/<id>      who solved it, and its leaderboard
+ *
+ * The preview runs the same layout function the server saves with
+ * (public/lib/layout.js), from the same words and seed, so what you see is
+ * what is saved. Every screen is domma-reactive (observables + one
+ * M.applyBindings, through the admin kit's mountScreen).
+ */
+
+import {bannerTrail, copyText, errText, esc, failed, fmtDuration, fromLocalInput, ico, loadKit, loading, mountScreen, playsScreen, refreshBadge, request, saveKey, testScreen, toLocalInput, wireRows} from '/plugins/_lib/admin/games/kit.js';
+import {MAX_WORDS, cleanAnswer, generate, solutionGrid} from '/plugins/crossword/public/lib/layout.js';
+
+const API = '/plugins/crossword';
+const SIDEBAR = '#/plugins/crossword';
+const ROUTE = /^#\/plugins\/crossword(\/|\?|$)/;
+const PLAYER = '/plugins/crossword/public/crossword.js?v=1.1.0';
+const STATUS_LABEL = {draft: 'Draft', open: 'Open', closed: 'Closed'};
+const STATUS_TONE = {draft: '', open: 'is-success', closed: 'is-warning'};
+
+let lifetime = null;
+let leaveGuard = null;
+// Each mount's number: a screen whose data arrives after the admin has moved on draws nothing.
+let mountSeq = 0;
+
+function where() {
+    const m = location.hash.split('?')[0].match(/^#\/plugins\/crossword(?:\/([a-z]+))?(?:\/([^/?#]+))?/);
+    return {screen: m?.[1] || 'list', id: m?.[2] ? decodeURIComponent(m[2]) : ''};
+}
+
+const badge = () => refreshBadge(SIDEBAR);
+const shortcodeOf = (slug) => `[crossword id="${slug}" /]`;
+const href = (screen, id) => `#/plugins/crossword/${screen}/${encodeURIComponent(id)}`;
+
+export const crosswordView = {
+    templateUrl: '/plugins/crossword/admin/templates/crossword.html',
+
+    async onMount($container) {
+        const kit = await loadKit();
+        lifetime ??= kit.viewLifetime(ROUTE);
+        if (!ROUTE.test(location.hash)) return;
+        lifetime.reset();
+        const n = ++mountSeq;
+        const alive = () => n === mountSeq && ROUTE.test(location.hash);
+        if (leaveGuard) { window.removeEventListener('beforeunload', leaveGuard); leaveGuard = null; }
+        const container = $container.get(0);
+        const root = container.querySelector('[data-crossword-admin]') || container;
+        const {screen, id} = where();
+
+        if ((screen === 'plays' || screen === 'test') && id) {
+            let puzzle = null;
+            try { puzzle = await request('GET', `${API}/puzzles/${encodeURIComponent(id)}`); } catch { /* the screen says so */ }
+            if (!alive()) return;
+            const title = puzzle?.title || 'Crossword';
+            bannerTrail(container, [{text: 'Crossword', href: SIDEBAR}, {text: `${title}: ${screen === 'test' ? 'test' : 'plays'}`}]);
+            kit.addBannerAction($container, {id: 'crossword-edit', icon: 'edit', title: 'Edit this crossword', onClick: () => { location.hash = href('edit', id); }});
+            if (screen === 'plays') {
+                kit.addBannerAction($container, {id: 'crossword-test', icon: 'play', title: 'Test it', onClick: () => { location.hash = href('test', id); }});
+                return playsScreen(root, {api: API, gameId: id, title, order: 'time', back: SIDEBAR, base: '/puzzles', badge, lifetime, alive, testHref: href('test', id)});
+            }
+            kit.addBannerAction($container, {id: 'crossword-plays', icon: 'award', title: 'Plays and leaderboard', onClick: () => { location.hash = href('plays', id); }});
+            if (!puzzle) return failed(root, 'That crossword is not here any more.', {href: SIDEBAR, text: 'Back to Crossword'});
+            return testScreen(root, {api: API, base: '/puzzles', gameId: id, player: PLAYER, appClass: 'cw-app',
+                editHref: href('edit', id), playsHref: href('plays', id), statusText: STATUS_LABEL[puzzle.status] || '', lifetime, alive});
+        }
+        if (screen === 'new' || (screen === 'edit' && id)) return editor(root, container, $container, kit, screen === 'new' ? '' : id, alive);
+        return list(root, container, $container, kit, alive);
+    }
+};
+
+// ---- The list ----------------------------------------------------------------------
+
+const LIST_HTML = `
+<div class="gma-bar">
+  <a class="btn btn-sm btn-primary" href="#/plugins/crossword/new">${ico('plus')} New crossword</a>
+  <span class="gma-spacer"></span>
+  <span class="gma-note">Put a crossword on any page with its shortcode.</span>
+  <span data-help-title="Crossword" data-help="Type the answers and clues and the grid lays itself out. Test it - you solve it exactly as your players will, and a test go never reaches the leaderboard. When it is ready, set it to Open and put its shortcode on a page. Right-click a crossword (or its ⋮) for everything else."></span>
+</div>
+<div class="gma-empty" hidden data-bind-hidden="rows.value.length">
+  ${ico('grid', 30)}
+  <p><strong>No crosswords yet.</strong><br>Type the answers and clues; the grid lays itself out.</p>
+  <a class="btn btn-primary" href="#/plugins/crossword/new">Make a crossword</a>
+</div>
+<div class="gma-list" data-part="list" data-each="rows.value key=id"></div>`;
+
+const LIST_ROW = `
+<div class="gma-row" tabindex="0" data-id="{{id}}">
+  <div class="gma-row-main">
+    <div><a data-bind-href="editHref" data-bind-text="title"></a><span class="gma-chip" data-bind-class="tone" data-bind-text="statusText"></span></div>
+    <small data-bind-text="meta"></small>
+  </div>
+  <div class="gma-row-actions">
+    <a class="btn btn-sm btn-ghost" data-bind-href="testHref" title="Solve it as your players will - not saved to the leaderboard">${ico('play')} Test</a>
+    <a class="btn btn-sm btn-ghost" data-bind-href="playsHref">${ico('award')} Plays</a>
+    <button type="button" class="gma-kebab" aria-label="Actions" title="Actions">${ico('more-vertical', 16)}</button>
+  </div>
+</div>`;
+
+async function list(root, container, $container, kit, alive) {
+    bannerTrail(container, [{text: 'Crossword'}]);
+    kit.addBannerAction($container, {id: 'crossword-new', icon: 'plus', title: 'New crossword', onClick: () => { location.hash = '#/plugins/crossword/new'; }});
+    let got;
+    try {
+        got = await loading(root, request('GET', `${API}/puzzles`), kit);
+    } catch (err) {
+        if (!alive()) return;
+        return failed(root, `Crossword could not load: ${errText(err)}`);
+    }
+
+    if (!alive()) return;
+    const puzzles = M.observable(got.puzzles || []);
+    const rows = M.observable([]);
+    lifetime.add(M.effect(() => {
+        rows.value = puzzles.value.map(p => ({
+            id: p.id, title: p.title, statusText: STATUS_LABEL[p.status] || p.status, tone: STATUS_TONE[p.status] || '',
+            editHref: href('edit', p.id), testHref: href('test', p.id), playsHref: href('plays', p.id),
+            meta: [`${p.words} answers, ${p.size}`, `${p.finished} solved of ${p.plays} play${p.plays === 1 ? '' : 's'}`,
+                p.finished ? `fastest ${fmtDuration(p.fastest)}` : '', shortcodeOf(p.slug)].filter(Boolean).join(' · ')
+        }));
+    }));
+
+    const byId = (id) => puzzles.peek().find(p => p.id === id);
+
+    async function duplicate(p) {
+        try {
+            const copy = await request('POST', `${API}/puzzles/${encodeURIComponent(p.id)}/copy`);
+            E.toast(`Copied as "${copy.title}" (a draft).`, {type: 'success'});
+            puzzles.value = (await request('GET', `${API}/puzzles`)).puzzles || [];
+        } catch (err) { E.toast(errText(err), {type: 'error'}); }
+    }
+
+    async function remove(p) {
+        if (!await E.confirm(`Delete the crossword <strong>${esc(p.title)}</strong>? Its ${p.plays} play${p.plays === 1 ? '' : 's'} and leaderboard go with it.`)) return;
+        try {
+            await request('DELETE', `${API}/puzzles/${encodeURIComponent(p.id)}`);
+            puzzles.value = puzzles.peek().filter(x => x.id !== p.id);
+            badge();
+            E.toast(`${p.title} deleted.`, {type: 'success'});
+        } catch (err) { E.toast(errText(err), {type: 'error'}); }
+    }
+
+    const el = mountScreen(root, {
+        html: LIST_HTML, model: {rows}, lifetime, k: kit, className: 'gma-crossword-list', rescan: [rows],
+        before: (screen) => { screen.querySelector('[data-part="list"]').innerHTML = LIST_ROW; }
+    });
+    wireRows(el.querySelector('[data-part="list"]'), {
+        k: kit, lifetime,
+        main: (id) => { location.hash = href('edit', id); },
+        items: (id) => {
+            const p = byId(id);
+            if (!p) return [];
+            return [
+                {label: 'Edit', icon: 'edit', action: () => { location.hash = href('edit', id); }},
+                {label: 'Test it', icon: 'play', action: () => { location.hash = href('test', id); }},
+                {label: 'Plays and leaderboard', icon: 'award', action: () => { location.hash = href('plays', id); }},
+                {label: 'Copy the shortcode', icon: 'copy', action: () => copyText(shortcodeOf(p.slug), 'Shortcode copied')},
+                {label: 'Make a copy', icon: 'layers', action: () => duplicate(p)},
+                {type: 'divider'},
+                {label: 'Delete…', icon: 'trash', action: () => remove(p)}
+            ];
+        }
+    });
+}
+
+// ---- The editor --------------------------------------------------------------------
+
+const blankPuzzle = () => ({
+    title: '', slug: '', intro: '', status: 'draft', opensAt: '', closesAt: '', timeLimit: 0, checks: true, checkPenalty: 30, wrongPenalty: 10,
+    leaderboard: true, leaderboardSize: 10, attemptsPerName: 0, seed: 1,
+    words: [{answer: '', clue: ''}, {answer: '', clue: ''}, {answer: '', clue: ''}]
+});
+const wid = () => Math.random().toString(36).slice(2, 10);
+const num = (v) => Number(v) || 0;
+
+/** One answer and its clue, as the editor binds it. */
+function wordModel(w = {}) {
+    const answer = M.observable(w.answer || '');
+    return {id: wid(), n: M.observable(''), answer, clue: M.observable(w.clue || ''),
+        enumeration: M.computed(() => { const c = cleanAnswer(answer.value); return c.letters ? `(${c.enumeration})` : ''; })};
+}
+
+const field = (id, label, control, {hint = '', help = ''} = {}) => `
+<div class="form-group gma-field">
+  <label class="form-label" for="${id}">${esc(label)}${help ? ` <span data-help-title="${esc(label)}" data-help="${esc(help)}"></span>` : ''}</label>
+  ${control}
+  ${hint ? `<p class="form-hint">${esc(hint)}</p>` : ''}
+</div>`;
+const check = (bool, label, hint = '') => `
+<div class="form-group gma-field">
+  <label class="gma-toggle"><input type="checkbox" data-bool="${bool}"> <span>${esc(label)}</span></label>
+  ${hint ? `<p class="form-hint">${esc(hint)}</p>` : ''}
+</div>`;
+
+const EDITOR_HTML = `
+<section class="gma-card">
+  <h3 class="gma-h">The crossword</h3>
+  <div class="gma-grid">
+    ${field('cw-title', 'Title', '<input id="cw-title" class="form-input" maxlength="120" placeholder="Friday teaser" data-model="f.title.value">')}
+    ${field('cw-slug', 'Short name', '<input id="cw-slug" class="form-input" maxlength="60" placeholder="made from the title" data-model="f.slug.value">',
+        {help: 'Used in the shortcode. Letters, numbers and hyphens; made from the title when empty.'})}
+    ${field('cw-status', 'Status', `<select id="cw-status" class="form-select" data-model="f.status.value">${Object.entries(STATUS_LABEL).map(([v, t]) => `<option value="${v}">${t}</option>`).join('')}</select>`,
+        {help: 'Only an open crossword can be played on a page. A draft is not shown at all; a closed one shows its leaderboard. Test works whatever the status.'})}
+  </div>
+  ${field('cw-intro', 'Introduction', '<textarea id="cw-intro" class="form-input" rows="3" data-model="f.intro.value"></textarea>', {hint: 'Shown above the grid.'})}
+  <div class="gma-grid">
+    ${field('cw-opens', 'Opens', '<input id="cw-opens" class="form-input" type="datetime-local" data-model="f.opensAt.value">', {hint: 'Optional.'})}
+    ${field('cw-closes', 'Closes', '<input id="cw-closes" class="form-input" type="datetime-local" data-model="f.closesAt.value">', {hint: 'Optional.'})}
+  </div>
+  <div class="gma-shortcode"><span class="gma-muted">Shortcode:</span><code data-bind-text="shortcode.value"></code>
+    <button type="button" class="btn btn-xs btn-ghost" data-on-click="copyShortcode" data-bind-disabled="!f.slug.value">${ico('copy')} Copy</button>
+    <span data-help-title="Shortcode" data-help="Paste it into any page to put the crossword there. [crossword-leaderboard id=&quot;...&quot; period=&quot;week&quot; /] shows its fastest solvers on their own."></span></div>
+</section>
+
+<div class="gma-two">
+  <section class="gma-card">
+    <div class="gma-bar"><h3 class="gma-h">Answers and clues</h3><span class="gma-muted" data-bind-text="wordCount.value"></span>
+      <span data-help-title="Answers and clues" data-help="Spaces and hyphens in an answer show in the clue as word lengths, e.g. New York (3,4). Answers that share letters cross more. Enter in the last clue adds another answer."></span></div>
+    <div class="cwa-words" data-part="words" data-each="words key=id"></div>
+    <div class="gma-bar"><button type="button" class="btn btn-sm btn-outline" data-on-click="addWord" data-bind-disabled="words.length >= max">${ico('plus')} Add an answer</button></div>
+  </section>
+  <section class="gma-card cwa-side">
+    <div class="gma-bar"><h3 class="gma-h">The grid</h3><span class="gma-spacer"></span>
+      <button type="button" class="btn btn-sm btn-outline" title="Try a different arrangement of the same words" data-on-click="anotherLayout">${ico('refresh-cw')} Another layout</button></div>
+    <div class="cwa-preview">
+      <p class="gma-muted" hidden data-bind-hidden="cells.value.length">Type at least two answers with clues and the grid appears here.</p>
+      <div class="cwa-grid" hidden data-bind-hidden="!cells.value.length" data-bind-style-grid-template-columns="columns.value" data-part="grid" data-each="cells.value key=id"></div>
+    </div>
+    <p class="gma-note" data-bind-text="previewNote.value"></p>
+    <p class="cwa-unplaced" role="status" hidden data-bind-hidden="!unplaced.value" data-bind-text="unplaced.value"></p>
+    <p class="gma-note">Players see the shape and the numbers, never the letters.</p>
+  </section>
+</div>
+
+<section class="gma-card">
+  <h3 class="gma-h">Rules and leaderboard</h3>
+  <div class="gma-grid">
+    ${field('cw-minutes', 'Time limit (minutes)', '<input id="cw-minutes" class="form-input" type="number" min="0" step="0.5" data-model="f.minutes.value">', {hint: '0 = no limit. Out of time means off the leaderboard.'})}
+    ${field('cw-check', 'Seconds added per check', '<input id="cw-check" class="form-input" type="number" min="0" max="600" data-model="f.checkPenalty.value">')}
+    ${field('cw-wrong', 'Seconds added for a wrong full grid', '<input id="cw-wrong" class="form-input" type="number" min="0" max="600" data-model="f.wrongPenalty.value">', {hint: 'Stops people guessing their way to the top.'})}
+    ${field('cw-goes', 'Goes each (per name)', '<input id="cw-goes" class="form-input" type="number" min="0" max="100" data-model="f.attemptsPerName.value">', {hint: '0 = as many as they like. Test goes do not count.'})}
+    ${field('cw-size', 'Leaderboard size', '<input id="cw-size" class="form-input" type="number" min="3" max="100" data-model="f.leaderboardSize.value">')}
+  </div>
+  <div class="gma-grid">
+    ${check('checks', 'Let players check their letters', 'Shows which squares are wrong, at a cost in time.')}
+    ${check('leaderboard', 'Show a leaderboard', 'Fastest time wins, penalties included.')}
+  </div>
+</section>
+
+<div class="gma-save">
+  <button type="button" class="btn btn-primary" data-on-click="save" data-bind-disabled="saving.value">${ico('check')} Save</button>
+  <button type="button" class="btn btn-outline" data-on-click="test" data-bind-disabled="saving.value"
+    title="Solve it as your players will. A test go is not saved to the leaderboard.">${ico('play')} <span data-bind-text="testLabel.value"></span></button>
+  <a class="btn btn-ghost" href="#/plugins/crossword">Back to the list</a>
+  <span class="is-dirty" hidden data-bind-hidden="!dirty.value">Unsaved changes</span>
+  <span class="gma-spacer"></span>
+  <p class="gma-error" role="alert" hidden data-bind-hidden="!problem.value" data-bind-text="problem.value"></p>
+</div>`;
+
+const WORD = `
+<div class="cwa-word">
+  <span class="cwa-n" data-bind-text="n.value"></span>
+  <input class="form-input cwa-answer" maxlength="40" placeholder="Answer" data-bind-aria-label="'Answer ' + n.value" data-model="answer.value">
+  <span class="cwa-enum" data-bind-text="enumeration.value"></span>
+  <input class="form-input cwa-clue" maxlength="300" placeholder="Clue" data-bind-aria-label="'Clue ' + n.value" data-model="clue.value"
+    data-on-keydown="$root.clueKey($data)">
+  <button type="button" class="btn btn-xs btn-ghost gma-quiet" title="Remove" aria-label="Remove this answer" data-on-click="$root.removeWord($data)">${ico('x')}</button>
+</div>`;
+
+const CELL = `<div class="cwa-cell" data-bind-class="block && 'is-block'"><span class="cwa-num" hidden data-bind-hidden="!num" data-bind-text="num"></span><span data-bind-text="ch"></span></div>`;
+
+async function editor(root, container, $container, kit, id, alive) {
+    let start = blankPuzzle();
+    if (id) {
+        try {
+            const {layout, ...rest} = await loading(root, request('GET', `${API}/puzzles/${encodeURIComponent(id)}`), kit);
+            start = {...blankPuzzle(), ...rest};
+        } catch (err) {
+            if (!alive()) return;
+            return failed(root, `That crossword could not load: ${errText(err)}`, {href: SIDEBAR, text: 'Back to Crossword'});
+        }
+    }
+    if (!alive()) return;
+    if (!start.words?.length) start.words = [{answer: '', clue: ''}];
+    bannerTrail(container, [{text: 'Crossword', href: SIDEBAR}, {text: id ? start.title : 'New crossword'}]);
+    if (id) {
+        kit.addBannerAction($container, {id: 'crossword-test', icon: 'play', title: 'Test it', onClick: () => model.test()});
+        kit.addBannerAction($container, {id: 'crossword-plays', icon: 'award', title: 'Plays and leaderboard', onClick: () => { location.hash = href('plays', id); }});
+    }
+
+    const f = {
+        title: M.observable(start.title), slug: M.observable(start.slug), intro: M.observable(start.intro), status: M.observable(start.status),
+        opensAt: M.observable(toLocalInput(start.opensAt)), closesAt: M.observable(toLocalInput(start.closesAt)),
+        minutes: M.observable(start.timeLimit ? start.timeLimit / 60 : 0), checkPenalty: M.observable(start.checkPenalty),
+        wrongPenalty: M.observable(start.wrongPenalty), attemptsPerName: M.observable(start.attemptsPerName), leaderboardSize: M.observable(start.leaderboardSize)
+    };
+    const bools = {checks: M.observable(start.checks), leaderboard: M.observable(start.leaderboard)};
+    const seed = M.observable(start.seed || 1);
+    const words = M.observableArray(start.words.map(wordModel));
+    const saving = M.observable(false);
+    const problem = M.observable('');
+    const dirty = M.observable(false);
+    const wordCount = M.observable('');
+    const cells = M.observable([]);
+    const columns = M.observable('');
+    const previewNote = M.observable('');
+    const unplaced = M.observable('');
+    const tick = M.observable(0);
+    const shortcode = M.computed(() => (f.slug.value ? shortcodeOf(f.slug.value) : 'Saved crosswords get a shortcode'));
+    const testLabel = M.computed(() => (dirty.value || !id ? 'Save and test' : 'Test'));
+
+    const body = () => ({
+        title: f.title.peek(), slug: f.slug.peek(), intro: f.intro.peek(), status: f.status.peek(),
+        opensAt: fromLocalInput(f.opensAt.peek()), closesAt: fromLocalInput(f.closesAt.peek()),
+        timeLimit: Math.round(num(f.minutes.peek()) * 60), checkPenalty: num(f.checkPenalty.peek()), wrongPenalty: num(f.wrongPenalty.peek()),
+        attemptsPerName: num(f.attemptsPerName.peek()), leaderboardSize: num(f.leaderboardSize.peek()) || 10,
+        checks: bools.checks.peek(), leaderboard: bools.leaderboard.peek(), seed: seed.peek(),
+        words: words.peek().map(w => ({answer: w.answer.peek(), clue: w.clue.peek()}))
+    });
+    let saved = JSON.stringify(body());
+
+    /**
+     * What the server saved, back into the editor: it cleans what it is given (numbers clamped, blank
+     * answers dropped), so the editor must show what was stored. The words are rebuilt only when they
+     * changed, so a save does not throw away focus.
+     */
+    function load(p) {
+        f.title.value = p.title; f.slug.value = p.slug; f.intro.value = p.intro; f.status.value = p.status;
+        f.opensAt.value = toLocalInput(p.opensAt); f.closesAt.value = toLocalInput(p.closesAt);
+        f.minutes.value = p.timeLimit ? p.timeLimit / 60 : 0; f.checkPenalty.value = p.checkPenalty; f.wrongPenalty.value = p.wrongPenalty;
+        f.attemptsPerName.value = p.attemptsPerName; f.leaderboardSize.value = p.leaderboardSize; seed.value = p.seed || 1;
+        for (const k of Object.keys(bools)) bools[k].value = p[k] === true;
+        for (const box of el.querySelectorAll('[data-bool]')) box.checked = bools[box.dataset.bool].peek();
+        const incoming = p.words?.length ? p.words : [{answer: '', clue: ''}];
+        const now = words.peek().map(w => ({answer: w.answer.peek(), clue: w.clue.peek()}));
+        if (JSON.stringify(incoming.map(w => ({answer: w.answer, clue: w.clue}))) !== JSON.stringify(now)) words.set(incoming.map(wordModel));
+        drawPreview();
+        tick.value++;
+    }
+
+    /** The live grid, from the same layout function the server saves with. */
+    function drawPreview() {
+        const ready = words.peek().map(w => ({answer: w.answer.peek(), clue: w.clue.peek()}))
+            .filter(w => cleanAnswer(w.answer).letters.length >= 2 && w.clue.trim());
+        const layout = generate(ready, {seed: seed.peek()});
+        if (!layout.entries.length) {
+            cells.value = [];
+            previewNote.value = '';
+        } else {
+            const grid = solutionGrid(layout);
+            const numbers = new Map(layout.entries.map(e => [`${e.row},${e.col}`, e.number]));
+            cells.value = grid.flatMap((row, r) => row.map((ch, c) => ({id: `${r},${c}`, block: !ch, ch: ch || '', num: numbers.get(`${r},${c}`) || ''})));
+            columns.value = `repeat(${layout.width}, 1.7rem)`;
+            previewNote.value = `${layout.width} × ${layout.height}, ${layout.entries.length} answers. Layout ${seed.peek()}.`;
+        }
+        unplaced.value = layout.unplaced.length
+            ? `Did not fit: ${layout.unplaced.map(u => u.answer).join(', ')}. Try another layout, or change those answers so they share letters with the others.`
+            : '';
+    }
+    const redraw = typeof _ !== 'undefined' && _.debounce ? _.debounce(drawPreview, 250) : drawPreview;
+
+    function touched() {
+        const list = words.peek();
+        list.forEach((w, i) => { w.n.value = `${i + 1}`; });
+        wordCount.value = `${list.filter(w => w.answer.peek() || w.clue.peek()).length} of ${MAX_WORDS}`;
+        dirty.value = JSON.stringify(body()) !== saved;
+    }
+    const changed = () => { touched(); drawPreview(); tick.value++; };
+
+    leaveGuard = (e) => { if (dirty.peek() && ROUTE.test(location.hash)) { e.preventDefault(); e.returnValue = ''; } };
+    window.addEventListener('beforeunload', leaveGuard);
+    lifetime.add(() => { window.removeEventListener('beforeunload', leaveGuard); leaveGuard = null; });
+
+    /** Saves; answers the crossword's id, or '' when it did not save. */
+    async function save() {
+        if (saving.peek()) return '';
+        problem.value = '';
+        saving.value = true;
+        try {
+            const out = id ? await request('PUT', `${API}/puzzles/${encodeURIComponent(id)}`, body()) : await request('POST', `${API}/puzzles`, body());
+            load({...blankPuzzle(), ...out});
+            saved = JSON.stringify(body());
+            touched();
+            const missed = out.unplaced?.length || 0;
+            E.toast(missed ? `${out.title} saved. ${missed} answer${missed === 1 ? '' : 's'} did not fit the grid.` : `${out.title} saved.`,
+                {type: missed ? 'warning' : 'success'});
+            if (id) bannerTrail(container, [{text: 'Crossword', href: SIDEBAR}, {text: out.title}]);
+            return out.id;
+        } catch (err) {
+            problem.value = errText(err);
+            return '';
+        } finally {
+            saving.value = false;
+        }
+    }
+
+    const model = {
+        f, words, max: MAX_WORDS, saving, problem, dirty, wordCount, cells, columns, previewNote, unplaced, shortcode, testLabel,
+        async save() {
+            const savedId = await save();
+            if (savedId && !id) location.hash = href('edit', savedId);
+        },
+        async test() {
+            const savedId = dirty.peek() || !id ? await save() : id;
+            if (savedId) location.hash = href('test', savedId);
+        },
+        copyShortcode() { if (f.slug.peek()) copyText(shortcodeOf(f.slug.peek()), 'Shortcode copied'); },
+        anotherLayout() { seed.value = (seed.peek() % 2147483646) + 1; changed(); },
+        addWord() {
+            if (words.peek().length >= MAX_WORDS) return;
+            words.push(wordModel());
+            changed();
+            setTimeout(() => el.querySelector('.cwa-word:last-of-type .cwa-answer')?.focus(), 30);
+        },
+        removeWord(w) { words.remove(w); changed(); },
+        clueKey(w, e) {
+            if (e.key !== 'Enter' || words.peek().at(-1) !== w) return;
+            e.preventDefault();
+            model.addWord();
+        }
+    };
+
+    const el = mountScreen(root, {
+        html: EDITOR_HTML, model, lifetime, k: kit, className: 'gma-crossword-editor', rescan: [words, tick],
+        before: (screen) => {
+            screen.querySelector('[data-part="words"]').innerHTML = WORD;
+            screen.querySelector('[data-part="grid"]').innerHTML = CELL;
+            for (const box of screen.querySelectorAll('[data-bool]')) {
+                box.checked = Boolean(bools[box.dataset.bool].peek());
+                box.addEventListener('change', () => { bools[box.dataset.bool].value = box.checked; touched(); });
+            }
+        }
+    });
+    // Typing anywhere: the bindings write first (their listeners were added first), then this sees it.
+    const onEdit = (e) => { touched(); if (e.target.closest?.('.cwa-word')) redraw(); };
+    el.addEventListener('input', onEdit);
+    el.addEventListener('change', onEdit);
+    lifetime.add(() => { el.removeEventListener('input', onEdit); el.removeEventListener('change', onEdit); });
+    saveKey(() => model.save(), () => ROUTE.test(location.hash) && el.isConnected, lifetime);
+
+    touched();
+    drawPreview();
+    if (!id) el.querySelector('#cw-title')?.focus();
+}

package/plugins/crossword/collections/crossword-plays.json

@@ -0,0 +1,20 @@
+{
+  "slug": "crossword-plays",
+  "title": "Crossword - Plays",
+  "description": "Every go at a crossword: the name and the time. Look at them in Crossword, not here.",
+  "plugin": "crossword",
+  "fields": [
+    {"name": "gameId", "label": "Crossword", "type": "text"},
+    {"name": "name", "label": "Name", "type": "text"},
+    {"name": "status", "label": "Status", "type": "text"},
+    {"name": "score", "label": "Score", "type": "number"},
+    {"name": "timeMs", "label": "Time (ms)", "type": "number"},
+    {"name": "hidden", "label": "Hidden from the leaderboard", "type": "boolean"}
+  ],
+  "api": {
+    "create": {"enabled": false, "access": "admin"},
+    "read":   {"enabled": false, "access": "admin"},
+    "update": {"enabled": false, "access": "admin"},
+    "delete": {"enabled": false, "access": "admin"}
+  }
+}

package/plugins/crossword/collections/crossword-puzzles.json

@@ -0,0 +1,17 @@
+{
+  "slug": "crossword-puzzles",
+  "title": "Crossword - Puzzles",
+  "description": "The crosswords, answers included. Edit them in Crossword, not here.",
+  "plugin": "crossword",
+  "fields": [
+    {"name": "title", "label": "Title", "type": "text"},
+    {"name": "slug", "label": "Short name", "type": "text"},
+    {"name": "status", "label": "Status", "type": "text"}
+  ],
+  "api": {
+    "create": {"enabled": false, "access": "admin"},
+    "read":   {"enabled": false, "access": "admin"},
+    "update": {"enabled": false, "access": "admin"},
+    "delete": {"enabled": false, "access": "admin"}
+  }
+}

package/plugins/crossword/config.js

@@ -0,0 +1,6 @@
+/**
+ * Crossword - default configuration. Every crossword carries its own settings
+ * (time limit, checking, penalties, the leaderboard...), edited with the
+ * crossword; nothing here needs changing.
+ */
+export default {};

package/plugins/crossword/docs/guide.md

@@ -0,0 +1,53 @@
+---
+title: Guide
+order: 1
+---
+
+Put crosswords on your website. You type the answers and clues, the grid is laid out for you, and visitors race the clock to a leaderboard. Crossword is free.
+
+## What it does
+
+- **You write words and clues; it builds the grid.** The preview updates as you type. Not happy with the shape? **Another layout** tries a different arrangement of the same words. Any word that will not cross the others is listed so you can change it.
+- **Phrases are fine.** "New York" shows as (3,4) and "well-being" as (4-5) in the clue.
+- **Timing kept by the server**, from the moment the crossword is started to the moment it is solved.
+- **Check** marks the wrong squares, at a time penalty you choose (30 seconds unless you change it). You can switch checking off.
+- **Submitting a wrong grid** costs a smaller penalty (10 seconds unless you change it), so guessing is not free. Empty squares are pointed out and cost nothing.
+- **Leaderboards** of the fastest solvers for today, this week, this month and all time, best go per name.
+- The answers never reach the visitor's browser until they have solved it.
+- Optional overall time limit, opening and closing times, and a limit on goes per name.
+
+## Getting started
+
+1. Switch Crossword on in **Tools**.
+2. Open **Tools > Games > Crossword** and choose **New crossword**.
+3. Add at least two answers with their clues. Ten to twenty words make a good grid.
+4. Press **Test** and solve it yourself (see below).
+5. Set the status to **Open** and save.
+6. Put it on any page:
+
+```
+[crossword id="sea-life" /]
+```
+
+## Testing a crossword
+
+**Test** (in the editor, on each crossword in the list, and on its Plays screen) opens the crossword right there in the admin, exactly as your players will see it: the same grid, clock, checks and penalties.
+
+- It plays the version you last saved. With unsaved changes the button says **Save and test**, and saves first.
+- It works whatever the status, so you can try a draft before anyone can see it.
+- A test go is never saved to the leaderboard. It is not in the Plays list, it does not count towards the goes each name is allowed, and it does not raise a notification. When you solve it, it tells you where you would have come.
+- Each new test clears away the one before.
+
+## A leaderboard on its own
+
+```
+[crossword-leaderboard id="sea-life" period="all" limit="10" title="Fastest solvers" /]
+```
+
+## Playing
+
+Click a square, or a clue, and type. Typing moves along the word. Arrow keys move around, clicking the same square again or pressing Space turns between across and down, Tab jumps to the next clue, and Backspace clears. Letters are remembered if the page is reloaded.
+
+## Looking after the board
+
+Open a crossword's **Plays** to see every go (your own test goes are not shown). You can hide a play from the leaderboard, delete it, or reset the leaderboard.

package/plugins/crossword/inject/body.html

@@ -0,0 +1 @@
+<script type="module" src="/plugins/crossword/public/crossword.js?v=1.1.0"></script>