domma-cms 1.8.32 → 1.8.34

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

@@ -1,27 +1,32 @@
 /**
- * Crossword - the Tool. One view, three screens by address:
+ * 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.
+ * what is saved. Every screen is domma-reactive (observables + one
+ * M.applyBindings, through the admin kit's mountScreen).
  */
 
-import {bannerTrail, copyText, errText, esc, field, fmtDuration, fromLocalInput, h, icon, loadKit, playsScreen, refreshBadge, request, toggle, toLocalInput} from '/plugins/_lib/admin/games/kit.js';
+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]+))?(?:\/([^/?#]+))?/);
@@ -30,6 +35,7 @@ function where() {
 
 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',
@@ -39,74 +45,93 @@ export const crosswordView = {
         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' && 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 === '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);
-        return list(root, container, $container, kit);
+        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 ----------------------------------------------------------------------
 
-async function list(root, container, $container, kit) {
+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'; }});
-    root.innerHTML = '';
-    const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
-    root.append(slot);
-    let puzzles;
+    let got;
     try {
-        puzzles = (await kit.whileLoading(slot, request('GET', `${API}/puzzles`), kit.SHAPES.rows)).puzzles || [];
+        got = await loading(root, request('GET', `${API}/puzzles`), kit);
     } catch (err) {
-        root.innerHTML = '';
-        root.append(h('p', {className: 'gma-error', text: `Crossword could not load: ${errText(err)}`}));
-        return;
+        if (!alive()) return;
+        return failed(root, `Crossword could not load: ${errText(err)}`);
     }
 
-    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);
-    };
+    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 = (await request('GET', `${API}/puzzles`)).puzzles || [];
-            draw();
+            puzzles.value = (await request('GET', `${API}/puzzles`)).puzzles || [];
         } catch (err) { E.toast(errText(err), {type: 'error'}); }
     }
 
@@ -114,14 +139,33 @@ async function list(root, container, $container, kit) {
         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();
+            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'}); }
     }
 
-    draw();
+    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 --------------------------------------------------------------------
@@ -131,187 +175,275 @@ const blankPuzzle = () => ({
     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})` : ''; })};
+}
 
-async function editor(root, container, $container, kit, id) {
-    root.innerHTML = '';
-    let puzzle = blankPuzzle();
+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) {
-        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};
+            const {layout, ...rest} = await loading(root, request('GET', `${API}/puzzles/${encodeURIComponent(id)}`), kit);
+            start = {...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;
+            if (!alive()) return;
+            return failed(root, `That crossword could not load: ${errText(err)}`, {href: SIDEBAR, text: 'Back to Crossword'});
         }
     }
-    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)}`; }});
+    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 fields = (p) => {
-        const {id: _i, createdAt, updatedAt, unplaced, ...rest} = p;
-        return rest;
+    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 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'});
+    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 = puzzle.words.filter(w => cleanAnswer(w.answer).letters.length >= 2 && w.clue.trim());
-        const layout = generate(ready, {seed: puzzle.seed});
-        preview.innerHTML = '';
+        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) {
-            preview.append(h('p', {className: 'gma-muted', text: 'Type at least two answers with clues and the grid appears here.'}));
-            previewNote.textContent = '';
+            cells.value = [];
+            previewNote.value = '';
         } 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}.`;
+            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()}.`;
         }
-        unplacedNote.hidden = !layout.unplaced.length;
-        unplacedNote.textContent = layout.unplaced.length
+        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 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();
     }
+    const redraw = typeof _ !== 'undefined' && _.debounce ? _.debounce(drawPreview, 250) : drawPreview;
 
-    function addWord() {
-        if (puzzle.words.length >= MAX_WORDS) return;
-        puzzle.words.push({answer: '', clue: ''});
-        drawWords();
-        touched();
-        wordList.lastElementChild?.querySelector('.cwa-answer')?.focus();
+    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++; };
 
-    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);
+    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() {
-        errorBox.hidden = true;
-        saveBtn.disabled = true;
+        if (saving.peek()) return '';
+        problem.value = '';
+        saving.value = 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();
+            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();
-            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();
+            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) {
-            errorBox.textContent = errText(err);
-            errorBox.hidden = false;
+            problem.value = errText(err);
+            return '';
         } finally {
-            saveBtn.disabled = false;
+            saving.value = 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();
+    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();
 }