hbengine 0.2.3

package/engine-sdk/assets.js

@@ -0,0 +1,92 @@
+/**
+ * Staged loading. A game declares its files in groups (assets.json) and
+ * loads them when it needs them: `boot` before the first frame, the rest
+ * after `ready()` or on demand. The upload checks hold every group to its
+ * byte budget, so the first frame never waits for music it does not play.
+ *
+ *     {
+ *       "groups": {
+ *         "boot":  { "files": ["index.js", "ui.css", "lobby.webp"] },
+ *         "music": { "files": ["music/theme.mp3"], "load": "idle" },
+ *         "skins": { "files": ["skins/tabby.webp"], "load": "demand" }
+ *       }
+ *     }
+ *
+ * `load` is when a group is fetched: "boot" (the group named boot, always
+ * first), "idle" (after ready, in declaration order) or "demand" (only when
+ * the game asks). Files are fetched into the browser cache; the game then
+ * uses their ordinary relative URLs.
+ */
+
+const LOADS = ['boot', 'idle', 'demand'];
+const GROUP_RE = /^[a-z0-9][a-z0-9-]{0,31}$/;
+const FILE_RE = /^(?!\/)(?!.*\.\.)[A-Za-z0-9._\/-]{1,200}$/;
+
+/** Checks an assets manifest's shape. Returns the problems, empty when fine. */
+export function checkAssetManifest(manifest) {
+    const problems = [];
+    const groups = manifest && manifest.groups;
+    if (!groups || typeof groups !== 'object' || Array.isArray(groups)) return ['groups must be an object'];
+    if (!groups.boot) problems.push('a boot group is required');
+    const seen = new Map();
+    for (const [name, g] of Object.entries(groups)) {
+        if (!GROUP_RE.test(name)) problems.push(`group name ${JSON.stringify(name)}`);
+        if (!g || !Array.isArray(g.files) || g.files.length === 0) {
+            problems.push(`group ${name} needs files`);
+            continue;
+        }
+        const load = name === 'boot' ? 'boot' : g.load ?? 'idle';
+        if (!LOADS.includes(load) || (load === 'boot') !== (name === 'boot')) problems.push(`group ${name} load ${JSON.stringify(g.load)}`);
+        for (const f of g.files) {
+            if (typeof f !== 'string' || !FILE_RE.test(f)) problems.push(`group ${name} file ${JSON.stringify(f)}`);
+            else if (seen.has(f)) problems.push(`${f} is in both ${seen.get(f)} and ${name}`);
+            else seen.set(f, name);
+        }
+    }
+    return problems;
+}
+
+/**
+ * Creates the loader. `onProgress(group, loadedFiles, totalFiles)` reports
+ * each group (the SDK forwards it to the shell as `loading`).
+ */
+export function createAssetLoader(manifest, { base = './', fetchFile = (url) => fetch(url), onProgress = () => {}, concurrency = 6 } = {}) {
+    const problems = checkAssetManifest(manifest);
+    if (problems.length) throw new TypeError(`assets.json: ${problems.join('; ')}`);
+    if (!Number.isSafeInteger(concurrency) || concurrency < 1) throw new RangeError('asset concurrency must be a positive integer');
+    const groups = manifest.groups;
+    const loading = new Map(); // group -> Promise
+
+    function load(name) {
+        if (!Object.hasOwn(groups, name)) return Promise.reject(new TypeError(`unknown asset group ${name}`));
+        if (!loading.has(name)) loading.set(name, fetchGroup(name));
+        return loading.get(name);
+    }
+
+    async function fetchGroup(name) {
+        const files = groups[name].files;
+        let done = 0;
+        let next = 0;
+        onProgress(name, 0, files.length);
+        async function worker() {
+            while (next < files.length) {
+                const file = files[next++];
+                // checkAssetManifest admitted only plain relative paths.
+                const res = await fetchFile(base + file);
+                if (!res || !res.ok) throw new Error(`asset ${file}: ${res ? res.status : 'no response'}`);
+                await res.arrayBuffer(); // into the cache, whatever the type
+                onProgress(name, ++done, files.length);
+            }
+        }
+        await Promise.all(Array.from({ length: Math.min(concurrency, files.length) }, worker));
+    }
+
+    /** Loads the idle groups one after another, in declaration order. */
+    async function loadIdle() {
+        for (const [name, g] of Object.entries(groups)) {
+            if (name !== 'boot' && (g.load ?? 'idle') === 'idle') await load(name);
+        }
+    }
+
+    return { load, loadBoot: () => load('boot'), loadIdle };
+}

package/engine-sdk/autoplay.js

@@ -0,0 +1,82 @@
+/**
+ * The Originals' autobet rules, as the engine panel (ui.js) turns them into
+ * a shell autoplay session. Pure, so the rules are tested without a DOM.
+ *
+ * The session is the shell's (protocol.js AUTOPLAY_START): it holds at most
+ * `rounds` plays of the bet it was asked for, none above `stake`, and ends at
+ * the player's stop on profit or loss (the shell shows the player all of it
+ * before Start). The panel keeps the Originals' settings — a count (0 = as many as
+ * the shell allows), on win / on loss reset the stake or increase it by a
+ * percent, stop on profit / stop on loss — and asks for the session those
+ * settings can need: the stake it starts with when both rules reset, or the
+ * most the player could stake (the coin's maximum, the selected bet's own
+ * ceiling under the maximum win and the balance) when a rule grows it. A
+ * grown stake is cut to that ceiling, never above it: the shell refuses a
+ * play above the session's stake. The request names the bet (`mode`, `bet`),
+ * so the shell caps the stake at the bet's own ceiling
+ * (`limits.maxStake[mode][bet]`) as well as the coin's maximum and the
+ * balance; the panel applies the same ceiling (field.maxStake) so the terms
+ * it asks for are the ones the player will see.
+ */
+import { AUTOPLAY_MAX_ROUNDS } from './protocol.js';
+
+// Truncated down to dp decimals, with the float noise scrubbed first (as in
+// bet-field.js): a stake never grows past what the rule gives.
+export function trunc(n, dp) {
+    if (!Number.isFinite(n) || n <= 0) return 0;
+    const f = 10 ** dp;
+    return Math.floor(parseFloat((n * f).toPrecision(15))) / f;
+}
+
+/**
+ * The most a stake may reach: the coin's max, the bet's own ceiling
+ * (bet-field.js `maxStake`, from protocol.js maxStakeFor) and the balance,
+ * whichever is lowest; `amount` when none is known. A bet ceiling of 0 (the
+ * bet takes nothing while the coin has no rate) never gets here: the field
+ * refuses the stake before a run starts.
+ */
+export function stakeCeiling({ amount, limits = {}, balance = null, maxStake = null }) {
+    const bounds = [];
+    if (typeof limits.max === 'number' && limits.max > 0) bounds.push(limits.max);
+    if (typeof maxStake === 'number' && maxStake > 0) bounds.push(maxStake);
+    if (typeof balance === 'number' && balance >= 0) bounds.push(balance);
+    if (!bounds.length) return amount;
+    return Math.max(amount, Math.min(...bounds));
+}
+
+/**
+ * The session the panel asks the shell for.
+ *   mode, bet  the bet the run is for (the panel's selection; the shell holds every play to it)
+ *   amount     the stake the run starts with (wallet units)
+ *   count      the player's number of bets; 0 is "infinite", which is the shell's cap
+ *   rule       { win: 'reset'|'increase', loss: 'reset'|'increase' }
+ *   winPct, lossPct   the percent a rule increases by
+ *   stopProfit, stopLoss   the player's stops (0 = none)
+ *   limits, balance, maxStake   what bounds a grown stake: the coin's limits, the
+ *              balance, and the selected bet's own ceiling (null when the session names none)
+ */
+export function autoplayRequest({ mode, bet, amount, count = 0, rule = { win: 'reset', loss: 'reset' }, winPct = 0, lossPct = 0, stopProfit = 0, stopLoss = 0, limits = {}, balance = null, maxStake = null }) {
+    const rounds = count > 0 ? Math.min(Math.floor(count), AUTOPLAY_MAX_ROUNDS) : AUTOPLAY_MAX_ROUNDS;
+    const grows = (rule.win === 'increase' && winPct > 0) || (rule.loss === 'increase' && lossPct > 0);
+    const req = { rounds, stake: grows ? stakeCeiling({ amount, limits, balance, maxStake }) : amount };
+    if (typeof mode === 'string') req.mode = mode;
+    if (typeof bet === 'string') req.bet = bet;
+    if (stopProfit > 0) req.stopOnProfit = stopProfit;
+    if (stopLoss > 0) req.stopOnLoss = stopLoss;
+    return req;
+}
+
+/** The stake of the next round after a win or a loss, within the session's stake. */
+export function nextStake({ amount, base, won, rule, winPct = 0, lossPct = 0, cap, decimals = 8 }) {
+    const how = won ? rule.win : rule.loss;
+    const pct = Math.max(0, won ? winPct : lossPct);
+    const next = how === 'increase' ? amount * (1 + pct / 100) : base;
+    return trunc(Math.min(next, cap), decimals);
+}
+
+/** Why the run stops on its result so far: 'profit', 'loss', or null to go on. */
+export function autoplayStop({ profit, stopProfit = 0, stopLoss = 0 }) {
+    if (stopProfit > 0 && profit >= stopProfit) return 'profit';
+    if (stopLoss > 0 && -profit >= stopLoss) return 'loss';
+    return null;
+}

package/engine-sdk/bet-field.js

@@ -0,0 +1,391 @@
+/**
+ * The Originals' money fields, for any game: drop them in, connect them to
+ * the engine, and the player sees their own currency exactly as in Dice or
+ * Coin Flip — our coin mark, the fiat sign, the field's precision, the
+ * caption in the other unit, ½ · 2× · max — with nothing to build.
+ *
+ *     import './engine-sdk/bet-field.js';
+ *
+ *     <hb-bet-amount></hb-bet-amount>      the stake (label="…", max-button)
+ *     <hb-balance></hb-balance>            the balance, as the header shows it
+ *
+ *     field.connect(engine);
+ *     field.bet = { mode, bet };                           // the bet the stake is for (its own ceiling)
+ *     engine.play({ mode, bet, amount: field.amount });    // wallet units
+ *     field.disabled = true;                               // while a round runs
+ *     field.addEventListener('change', (e) => e.detail);   // { amount, reason }
+ *     field.value;                                         // the same as text, like an <input>
+ *
+ * The rule is the Originals' (bet field: coinflip-frontend BetAmount.svelte,
+ * money: game-kit wallet-format.js through engine.money): a typed amount is in
+ * the field's unit and becomes the wallet amount truncated down, never more
+ * than typed; an empty field is no stake (`reason` is `min`: an engine round
+ * is never played for free, so a play button stays disabled on it); a stake
+ * the server would refuse (over the balance or the limits) turns the field
+ * red and says why, and the game should not send it. The limits include the
+ * maximum win per round: each bet has its own highest stake
+ * (engine.config.limits.maxStake[mode][bet], lower the higher the bet's top
+ * multiplier), so tell the field which bet the stake is for and it holds the
+ * stake to it, says the most the bet takes, and its max chip stops there. A
+ * figure of 0 (the server names it while the coin has no USD rate) means
+ * nothing can be staked for now: the field says so in the Originals' words
+ * and hides its max chip, and a play button on `reason` stays disabled. The
+ * server checks everything again anyway.
+ *
+ * Shadow DOM: the game's styles cannot reach in, and these cannot leak out.
+ * The look follows the site's tokens; a game may set --hb-font.
+ */
+
+import { MESSAGES } from './messages.js';
+import { maxStakeFor } from './protocol.js';
+import { leastStake, stakeCeiling, stakeReason } from './stake.js';
+
+const CSS = `
+:host { display: block; font-family: var(--hb-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); color: #F9F9FB; }
+.row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; margin-bottom: 8px; }
+.label { font-size: 14px; line-height: 20px; font-weight: 600; }
+.cap { font-size: 14px; line-height: 20px; font-weight: 600; color: #8F96A8; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hint { font-size: 12px; line-height: 16px; color: #8F96A8; min-height: 16px; margin-top: 6px; }
+.hint.bad { color: #FA2E5D; }
+.field { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 48px; width: 100%; padding: 0 4px 0 16px;
+  background: #0b1f28; border: 1px solid #0D2A38; border-radius: 8px; transition: border-color 120ms ease, box-shadow 120ms ease; }
+.field:focus-within { box-shadow: 0 0 0 4px #08141a, 0 0 0 6px #28F3F3; }
+.field.bad { border-color: #FA2E5D; box-shadow: 0 0 0 1px #FA2E5D inset; }
+.field.shake { animation: shake 200ms ease; }
+@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
+.mark { flex: 0 0 auto; width: 16px; height: 16px; display: block; border-radius: 50%; }
+.sign { flex: 0 0 auto; white-space: nowrap; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; margin-right: -8px; }
+.sign.empty { color: #8F96A8; }
+input { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: none; color: #F9F9FB;
+  font: inherit; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
+input::placeholder { color: #8F96A8; }
+input[readonly] { color: #8F96A8; cursor: not-allowed; }
+.chips { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
+button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px;
+  background: rgba(9, 102, 125, 0.15); color: #F9F9FB; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
+  transition: background 120ms ease, transform 120ms ease; }
+button:hover, button:focus-visible { background: rgba(9, 102, 125, 0.2); outline: none; }
+button:active { transform: scale(0.96); }
+button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
+.balance { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+`;
+
+// The field's words are the Originals' own, in every language the site
+// ships (messages.js, generated from Coin Flip's dictionaries). The language
+// is the player's: the field's `lang`, the shell's, the page's, the browser's.
+export function wordsFor(lang) {
+    const v = String(lang || '').toLowerCase().replace('_', '-');
+    return MESSAGES[v] || MESSAGES[v.split('-')[0]] || MESSAGES.en;
+}
+
+// Truncated down to dp decimals, with the float noise scrubbed first (as in
+// wallet-format.js): a stake never grows past what the player chose.
+function trunc(n, dp) {
+    if (!Number.isFinite(n) || n <= 0) return 0;
+    const f = 10 ** dp;
+    return Math.floor(parseFloat((n * f).toPrecision(15))) / f;
+}
+
+function sheet(root) {
+    const style = document.createElement('style');
+    style.textContent = CSS;
+    root.append(style);
+}
+
+export class BetAmountField extends HTMLElement {
+    static observedAttributes = ['label', 'disabled', 'max-button', 'lang'];
+    #engine = null;
+    #money = null;
+    #amount = 0;
+    #bet = null; // { mode, bet } the stake is for: its own ceiling under the maximum win
+    #typing = false;
+    #hintTimer = 0;
+    #note = '';
+    #els;
+
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        sheet(root);
+        const wrap = document.createElement('div');
+        wrap.innerHTML = `<div class="row"><span class="label" part="label"></span><span class="cap" part="caption"></span></div>
+<div class="field" part="field"><img class="mark" alt="" hidden><span class="sign" hidden></span>
+<input inputmode="decimal" autocomplete="off" spellcheck="false" readonly>
+<span class="chips"><button type="button" data-chip="half">½</button><button type="button" data-chip="double">2×</button><button type="button" data-chip="max" hidden>max</button></span></div>
+<div class="hint" part="hint" aria-live="polite"></div>`;
+        root.append(wrap);
+        const $ = (s) => root.querySelector(s);
+        this.#els = { label: $('.label'), cap: $('.cap'), field: $('.field'), mark: $('.mark'), sign: $('.sign'), input: $('input'), hint: $('.hint'), chips: [...root.querySelectorAll('button')] };
+        const { input } = this.#els;
+        input.addEventListener('focus', () => input.select());
+        input.addEventListener('input', () => this.#onInput());
+        input.addEventListener('blur', () => this.#onBlur());
+        for (const b of this.#els.chips) b.addEventListener('click', () => this.#chip(b.dataset.chip));
+        this.#render();
+    }
+
+    /** Binds the field to the engine: its currency, limits and balance. */
+    connect(engine) {
+        this.#engine = engine;
+        this.#money = engine.money;
+        engine.on('balance', () => this.#render());
+        const kept = this.#recall();
+        if (kept > 0) this.#amount = kept;
+        this.#render();
+        return this;
+    }
+
+    /** The stake in wallet units, what engine.play takes. */
+    get amount() {
+        return this.#amount;
+    }
+
+    set amount(v) {
+        this.#set(Number(v) || 0);
+    }
+
+    /** The stake as text, like an <input>'s value: for code written against
+     * one (a plain decimal in wallet units, never an exponent). */
+    get value() {
+        if (!this.#money) return '0';
+        const text = this.#amount.toFixed(this.#money.walletDecimals);
+        return text.includes('.') ? text.replace(/0+$/, '').replace(/\.$/, '') : text;
+    }
+
+    set value(v) {
+        this.#set(this.#money ? this.#money.parse(String(v)) : 0);
+    }
+
+    /** The bet the stake is for ({ mode, bet }), or null: the field holds the
+     * stake to that bet's own highest stake under the maximum win per round
+     * (engine.config.limits.maxStake[mode][bet]) once it knows the bet. */
+    get bet() {
+        return this.#bet;
+    }
+
+    set bet(v) {
+        const next = v && typeof v.mode === 'string' && typeof v.bet === 'string' ? { mode: v.mode, bet: v.bet } : null;
+        if ((next && this.#bet && next.mode === this.#bet.mode && next.bet === this.#bet.bet) || (!next && !this.#bet)) return;
+        this.#bet = next;
+        this.#render();
+        // Another bet may take less: whoever follows `reason` hears it changed.
+        this.dispatchEvent(new CustomEvent('change', { detail: { amount: this.#amount, reason: this.reason } }));
+    }
+
+    /** The most the selected bet takes, in wallet units, or null when the
+     * session names none for it (protocol.js maxStakeFor). 0 when it names
+     * nothing can be staked for now (the coin has no rate). */
+    get maxStake() {
+        if (!this.#engine || !this.#bet) return null;
+        return maxStakeFor(this.#engine.config.limits, this.#bet.mode, this.#bet.bet);
+    }
+
+    /** Why the stake cannot be played now ({ code, message }), or null. An
+     * empty field is `min`: there is no free round (stake.js); `maxWin` is
+     * over the most the selected bet takes under the maximum win per round,
+     * and the message names that figure. When that figure is 0 nothing can
+     * be staked until the coin's rate is back, and the message is the
+     * Originals' "something went wrong": the server would answer every play
+     * with `unavailable`. */
+    get reason() {
+        const m = this.#money;
+        if (!m || !this.#engine) return null;
+        const limits = this.#engine.config.limits || {};
+        const most = this.maxStake;
+        const code = stakeReason(this.#amount, limits, this.#engine.balance, most);
+        if (code === 'balance') return { code, message: this.#words.blockOverBalance };
+        if (code === 'min') return { code, message: this.#say('blockUnderMin', leastStake(limits, m.walletDecimals)) };
+        if (code === 'max') return { code, message: this.#say('blockOverMax', limits.max) };
+        if (code === 'maxWin') return { code, message: most === 0 ? this.#words.apiInternalError : this.#say('blockOverMax', most) };
+        return null;
+    }
+
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+
+    set disabled(on) {
+        this.toggleAttribute('disabled', !!on);
+    }
+
+    attributeChangedCallback() {
+        this.#render();
+    }
+
+    get #words() {
+        return wordsFor(this.getAttribute('lang') || (this.#engine && this.#engine.config.locale) || document.documentElement.lang || navigator.language);
+    }
+
+    #say(key, amount) {
+        const m = this.#money;
+        return this.#words[key].replace('{amount}', m.format(amount)).replace('{currency}', m.unit);
+    }
+
+    #onInput() {
+        const { input } = this.#els;
+        this.#typing = true;
+        let text = this.#money ? this.#money.filter(input) : input.value;
+        // No more decimals than the field shows: a stake of 1.239 shown as
+        // "1.24" would be a stake the player cannot see.
+        const dot = text.indexOf('.');
+        if (this.#money && dot >= 0 && text.length - dot - 1 > this.#money.decimals) {
+            text = text.slice(0, dot + (this.#money.decimals ? this.#money.decimals + 1 : 0));
+            input.value = text;
+        }
+        if (!this.#money || text.replace(/[\s,]/g, '') === '') return this.#render();
+        this.#set(this.#money.parse(text), { typing: true });
+    }
+
+    // Left empty: no stake (the field says the minimum; the panel will not
+    // play it). Below the minimum: raised to it, and said so.
+    #onBlur() {
+        if (!this.#typing) return;
+        this.#typing = false;
+        if (this.#els.input.value.replace(/[\s,]/g, '') === '') return this.#set(0);
+        const min = this.#engine && this.#engine.config.limits && this.#engine.config.limits.min;
+        if (typeof min === 'number' && this.#amount > 0 && this.#amount < min) {
+            this.#set(min);
+            return this.#hint(this.#say('blockUnderMin', min));
+        }
+        this.#render();
+    }
+
+    #chip(kind) {
+        const m = this.#money;
+        if (!m || this.disabled) return;
+        // The most the field offers: the coin's maximum, the selected bet's own
+        // ceiling under the maximum win, the balance — whichever is least.
+        const cap = stakeCeiling(this.#engine && this.#engine.config.limits, this.#engine.balance, this.maxStake);
+        if (kind === 'half') return this.#set(trunc(this.#amount / 2, m.walletDecimals));
+        const want = kind === 'double' ? this.#amount * 2 : cap;
+        if (Number.isFinite(want)) this.#set(trunc(Math.min(want, cap), m.walletDecimals));
+    }
+
+    #set(amount, { typing = false } = {}) {
+        const m = this.#money;
+        const next = m ? trunc(amount, m.walletDecimals) : 0;
+        const before = this.reason;
+        this.#amount = next;
+        if (!typing) this.#typing = false;
+        this.#remember();
+        this.#render();
+        const reason = this.reason;
+        // A wrong stake shakes; an empty field is only not yet a stake.
+        if (reason && next > 0 && (!before || before.code !== reason.code)) this.#shake();
+        // Typing already sends 'input' out of the shadow root (it is composed);
+        // a chip or a script sets the amount without one.
+        if (!typing) this.dispatchEvent(new Event('input', { bubbles: true }));
+        this.dispatchEvent(new CustomEvent('change', { detail: { amount: next, reason } }));
+    }
+
+    /** A note under the field for a few seconds (a refusal's message). */
+    note(text) {
+        this.#hint(String(text));
+    }
+
+    // A note for a few seconds: money never changes without a word.
+    #hint(text) {
+        this.#note = text;
+        clearTimeout(this.#hintTimer);
+        this.#hintTimer = setTimeout(() => {
+            this.#note = '';
+            this.#render();
+        }, 4000);
+        this.#render();
+    }
+
+    #shake() {
+        const f = this.#els.field;
+        f.classList.remove('shake');
+        void f.offsetWidth;
+        f.classList.add('shake');
+    }
+
+    #render() {
+        const e = this.#els;
+        if (!e) return;
+        const m = this.#money;
+        e.label.textContent = this.getAttribute('label') || this.#words.betAmount;
+        // No max chip for a bet that takes nothing right now (maxStake 0): there is no most to set.
+        e.chips[2].hidden = !this.hasAttribute('max-button') || this.maxStake === 0;
+        const off = this.disabled || !m;
+        e.input.readOnly = off;
+        for (const b of e.chips) b.disabled = off;
+        if (!m) return;
+        e.mark.src = m.mark;
+        e.mark.hidden = false;
+        e.sign.textContent = m.sign;
+        e.sign.hidden = !m.sign;
+        e.input.placeholder = m.format(0);
+        if (!this.#typing) e.input.value = this.#amount > 0 ? m.format(this.#amount) : '';
+        e.input.setAttribute('aria-label', `${e.label.textContent}, ${m.unit}`);
+        e.sign.classList.toggle('empty', e.input.value === '');
+        e.cap.textContent = m.caption(this.#amount) || '';
+        const reason = this.reason;
+        // Red is for a stake the server would refuse; an empty field just
+        // says what the least stake is.
+        const wrong = !!reason && this.#amount > 0;
+        e.field.classList.toggle('bad', wrong);
+        e.hint.classList.toggle('bad', wrong);
+        e.hint.textContent = reason ? reason.message : this.#note;
+    }
+
+    // The last stake, per game and coin, on this device: the field comes back
+    // with what the player last played, as the Originals' does.
+    #key() {
+        const c = this.#engine && this.#engine.config;
+        return c ? `hb-bet:${c.game}:${this.#money.coin}` : null;
+    }
+
+    #remember() {
+        const k = this.#key();
+        try { if (k) localStorage.setItem(k, String(this.#amount)); } catch { /* storage is a convenience */ }
+    }
+
+    #recall() {
+        const k = this.#key();
+        let v = 0;
+        try { v = k ? Number(localStorage.getItem(k)) : 0; } catch { v = 0; }
+        return Number.isFinite(v) && v > 0 ? trunc(v, this.#money.walletDecimals) : 0;
+    }
+}
+
+export class BalanceField extends HTMLElement {
+    #engine = null;
+    #el;
+
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        sheet(root);
+        this.#el = document.createElement('span');
+        this.#el.className = 'balance';
+        this.#el.setAttribute('part', 'balance');
+        root.append(this.#el);
+    }
+
+    connect(engine) {
+        this.#engine = engine;
+        engine.on('balance', () => this.#render());
+        this.#render();
+        return this;
+    }
+
+    #render() {
+        const e = this.#engine;
+        if (!e) return;
+        const m = e.money;
+        const img = document.createElement('img');
+        img.className = 'mark';
+        img.alt = '';
+        img.src = m.mark;
+        const text = e.balance === null ? '—' : (m.sign || '') + m.format(e.balance);
+        this.#el.replaceChildren(img, document.createTextNode(text + (m.sign ? '' : ' ' + m.unit)));
+        this.title = m.caption(e.balance ?? 0) || '';
+    }
+}
+
+if (globalThis.customElements && !customElements.get('hb-bet-amount')) {
+    customElements.define('hb-bet-amount', BetAmountField);
+    customElements.define('hb-balance', BalanceField);
+}