domma-cms 1.8.31 → 1.8.32

package/plugins/_lib/public/games/format.js

@@ -0,0 +1,38 @@
+/**
+ * Games - words and numbers shared by the server and the browser (Quiz,
+ * Crossword). Served from /plugins/_lib/public/games/format.js and imported by
+ * path on the server, so it must stay free of I/O and of DOM.
+ *
+ * @module _lib/public/games/format
+ */
+
+/** "0:42", "3:05", "1:02:09" from milliseconds. Tenths only under a minute, when asked. */
+export function fmtDuration(ms, {tenths = false} = {}) {
+    const n = Math.max(0, Number(ms) || 0);
+    if (tenths && n < 60000) return `${(Math.floor(n / 100) / 10).toFixed(1)}s`;
+    const total = Math.floor(n / 1000);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = String(total % 60).padStart(2, '0');
+    return h ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`;
+}
+
+/** "1st", "2nd", "3rd", "11th". */
+export function ordinal(n) {
+    const v = Math.abs(Math.round(Number(n) || 0));
+    const tail = v % 100 >= 11 && v % 100 <= 13 ? 'th' : ({1: 'st', 2: 'nd', 3: 'rd'}[v % 10] || 'th');
+    return `${v}${tail}`;
+}
+
+/** The leaderboard periods, in the order the switcher shows them. */
+export const PERIODS = [
+    {key: 'today', label: 'Today'},
+    {key: 'week', label: 'This week'},
+    {key: 'month', label: 'This month'},
+    {key: 'all', label: 'All time'}
+];
+
+export const PERIOD_KEYS = PERIODS.map(p => p.key);
+
+/** A period key, or 'all'. */
+export const cleanPeriod = (p) => (PERIOD_KEYS.includes(String(p)) ? String(p) : 'all');

package/plugins/_lib/public/games/games.css

@@ -0,0 +1 @@
+.gm-app{--gm-gap: 1rem;--gm-radius: var(--dm-radius, 10px);--gm-line: var(--dm-border, rgba(127, 127, 127, .3));--gm-soft: var(--dm-surface, rgba(127, 127, 127, .08));--gm-accent: var(--dm-primary, #3b82f6);--gm-good: var(--dm-success, #16a34a);--gm-bad: var(--dm-danger, #dc2626);--gm-warn: var(--dm-warning, #d97706);max-width:760px;margin:1.5rem auto;color:var(--dm-text, inherit)}.gm-app [hidden],.gm-board [hidden]{display:none!important}.gm-card{border:1px solid var(--gm-line);border-radius:var(--gm-radius);background:var(--dm-surface-raised, var(--dm-background, transparent));padding:1.25rem 1.5rem;margin-bottom:var(--gm-gap)}.gm-title{margin:0 0 .5rem;font-size:1.6rem;line-height:1.2}.gm-intro{margin:0 0 1rem;white-space:pre-line}.gm-muted{color:var(--dm-text-muted, #6b7280);margin:.25rem 0}.gm-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0 0 1rem;padding:0;list-style:none;color:var(--dm-text-muted, #6b7280)}.gm-facts li:before{content:"\2022  "}.gm-facts li:first-child:before{content:""}.gm-start{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}.gm-field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 220px}.gm-field label{font-weight:600}.gm-input{font:inherit;padding:.6rem .75rem;border:1px solid var(--gm-line);border-radius:8px;background:var(--dm-input-bg, var(--dm-background, #fff));color:inherit;width:100%;box-sizing:border-box}.gm-input:focus{outline:2px solid var(--gm-accent);outline-offset:1px}.gm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}.gm-error{color:var(--gm-bad);margin:.5rem 0 0;font-weight:600}.gm-note{margin:.5rem 0 0}.gm-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem}.gm-progress{font-weight:600}.gm-clock{font-variant-numeric:tabular-nums;font-weight:700;padding:.2rem .65rem;border-radius:999px;background:var(--gm-soft);min-width:4.5rem;text-align:center}.gm-clock.is-low{background:var(--gm-bad);color:#fff}.gm-track{height:6px;border-radius:999px;background:var(--gm-soft);overflow:hidden;margin-bottom:1rem}.gm-track>span{display:block;height:100%;background:var(--gm-accent);transition:width .2s linear}.gm-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.gm-result-score{font-size:2.4rem;font-weight:800;margin:.25rem 0}.gm-result-place{font-size:1.15rem;margin:0 0 .75rem}.gm-board{border:1px solid var(--gm-line, rgba(127, 127, 127, .3));border-radius:var(--gm-radius, 10px);padding:1rem 1.25rem;margin:0 0 1rem}.gm-board-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.gm-board-title{margin:0;font-size:1.2rem}.gm-periods{display:flex;flex-wrap:wrap;gap:.25rem}.gm-period{font:inherit;font-size:.85rem;padding:.2rem .6rem;border-radius:999px;cursor:pointer;border:1px solid var(--gm-line, rgba(127, 127, 127, .3));background:transparent;color:inherit}.gm-period.is-on{background:var(--dm-primary, #3b82f6);border-color:var(--dm-primary, #3b82f6);color:#fff}.gm-board-list{list-style:none;margin:0;padding:0}.gm-board-row{display:grid;grid-template-columns:3.2rem 1fr auto auto;gap:.75rem;align-items:center;padding:.45rem .5rem;border-bottom:1px solid var(--gm-line, rgba(127, 127, 127, .2))}.gm-board-row:last-child{border-bottom:0}.gm-board-row:nth-child(1) .gm-rank{color:#c9a227}.gm-board-row:nth-child(2) .gm-rank{color:#9aa3ad}.gm-board-row:nth-child(3) .gm-rank{color:#b0703a}.gm-board-row.is-mine{background:color-mix(in srgb,var(--dm-primary, #3b82f6) 14%,transparent);border-radius:6px;font-weight:700}.gm-rank{font-weight:800}.gm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gm-score,.gm-time{font-variant-numeric:tabular-nums;text-align:right}.gm-score{font-weight:700}@media(max-width:520px){.gm-card{padding:1rem}.gm-board-row{grid-template-columns:2.6rem 1fr auto auto;gap:.5rem}}

package/plugins/_lib/public/games/games.js

@@ -0,0 +1,204 @@
+/**
+ * Games - what the Quiz and Crossword pages share in the browser: talking to
+ * the server, the leaderboard, the countdown, the player's remembered name,
+ * the stylesheet and a celebration for a top place.
+ *
+ * Served from /plugins/_lib/public/games/games.js. Domma is on every public
+ * page, so the screens are domma-reactive (window.M): observables, one
+ * M.applyBindings per screen, and text from the server reaches the page only
+ * through bindings (textContent), never as HTML.
+ *
+ * @module _lib/public/games/games
+ */
+
+import {fmtDuration, ordinal, PERIODS} from './format.js';
+
+export {fmtDuration, ordinal, PERIODS};
+
+const M = window.M;
+
+/** JSON in and out (`token`: the play's key); a failure is an Error carrying the server's words, `status` and `code`. */
+export async function request(url, {method = 'GET', body, token} = {}) {
+    const headers = {Accept: 'application/json'};
+    if (body) headers['Content-Type'] = 'application/json';
+    // A play's key travels in a header, so it stays out of addresses and server logs.
+    if (token) headers['X-Play-Token'] = token;
+    const res = await fetch(url, {
+        method,
+        headers,
+        body: body ? JSON.stringify(body) : undefined,
+        credentials: 'same-origin'
+    });
+    let data = null;
+    try { data = await res.json(); } catch { /* not JSON */ }
+    if (!res.ok) {
+        const err = new Error(data?.error || (res.status === 429 ? 'Too many tries just now. Please wait a minute.' : 'Something went wrong. Please try again.'));
+        err.status = res.status;
+        err.code = data?.code || '';
+        throw err;
+    }
+    return data;
+}
+
+/** Remembered conveniences (the name last played under, a play in progress). Storage may be blocked. */
+export const memory = {
+    get(k) { try { return window.S ? S.get(k) : null; } catch { return null; } },
+    set(k, v) { try { window.S?.set(k, v); } catch { /* a convenience */ } },
+    remove(k) { try { window.S?.remove(k); } catch { /* a convenience */ } }
+};
+
+let stylesAdded = false;
+/** The shared stylesheet, once per page. */
+export function addStyles(extra = []) {
+    const want = stylesAdded ? extra : ['/plugins/_lib/public/games/games.css', ...extra];
+    stylesAdded = true;
+    for (const href of want) {
+        if (document.querySelector(`link[href="${href}"]`)) continue;
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        document.head.appendChild(link);
+    }
+}
+
+/** The JSON config a shortcode wrote on its placeholder, or null. */
+export function configOf(el, attr) {
+    try { return JSON.parse(el.getAttribute(attr) || 'null'); } catch { return null; }
+}
+
+/** A short-lived unique prefix for ids inside one mount. */
+let mounts = 0;
+export const uid = (prefix) => `${prefix}${++mounts}${Math.random().toString(36).slice(2, 6)}`;
+
+/** Ticker tape for a top place - skipped when the visitor asked for less motion. */
+export function celebrate() {
+    try {
+        if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+        const fx = window.Domma?.effects;
+        if (typeof fx?.tickerTape === 'function') fx.tickerTape(null, {burst: true, burstCount: 160});
+    } catch { /* a celebration never breaks the page */ }
+}
+
+/**
+ * A countdown to a deadline the SERVER set: the browser only shows it. `left`
+ * is an observable of milliseconds; `onEnd` runs once when it reaches 0.
+ */
+export class Countdown {
+    constructor(onEnd = () => {}) {
+        this.left = M.observable(0);
+        this.onEnd = onEnd;
+        this.timer = null;
+        this.deadline = 0;
+    }
+
+    /** `ms` from now; 0 or less stops it (no limit). */
+    start(ms) {
+        this.stop();
+        if (!(ms > 0)) { this.left.value = 0; return; }
+        this.deadline = performance.now() + ms;
+        const tick = () => {
+            const left = Math.max(0, this.deadline - performance.now());
+            this.left.value = left;
+            if (left <= 0) { this.stop(); this.onEnd(); }
+        };
+        tick();
+        this.timer = setInterval(tick, 200);
+    }
+
+    stop() {
+        if (this.timer) clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+
+/** A running clock from a start the server gave (milliseconds already gone). */
+export class Stopwatch {
+    constructor() {
+        this.shown = M.observable('0:00');
+        this.timer = null;
+    }
+
+    start(elapsedMs = 0) {
+        this.stop();
+        const origin = performance.now() - Math.max(0, elapsedMs);
+        const tick = () => { this.shown.value = fmtDuration(performance.now() - origin); };
+        tick();
+        this.timer = setInterval(tick, 500);
+    }
+
+    stop() {
+        if (this.timer) clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+
+const BOARD = `
+<div class="gm-board-head">
+  <h3 class="gm-board-title" data-bind-text="title.value"></h3>
+  <div class="gm-periods" role="group" aria-label="Period" data-each="periods key=key">
+    <button type="button" class="gm-period" data-bind-class="$root.period.value === key && 'is-on'"
+      data-bind-aria-pressed="$root.period.value === key ? 'true' : 'false'" data-on-click="$root.pick($data)" data-bind-text="label"></button>
+  </div>
+</div>
+<p class="gm-muted" hidden data-bind-hidden="!loading.value">Loading…</p>
+<p class="gm-muted" hidden data-bind-hidden="loading.value || rows.value.length">No scores yet. Be the first!</p>
+<ol class="gm-board-list" hidden data-bind-hidden="!rows.value.length" data-each="rows.value key=id">
+  <li class="gm-board-row" data-bind-class="mine && 'is-mine'">
+    <span class="gm-rank" data-bind-text="place"></span>
+    <span class="gm-name" data-bind-text="name"></span>
+    <span class="gm-score" data-if="showScore" data-bind-text="scoreText"></span>
+    <span class="gm-time" data-bind-text="timeText"></span>
+  </li>
+</ol>`;
+
+/**
+ * A live leaderboard on `el`, fetched from `url` (?period=&limit=).
+ *
+ * @param {HTMLElement} el
+ * @param {{url: string, period?: string, limit?: number, showScore?: boolean, title?: string}} opts
+ * @returns {{refresh: (mineId?: string) => Promise<void>, dispose: () => void}}
+ */
+export function mountLeaderboard(el, {url, period = 'all', limit = 10, showScore = true, title = 'Leaderboard'}) {
+    if (!M) return {refresh: async () => {}, dispose() {}};
+    addStyles();
+    el.classList.add('gm-board');
+    el.innerHTML = BOARD;
+    const state = {
+        title: M.observable(title),
+        period: M.observable(PERIODS.some(p => p.key === period) ? period : 'all'),
+        periods: PERIODS,
+        rows: M.observable([]),
+        loading: M.observable(true),
+        pick: (p) => { state.period.value = p.key; refresh(); }
+    };
+    let mine = '';
+    async function refresh(mineId) {
+        if (mineId) mine = mineId;
+        state.loading.value = !state.rows.peek().length;
+        try {
+            const res = await request(`${url}?period=${encodeURIComponent(state.period.peek())}&limit=${encodeURIComponent(limit)}`);
+            state.rows.value = (res.rows || []).map(r => ({
+                id: r.id, name: r.name, mine: r.id === mine, showScore,
+                place: ordinal(r.rank), scoreText: `${r.score}`, timeText: fmtDuration(r.timeMs)
+            }));
+        } catch {
+            state.rows.value = [];
+        } finally {
+            state.loading.value = false;
+        }
+    }
+    const handle = M.applyBindings(state, el);
+    refresh();
+    return {refresh, dispose: () => handle.dispose()};
+}
+
+/** Every `[data-<kind>-board]` placeholder on the page (the leaderboard shortcodes). */
+export function mountBoards(attr, urlFor, {showScore = true} = {}) {
+    for (const el of document.querySelectorAll(`[${attr}]`)) {
+        if (el.dataset.gmMounted) continue;
+        el.dataset.gmMounted = '1';
+        const cfg = configOf(el, attr);
+        if (!cfg?.id) continue;
+        mountLeaderboard(el, {url: urlFor(cfg.id), period: cfg.period, limit: cfg.limit, showScore, title: cfg.title || 'Leaderboard'});
+    }
+}

package/plugins/crossword/admin/css/index.css

@@ -0,0 +1 @@
+.cwa-words{display:flex;flex-direction:column;gap:.4rem}.cwa-word{display:grid;grid-template-columns:1.6rem minmax(7rem,12rem) 3.5rem minmax(0,1fr) auto;gap:.4rem;align-items:center}.cwa-n{color:var(--dm-text-muted);font-size:var(--dm-text-sm);text-align:right}.cwa-answer{text-transform:uppercase;font-family:var(--dm-font-mono, monospace);letter-spacing:.04em}.cwa-enum{color:var(--dm-text-muted);font-size:var(--dm-text-xs);white-space:nowrap}@media(max-width:700px){.cwa-word{grid-template-columns:1.4rem 1fr auto}.cwa-enum{display:none}.cwa-clue{grid-column:2 / 4}}.cwa-side{position:sticky;top:.5rem}.cwa-preview{overflow:auto;max-height:70vh}.cwa-grid{display:grid;gap:0;width:max-content;border:2px solid var(--dm-text)}.cwa-cell{position:relative;width:1.7rem;height:1.7rem;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--dm-background, #fff);color:var(--dm-text);border:1px solid color-mix(in srgb,var(--dm-text) 35%,transparent);box-sizing:border-box}.cwa-cell.is-block{background:var(--dm-text);border-color:var(--dm-text)}.cwa-num{position:absolute;top:1px;left:2px;font-size:.5rem;font-weight:600;line-height:1;color:var(--dm-text-muted)}.cwa-unplaced{margin:0;padding:.5rem .75rem;border-radius:6px;font-size:var(--dm-text-sm);background:color-mix(in srgb,var(--dm-warning) 15%,transparent);color:color-mix(in srgb,var(--dm-warning) 55%,var(--dm-text))}

package/plugins/crossword/admin/templates/crossword.html

@@ -0,0 +1 @@
+<div class="gma cwa" data-crossword-admin></div>

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

@@ -0,0 +1,317 @@
+/**
+ * Crossword - the Tool. One view, three 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/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.
+ */
+
+import {bannerTrail, copyText, errText, esc, field, fmtDuration, fromLocalInput, h, icon, loadKit, playsScreen, refreshBadge, request, toggle, toLocalInput} 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 STATUS_LABEL = {draft: 'Draft', open: 'Open', closed: 'Closed'};
+const STATUS_TONE = {draft: '', open: 'is-success', closed: 'is-warning'};
+
+let lifetime = null;
+let leaveGuard = null;
+
+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}" /]`;
+
+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();
+        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' && id) {
+            let title = 'Plays';
+            try { title = (await request('GET', `${API}/puzzles/${encodeURIComponent(id)}`)).title; } catch { /* the screen says so */ }
+            bannerTrail(container, [{text: 'Crossword', href: SIDEBAR}, {text: `${title}: plays`}]);
+            kit.addBannerAction($container, {id: 'crossword-edit', icon: 'edit', title: 'Edit this crossword', onClick: () => { location.hash = `#/plugins/crossword/edit/${encodeURIComponent(id)}`; }});
+            return playsScreen(root, {api: API, gameId: id, title, order: 'time', back: SIDEBAR, base: '/puzzles', badge});
+        }
+        if (screen === 'new' || (screen === 'edit' && id)) return editor(root, container, $container, kit, screen === 'new' ? '' : id);
+        return list(root, container, $container, kit);
+    }
+};
+
+// ---- The list ----------------------------------------------------------------------
+
+async function list(root, container, $container, kit) {
+    bannerTrail(container, [{text: 'Crossword'}]);
+    kit.addBannerAction($container, {id: 'crossword-new', icon: 'plus', title: 'New crossword', onClick: () => { location.hash = '#/plugins/crossword/new'; }});
+    root.innerHTML = '';
+    const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
+    root.append(slot);
+    let puzzles;
+    try {
+        puzzles = (await kit.whileLoading(slot, request('GET', `${API}/puzzles`), kit.SHAPES.rows)).puzzles || [];
+    } catch (err) {
+        root.innerHTML = '';
+        root.append(h('p', {className: 'gma-error', text: `Crossword could not load: ${errText(err)}`}));
+        return;
+    }
+
+    const draw = () => {
+        root.innerHTML = '';
+        root.append(h('div', {className: 'gma-bar'},
+            h('a', {className: 'btn btn-sm btn-primary', href: '#/plugins/crossword/new'}, icon('plus'), ' New crossword'),
+            h('span', {className: 'gma-spacer'}),
+            h('span', {className: 'gma-note', text: 'Put a crossword on any page with its shortcode.'})));
+        if (!puzzles.length) {
+            root.append(h('div', {className: 'gma-empty'}, icon('grid', 30),
+                h('p', {}, h('strong', {text: 'No crosswords yet.'}), h('br'), 'Type the answers and clues; the grid lays itself out.'),
+                h('a', {className: 'btn btn-primary', href: '#/plugins/crossword/new'}, 'Make a crossword')));
+            I.scan(root);
+            return;
+        }
+        root.append(h('div', {className: 'gma-list'}, puzzles.map(p => h('div', {className: 'gma-row'},
+            h('div', {className: 'gma-row-main'},
+                h('div', {}, h('a', {href: `#/plugins/crossword/edit/${encodeURIComponent(p.id)}`, text: p.title}),
+                    h('span', {className: `gma-chip ${STATUS_TONE[p.status] || ''}`, text: STATUS_LABEL[p.status] || p.status})),
+                h('small', {text: [`${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(' · ')})),
+            h('div', {className: 'gma-row-actions'},
+                h('a', {className: 'btn btn-sm btn-ghost', href: `#/plugins/crossword/edit/${encodeURIComponent(p.id)}`}, icon('edit'), ' Edit'),
+                h('a', {className: 'btn btn-sm btn-ghost', href: `#/plugins/crossword/plays/${encodeURIComponent(p.id)}`}, icon('award'), ' Plays'),
+                h('button', {type: 'button', className: 'btn btn-sm btn-ghost', title: 'Copy the shortcode', onClick: () => copyText(shortcodeOf(p.slug), 'Shortcode copied')}, icon('copy')),
+                h('button', {type: 'button', className: 'btn btn-sm btn-ghost', title: 'Make a copy', onClick: () => duplicate(p)}, icon('layers')),
+                h('button', {type: 'button', className: 'btn btn-sm btn-ghost gma-danger-text', title: 'Delete', onClick: () => remove(p)}, icon('trash')))))));
+        I.scan(root);
+    };
+
+    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 = (await request('GET', `${API}/puzzles`)).puzzles || [];
+            draw();
+        } 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 = puzzles.filter(x => x.id !== p.id);
+            draw();
+            badge();
+            E.toast(`${p.title} deleted.`, {type: 'success'});
+        } catch (err) { E.toast(errText(err), {type: 'error'}); }
+    }
+
+    draw();
+}
+
+// ---- 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: ''}]
+});
+
+async function editor(root, container, $container, kit, id) {
+    root.innerHTML = '';
+    let puzzle = blankPuzzle();
+    if (id) {
+        const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
+        root.append(slot);
+        try {
+            const got = await kit.whileLoading(slot, request('GET', `${API}/puzzles/${encodeURIComponent(id)}`), kit.SHAPES.rows);
+            const {layout, ...rest} = got;
+            puzzle = {...blankPuzzle(), ...rest};
+        } catch (err) {
+            root.innerHTML = '';
+            root.append(h('p', {className: 'gma-error', text: `That crossword could not load: ${errText(err)}`}), h('a', {href: SIDEBAR, text: 'Back to Crossword'}));
+            return;
+        }
+    }
+    bannerTrail(container, [{text: 'Crossword', href: SIDEBAR}, {text: id ? puzzle.title : 'New crossword'}]);
+    if (id) kit.addBannerAction($container, {id: 'crossword-plays', icon: 'award', title: 'Plays and leaderboard', onClick: () => { location.hash = `#/plugins/crossword/plays/${encodeURIComponent(id)}`; }});
+
+    const fields = (p) => {
+        const {id: _i, createdAt, updatedAt, unplaced, ...rest} = p;
+        return rest;
+    };
+    const snapshot = () => JSON.stringify(fields(puzzle));
+    let saved = snapshot();
+    const dirty = () => snapshot() !== saved;
+    leaveGuard = (e) => { if (dirty() && ROUTE.test(location.hash)) { e.preventDefault(); e.returnValue = ''; } };
+    window.addEventListener('beforeunload', leaveGuard);
+    lifetime.add(() => { window.removeEventListener('beforeunload', leaveGuard); leaveGuard = null; });
+
+    const dirtyNote = h('span', {className: 'is-dirty', hidden: true, text: 'Unsaved changes'});
+    const errorBox = h('p', {className: 'gma-error', hidden: true, role: 'alert'});
+    const touched = () => { dirtyNote.hidden = !dirty(); };
+
+    const input = (key, attrs = {}) => h('input', {className: 'form-input', value: puzzle[key] ?? '', ...attrs,
+        onInput: (e) => { puzzle[key] = attrs.type === 'number' ? Number(e.target.value) || 0 : e.target.value; touched(); }});
+    const status = h('select', {className: 'form-select', onChange: (e) => { puzzle.status = e.target.value; touched(); }},
+        Object.entries(STATUS_LABEL).map(([v, label]) => h('option', {value: v, text: label})));
+    status.value = puzzle.status;
+
+    const shortcode = h('code');
+    const showShortcode = () => { shortcode.textContent = puzzle.slug ? shortcodeOf(puzzle.slug) : 'Saved crosswords get a shortcode'; };
+    showShortcode();
+
+    const minutes = h('input', {className: 'form-input', type: 'number', min: 0, step: 1, value: puzzle.timeLimit ? Math.round(puzzle.timeLimit / 60) : 0,
+        onInput: (e) => { puzzle.timeLimit = Math.round((Number(e.target.value) || 0) * 60); touched(); }});
+    const intro = h('textarea', {className: 'form-input', rows: 3, onInput: (e) => { puzzle.intro = e.target.value; touched(); }}, puzzle.intro);
+
+    const details = h('section', {className: 'gma-card'},
+        h('h3', {className: 'gma-h', text: 'The crossword'}),
+        h('div', {className: 'gma-grid'},
+            field('Title', input('title', {maxlength: 120, placeholder: 'Friday teaser'})),
+            field('Short name', input('slug', {maxlength: 60, placeholder: 'made from the title'}), 'Used in the shortcode.'),
+            field('Status', status, 'Only an open crossword can be played.')),
+        field('Introduction', intro, 'Shown above the grid.'),
+        h('div', {className: 'gma-grid'},
+            field('Opens', h('input', {className: 'form-input', type: 'datetime-local', value: toLocalInput(puzzle.opensAt), onInput: (e) => { puzzle.opensAt = fromLocalInput(e.target.value); touched(); }}), 'Optional.'),
+            field('Closes', h('input', {className: 'form-input', type: 'datetime-local', value: toLocalInput(puzzle.closesAt), onInput: (e) => { puzzle.closesAt = fromLocalInput(e.target.value); touched(); }}), 'Optional.')),
+        h('div', {className: 'gma-shortcode'}, h('span', {className: 'gma-muted', text: 'Shortcode:'}), shortcode,
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost', onClick: () => puzzle.slug && copyText(shortcodeOf(puzzle.slug), 'Shortcode copied')}, icon('copy'), ' Copy')));
+
+    const rules = h('section', {className: 'gma-card'},
+        h('h3', {className: 'gma-h', text: 'Rules and leaderboard'}),
+        h('div', {className: 'gma-grid'},
+            field('Time limit (minutes)', minutes, '0 = no limit. Out of time means off the leaderboard.'),
+            field('Seconds added per check', input('checkPenalty', {type: 'number', min: 0, max: 600})),
+            field('Seconds added for a wrong full grid', input('wrongPenalty', {type: 'number', min: 0, max: 600}), 'Stops people guessing their way to the top.'),
+            field('Goes each (per name)', input('attemptsPerName', {type: 'number', min: 0, max: 100}), '0 = as many as they like.'),
+            field('Leaderboard size', input('leaderboardSize', {type: 'number', min: 3, max: 100}))),
+        h('div', {className: 'gma-grid'},
+            toggle('Let players check their letters', puzzle.checks, (v) => { puzzle.checks = v; touched(); }, 'Shows which squares are wrong, at a cost in time.'),
+            toggle('Show a leaderboard', puzzle.leaderboard, (v) => { puzzle.leaderboard = v; touched(); }, 'Fastest time wins, penalties included.')));
+
+    // Words and the live grid.
+    const wordList = h('div', {className: 'cwa-words'});
+    const wordCount = h('span', {className: 'gma-muted'});
+    const preview = h('div', {className: 'cwa-preview'});
+    const previewNote = h('p', {className: 'gma-note'});
+    const unplacedNote = h('p', {className: 'cwa-unplaced', hidden: true, role: 'status'});
+
+    function drawPreview() {
+        const ready = puzzle.words.filter(w => cleanAnswer(w.answer).letters.length >= 2 && w.clue.trim());
+        const layout = generate(ready, {seed: puzzle.seed});
+        preview.innerHTML = '';
+        if (!layout.entries.length) {
+            preview.append(h('p', {className: 'gma-muted', text: 'Type at least two answers with clues and the grid appears here.'}));
+            previewNote.textContent = '';
+        } else {
+            const grid = solutionGrid(layout);
+            const numbers = new Map(layout.entries.map(e => [`${e.row},${e.col}`, e.number]));
+            const table = h('div', {className: 'cwa-grid', style: `grid-template-columns: repeat(${layout.width}, 1.7rem)`});
+            grid.forEach((row, r) => row.forEach((ch, c) => table.append(h('div', {className: ch ? 'cwa-cell' : 'cwa-cell is-block'},
+                numbers.has(`${r},${c}`) ? h('span', {className: 'cwa-num', text: numbers.get(`${r},${c}`)}) : null, ch || ''))));
+            preview.append(table);
+            previewNote.textContent = `${layout.width} × ${layout.height}, ${layout.entries.length} answers. Layout ${puzzle.seed}.`;
+        }
+        unplacedNote.hidden = !layout.unplaced.length;
+        unplacedNote.textContent = 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 shown = puzzle.words.filter(w => w.answer || w.clue).length;
+        wordCount.textContent = `${shown} of ${MAX_WORDS}`;
+    }
+    const redraw = _.debounce ? _.debounce(drawPreview, 250) : drawPreview;
+
+    function wordRow(w, i) {
+        const enumeration = h('span', {className: 'cwa-enum'});
+        const showEnum = () => { const c = cleanAnswer(w.answer); enumeration.textContent = c.letters ? `(${c.enumeration})` : ''; };
+        showEnum();
+        return h('div', {className: 'cwa-word'},
+            h('span', {className: 'cwa-n', text: `${i + 1}`}),
+            h('input', {className: 'form-input cwa-answer', value: w.answer, maxlength: 40, placeholder: 'Answer', 'aria-label': `Answer ${i + 1}`,
+                onInput: (e) => { w.answer = e.target.value; showEnum(); touched(); redraw(); }}),
+            enumeration,
+            h('input', {className: 'form-input cwa-clue', value: w.clue, maxlength: 300, placeholder: 'Clue', 'aria-label': `Clue ${i + 1}`,
+                onInput: (e) => { w.clue = e.target.value; touched(); redraw(); },
+                onKeydown: (e) => { if (e.key === 'Enter' && i === puzzle.words.length - 1) { e.preventDefault(); addWord(); } }}),
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost', title: 'Remove', onClick: () => { puzzle.words.splice(i, 1); drawWords(); touched(); }}, icon('x')));
+    }
+
+    function drawWords() {
+        wordList.innerHTML = '';
+        puzzle.words.forEach((w, i) => wordList.append(wordRow(w, i)));
+        I.scan(wordList);
+        drawPreview();
+    }
+
+    function addWord() {
+        if (puzzle.words.length >= MAX_WORDS) return;
+        puzzle.words.push({answer: '', clue: ''});
+        drawWords();
+        touched();
+        wordList.lastElementChild?.querySelector('.cwa-answer')?.focus();
+    }
+
+    const words = h('section', {className: 'gma-card'},
+        h('div', {className: 'gma-bar'}, h('h3', {className: 'gma-h', text: 'Answers and clues'}), wordCount),
+        h('p', {className: 'gma-note', text: '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.'}),
+        wordList,
+        h('div', {className: 'gma-bar'}, h('button', {type: 'button', className: 'btn btn-sm btn-outline', onClick: addWord}, icon('plus'), ' Add an answer')));
+
+    const grid = h('section', {className: 'gma-card cwa-side'},
+        h('div', {className: 'gma-bar'}, h('h3', {className: 'gma-h', text: 'The grid'}), h('span', {className: 'gma-spacer'}),
+            h('button', {type: 'button', className: 'btn btn-sm btn-outline', title: 'Try a different arrangement of the same words',
+                onClick: () => { puzzle.seed = (puzzle.seed % 2147483646) + 1; touched(); drawPreview(); }}, icon('refresh-cw'), ' Another layout')),
+        preview, previewNote, unplacedNote,
+        h('p', {className: 'gma-note', text: 'Players see the shape and the numbers, never the letters.'}));
+
+    const saveBtn = h('button', {type: 'button', className: 'btn btn-primary', onClick: () => save()}, icon('check'), ' Save');
+    const bar = h('div', {className: 'gma-save'}, saveBtn,
+        h('a', {className: 'btn btn-ghost', href: SIDEBAR, text: 'Back to the list'}), dirtyNote, h('span', {className: 'gma-spacer'}), errorBox);
+
+    async function save() {
+        errorBox.hidden = true;
+        saveBtn.disabled = true;
+        try {
+            const body = fields(puzzle);
+            const out = id ? await request('PUT', `${API}/puzzles/${encodeURIComponent(id)}`, body) : await request('POST', `${API}/puzzles`, body);
+            const {layout, unplaced, ...rest} = out;
+            puzzle = {...blankPuzzle(), ...rest};
+            if (!puzzle.words.length) puzzle.words.push({answer: '', clue: ''});
+            saved = snapshot();
+            touched();
+            showShortcode();
+            E.toast(unplaced?.length ? `${out.title} saved. ${unplaced.length} answer${unplaced.length === 1 ? '' : 's'} did not fit the grid.` : `${out.title} saved.`,
+                {type: unplaced?.length ? 'warning' : 'success'});
+            if (!id) { location.hash = `#/plugins/crossword/edit/${encodeURIComponent(out.id)}`; return; }
+            bannerTrail(container, [{text: 'Crossword', href: SIDEBAR}, {text: out.title}]);
+            drawWords();
+        } catch (err) {
+            errorBox.textContent = errText(err);
+            errorBox.hidden = false;
+        } finally {
+            saveBtn.disabled = false;
+        }
+    }
+
+    root.innerHTML = '';
+    root.append(details, h('div', {className: 'gma-two'}, words, grid), rules, bar);
+    drawWords();
+    I.scan(root);
+    if (!id) details.querySelector('input')?.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/inject/body.html

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