domma-cms 1.8.32 → 1.8.33

package/plugins/_lib/admin/games/kit.js

@@ -1,8 +1,14 @@
 /**
  * Games admin - what the Quiz and Crossword screens share: the admin's helpers
  * (loaded at run time; a plugin never imports admin/ statically - the updater
- * replaces it), API calls, a small element builder, and the Plays screen
- * (every go at one game, its leaderboard, hide / remove / reset).
+ * replaces it), API calls, mounting a domma-reactive screen, list rows with a
+ * context menu, drag to reorder, the Plays screen (every go at one game, its
+ * leaderboard, hide / remove / reset) and the Test screen (the real player,
+ * playing a test go that never reaches a board).
+ *
+ * Every screen is domma-reactive: a template string (in the JS - a templateUrl
+ * goes through _.render, which eats the {{ }} of a data-each row), observables,
+ * and one M.applyBindings, disposed when the view goes.
  *
  * Served from /plugins/_lib/admin/games/kit.js; its stylesheet is games.css
  * beside it, listed in each Tool's manifest `admin.css`.
@@ -16,17 +22,23 @@ import {fmtDuration, ordinal} from '/plugins/_lib/public/games/format.js';
 export {fmtDateTime, fmtDuration, ordinal};
 
 let kit = null;
-/** tool-kit, plugin-chrome and loading, once, with stand-ins for an older admin. */
+/** tool-kit, plugin-chrome, loading and help popovers, once, with stand-ins for an older admin. */
 export function loadKit() {
     kit ??= Promise.all([
         import('/admin/js/lib/tool-kit.js').catch(() => ({})),
         import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
-        import('/admin/js/lib/loading.js').catch(() => ({}))
-    ]).then(([tk, chrome, loading]) => ({
+        import('/admin/js/lib/loading.js').catch(() => ({})),
+        import('/admin/js/lib/help-popover.js').catch(() => ({}))
+    ]).then(([tk, chrome, loading, help]) => ({
         viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
+        openMenuAt: tk.openMenuAt || ((el) => {
+            const r = el.getBoundingClientRect();
+            el.dispatchEvent(new MouseEvent('contextmenu', {bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window}));
+        }),
         addBannerAction: chrome.addBannerAction || (() => null),
         whileLoading: loading.whileLoading || ((slot, p) => (typeof p === 'function' ? p() : p)),
-        SHAPES: loading.SHAPES || {}
+        SHAPES: loading.SHAPES || {},
+        helpPopovers: help.helpPopovers || (() => () => {})
     }));
     return kit;
 }
@@ -48,53 +60,103 @@ export function request(method, path, body) {
 
 export const errText = (err) => err?.body?.error || err?.message || String(err);
 
-/** E.confirm and toasts render HTML: user text goes in escaped. */
+/** E.confirm, toasts and templates render HTML: user text goes in escaped. */
 export const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
+/** An icon for a template: drawn by I.scan. Never put a data-bind-* on it (I.scan swaps the span for an svg). */
+export const ico = (name, size = 14) => `<span data-icon="${name}" data-icon-size="${size}" aria-hidden="true"></span>`;
+
 /**
- * A DOM element. `props`: className, text, html (static markup only - never
- * user data), dataset, on<Event> handlers, anything else as an attribute
- * (false/null leave it off). Children: elements, strings (as text) or falsy.
+ * Put `html` in `root` and bind `model` to it: the one M.applyBindings of a
+ * screen. `before(el)` runs first (take element refs and wire help popovers
+ * there - data-if lifts elements out). Icons are drawn after binding, and again
+ * whenever `rescan` (observables) change, so rows added later get theirs.
+ *
+ * @returns {HTMLElement} the screen's element; everything is disposed through `lifetime`
  */
-export function h(tag, props = {}, ...children) {
-    const el = document.createElement(tag);
-    for (const [k, v] of Object.entries(props || {})) {
-        if (v === false || v == null) continue;
-        if (k === 'className') el.className = v;
-        else if (k === 'text') el.textContent = v;
-        else if (k === 'html') el.innerHTML = v;
-        else if (k === 'dataset') Object.assign(el.dataset, v);
-        else if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2).toLowerCase(), v);
-        else if (k === 'value') el.value = v;
-        else if (k === 'checked') el.checked = Boolean(v);
-        else el.setAttribute(k, v === true ? '' : String(v));
-    }
-    for (const c of children.flat()) {
-        if (c == null || c === false) continue;
-        el.append(c instanceof Node ? c : document.createTextNode(String(c)));
-    }
+export function mountScreen(root, {html, model, lifetime, k, className = '', before = null, rescan = []}) {
+    root.innerHTML = '';
+    const el = document.createElement('div');
+    el.className = `gma-screen ${className}`.trim();
+    el.innerHTML = html;
+    root.append(el);
+    const disposeHelp = k?.helpPopovers ? k.helpPopovers(el, {position: 'bottom'}) : () => {};
+    before?.(el);
+    const bindings = M.applyBindings(model, el, {methods: model});
+    const scan = () => { if (el.isConnected && typeof I !== 'undefined') I.scan(el); };
+    scan();
+    const stops = rescan.map(obs => M.effect(() => { obs.value; queueMicrotask(scan); }));
+    lifetime?.add(() => { stops.forEach(s => s?.()); bindings?.dispose?.(); disposeHelp?.(); });
     return el;
 }
 
-/** An icon span, drawn by I.scan on the container afterwards. */
-export const icon = (name, size = 14) => h('span', {'data-icon': name, 'data-icon-size': size, 'aria-hidden': 'true'});
+/**
+ * Rows with one menu and three ways in: right-click, the ⋮ button, Shift+F10.
+ * A click (or Enter) on the row does `main`. `items(id)` lists the menu.
+ */
+export function wireRows(list, {items, main, k, lifetime, match = '.gma-row'}) {
+    const menu = typeof E !== 'undefined' && E.contextMenu
+        ? E.contextMenu(list, {cursor: 'glyph', match, inherit: false, density: 'compact', items: (row) => items(row.dataset.id, row)})
+        : null;
+    const onClick = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.target.closest('.gma-kebab')) { e.stopPropagation(); k.openMenuAt(row); return; }
+        if (e.target.closest('a, button, input, [data-stop]')) return;
+        main(row.dataset.id, row);
+    };
+    const onKey = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); k.openMenuAt(row); }
+        else if (e.key === 'Enter' && e.target === row) { e.preventDefault(); main(row.dataset.id, row); }
+        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && e.target === row) {
+            e.preventDefault();
+            const rows = [...list.querySelectorAll(match)];
+            rows[rows.indexOf(row) + (e.key === 'ArrowDown' ? 1 : -1)]?.focus();
+        }
+    };
+    list.addEventListener('click', onClick);
+    list.addEventListener('keydown', onKey);
+    lifetime?.add(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); menu?.destroy?.(); });
+}
 
-/** A labelled field: label, control, optional hint. */
-export function field(label, control, hint = '', {id} = {}) {
-    const fid = id || control.id || `gmf-${Math.random().toString(36).slice(2, 8)}`;
-    control.id = fid;
-    return h('div', {className: 'form-group gma-field'},
-        h('label', {className: 'form-label', for: fid, text: label}),
-        control,
-        hint ? h('p', {className: 'form-hint', text: hint}) : null);
+/**
+ * Drag to reorder the rows of a data-each list (by their grip). E.sortable in
+ * live mode moves the row element itself, but a data-each row sits between a
+ * pair of comment anchors the reconciler places it by - so the row is put back
+ * where it was first, and the move is made in the data (`onMove(from, to)`),
+ * which redraws the list.
+ */
+export function sortableRows(list, {items, handle, key = 'data-id', onMove, lifetime}) {
+    if (typeof E === 'undefined' || typeof E.sortable !== 'function') return;
+    let at = null;
+    const restore = (item) => {
+        if (!at) return;
+        at.parent.insertBefore(item, at.next?.parentNode === at.parent ? at.next : null);
+        at = null;
+    };
+    const drag = E.sortable(list, {
+        items, handle, key,
+        // Alt+arrows would move the row without onStart, so it could not be put back by its anchors.
+        keyboard: false,
+        onStart: ({item}) => { at = {parent: item.parentNode, next: item.nextSibling}; },
+        onEnd: ({item}) => restore(item),
+        onSort: ({item, from, to}) => { restore(item); if (from !== to) onMove(from, to); }
+    });
+    lifetime?.add(() => drag?.destroy?.());
 }
 
-/** A switch (checkbox) with its words beside it. */
-export function toggle(label, checked, onChange, hint = '') {
-    const input = h('input', {type: 'checkbox', checked, onChange: (e) => onChange(e.target.checked)});
-    return h('div', {className: 'form-group gma-field'},
-        h('label', {className: 'gma-toggle'}, input, h('span', {text: label})),
-        hint ? h('p', {className: 'form-hint', text: hint}) : null);
+/** Ctrl+S (Cmd+S) runs `save` while the screen is up. Captured: app.js has a global Ctrl+S of its own. */
+export function saveKey(save, here, lifetime) {
+    const onKey = (e) => {
+        if (!(e.ctrlKey || e.metaKey) || e.key !== 's' || !here()) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        save();
+    };
+    document.addEventListener('keydown', onKey, true);
+    lifetime?.add(() => document.removeEventListener('keydown', onKey, true));
 }
 
 export async function copyText(text, done = 'Copied') {
@@ -112,121 +174,217 @@ export function refreshBadge(url) {
     try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url}})); } catch { /* no sidebar */ }
 }
 
-/** "Quiz › Capitals" in the plugin banner. */
+/** "Quiz › Capitals" in the plugin banner (the chrome's, outside the screen's bindings). */
 export function bannerTrail(container, parts) {
     const name = container.querySelector('.dm-plugin-banner-name');
     if (!name) return;
-    name.textContent = '';
-    parts.forEach((p, i) => {
-        if (i) name.append(h('span', {className: 'dm-plugin-banner-sep', 'aria-hidden': 'true', text: '›'}));
-        name.append(i < parts.length - 1 ? h('a', {className: 'dm-plugin-banner-parent', href: p.href || '#', text: p.text}) : document.createTextNode(p.text));
-    });
+    name.innerHTML = parts.map((p, i) => (i ? '<span class="dm-plugin-banner-sep" aria-hidden="true">›</span>' : '')
+        + (i < parts.length - 1 ? `<a class="dm-plugin-banner-parent" href="${esc(p.href || '#')}">${esc(p.text)}</a>` : esc(p.text))).join('');
+}
+
+/** A loading note while `promise` runs (the admin's skeleton where it has one). */
+export async function loading(root, promise, k, shape = 'rows') {
+    root.innerHTML = '<div class="gma-note dm-loading-slot">Loading…</div>';
+    return k.whileLoading(root.firstElementChild, promise, k.SHAPES[shape]);
+}
+
+/** A screen that could not load: the reason, and the way back. */
+export function failed(root, text, back = null) {
+    root.innerHTML = `<p class="gma-error">${esc(text)}</p>${back ? `<p><a href="${esc(back.href)}">${esc(back.text)}</a></p>` : ''}`;
 }
 
+// ---- Plays ---------------------------------------------------------------------------
+
 const STATUS_LABEL = {playing: 'Playing', finished: 'Finished', abandoned: 'Left unfinished', timeout: 'Out of time'};
 
+const PLAYS_HTML = `
+<div class="gma-bar">
+  <a class="btn btn-sm btn-ghost" data-bind-href="back">${ico('arrow-left')} All</a>
+  <a class="btn btn-sm btn-ghost" data-bind-href="testHref" hidden data-bind-hidden="!testHref">${ico('play')} Test it</a>
+  <span class="gma-spacer"></span>
+  <button type="button" class="btn btn-sm btn-outline gma-danger-text" hidden data-bind-hidden="!canManage || !rows.value.length"
+    data-on-click="reset">${ico('refresh-cw')} Reset the leaderboard…</button>
+</div>
+<div class="gma-stats">
+  <div class="stat-card gma-stat"><div class="stat-value" data-bind-text="stats.value.plays"></div><div class="stat-label">Plays</div></div>
+  <div class="stat-card gma-stat"><div class="stat-value" data-bind-text="stats.value.finished"></div><div class="stat-label">Finished</div></div>
+  <div class="stat-card gma-stat" hidden data-bind-hidden="!showScore"><div class="stat-value" data-bind-text="stats.value.best"></div><div class="stat-label">Best score</div></div>
+  <div class="stat-card gma-stat"><div class="stat-value" data-bind-text="stats.value.fastest"></div><div class="stat-label">Fastest</div></div>
+</div>
+<div class="gma-two">
+  <section class="gma-card">
+    <h3 class="gma-h">Every play <span data-help-title="Every play" data-help="Every go anyone has had, newest first. Hide takes a play off the leaderboard without deleting it (a rude name, a known cheat); Show puts it back. Your own test goes are never listed or counted."></span></h3>
+    <p class="gma-muted" hidden data-bind-hidden="rows.value.length">No plays yet. Once people play, every go shows here.</p>
+    <div class="gma-table-wrap" hidden data-bind-hidden="!rows.value.length">
+      <table class="gma-table">
+        <thead><tr><th>Name</th><th>State</th><th class="gma-num" hidden data-bind-hidden="!showScore">Score</th><th class="gma-num">Time</th><th>Started</th><th hidden data-bind-hidden="!canManage"></th></tr></thead>
+        <tbody data-part="rows" data-each="rows.value key=id"></tbody>
+      </table>
+    </div>
+  </section>
+  <section class="gma-card">
+    <h3 class="gma-h">Leaderboard <span class="gma-muted">(all time, best go per name)</span></h3>
+    <p class="gma-muted" hidden data-bind-hidden="board.value.length">Nobody has finished yet.</p>
+    <ol class="gma-board" data-each="board.value key=id"></ol>
+  </section>
+</div>`;
+
+const PLAY_ROW = `
+<tr data-bind-class="hidden && 'is-hidden'">
+  <td><strong data-bind-text="name"></strong><span class="gma-chip" hidden data-bind-hidden="!hidden">Hidden</span></td>
+  <td data-bind-text="state"></td>
+  <td class="gma-num" hidden data-bind-hidden="!$root.showScore" data-bind-text="scoreText"></td>
+  <td class="gma-num" data-bind-text="timeText"></td>
+  <td data-bind-text="started"></td>
+  <td class="gma-actions" hidden data-bind-hidden="!$root.canManage">
+    <button type="button" class="btn btn-xs btn-ghost" data-bind-title="hidden ? 'Show on the leaderboard' : 'Hide from the leaderboard'"
+      data-on-click="$root.hide($data)"><span data-bind-text="hidden ? 'Show' : 'Hide'"></span></button>
+    <button type="button" class="btn btn-xs btn-ghost gma-quiet" title="Delete this play" aria-label="Delete this play"
+      data-on-click="$root.remove($data)">${ico('x')}</button>
+  </td>
+</tr>`;
+
+const BOARD_ROW = `
+<li><span class="gma-rank" data-bind-text="place"></span><span class="gma-name" data-bind-text="name"></span>
+  <strong hidden data-bind-hidden="!$root.showScore" data-bind-text="scoreText"></strong><span class="gma-muted" data-bind-text="timeText"></span></li>`;
+
 /**
  * The Plays screen for one game.
  *
  * @param {HTMLElement} root
- * @param {{api: string, gameId: string, title: string, order: 'score'|'time', canManage: boolean, back: string, refreshBadge?: () => void}} opts
+ * @param {{api: string, gameId: string, title: string, order: 'score'|'time', canManage?: boolean, back: string,
+ *   base?: string, badge?: () => void, lifetime: object, testHref?: string, alive?: () => boolean}} opts
+ *   `alive` says the admin is still on this screen (checked after the load).
  *   `api` is the Tool's base under /api ('/plugins/quiz'), `back` the list's address.
  */
-export async function playsScreen(root, {api, gameId, title, order, canManage = true, back, base = '/quizzes', badge = () => {}}) {
+export async function playsScreen(root, {api, gameId, title, order, canManage = true, back, base = '/quizzes', badge = () => {}, lifetime, testHref = '', alive = () => true}) {
     const k = await loadKit();
-    root.innerHTML = '';
-    const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
-    root.append(slot);
+    const url = `${api}${base}/${encodeURIComponent(gameId)}/plays`;
     let data;
     try {
-        data = await k.whileLoading(slot, request('GET', `${api}${base}/${encodeURIComponent(gameId)}/plays`), k.SHAPES.table);
+        data = await loading(root, request('GET', url), k, 'table');
     } catch (err) {
-        root.innerHTML = '';
-        root.append(h('p', {className: 'gma-error', text: `The plays could not load: ${errText(err)}`}));
+        if (alive()) failed(root, `The plays could not load: ${errText(err)}`, {href: back, text: 'Back'});
         return;
     }
-    root.innerHTML = '';
+    if (!alive()) return;
 
     const showScore = order === 'score';
+    const plays = M.observable(data.plays);
+    const boardRows = M.observable(data.board);
+    const rows = M.observable([]);
+    const board = M.observable([]);
+    const stats = M.observable({});
     const draw = () => {
-        root.innerHTML = '';
-        const finished = data.plays.filter(p => p.status === 'finished');
-        const bar = h('div', {className: 'gma-bar'},
-            h('a', {className: 'btn btn-sm btn-ghost', href: back}, icon('arrow-left'), ' All'),
-            h('span', {className: 'gma-spacer'}),
-            canManage && data.plays.length ? h('button', {type: 'button', className: 'btn btn-sm btn-outline gma-danger-text', onClick: reset}, icon('refresh-cw'), ' Reset the leaderboard…') : null);
-
-        const stats = h('div', {className: 'gma-stats'},
-            stat('Plays', data.plays.length), stat('Finished', finished.length),
-            showScore ? stat('Best score', finished.reduce((m, p) => Math.max(m, p.score || 0), 0)) : null,
-            stat('Fastest', finished.length ? fmtDuration(Math.min(...finished.map(p => p.timeMs || 0))) : '-'));
-
-        const boardCard = h('section', {className: 'gma-card'},
-            h('h3', {className: 'gma-h', text: 'Leaderboard (all time, best go per name)'}),
-            data.board.length
-                ? h('ol', {className: 'gma-board'}, data.board.slice(0, 20).map(r => h('li', {},
-                    h('span', {className: 'gma-rank', text: ordinal(r.rank)}), h('span', {className: 'gma-name', text: r.name}),
-                    showScore ? h('strong', {text: `${r.score}`}) : null, h('span', {className: 'gma-muted', text: fmtDuration(r.timeMs)}))))
-                : h('p', {className: 'gma-muted', text: 'Nobody has finished yet.'}));
-
-        const rows = data.plays.map(p => h('tr', {className: p.hidden ? 'is-hidden' : ''},
-            h('td', {}, h('strong', {text: p.name}), p.hidden ? h('span', {className: 'gma-chip', text: 'Hidden'}) : null),
-            h('td', {text: STATUS_LABEL[p.status] || p.status}),
-            showScore ? h('td', {className: 'gma-num', text: p.status === 'finished' ? `${p.score} / ${p.maxScore}` : '-'}) : null,
-            h('td', {className: 'gma-num', text: p.status === 'finished' ? fmtDuration(p.timeMs) : '-'}),
-            h('td', {text: fmtDateTime(p.startedAt)}),
-            canManage ? h('td', {className: 'gma-actions'},
-                h('button', {type: 'button', className: 'btn btn-xs btn-ghost', title: p.hidden ? 'Show on the leaderboard' : 'Hide from the leaderboard',
-                    onClick: () => hide(p)}, icon(p.hidden ? 'eye' : 'eye-off'), p.hidden ? ' Show' : ' Hide'),
-                h('button', {type: 'button', className: 'btn btn-xs btn-ghost gma-danger-text', title: 'Delete this play', onClick: () => remove(p)}, icon('trash'))) : null));
-
-        const table = data.plays.length
-            ? h('div', {className: 'gma-table-wrap'}, h('table', {className: 'gma-table'},
-                h('thead', {}, h('tr', {}, h('th', {text: 'Name'}), h('th', {text: 'State'}), showScore ? h('th', {className: 'gma-num', text: 'Score'}) : null,
-                    h('th', {className: 'gma-num', text: 'Time'}), h('th', {text: 'Started'}), canManage ? h('th', {}) : null)),
-                h('tbody', {}, rows)))
-            : h('p', {className: 'gma-muted', text: 'No plays yet. Once people play, every go shows here.'});
-
-        root.append(bar, stats, h('div', {className: 'gma-two'}, h('section', {className: 'gma-card'}, h('h3', {className: 'gma-h', text: 'Every play'}), table), boardCard));
-        I.scan(root);
+        const list = plays.peek();
+        const finished = list.filter(p => p.status === 'finished');
+        rows.value = list.map(p => ({
+            id: p.id, name: p.name, hidden: p.hidden === true, state: STATUS_LABEL[p.status] || p.status,
+            scoreText: p.status === 'finished' ? `${p.score} / ${p.maxScore}` : '-',
+            timeText: p.status === 'finished' ? fmtDuration(p.timeMs) : '-', started: fmtDateTime(p.startedAt)
+        }));
+        board.value = boardRows.peek().slice(0, 20).map(r => ({id: r.id, name: r.name, place: ordinal(r.rank), scoreText: `${r.score}`, timeText: fmtDuration(r.timeMs)}));
+        stats.value = {
+            plays: list.length, finished: finished.length,
+            best: finished.reduce((m, p) => Math.max(m, p.score || 0), 0),
+            fastest: finished.length ? fmtDuration(Math.min(...finished.map(p => p.timeMs || 0))) : '-'
+        };
     };
-
-    const stat = (label, value) => h('div', {className: 'stat-card gma-stat'}, h('div', {className: 'stat-value', text: String(value)}), h('div', {className: 'stat-label', text: label}));
+    draw();
 
     async function reload() {
-        data = await request('GET', `${api}${base}/${encodeURIComponent(gameId)}/plays`);
+        const next = await request('GET', url);
+        plays.value = next.plays;
+        boardRows.value = next.board;
         draw();
         badge();
     }
 
-    async function hide(p) {
-        try {
-            await request('PUT', `${api}/plays/${encodeURIComponent(p.id)}`, {hidden: !p.hidden});
-            E.toast(p.hidden ? `${p.name} is back on the leaderboard.` : `${p.name} is hidden from the leaderboard.`, {type: 'success'});
-            await reload();
-        } catch (err) { E.toast(errText(err), {type: 'error'}); }
-    }
+    const byId = (id) => plays.peek().find(p => p.id === id);
+    const model = {
+        back, testHref, showScore, canManage, rows, board, stats,
+        async hide(row) {
+            const p = byId(row.id);
+            if (!p) return;
+            try {
+                await request('PUT', `${api}/plays/${encodeURIComponent(p.id)}`, {hidden: !p.hidden});
+                E.toast(p.hidden ? `${p.name} is back on the leaderboard.` : `${p.name} is hidden from the leaderboard.`, {type: 'success'});
+                await reload();
+            } catch (err) { E.toast(errText(err), {type: 'error'}); }
+        },
+        async remove(row) {
+            const p = byId(row.id);
+            if (!p || !await E.confirm(`Delete <strong>${esc(p.name)}</strong>'s play? It leaves the leaderboard for good.`)) return;
+            try {
+                await request('DELETE', `${api}/plays/${encodeURIComponent(p.id)}`);
+                await reload();
+            } catch (err) { E.toast(errText(err), {type: 'error'}); }
+        },
+        async reset() {
+            if (!await E.confirm(`Reset the leaderboard for <strong>${esc(title)}</strong>? Every play (${plays.peek().length}) is deleted. This cannot be undone.`)) return;
+            try {
+                const r = await request('DELETE', url);
+                E.toast(`${r.removed} play${r.removed === 1 ? '' : 's'} deleted. The leaderboard starts again.`, {type: 'success'});
+                await reload();
+            } catch (err) { E.toast(errText(err), {type: 'error'}); }
+        }
+    };
 
-    async function remove(p) {
-        if (!await E.confirm(`Delete <strong>${esc(p.name)}</strong>'s play? It leaves the leaderboard for good.`)) return;
-        try {
-            await request('DELETE', `${api}/plays/${encodeURIComponent(p.id)}`);
-            await reload();
-        } catch (err) { E.toast(errText(err), {type: 'error'}); }
-    }
+    mountScreen(root, {
+        html: PLAYS_HTML, model, lifetime, k, className: 'gma-plays', rescan: [rows],
+        before: (el) => {
+            el.querySelector('[data-part="rows"]').innerHTML = PLAY_ROW;
+            el.querySelector('.gma-board').innerHTML = BOARD_ROW;
+        }
+    });
+}
 
-    async function reset() {
-        if (!await E.confirm(`Reset the leaderboard for <strong>${esc(title)}</strong>? Every play (${data.plays.length}) is deleted. This cannot be undone.`)) return;
-        try {
-            const r = await request('DELETE', `${api}${base}/${encodeURIComponent(gameId)}/plays`);
-            E.toast(`${r.removed} play${r.removed === 1 ? '' : 's'} deleted. The leaderboard starts again.`, {type: 'success'});
-            await reload();
-        } catch (err) { E.toast(errText(err), {type: 'error'}); }
-    }
+// ---- Test ----------------------------------------------------------------------------
 
-    draw();
+const TEST_HTML = `
+<div class="gma-bar">
+  <a class="btn btn-sm btn-ghost" data-bind-href="editHref">${ico('arrow-left')} Back to the editor</a>
+  <a class="btn btn-sm btn-ghost" data-bind-href="playsHref">${ico('award')} Plays</a>
+  <span class="gma-spacer"></span>
+  <span class="gma-chip is-primary" data-bind-text="statusText"></span>
+  <span data-help-title="Testing" data-help="This is the real player, exactly as it is on a page - the same clock, the same marking, the same screens. It plays the version you last saved, even a draft or a closed one. A test go is not saved to the leaderboard or counted in the plays, and the next test clears it away."></span>
+</div>
+<p class="gma-note">Plays the saved version as your players see it. Test goes never reach the leaderboard.</p>
+<div class="gma-test-stage"><div data-part="player"></div></div>`;
+
+/**
+ * The Test screen: the Tool's own public player, mounted with test hooks that
+ * fetch the start screen and start a test play through the admin API.
+ *
+ * @param {HTMLElement} root
+ * @param {{api: string, base: string, gameId: string, player: string, appClass: string,
+ *   editHref: string, playsHref: string, statusText?: string, lifetime: object, alive?: () => boolean}} opts
+ *   `player` is the public script that exports `mount(el, {test})`.
+ */
+export async function testScreen(root, {api, base, gameId, player, appClass, editHref, playsHref, statusText = '', lifetime, alive = () => true}) {
+    const k = await loadKit();
+    let mod;
+    try {
+        mod = await loading(root, import(player), k, 'card');
+    } catch (err) {
+        if (alive()) failed(root, `The player could not load: ${errText(err)}`, {href: editHref, text: 'Back to the editor'});
+        return;
+    }
+    if (!alive()) return;
+    const url = `${api}${base}/${encodeURIComponent(gameId)}/test`;
+    let host = null;
+    mountScreen(root, {
+        html: TEST_HTML, model: {editHref, playsHref, statusText: statusText ? `${statusText} - testing` : 'Testing'},
+        lifetime, k, className: 'gma-test',
+        before: (el) => { host = el.querySelector('[data-part="player"]'); }
+    });
+    host.className = `gm-app ${appClass}`;
+    const handle = mod.mount(host, {test: {info: () => request('GET', url).then(r => r.info), start: () => request('POST', url)}});
+    lifetime?.add(() => handle?.dispose?.());
 }
 
+// ---- Dates ---------------------------------------------------------------------------
+
 /** A datetime-local value ('YYYY-MM-DDTHH:mm', the browser's time) from ISO, and back. */
 export const toLocalInput = (iso) => {
     const t = Date.parse(iso || '');
@@ -239,3 +397,50 @@ export const fromLocalInput = (v) => {
     const t = Date.parse(v || '');
     return Number.isFinite(t) ? new Date(t).toISOString() : '';
 };
+
+// ---- 1.0.0 ---------------------------------------------------------------------------
+// Quiz and Crossword 1.0.0 drew their screens by hand with these. 1.1.0 is
+// domma-reactive throughout and uses none of them; they stay so a 1.0.0 copy
+// installed from the catalogue keeps working on a newer engine.
+
+/** @deprecated 1.0.0 screens only. */
+export function h(tag, props = {}, ...children) {
+    const el = document.createElement(tag);
+    for (const [key, v] of Object.entries(props || {})) {
+        if (v === false || v == null) continue;
+        if (key === 'className') el.className = v;
+        else if (key === 'text') el.textContent = v;
+        else if (key === 'html') el.innerHTML = v;
+        else if (key === 'dataset') Object.assign(el.dataset, v);
+        else if (key.startsWith('on') && typeof v === 'function') el.addEventListener(key.slice(2).toLowerCase(), v);
+        else if (key === 'value') el.value = v;
+        else if (key === 'checked') el.checked = Boolean(v);
+        else el.setAttribute(key, v === true ? '' : String(v));
+    }
+    for (const c of children.flat()) {
+        if (c == null || c === false) continue;
+        el.append(c instanceof Node ? c : document.createTextNode(String(c)));
+    }
+    return el;
+}
+
+/** @deprecated 1.0.0 screens only. */
+export const icon = (name, size = 14) => h('span', {'data-icon': name, 'data-icon-size': size, 'aria-hidden': 'true'});
+
+/** @deprecated 1.0.0 screens only. */
+export function field(label, control, hint = '', {id} = {}) {
+    const fid = id || control.id || `gmf-${Math.random().toString(36).slice(2, 8)}`;
+    control.id = fid;
+    return h('div', {className: 'form-group gma-field'},
+        h('label', {className: 'form-label', for: fid, text: label}),
+        control,
+        hint ? h('p', {className: 'form-hint', text: hint}) : null);
+}
+
+/** @deprecated 1.0.0 screens only. */
+export function toggle(label, checked, onChange, hint = '') {
+    const input = h('input', {type: 'checkbox', checked, onChange: (e) => onChange(e.target.checked)});
+    return h('div', {className: 'form-group gma-field'},
+        h('label', {className: 'gma-toggle'}, input, h('span', {text: label})),
+        hint ? h('p', {className: 'form-hint', text: hint}) : null);
+}

package/plugins/_lib/games/http.js

@@ -22,6 +22,16 @@ export const limited = (max, minutes = 1) => ({config: {rateLimit: {max, timeWin
  */
 export const isBot = (body) => Boolean(String(body?.website ?? '').trim());
 
+/**
+ * The name on an admin's test play: their first name (or the part of the
+ * email before the @) and "(test)", within a player name's 24 characters.
+ */
+export function testerName(request) {
+    const u = request?.user || {};
+    const who = String(u.name || u.username || u.email || '').trim().split(/[\s@]/)[0];
+    return who ? `${who.slice(0, 17)} (test)` : 'Test';
+}
+
 /** `?period=&limit=` for a board, the limit within the game's own size. */
 export function boardQuery(query, size = 10) {
     const max = Math.max(1, Math.min(100, Number(size) || 10));
@@ -66,7 +76,7 @@ export function mountPlayAdmin(fastify, {store, base, can, exists}) {
 export async function todayBadge(store, noun = 'play') {
     const start = new Date();
     start.setHours(0, 0, 0, 0);
-    const today = (await store.all()).filter(p => p.status === 'finished' && Date.parse(p.finishedAt) >= start.getTime());
+    const today = (await store.all()).filter(p => p.test !== true && p.status === 'finished' && Date.parse(p.finishedAt) >= start.getTime());
     return {
         count: today.length,
         label: `${today.length} ${noun}${today.length === 1 ? '' : 's'} finished today`,