hbengine 0.2.3

package/engine-shell/host/page.js

@@ -0,0 +1,809 @@
+// The shell page's chrome: the frame, the loader, the failure panel, the
+// reality check and the Provably Fair dialog. A file of its own so the
+// shell's policy allows no inline script at all.
+import { API, boot } from './boot.js';
+import { CLIENT_SEED_MAX, betFor, chars, compare, drawLines, expectation, outcome, rotationDifferences, roundLine, withRevealed } from './fair.js';
+import { loadPack, play, sha256Hex } from './engine-v1.js';
+import { STRINGS, fill, wordsFor } from './strings.js';
+const $ = (id) => document.getElementById(id);
+const frame = $('game');
+const groups = new Map();
+// How long after the autoplay confirmation opens its Start stays dead. The
+// game chose the moment the dialog appeared and knows where Start renders, so
+// a player already tapping Spin where Start will be must not land the next tap
+// on it: a press counts only once it began after this arming — the input
+// protection browsers give their own permission prompts.
+export const AUTOPLAY_CONFIRM_ARM_MS = 1000;
+// How often the page reads where the focus is (watchGameFocus): browsers fire
+// no event in this document when the focus moves into the game frame, so the
+// entry is read off document.activeElement — at once after anything that
+// moves the focus, and at this pace besides.
+export const FOCUS_POLL_MS = 50;
+// How long after the player's Tab key (on this document or the site's) a focus
+// entering the game frame counts as that Tab's: sequential focus navigation
+// moves the focus in the key's own task, so the entry is read within a tick
+// of it; a scripted move of the game's lands at a time of the game's.
+export const TAB_ENTRY_MS = 100;
+// When the player last pressed Tab outside the game frame (onShellInput).
+let lastTabAt = -Infinity;
+// The trusted input events that are the player's press or key on a document
+// (onShellInput, watchGameFocus): the ones that grant activation.
+const INPUT_TYPES = Object.freeze(['pointerdown', 'pointerup', 'mousedown', 'keydown', 'touchend']);
+// The confirmation's arming: when Start became live, and when the press on it
+// began (a pointer down or the key that activates a button).
+const ap = { armedAt: Infinity, pressAt: -Infinity };
+const NONCE = /^(0|[1-9]\d{0,19})$/;
+const HEX64 = /^[0-9a-f]{64}$/;
+const VERIFY_FIELDS = ['fair-v-server', 'fair-v-client', 'fair-v-nonce'];
+const el = (tag, text, cls) => { const e = document.createElement(tag); e.textContent = text; if (cls) e.className = cls; return e; };
+
+/**
+ * The Provably Fair dialog: the House Originals' modal, one window in the
+ * game page with two tabs, in the player's language (strings.js).
+ *
+ * Seeds: the client seed (it follows the server's until the player types;
+ * then it is theirs and goes with the next rotation), the active and the
+ * next server seed hashes, the nonce, Rotate seed pair, and the pairs
+ * revealed so far (the server's last retired pair, then each rotation's),
+ * each one a step into the Verify tab. The bets go on behind the dialog, as
+ * behind the Originals' modal: Rotate follows the round and the pair is read
+ * again when one ends, so the nonce shown is the last used.
+ *
+ * Verify: the revealed server seed, the client seed, the nonce and (when the
+ * game has more than one) the mode in; the result computed here, in the
+ * browser (engine-v1.js), against the maths pack fetched from this origin,
+ * whose recomputed hash must be the version asked for or nothing is shown.
+ * Opened on a round it fills the fields from the receipt and verifies at
+ * once; a round whose pair is still active offers the rotation that reveals
+ * it. The game is the shell's and the version is the receipt's, else the one
+ * a revealed pair played on when the server names it, else the one the shell
+ * is running — named on the result line; neither is typed.
+ *
+ * The commitment is checked, not assumed: a revealed seed must hash to the
+ * hash the receipt (or the Seeds tab) showed for it, and a rotation must
+ * promote the next hash shown and reveal a seed that hashes to the hash
+ * shown — the hashes held here from before the rotation, which the server
+ * cannot rewrite. A receipt that cannot be read gives no verdict either way.
+ *
+ * Every call goes through the engine client under the session the shell
+ * holds: the player's site token is never on this page, and the game frame
+ * never touches the dialog — its `fairness.open` may show a round, never
+ * reset what the player typed or started here. Each rotation goes to the
+ * server under a generation of its own; an answer lost on the way is read
+ * back from the pair (a new hash means it committed) and otherwise keeps
+ * that generation for the next press, which the server answers as it
+ * answered the first, never rotating twice; a client seed typed meanwhile
+ * stays in the field and goes with the press after that. Nothing from a
+ * receipt or a pack is inserted as HTML.
+ */
+const fair = {
+    rgs: null, ctx: null, roundId: null, receipt: null, seeds: null, revealed: [], packs: new Map(),
+    busy: false, tab: 'seeds', seedTouched: false, roundOpen: false,
+    words: STRINGS.en,
+    // `token` cancels what an earlier opening of the dialog was still doing;
+    // `check` cancels an earlier receipt or verification once the player edits;
+    // `seedsGen` cancels a read of the pair that a rotation has overtaken;
+    // `seedsReady` is whether a pair the server answered since this opening
+    // began is on screen — the opening's read, or a rotation's answer that
+    // overtook it (Rotate waits for it, so a late answer can never show a
+    // retired hash as the active one); `verifying` counts the receipts and
+    // verifications in flight.
+    token: 0, check: 0, seedsGen: 0, seedsReady: false, verifying: 0,
+    // The rotation waiting for the server, or whose answer was lost: { clientSeed, generation }.
+    pending: null,
+    // The bet history's request this opening answers, to be cancelled by name.
+    requestId: null,
+    // A revealed pair carried into Verify: the hash it was listed under and
+    // the maths version its rounds were drawn on (when the server named one).
+    commitment: null, version: null,
+    // The rotation chain found broken by the last rotation, if any (a word key).
+    chain: null,
+
+    /** The page's language: every word of the dialog is set from it. */
+    setLocale(lang) {
+        const w = this.words = wordsFor(lang);
+        const text = (id, t) => { $(id).textContent = t; };
+        text('fair-title', w.provablyFair);
+        text('fair-open', w.provablyFair);
+        $('fair-tabs').setAttribute('aria-label', w.provablyFair);
+        $('fair-x').setAttribute('aria-label', w.close);
+        text('fair-tab-seeds', w.seedsTab);
+        text('fair-tab-verify', w.verifyTab);
+        text('fair-l-client', w.clientSeed);
+        text('fair-l-hash', w.serverSeedHashed);
+        text('fair-l-next', w.nextServerSeedHashed);
+        text('fair-l-nonce', w.nonce);
+        text('fair-rotate', w.rotateSeedPair);
+        text('fair-reveal', w.rotateSeedPair);
+        text('fair-l-v-server', w.serverSeedRevealed);
+        text('fair-l-v-client', w.clientSeed);
+        text('fair-l-v-nonce', w.nonce);
+        text('fair-l-v-mode', w.mode);
+        text('fair-verify-run', w.verifyRun);
+        // The autoplay control's Stop (the shell's, over the game) speaks the same language.
+        text('auto-stop', w.stop);
+        this.setRoundOpen(this.roundOpen);
+        this.showRevealed();
+    },
+
+    /**
+     * Opens the dialog on the player's seeds, or on a round's receipt (the
+     * Verify tab). A player's gesture (the site's bar, the bet history, the
+     * shell's button) opens it afresh. The game's `fairness.open`
+     * (ctx.fromGame) on a dialog already open, or busy rotating, may at most
+     * show its round — and only when the player has typed nothing and
+     * nothing is in flight; otherwise it is ignored.
+     */
+    async open(rgs, roundId, ctx) {
+        this.rgs = rgs;
+        this.ctx = ctx;
+        const dlg = $('fair');
+        if (ctx.fromGame && (dlg.open || this.busy)) {
+            if (!roundId || this.seedTouched || this.verifying > 0 || VERIFY_FIELDS.some((id) => $(id).value !== '')) return;
+            this.roundId = roundId;
+            this.show('verify');
+            return this.loadRound(this.token);
+        }
+        this.roundId = roundId || null;
+        this.requestId = ctx.requestId || null;
+        this.receipt = null;
+        this.chain = null;
+        if (!ctx.fromGame) this.seedTouched = false;
+        const token = ++this.token;
+        this.note('');
+        this.resetVerify();
+        this.show(this.roundId ? 'verify' : 'seeds');
+        // The pair is read afresh on every opening: until it answers, nothing
+        // of an earlier opening shows and Rotate waits.
+        this.seeds = null;
+        this.seedsReady = false;
+        this.clearSeeds();
+        this.setRoundOpen(ctx.roundOpen());
+        if (!dlg.open) {
+            dlg.showModal();
+            // The window takes the focus, as the Originals' modal does: no
+            // control lights its ring before the player reaches for one.
+            dlg.focus();
+        }
+        await Promise.all([this.loadSeeds(token), this.roundId ? this.loadRound(token) : this.loadModes(token)]);
+    },
+    /** The bet history took its request back: an open still on its way is dropped. */
+    cancel(requestId) {
+        if (!requestId || this.requestId !== requestId) return;
+        this.requestId = null;
+        this.token++;
+        this.check++;
+        if ($('fair').open && !this.receipt) $('fair').close();
+    },
+    show(tab) {
+        this.tab = tab;
+        for (const name of ['seeds', 'verify']) {
+            $(`fair-tab-${name}`).setAttribute('aria-selected', name === tab ? 'true' : 'false');
+            $(`fair-${name}`).hidden = name !== tab;
+        }
+    },
+    // Whether a round is open decides the rotation: refused by the server
+    // while one is, so the button says so instead of failing.
+    setRoundOpen(open) {
+        this.roundOpen = open;
+        this.lock(this.busy);
+        $('fair-seeds-note').textContent = open ? this.words.rotateAfterRound : this.words.fairSeedsNote;
+        $('fair-reveal').hidden = open || !(this.receipt && !this.receipt.serverSeed);
+    },
+    /** A round started or ended behind the dialog: Rotate follows it, and the pair is read again when one ends. */
+    roundChanged(ended) {
+        if (!$('fair').open || !this.ctx) return;
+        this.setRoundOpen(this.ctx.roundOpen());
+        if (ended) this.loadSeeds(this.token);
+    },
+    lock(on) {
+        $('fair-rotate').disabled = on || this.roundOpen || !this.seedsReady;
+        $('fair-reveal').disabled = on || !this.seedsReady;
+        $('fair-verify-run').disabled = on;
+    },
+    // A word on the tab the player is looking at: the Seeds tab's status line, or the result line.
+    say(text, tone) {
+        if (this.tab === 'verify') this.result(text, tone);
+        else this.note(text);
+    },
+    // The Seeds tab's status line is grey, whatever it says: red and green
+    // belong to the result line alone (the Originals' rule).
+    note(text) {
+        const n = $('fair-status');
+        n.textContent = text;
+        n.className = 'fr-note';
+    },
+    result(text, tone = '', lines = []) {
+        const r = $('fair-result');
+        r.textContent = text;
+        r.className = 'fr-result' + (tone ? ' ' + tone : '');
+        $('fair-draws').replaceChildren(...lines.map((t) => el('li', t)));
+    },
+
+    // ---- Seeds ----------------------------------------------------------------
+    clearSeeds() {
+        $('fair-hash').value = '';
+        $('fair-next').value = '';
+        $('fair-nonce').textContent = '0';
+        if (!this.seedTouched) $('fair-client').value = '';
+    },
+    async loadSeeds(token) {
+        const gen = this.seedsGen;
+        const r = await this.rgs.seeds();
+        if (token !== this.token || gen !== this.seedsGen) return;
+        if (r.ok) return this.showSeeds(r.body);
+        // Answered, if not well: the opening's read is over and Rotate may
+        // go (a failed read does not take the rotation away, as in Dice).
+        this.seedsReady = true;
+        this.lock(this.busy);
+        this.note(this.words.seedInitFailed);
+    },
+    // A pair the server just answered goes on screen — every caller hands
+    // one: the opening's read, the read when a round ends, a rotation's
+    // answer, the read-back after a lost one — so Rotate may go on it, even
+    // when the read of an opening the answer overtook is dropped later.
+    showSeeds(s) {
+        this.seedsReady = true;
+        this.lock(this.busy);
+        this.seeds = s;
+        $('fair-hash').value = typeof s.serverSeedHash === 'string' ? s.serverSeedHash : '';
+        $('fair-next').value = typeof s.nextServerSeedHash === 'string' ? s.nextServerSeedHash : '';
+        $('fair-nonce').textContent = String(Number.isInteger(s.nonce) ? s.nonce : 0);
+        // Until the player touches the field it follows the server; after that
+        // it is theirs, or the seed they typed would be wiped by this update.
+        if (!this.seedTouched) $('fair-client').value = typeof s.clientSeed === 'string' ? s.clientSeed : '';
+        this.revealed = withRevealed(this.revealed, s.previous);
+        this.showRevealed();
+    },
+    showRevealed() {
+        const box = $('fair-revealed');
+        const w = this.words;
+        if (this.revealed.length === 0) return box.replaceChildren(el('p', w.noRevealedSeeds, 'fr-note'));
+        box.replaceChildren(el('h3', w.revealedPairs), ...this.revealed.map((pair) => {
+            const b = el('button', '', 'fr-rev');
+            b.type = 'button';
+            b.append(el('span', pair.serverSeed, 'fr-rev-seed'), el('span', `${w.nonce} 1…${pair.nonce}`, 'fr-rev-meta'));
+            b.addEventListener('click', () => this.useRevealed(pair));
+            return b;
+        }));
+    },
+    // A revealed pair is carried into the Verify tab whole, with the hash it
+    // was listed under and the maths version its rounds were drawn on; the
+    // nonce the player supplies, there are many in a pair.
+    useRevealed(pair) {
+        this.invalidate(true);
+        $('fair-v-server').value = pair.serverSeed;
+        $('fair-v-client').value = pair.clientSeed;
+        $('fair-v-nonce').value = '';
+        this.commitment = HEX64.test(pair.serverSeedHash) ? pair.serverSeedHash : null;
+        this.version = pair.mathHashes.length === 1 ? pair.mathHashes[0] : null;
+        $('fair-v-note').textContent = pair.mathHashes.length > 1 ? this.words.pairManyVersions : '';
+        this.result('');
+        this.show('verify');
+        $('fair-v-nonce').focus();
+    },
+    /**
+     * Rotate seed pair: the player's client seed goes with it when they typed
+     * a new one (a client seed belongs to a pair, so a new one starts a new
+     * pair, the Originals' rule); the same seed, or none, keeps the current.
+     * The retired pair comes back revealed, held to the hashes shown before,
+     * and joins the list. True when the pair was rotated.
+     */
+    async rotate() {
+        // The shell's word on an open round is read again at the press: a
+        // bet may have landed, or ended, since the dialog opened.
+        this.setRoundOpen(this.ctx.roundOpen());
+        if (this.busy || this.roundOpen || !this.seedsReady) return false;
+        const w = this.words;
+        const wanted = $('fair-client').value.trim();
+        if (chars(wanted) > CLIENT_SEED_MAX) {
+            this.say(w.clientSeedLength, 'bad');
+            return false;
+        }
+        const before = this.seeds;
+        // A rotation whose answer was lost is asked for again under its own
+        // generation and client seed before any new one: the server answers
+        // it as it did the first time, never rotating twice. A new client
+        // seed is taken only once that one is answered or refused for good —
+        // and stays in the field until then (rotated()).
+        const retry = !!this.pending;
+        if (!retry) {
+            const clientSeed = wanted && (!before || wanted !== before.clientSeed) ? wanted : null;
+            this.pending = { clientSeed, generation: crypto.randomUUID() };
+        }
+        const p = this.pending;
+        this.busy = true;
+        this.lock(true);
+        if (retry) this.say(w.retryingRotation);
+        try {
+            const r = p.clientSeed ? await this.rgs.setClientSeed(p.generation, p.clientSeed) : await this.rgs.rotateSeeds(p.generation);
+            if (!r.ok) {
+                if (r.lost) return await this.afterLost(before);
+                // In flight on the server still (a retry met the first attempt):
+                // the generation is kept for the next press.
+                if (r.error.code === 'pacing') {
+                    this.say(w.seedRotationFailed, 'bad');
+                    return false;
+                }
+                this.pending = null;
+                if (r.error.code === 'round') {
+                    this.setRoundOpen(true);
+                    if (this.tab === 'verify') this.result(w.rotateAfterRound);
+                    return false;
+                }
+                this.say(r.error.message || w.seedRotationFailed, 'bad');
+                return false;
+            }
+            this.rotated(before, r.body, await this.previousHash(r.body));
+            return true;
+        } finally {
+            this.busy = false;
+            this.lock(false);
+        }
+    },
+    previousHash(body) {
+        return body.previous && typeof body.previous.serverSeed === 'string' ? sha256Hex(body.previous.serverSeed) : Promise.resolve(null);
+    },
+    // The pair rotated: the new pair shows, the retired one joins the list,
+    // and the rotation is held to the hashes shown before it. A client seed
+    // the player typed that this rotation did not send — typed while the
+    // answer was on its way, or while a lost one was replayed under its own
+    // seed — is theirs still: it stays in the field, not wiped by the pair's
+    // own, and goes with the next press under a generation of its own.
+    rotated(before, body, previousSeedHash) {
+        const sent = this.pending ? this.pending.clientSeed : null;
+        const typed = this.seedTouched ? $('fair-client').value : '';
+        this.pending = null;
+        this.seedTouched = false;
+        this.seedsGen++;
+        this.showSeeds(body);
+        const kept = typed.trim();
+        if (kept && kept !== sent && kept !== this.seeds.clientSeed) {
+            $('fair-client').value = typed;
+            this.seedTouched = true;
+        }
+        const diffs = rotationDifferences(before, body, previousSeedHash);
+        this.chain = diffs.length ? diffs[0] : null;
+        this.note(this.chain ? this.words[this.chain] : '');
+        if (this.tab === 'verify') this.result(this.chain ? this.words[this.chain] : '', this.chain ? 'bad' : '');
+        // The round on screen was drawn on the pair this rotation retired:
+        // its seed is revealed now, so the receipt is read again and the
+        // round verified, from the Seeds tab's Rotate as from the reveal
+        // button — unless the chain of hashes broke, which is the finding.
+        const prev = body && body.previous;
+        if (!this.chain && this.receipt && !this.receipt.serverSeed && prev && typeof prev.serverSeedHash === 'string' && prev.serverSeedHash === this.receipt.serverSeedHash) {
+            this.loadRound(this.token);
+        }
+    },
+    // The rotation's answer was lost (every attempt): the pair is read
+    // again. A new hash means the rotation committed — the retired pair is
+    // the server's `previous` and the generation is spent. The same hash, or
+    // no answer, keeps the generation for the next press.
+    async afterLost(before) {
+        const s = await this.rgs.seeds();
+        if (s.ok && before && HEX64.test(before.serverSeedHash) && s.body.serverSeedHash !== before.serverSeedHash) {
+            this.rotated(before, s.body, await this.previousHash(s.body));
+            return true;
+        }
+        if (s.ok) {
+            this.seedsGen++;
+            this.showSeeds(s.body);
+        }
+        this.say(this.words.seedRotationFailed, 'bad');
+        return false;
+    },
+
+    // ---- Verify ----------------------------------------------------------------
+    resetVerify() {
+        this.check++;
+        for (const id of VERIFY_FIELDS) $(id).value = '';
+        this.commitment = null;
+        this.version = null;
+        $('fair-v-note').textContent = '';
+        $('fair-round').hidden = true;
+        $('fair-reveal').hidden = true;
+        this.result('');
+    },
+    // The player's edits take the fields over: a round on screen is no longer
+    // what they verify, and an older answer still on its way is dropped. A
+    // new seed (`pair` true) is no longer the revealed pair's either; a new
+    // nonce or mode is still within it.
+    invalidate(pair) {
+        this.check++;
+        this.receipt = null;
+        if (pair) {
+            this.commitment = null;
+            this.version = null;
+            $('fair-v-note').textContent = '';
+        }
+        $('fair-round').hidden = true;
+        $('fair-reveal').hidden = true;
+    },
+    // The maths pack of one version, fetched once from this origin and hashed
+    // here from the bytes served (never from the browser's text of them: the
+    // hash commits to the manifest as the studio submitted it).
+    pack(version) {
+        if (!HEX64.test(version)) return Promise.reject(new Error('version'));
+        const key = this.ctx.game + '@' + version;
+        if (!this.packs.has(key)) {
+            const loading = (async () => {
+                return loadPack(API(), this.ctx.game, version);
+            })();
+            loading.catch(() => this.packs.delete(key));
+            this.packs.set(key, loading);
+        }
+        return this.packs.get(key);
+    },
+    // The mode select: the pack's modes, shown only when there is more than one.
+    showModes(pack, want) {
+        const sel = $('fair-v-mode');
+        const modes = pack.manifest.modes;
+        const current = want || sel.value;
+        sel.replaceChildren(...modes.map((m) => { const o = el('option', typeof m.label === 'string' && m.label ? m.label : m.id); o.value = m.id; return o; }));
+        sel.value = modes.some((m) => m.id === current) ? current : modes[0].id;
+        $('fair-v-mode-field').hidden = modes.length < 2;
+    },
+    modeId(pack) {
+        const v = $('fair-v-mode').value;
+        return pack.manifest.modes.some((m) => m.id === v) ? v : pack.manifest.modes[0].id;
+    },
+    // No round: the modes of the version the shell is running, when the pack is at hand.
+    async loadModes(token) {
+        try {
+            const pack = await this.pack(this.ctx.mathHash);
+            if (token === this.token && !this.receipt) this.showModes(pack, null);
+        } catch {
+            // The pack is fetched again on Verify, which says what it finds.
+        }
+    },
+    /** The round's receipt: the fields filled from it, verified at once when its seed is revealed. */
+    async loadRound(token) {
+        if (!this.roundId) return;
+        const check = ++this.check;
+        const w = this.words;
+        this.verifying++;
+        try {
+            const r = await this.rgs.round(this.roundId);
+            if (token !== this.token || check !== this.check) return;
+            if (!r.ok) {
+                // Two things the server refuses with a conflict: a round still
+                // on the table, and a round of another currency than the session.
+                if (r.error.code === 'conflict') return this.result(/currency/i.test(r.error.message || '') ? w.roundOtherCurrency : w.roundStillOpen);
+                return this.result(r.error.code === 'round' ? w.roundNotFound : w.verifyFailed, 'bad');
+            }
+            const b = r.body;
+            this.receipt = b;
+            $('fair-round').textContent = roundLine(b, this.ctx.wallet, w);
+            $('fair-round').hidden = false;
+            $('fair-v-server').value = typeof b.serverSeed === 'string' ? b.serverSeed : '';
+            $('fair-v-client').value = typeof b.clientSeed === 'string' ? b.clientSeed : '';
+            $('fair-v-nonce').value = Number.isInteger(b.nonce) ? String(b.nonce) : '';
+            $('fair-reveal').hidden = true;
+            if (b.serverSeed) return await this.verify(b, check);
+            // The pair is still active: nothing to compute yet, and the rotation
+            // that reveals it is one press away when no round is open.
+            this.result(w.seedNotRevealedYet);
+            $('fair-reveal').hidden = this.roundOpen;
+            this.pack(b.mathHash).then((pack) => { if (check === this.check) this.showModes(pack, b.mode); }, () => {});
+        } finally {
+            this.verifying--;
+        }
+    },
+    /**
+     * Verify: the three fields and the mode through engine-v1 against the
+     * pack of the round's version (a revealed pair's when it names one, else
+     * the shell's when no round is on screen). With a round on screen the
+     * result is held against its receipt, the revealed seed against the
+     * commitment it was shown under.
+     */
+    async verify(receipt, check) {
+        const w = this.words;
+        const server = $('fair-v-server').value.trim();
+        const client = $('fair-v-client').value;
+        const nonce = $('fair-v-nonce').value.trim();
+        if (!server || !client || nonce === '') return this.result(w.verifyNeedsAll, 'bad');
+        this.verifying++;
+        try {
+            if (!NONCE.test(nonce)) throw new Error('nonce');
+            const version = receipt ? receipt.mathHash : (this.version || this.ctx.mathHash);
+            const seedHash = await sha256Hex(server);
+            if (check !== this.check) return;
+            // A revealed pair from the Seeds tab: the seed must hash to the
+            // hash it was listed under, or the draws below follow from a seed
+            // the house never committed to.
+            if (!receipt && this.commitment && seedHash !== this.commitment) return this.result(w.commitmentBroken, 'bad');
+            const pack = await this.pack(version);
+            if (check !== this.check) return;
+            this.showModes(pack, receipt ? receipt.mode : null);
+            // The pack must hash to the version asked for before anything drawn
+            // from it counts: tables nobody committed to verify nothing.
+            if (pack.recomputed !== version) return this.result(w.verifyFailed, 'bad');
+            const modeId = this.modeId(pack);
+            const bet = betFor(pack, modeId, receipt);
+            if (!bet.id) throw new Error('bet');
+            const got = await play(pack, modeId, bet.id, server, client, nonce);
+            if (check !== this.check) return;
+            const round = receipt && receipt.mode === modeId ? receipt : null;
+            let text = w.computedResult + ': ' + outcome(pack, got, round, bet.known, w);
+            let tone = '';
+            if (round) {
+                const cmp = compare(expectation(round), got, { version, recomputed: pack.recomputed }, seedHash);
+                // Nothing compared is no verdict: never "does not match" for a
+                // receipt that merely could not be read.
+                if (cmp.unreadable) return this.result(w.verifyFailed, 'bad');
+                text += ' · ' + (cmp.ok ? w.matchesRound : w.doesNotMatchRound);
+                tone = cmp.ok ? 'ok' : 'bad';
+            }
+            // The version the result was computed against, named as Dice names
+            // its derivation.
+            text += ' · ' + fill(w.maths, { hash: version.slice(0, 8) });
+            this.result(text, tone, got.draws.length > 1 ? drawLines(pack, got, w) : []);
+        } catch {
+            if (check === this.check) this.result(w.verifyFailed, 'bad');
+        } finally {
+            this.verifying--;
+        }
+    },
+};
+$('fair-tab-seeds').addEventListener('click', () => fair.show('seeds'));
+$('fair-tab-verify').addEventListener('click', () => fair.show('verify'));
+$('fair-client').addEventListener('input', () => { fair.seedTouched = true; });
+$('fair-rotate').addEventListener('click', () => fair.rotate());
+$('fair-verify-run').addEventListener('click', () => fair.verify(fair.receipt, ++fair.check));
+for (const id of VERIFY_FIELDS) {
+    $(id).addEventListener('input', () => fair.invalidate(id !== 'fair-v-nonce'));
+    $(id).addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); fair.verify(fair.receipt, ++fair.check); } });
+}
+$('fair-v-mode').addEventListener('change', () => fair.invalidate(false));
+// A round whose pair is still active: rotating reveals it, then the round
+// verifies — unless the rotation broke the chain of hashes, which is the
+// finding then, and the round is left for the player to verify by hand.
+$('fair-reveal').addEventListener('click', async () => {
+    const token = fair.token;
+    if (await fair.rotate() && token === fair.token && !fair.chain) await fair.loadRound(token);
+});
+// The Originals' close affordances: the X, Esc (native), and a press AND
+// release on the backdrop (a selection dragged out of a field and released
+// outside must not close the window mid-sentence). With the content inside
+// .fr-head and .fr-body, the dialog element itself is hit only on the
+// backdrop.
+{
+    const dlg = $('fair');
+    let pressedOut = false, releasedOut = false;
+    $('fair-x').addEventListener('click', () => dlg.close());
+    dlg.addEventListener('pointerdown', (e) => { pressedOut = e.target === dlg; });
+    dlg.addEventListener('pointerup', (e) => { releasedOut = e.target === dlg; });
+    dlg.addEventListener('click', () => {
+        const go = pressedOut && releasedOut;
+        pressedOut = releasedOut = false;
+        if (go) dlg.close();
+    });
+    // Closed: what was on its way is dropped, and the client seed is the server's again next time.
+    dlg.addEventListener('close', () => { fair.token++; fair.check++; fair.seedTouched = false; fair.requestId = null; });
+}
+
+const ui = {
+    // The clock the confirmation's arming reads; the tests hand in their own.
+    now: () => performance.now(),
+    frame(src) { frame.src = src; frame.hidden = false; return frame; },
+    loading(group, loaded, total) {
+        groups.set(group, [loaded, total]);
+        let l = 0, t = 0; for (const [a, b] of groups.values()) { l += a; t += b; }
+        $('progress').style.width = (t ? Math.round(l / t * 100) : 0) + '%';
+        $('loading-text').textContent = 'Loading ' + group;
+    },
+    ready() { $('loading').hidden = true; },
+    started(info) { window.__engine = info; },
+    round(r) { window.__rounds = (window.__rounds || []).concat(r); },
+    fail(message, err) { if (err) console.warn(err); $('loading').hidden = true; $('failed-text').textContent = message; $('failed').hidden = false; },
+    /** The player's language: the dialog's words. */
+    locale(lang) { fair.setLocale(lang); },
+    // The player has played this long: the game is paused until they say
+    // they want to go on.
+    realityCheck(minutes) {
+        $('rc-text').textContent = `You have been playing for ${minutes} minutes.`;
+        $('rc').showModal();
+        return new Promise((r) => $('rc').addEventListener('close', r, { once: true }));
+    },
+    /**
+     * The dialog: on the player's seeds (no round), or on a round's receipt.
+     * `ctx` is the shell's: the game, the maths version it is running, the
+     * wallet (how money is shown), whether a round is open right now, who
+     * opens it (fromGame) and, from the bet history, the request to answer.
+     */
+    fairness(rgs, roundId, ctx) { return fair.open(rgs, roundId, ctx); },
+    /** The bet history took a request back. */
+    fairnessCancel(requestId) { fair.cancel(requestId); },
+    /** A round started (false) or ended (true) behind the dialog. */
+    fairnessRoundChanged(ended) { fair.roundChanged(ended); },
+    /** The shell's own Provably Fair button, for a page no site bar frames. */
+    fairButton(open) {
+        const b = $('fair-open');
+        b.hidden = false;
+        b.addEventListener('click', open);
+    },
+    /**
+     * The autoplay session as the router reports it ({active, left, …}): the
+     * shell's own control over the game shows the rounds left while one runs
+     * and goes when it ends. Shell DOM, outside the game frame: the game can
+     * neither cover it nor press its Stop.
+     */
+    autoplay(s) {
+        $('auto').hidden = !s.active;
+        if (s.active) $('auto-text').textContent = fill(fair.words.autoplayLeft, { n: s.left });
+    },
+    /** The player pressed the control's Stop. */
+    autoplayStop(stop) { $('auto-stop').addEventListener('click', stop); },
+    /**
+     * The game asked to autoplay: the shell shows the player exactly what they
+     * would be approving (the bet the run is for, rounds, the stake each
+     * round, the most that could be staked, the stops), formatted in their
+     * coin by boot.js. Shell DOM, outside the game frame, which the game can
+     * neither cover nor pre-fill; the session begins only on the player's real
+     * press of Start.
+     */
+    autoplayConfirm(t) {
+        const w = fair.words, en = STRINGS.en;
+        const say = (id, s) => { $(id).textContent = s; };
+        say('ap-title', w.autoplayConfirmTitle ?? en.autoplayConfirmTitle);
+        say('ap-sub', w.autoplayConfirmSub ?? en.autoplayConfirmSub);
+        say('ap-l-bet', w.autoplayBet ?? en.autoplayBet);
+        say('ap-bet', t.bet);
+        say('ap-l-rounds', w.autoplayRounds ?? en.autoplayRounds);
+        say('ap-l-stake', w.autoplayStakeEach ?? en.autoplayStakeEach);
+        say('ap-l-total', w.autoplayTotal ?? en.autoplayTotal);
+        say('ap-l-profit', w.autoplayStopProfit ?? en.autoplayStopProfit);
+        say('ap-l-loss', w.autoplayStopLoss ?? en.autoplayStopLoss);
+        say('ap-start', w.autoplayStart ?? en.autoplayStart);
+        say('ap-cancel', w.autoplayCancel ?? en.autoplayCancel);
+        say('ap-rounds', String(t.rounds));
+        say('ap-stake', t.stake);
+        say('ap-total', t.total);
+        say('ap-loss', t.stopLoss);
+        $('ap-profit-row').hidden = !t.stopProfit;
+        if (t.stopProfit) say('ap-profit', t.stopProfit);
+        $('ap').showModal();
+        $('ap').focus(); // the dialog itself takes the focus (tabindex=-1, as the Provably Fair dialog): no button is pre-lit
+        // Start is dead until the player could have read the dialog: shown
+        // disabled, and a press that began before then never counts
+        // (onAutoplayConfirm). The timer is this opening's: a dialog closed and
+        // reopened within the arming keeps the new one's.
+        const armedAt = ui.now() + AUTOPLAY_CONFIRM_ARM_MS;
+        ap.armedAt = armedAt;
+        ap.pressAt = -Infinity;
+        $('ap-start').disabled = true;
+        setTimeout(() => { if ($('ap').open && ap.armedAt === armedAt) $('ap-start').disabled = false; }, AUTOPLAY_CONFIRM_ARM_MS);
+    },
+    /**
+     * The shell takes the confirmation down itself (its deadline passed, the
+     * reality check, the session ended, the page hidden): the router has
+     * already refused the game, so the close that follows cancels nothing.
+     */
+    autoplayDismiss() {
+        const dlg = $('ap');
+        if (dlg.open) dlg.close();
+    },
+    /**
+     * Wire the confirmation's buttons once. Start must be a real, trusted
+     * click on the shell's own button (`isTrusted`) — a scripted click, which
+     * the sandboxed game frame cannot land on this document anyway, is
+     * ignored — and the press must have begun on Start after the arming
+     * (AUTOPLAY_CONFIRM_ARM_MS): a pointer down on it, or the key that
+     * activates a button (Enter, Space), trusted and past the arming moment.
+     * A tap that was already falling when the dialog appeared, or that began
+     * on the game, is not a Start. Every close that was not Start is a cancel
+     * (the Cancel button, Esc, a press on the backdrop).
+     */
+    onAutoplayConfirm(decide) {
+        const dlg = $('ap'), start = $('ap-start');
+        let starting = false;
+        const began = (e) => { if (e.isTrusted && ui.now() >= ap.armedAt) ap.pressAt = ui.now(); };
+        start.addEventListener('pointerdown', began);
+        start.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') began(e); });
+        start.addEventListener('click', (e) => {
+            if (!e.isTrusted || ui.now() < ap.armedAt || ap.pressAt < ap.armedAt) return;
+            starting = true;
+            dlg.close();
+        });
+        $('ap-cancel').addEventListener('click', () => dlg.close());
+        dlg.addEventListener('click', (e) => { if (e.target === dlg) dlg.close(); }); // the backdrop
+        dlg.addEventListener('close', () => { const ok = starting; starting = false; decide(ok); });
+    },
+    /**
+     * The player pressed or typed on the shell's own DOM (`doc` is this
+     * document), or on the site's page around it (boot.js hands the site's
+     * document when the shell is served from the site's origin, as in
+     * production: a press anywhere in that page gives this window activation
+     * too). Input inside the game frame never reaches either document's
+     * listeners (it is the frame's document's), so these fire only for the
+     * shell's controls and dialogs — the pill's Stop, the confirmation's
+     * buttons and backdrop, the reality check's Continue, the Provably Fair
+     * dialog's fields — and for the site's own chat, header and buttons.
+     * Capture phase, so nothing in the page can stop them; only trusted events
+     * count. The router then takes no play on this window's activation for the
+     * activation's lifetime: it cannot tell such a press's from a game click's.
+     * A Tab key is remembered besides (watchGameFocus): the focus it moves into
+     * the game frame is the player's entry, not a steal.
+     */
+    onShellInput(fn, doc = document) {
+        for (const type of INPUT_TYPES) {
+            doc.addEventListener(type, (e) => {
+                if (!e.isTrusted) return;
+                if (type === 'keydown' && e.key === 'Tab') lastTabAt = performance.now();
+                fn();
+            }, { capture: true, passive: true });
+        }
+    },
+    /**
+     * Watches the focus entering and leaving the game frame. Browsers fire no
+     * event in this document when the focus moves into the frame (Chrome fires
+     * neither `focus` on the frame element nor `focusin` on the document; the
+     * window's `blur` fires only when this document's own element held it, and
+     * a scripted move lands after the site's `focusout` has fired), nor when
+     * it moves out of the frame to the site's page (the frame's window blurs,
+     * the site's element gets `focusin`; this document, in between, hears
+     * nothing), so the entry is read off `document.activeElement`: every
+     * FOCUS_POLL_MS, and at once (and again a moment later) after anything that
+     * moves the focus — this window's blur, a focusout or a focusin in this
+     * document and in each other `doc` handed in (the site's, when it shares
+     * the origin), a trusted press or key on either. The exit is marked the
+     * moment it can be seen, not only when the poll finds the frame unfocused:
+     * a `focusin` on an element other than the frame, in this document or the
+     * site's, and a trusted press or key on either document (the focus is not
+     * in the frame when either fires) say the focus has left. A game sees its
+     * own window blur when the player tabs out of it and can call
+     * `window.focus()` a task later — inside one poll interval, before the poll
+     * would have seen the frame unfocused — so without that a steal-back would
+     * never be judged at all. On each entry `decide(viaTab, sinceExitMs)` says
+     * whether the focus is the player's (the router: the activation it granted
+     * is live, no shell or site press, no scripted focus and no exit from the
+     * frame within the activation's lifetime — or, with `viaTab`, the entry
+     * followed the player's Tab key within TAB_ENTRY_MS, a key on this or the
+     * site's document that the router would otherwise take for a shadowing
+     * press, and that brings the player back in whatever the time since
+     * leaving); `sinceExitMs` is how long ago the focus was last seen leaving
+     * the frame (Infinity before the first exit). One that is not — the game's
+     * `window.focus()` — is blurred straight back out of the frame, so the
+     * player's next keystrokes land on this document (shell input, which the
+     * router shadows), not in a frame that took the focus by itself; the
+     * blur-back is the shell's move, not the player's leaving, and does not
+     * reset the time since the exit. Returns a function that stops the watch
+     * and removes its listeners (the tests).
+     */
+    watchGameFocus(decide, docs = [document]) {
+        let inFrame = false;
+        let exitAt = -Infinity; // when the focus was last seen leaving the frame
+        const left = () => { if (inFrame) { inFrame = false; exitAt = performance.now(); } };
+        const check = () => {
+            const now = document.activeElement === frame;
+            if (now && !inFrame) {
+                inFrame = true;
+                const viaTab = performance.now() - lastTabAt < TAB_ENTRY_MS;
+                if (!decide(viaTab, performance.now() - exitAt)) { frame.blur(); inFrame = false; }
+            } else if (!now) left();
+        };
+        const soon = () => { setTimeout(check, 0); setTimeout(check, FOCUS_POLL_MS / 2); };
+        // A focusin for the frame element itself (were a browser to fire one)
+        // would be an entry; for anything else the focus is not in the frame.
+        const focusedElsewhere = (e) => { if (e.target !== frame) left(); soon(); };
+        const pressed = (e) => { if (!e.isTrusted) return; left(); soon(); };
+        const timers = [setInterval(check, FOCUS_POLL_MS)];
+        const listeners = [];
+        const on = (target, type, fn, opts) => { target.addEventListener(type, fn, opts); listeners.push([target, type, fn, opts]); };
+        for (const doc of docs) {
+            on(doc, 'focusout', soon, true);
+            on(doc, 'focusin', focusedElsewhere, true);
+            for (const type of INPUT_TYPES) on(doc, type, pressed, { capture: true, passive: true });
+            const win = doc.defaultView;
+            if (win) on(win, 'blur', soon);
+        }
+        return () => {
+            for (const t of timers) clearInterval(t);
+            for (const [target, type, fn, opts] of listeners) target.removeEventListener(type, fn, opts);
+        };
+    },
+};
+boot({ ui }).catch((e) => ui.fail('The game could not start. Please reopen it.', e));
+
+// For the page's tests (page.test.js), which drive the dialog without a browser.
+export { fair, ui };