@energy8platform/shell 0.2.0

package/src/ui/html/HtmlRenderer.ts

@@ -0,0 +1,292 @@
+import type { ShellRenderer, ShellHost, OverlayRequest, OverlayHandle } from '@/core/renderer';
+import type { ShellTokens } from '@/core/theme';
+import { SHELL_CSS, SHELL_ROOT_ID } from './shell.css';
+import { buildThemeVars } from './theme-css';
+import { countUp } from './motion-dom';
+import { renderBottomBar } from './components/BottomBar';
+import { openSettingsModal } from './components/Settings';
+import { openGameInfoModal } from './components/GameInfo';
+import { openBuyBonusOverlay } from './components/BuyBonus';
+import { openBetModal, openAutoplayModal } from './components/pickers';
+import { buildModal } from './components/Modal';
+import { buildReplayModal } from './components/ReplayModal';
+
+export interface HtmlRendererOptions {
+  mount: HTMLElement;
+}
+
+const REMOVE_FADE_MS = 300;
+
+/** Count-up the value span (.ge-rd-val) of a readout, leaving its label untouched.
+ *  Returns the count-up canceler so the renderer can stop it before the node is replaced. */
+function animateReadout(el: HTMLElement, from: number, to: number, fmt: (n: number) => string): () => void {
+  const val = el.querySelector('.ge-rd-val') as HTMLElement | null;
+  if (!val) { el.textContent = fmt(to); return () => {}; }
+  return countUp(val, from, to, fmt);
+}
+
+export class HtmlRenderer implements ShellRenderer {
+  private host!: ShellHost;
+  private mountEl: HTMLElement;
+  private root!: HTMLElement;
+  private styleEl!: HTMLStyleElement;
+  private barHost = document.createElement('div');
+  private modalHost = document.createElement('div');
+  private ro: ResizeObserver | null = null;
+  private moneyAnims: Array<() => void> = [];
+  private modalOnKey: ((e: KeyboardEvent) => boolean) | undefined;
+  private destroyed = false;
+
+  /** MutationObserver for buy-bonus confirm fit — fires fitModals() when nodes are added
+   *  inside the modalHost (e.g. the confirm dialog appended after the grid is open). */
+  private mutObs: MutationObserver | null = null;
+
+  static readonly BAR_REF_WIDTH = 840;
+  static readonly BAR_MIN_SCALE = 0.5;
+  static readonly MODAL_FIT = 0.86;
+
+  constructor(opts: HtmlRendererOptions) {
+    this.mountEl = opts.mount;
+  }
+
+  mount(host: ShellHost): void {
+    this.host = host;
+    this.styleEl = document.createElement('style');
+    this.styleEl.textContent = SHELL_CSS;
+    this.root = document.createElement('div');
+    this.root.id = SHELL_ROOT_ID;
+    this.mountEl.append(this.styleEl, this.root);
+    this.barHost.className = 'ge-shell-barhost';
+    this.modalHost.className = 'ge-shell-modalhost';
+    this.root.append(this.barHost, this.modalHost);
+    this.observeLayout();
+    // Install a MutationObserver on modalHost (childList only, not attributes) so that when
+    // a buy-bonus confirm dialog is appended inside an already-open overlay, fitModals() fires
+    // and scales it correctly. Watching attributes would cause a transform→mutation loop.
+    this.mutObs = new MutationObserver(() => { if (!this.destroyed) this.fitModals(); });
+    this.mutObs.observe(this.modalHost, { childList: true, subtree: true });
+    if (typeof document !== 'undefined' && document.fonts) {
+      document.fonts.ready.then(() => { if (!this.destroyed) this.applyFitScale(); });
+    }
+  }
+
+  applyTheme(tokens: ShellTokens): void {
+    this.root.setAttribute('style', buildThemeVars(tokens));
+  }
+
+  renderBar(): void {
+    if (this.destroyed) return;
+    this.cancelMoneyAnims();
+    this.root.classList.toggle('ge-mobile', this.host.layout === 'mobile');
+    this.barHost.innerHTML = '';
+    this.barHost.appendChild(renderBottomBar(this.host));
+    this.applyFitScale();
+  }
+
+  setLayout(): void {
+    this.renderBar();
+  }
+
+  animateMoney(field: 'balance' | 'win', from: number, to: number): void {
+    const fmt = (n: number) => this.host.formatCurrency(n, field === 'win');
+    const el = this.barHost.querySelector(`[data-ge="${field}"]`) as HTMLElement | null;
+    if (el) this.moneyAnims.push(animateReadout(el, from, to, fmt));
+  }
+
+  openOverlay(req: OverlayRequest): OverlayHandle | void {
+    const built = this.buildOverlay(req);
+    if (!built) return;
+    this.showModal(built.root, built.onKey);
+    return { onKey: built.onKey, close: () => this.closeOverlay() };
+  }
+
+  closeOverlay(): void {
+    this.modalOnKey = undefined;
+    this.modalHost.innerHTML = '';
+  }
+
+  refreshSoundIcon?(_on: boolean): void {
+    // Settings registers via host.setSoundRefresh; nothing extra here
+  }
+
+  destroy(): Promise<void> {
+    if (this.destroyed) return Promise.resolve();
+    this.destroyed = true;
+    this.ro?.disconnect();
+    this.ro = null;
+    this.mutObs?.disconnect();
+    this.mutObs = null;
+    this.cancelMoneyAnims();
+    this.root.classList.add('ge-shell-hidden');
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        this.root.remove();
+        this.styleEl.remove();
+        resolve();
+      }, REMOVE_FADE_MS);
+    });
+  }
+
+  /** Trigger a bar fit-scale pass (used by tests that stub geometry after the initial render). */
+  fitBar(): void { this.applyFitScale(); }
+
+  // ── private ────────────────────────────────────────────────────────────────
+
+  private cancelMoneyAnims(): void {
+    for (const cancel of this.moneyAnims) cancel();
+    this.moneyAnims = [];
+  }
+
+  private buildOverlay(req: OverlayRequest): { root: HTMLElement; onKey?: (e: KeyboardEvent) => boolean } | null {
+    switch (req.kind) {
+      case 'settings': {
+        const root = openSettingsModal(this.host);
+        return { root };
+      }
+      case 'gameInfo': {
+        const { root, onKey } = openGameInfoModal(this.host);
+        return { root, onKey };
+      }
+      case 'buyBonus': {
+        const result = openBuyBonusOverlay(this.host);
+        if (!result) return null;
+        return { root: result.root, onKey: result.onKey };
+      }
+      case 'betPicker': {
+        const { root, onKey } = openBetModal(this.host);
+        return { root, onKey };
+      }
+      case 'autoplayPicker': {
+        const { root, onKey } = openAutoplayModal(this.host);
+        return { root, onKey };
+      }
+      case 'replay': {
+        const opts = req.opts;
+        const reopen = (): void => { this.openReplayInternal(opts); };
+        const root = buildReplayModal(this.host, opts, reopen);
+        return { root };
+      }
+      case 'modal': {
+        const root = buildModal(req.opts);
+        return { root, onKey: req.opts.onKey };
+      }
+    }
+  }
+
+  /** Opens a replay modal and shows it — used as the reopen callback after START REPLAY. */
+  private openReplayInternal(opts: import('@/core/types').ReplayModalOptions): void {
+    if (this.destroyed) return;
+    const reopen = (): void => { this.openReplayInternal(opts); };
+    const root = buildReplayModal(this.host, opts, reopen);
+    this.showModal(root);
+  }
+
+  private showModal(el: HTMLElement, onKey?: (e: KeyboardEvent) => boolean): void {
+    // Drop focus from any open shell control so a stray Space/Enter doesn't re-activate it
+    const active = document.activeElement as HTMLElement | null;
+    if (active && this.root.contains(active)) active.blur();
+    this.modalHost.innerHTML = '';
+    this.modalHost.appendChild(el);
+    this.modalOnKey = onKey;
+    this.fitModals();
+  }
+
+  /** Uniformly scale every open centred card modal (.ge-sheet) down so it fits a short/narrow
+   *  popout. Covers pickers, generic + replay modals, AND the buy-bonus confirm (which is hosted
+   *  inside the overlay, not directly in modalHost). */
+  fitModals(): void {
+    if (this.destroyed) return;
+    this.modalHost.querySelectorAll('.ge-sheet').forEach((el) => this.fitSheet(el as HTMLElement));
+  }
+
+  private fitSheet(root: HTMLElement): void {
+    const card = root.querySelector('.ge-modal-card') as HTMLElement | null;
+    if (!card) return;
+    card.style.transform = '';
+    const availW = root.clientWidth, availH = root.clientHeight;
+    const w = card.offsetWidth, h = card.offsetHeight;
+    if (w <= 0 || h <= 0 || availW <= 0 || availH <= 0) return;
+    const fit = HtmlRenderer.MODAL_FIT;
+    const s = Math.min(1, (availW * fit) / w, (availH * fit) / h);
+    if (s < 0.999) card.style.transform = `scale(${s.toFixed(4)})`;
+  }
+
+  private applyFitScale(): void {
+    if (this.destroyed) return;
+    const host = this.barHost;
+    const bar = host.querySelector('.ge-shell-bottom') as HTMLElement | null;
+    if (!bar) return;
+    // reset to baseline (idempotent)
+    host.classList.remove('ge-fit');
+    host.style.transform = '';
+    host.style.transformOrigin = '';
+    // clear any zoom from a prior pass. We zoom the whole dark PANEL (so the bar surface shrinks with
+    // its content on a narrow popout), plus BUY BONUS + a lifted WIN pill, which live outside it.
+    for (const el of host.querySelectorAll('.ge-bar-panel, .ge-shell-buybonus')) {
+      (el as HTMLElement).style.transform = '';
+      (el as HTMLElement).style.transformOrigin = '';
+      (el as HTMLElement).style.removeProperty('zoom');
+    }
+    if (this.host.layout === 'mobile') {
+      // First shrink long numbers per-readout (info pill balance/win, the total-win slot) so the
+      // buttons row stays full-size; then, only if a row STILL overflows (tiny phones), scale the
+      // whole stack as a last resort.
+      this.fitReadouts();
+      let need = 0;
+      for (const row of Array.from(bar.children) as HTMLElement[]) need = Math.max(need, row.scrollWidth);
+      const avail = bar.clientWidth;
+      if (need > avail + 1 && avail > 0) {
+        host.style.transformOrigin = 'bottom left';
+        host.style.transform = `scale(${Math.max(0.4, avail / need).toFixed(4)})`;
+      }
+      return;
+    }
+    const zoomBar = (z: number): void => {
+      const v = z < 0.999 ? z.toFixed(4) : '';
+      const set = (el: Element | null): void => {
+        if (!el) return;
+        if (v) (el as HTMLElement).style.setProperty('zoom', v);
+        else (el as HTMLElement).style.removeProperty('zoom');
+      };
+      // zoom the whole panel (surface + content, incl. the inline WIN pill, shrink together);
+      // BUY BONUS sits outside the panel, so zoom it too.
+      set(host.querySelector('.ge-bar-panel'));
+      set(bar.querySelector('.ge-shell-buybonus'));
+    };
+    const s = Math.max(HtmlRenderer.BAR_MIN_SCALE, Math.min(1, this.root.clientWidth / HtmlRenderer.BAR_REF_WIDTH));
+    zoomBar(s);
+    if (bar.scrollWidth > bar.clientWidth + 1 && bar.scrollWidth > 0) {
+      zoomBar(s * (bar.clientWidth / bar.scrollWidth));
+    }
+    this.fitReadouts();
+  }
+
+  /** Unified number-fit: shrink EVERY readout's value span (`.ge-rd-val`) with a transform-scale so
+   *  it fits its readout box — the single rule for all money displays (BET, balance, win, total win),
+   *  so a large number never grows the layout. It only ever kicks in on a BOUNDED box (a fixed width,
+   *  a flex slot, or a shrinkable `min-width:0` slot); a content-sized readout has box == value, so
+   *  the pass is a no-op there. The value span is inline-block, so its true width is measurable even
+   *  inside an `overflow:hidden` slot; the label is left untouched. */
+  private fitReadouts(): void {
+    for (const rd of Array.from(this.barHost.querySelectorAll('.ge-rd')) as HTMLElement[]) {
+      const val = rd.querySelector(':scope > .ge-rd-val') as HTMLElement | null;
+      if (!val) continue;
+      val.style.transform = '';                          // measure at full size
+      const avail = rd.clientWidth, need = val.scrollWidth;
+      if (need > avail + 0.5 && need > 0) val.style.transform = `scale(${(avail / need).toFixed(3)})`;
+    }
+  }
+
+  private observeLayout(): void {
+    const RO = (globalThis as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    if (typeof RO !== 'function') return;
+    this.ro = new RO((entries) => {
+      const rect = entries[0]?.contentRect;
+      const w = rect?.width ?? 0, h = rect?.height ?? 0;
+      this.host.notifyResize(w, h);
+      this.applyFitScale();
+      this.fitModals();
+    });
+    this.ro.observe(this.root);
+  }
+}

package/src/ui/html/components/BottomBar.ts

@@ -0,0 +1,240 @@
+import type { ShellHost } from '@/core/renderer';
+import { effectiveAccent, contrastText } from '@/core/colors';
+import { icon, type IconName } from '../icons';
+
+/** A floating labelled money readout (balance/win/bet). */
+function readout(ge: string, label: string, value: string): HTMLElement {
+  const el = document.createElement('div');
+  el.dataset.ge = ge;
+  el.className = `ge-rd ge-${ge}`;
+  // The value lives in its own inline-block span (.ge-rd-val) so it can be measured & shrunk to fit
+  // (see fitReadouts) independently of the label, and so the count-up animates just the number.
+  const lbl = document.createElement('span'); lbl.className = 'ge-lbl'; lbl.textContent = label;
+  const val = document.createElement('span'); val.className = 'ge-rd-val'; val.textContent = value;
+  el.append(lbl, val);
+  return el;
+}
+
+// Turbo is ONE bolt glyph (turbo1) whose state is shown by colour, not by swapping glyphs:
+//   off (0) → muted bolt · L1 → white bolt + 2px accent outline · L2 → accent-filled bolt + outline.
+// The level class (ge-turbo-0/1/2) drives the styling in shell.css; ≥2 caps at the L2 look.
+function turboBtn(host: ShellHost, level: number): HTMLButtonElement {
+  const b = iconBtn('turbo', 'turbo1', () => host.actions.cycleTurbo(), level > 0);
+  b.classList.add(`ge-turbo-${Math.min(2, level)}`);
+  return b;
+}
+
+/** A borderless icon button. */
+function iconBtn(ge: string, name: IconName, onClick: () => void, active = false): HTMLButtonElement {
+  const b = document.createElement('button');
+  b.className = `ge-iconbtn${active ? ' ge-active' : ''}`;
+  b.dataset.ge = ge;
+  b.innerHTML = icon(name);
+  b.addEventListener('click', () => { if (!b.disabled) onClick(); });
+  return b;
+}
+
+export function renderBottomBar(host: ShellHost): HTMLElement {
+  const { state, config } = host;
+  const fmt = (n: number) => host.formatCurrency(n);
+  const fmtWin = (n: number) => host.formatCurrency(n, true); // win / total-win: variable decimals
+  const mobile = host.layout === 'mobile';
+  const bar = document.createElement('div');
+  bar.className = 'ge-shell-bottom';
+  bar.dataset.geMode = state.mode;
+
+  // menu icon button (always)
+  const menu = iconBtn('menu', 'menu', () => host.actions.openMenu());
+
+  // All three modes share the base plaque layout. FS/replay hide the controls that don't apply
+  // and add Free Spins + Total Win blocks on the left; the per-spin WIN uses the base pill.
+  const isBase = state.mode === 'base';
+  const isFS = state.mode === 'freeSpins';
+  // FS always shows the spins counter + accumulated Total Win (even €0); a replay shows them
+  // only when it's a free-spins replay (freeSpins.total > 0).
+  const showFsBlocks = isFS || (state.mode === 'replay' && state.freeSpins.total > 0);
+
+  // Replay is a read-only historical round — there's no real balance to show, so hide it. Keyed on
+  // the sticky `replay` flag (not `mode`) so it stays hidden through a replay's free-spins phase.
+  const balance = state.replay
+    ? null
+    : readout('balance', host.t('Balance'), fmt(state.balance));
+  // With a feature active (e.g. Ante) the BET readout shows the effective stake, tinted with
+  // the feature accent; the base state.bet is unchanged and returns once the feature is off.
+  const feature = state.activeFeature;
+  const betShown = feature ? state.bet * feature.priceMultiplier : state.bet;
+  const betValue = readout('bet-value', host.t('Bet'), fmt(betShown));
+  if (feature) {
+    const accent = effectiveAccent(feature);
+    betValue.classList.add('ge-bet-feature');
+    betValue.style.color = accent;
+    // tint the "BET" label too (its .ge-lbl colour is set in CSS, so override inline)
+    const lbl = betValue.querySelector('.ge-lbl') as HTMLElement | null;
+    if (lbl) lbl.style.color = accent;
+  }
+  const turbo = config.features.turbo > 0 ? turboBtn(host, state.turbo) : null;
+
+  // interactive controls — base mode only
+  let betDown: HTMLElement | null = null, betUp: HTMLElement | null = null;
+  let spin: HTMLElement | null = null, auto: HTMLElement | null = null, buy: HTMLElement | null = null;
+  if (isBase) {
+    betDown = iconBtn('bet-down', 'minus', () => host.actions.stepBet(-1));
+    betUp = iconBtn('bet-up', 'plus', () => host.actions.stepBet(1));
+    betValue.classList.add('ge-betbtn');                       // tap the stake → bet picker
+    betValue.addEventListener('click', () => { if (!betLocked(host)) host.actions.openBetPicker(); });
+    spin = spinButton(host);
+    auto = config.features.autoplay ? autoButton(host) : null;
+    buy = (config.features.buyBonus !== false || config.onBonusBuy) ? buyBtn(host) : null;
+  }
+
+  const winEl = state.win > 0 ? readout('win', host.t('Win'), fmtWin(state.win)) : null;
+  // FS/replay left blocks: spins counter + accumulated Total Win (shown even at €0).
+  // current = number → "current / total"; current = null/undefined → just the (game-driven) total.
+  const fs = state.freeSpins;
+  const fsText = fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`;
+  // In FS the spins counter takes the SPIN slot as a rectangular hero plaque (same white/black-ring
+  // style as the SPIN disc); Total Win stays an inline readout.
+  const fsHero = showFsBlocks ? fsHeroPlaque(host, fsText) : null;
+  const fsTotalWin = showFsBlocks ? readout('fs-totalwin', host.t('Total win'), fmtWin(fs.totalWin)) : null;
+  // The hero in the centre/spin position: SPIN in base, the FS counter in free spins, nothing else.
+  const hero = isBase ? spin : fsHero;
+
+  if (mobile) {
+    // Two levels:
+    //   1) controls bar — [menu · auto · SPIN-or-FS · Total Win · turbo · buy]
+    //   2) a small info pill below — [balance · − bet + · win]
+    bar.appendChild(plaque('ge-m-controls', compact([menu, auto, hero, fsTotalWin, turbo, buy])));
+    const betGroup = plaque('ge-m-betgroup', compact([betDown, betValue, betUp]));
+    // WIN always occupies its slot (shows €0 between wins) so the pill never reflows on win↔0.
+    const mWin = readout('win', host.t('Win'), fmtWin(state.win));
+    bar.appendChild(plaque('ge-m-info', compact([balance, betGroup, mWin])));
+  } else {
+    // DESKTOP: BUY BONUS floats OUTSIDE, to the left of one continuous dark bar panel.
+    // LEFT (all the info): [menu] · [balance] · [Total Win] · [WIN]
+    // (Total Win only in FS / a fs replay; WIN only when there's a win this spin)
+    const left = zone('ge-zone-left', ...compact([menu, balance, fsTotalWin, winEl]));
+
+    // RIGHT (the controls): [bet (+ step)] · |divider| · [auto · SPIN-or-FS · turbo]
+    const betKids: HTMLElement[] = [betValue];
+    if (betUp && betDown) {
+      const step = document.createElement('div'); step.className = 'ge-betstep'; step.append(betUp, betDown);
+      betKids.push(step);
+    }
+    const betGroup = plaque('ge-betgroup', betKids);
+    const divider = document.createElement('div'); divider.className = 'ge-pl-divider';
+    const spinWrap = document.createElement('div'); spinWrap.className = 'ge-spinwrap';
+    spinWrap.append(...compact([auto, hero, turbo]));
+    const right = zone('ge-zone-right', betGroup, divider, spinWrap);
+
+    // One continuous dark panel: info group hard-left, controls hard-right (space-between).
+    // BUY BONUS sits to its left, outside the panel.
+    const panel = plaque('ge-bar-panel', [left, right]);
+    bar.append(...compact([buy, panel]));
+  }
+
+  applyBusy(host, bar);
+  return bar;
+}
+
+/** Free-spins hero plaque — takes the SPIN slot in FS: same white disc/black-ring language as SPIN,
+ *  but a rounded RECTANGLE showing the spins counter ("3 / 10"). */
+function fsHeroPlaque(host: ShellHost, text: string): HTMLElement {
+  const el = document.createElement('div');
+  el.className = 'ge-fs-hero'; el.dataset.ge = 'fs-counter';
+  const lbl = document.createElement('span'); lbl.className = 'ge-fs-lbl'; lbl.textContent = host.t('Free spins');
+  const num = document.createElement('span'); num.className = 'ge-fs-num'; num.textContent = text;
+  el.append(lbl, num);
+  return el;
+}
+
+function zone(cls: string, ...children: HTMLElement[]): HTMLElement {
+  const z = document.createElement('div');
+  z.className = `ge-zone ${cls}`;
+  z.append(...children);
+  return z;
+}
+/** A rounded background panel ("plaque") grouping a set of controls. */
+function plaque(cls: string, children: HTMLElement[]): HTMLElement {
+  const d = document.createElement('div');
+  d.className = cls;
+  d.append(...children);
+  return d;
+}
+function compact(items: (HTMLElement | null)[]): HTMLElement[] { return items.filter((x): x is HTMLElement => x !== null); }
+
+function buyBtn(host: ShellHost): HTMLButtonElement {
+  const buy = document.createElement('button');
+  buy.className = 'ge-shell-buybonus'; buy.dataset.ge = 'buybonus';
+  const feature = host.state.activeFeature;
+  if (feature) {
+    // A feature is active → this button turns into DISABLE (tinted with the feature accent).
+    const accent = effectiveAccent(feature);
+    buy.classList.add('ge-disable');
+    buy.innerHTML = `<span>${host.t('DISABLE')}</span>`;
+    buy.style.background = accent; buy.style.color = contrastText(accent);
+    buy.addEventListener('click', () => { if (!buy.disabled) host.actions.deactivateFeature(); });
+  } else {
+    // Ticket icon (no text); keep the label for screen readers.
+    buy.setAttribute('aria-label', host.t('BUY BONUS'));
+    buy.innerHTML = `<span class="ge-bb-tk">${icon('ticket')}</span>`;
+    buy.addEventListener('click', () => { if (!buy.disabled) host.actions.openBuyBonus(); });
+  }
+  return buy;
+}
+
+function betLocked(host: ShellHost): boolean {
+  return host.state.busy || host.state.autoplay.active;
+}
+
+/** SPIN disc — rotates while busy; becomes a STOP + countdown while autoplay runs. */
+function spinButton(host: ShellHost): HTMLButtonElement {
+  const { state } = host;
+  const sp = document.createElement('button');
+  sp.className = 'ge-shell-spin'; sp.dataset.ge = 'spin';
+  if (state.autoplay.active) {
+    sp.classList.add('ge-stop');
+    const rem = state.autoplay.remaining;
+    const label = Number.isFinite(rem) ? String(rem) : '∞';
+    sp.innerHTML = `<span class="ge-spin-stop">${icon('stop')}</span><span class="ge-spin-count">${label}</span>`;
+    sp.addEventListener('click', () => { if (!sp.disabled) host.actions.stopAutoplay(); });
+  } else {
+    sp.innerHTML = icon('spin');
+    if (state.busy) sp.classList.add('ge-spinning');
+    sp.addEventListener('click', () => { if (!sp.disabled) host.actions.spin(); });
+  }
+  return sp;
+}
+
+/** Autoplay icon button — opens the count picker; glows accent while running. */
+function autoButton(host: ShellHost): HTMLButtonElement {
+  const active = host.state.autoplay.active;
+  const b = iconBtn('autoplay', 'autoplay', () => onAutoplay(host), active);
+  if (active) b.classList.add('ge-glow');
+  return b;
+}
+
+function onAutoplay(host: ShellHost): void {
+  if (host.state.autoplay.active) host.actions.stopAutoplay();
+  else host.actions.openAutoplayPicker();
+}
+
+function applyBusy(host: ShellHost, bar: HTMLElement): void {
+  const { busy } = host.state;
+  const auto = host.state.autoplay.active;
+  const lockBet = busy || auto;
+  const disable = (ge: string, off: boolean) => {
+    const el = bar.querySelector(`[data-ge="${ge}"]`) as HTMLButtonElement | null;
+    if (el) el.disabled = off;
+  };
+  // also disable the stepper that's already at the end of the bet range
+  const i = host.state.availableBets.indexOf(host.state.bet);
+  disable('bet-up', lockBet || i >= host.state.availableBets.length - 1);
+  disable('bet-down', lockBet || i <= 0);
+  disable('spin', busy && !auto);     // keep the STOP disc clickable through autoplay
+  disable('autoplay', busy && !auto); // keep autoplay (stop) clickable through autoplay
+  const betVal = bar.querySelector('[data-ge="bet-value"]') as HTMLElement | null;
+  if (betVal) betVal.classList.toggle('ge-disabled', lockBet);
+  const buy = bar.querySelector('[data-ge="buybonus"]') as HTMLButtonElement | null;
+  // disabled for the whole autoplay run (not just per-spin busy) so it doesn't flicker/pulse
+  if (buy) buy.disabled = busy || auto || !host.state.buyBonusEnabled;
+}