@energy8platform/platform-core 0.26.1 → 0.28.0

package/src/shell/components/BottomBar.ts

@@ -1,237 +0,0 @@
-import type { GameShell } from '../GameShell';
-import { formatCurrency } from '../format';
-import { stepBet, nextTurbo } from '../state';
-import { effectiveAccent, contrastText } from '../colors';
-import { icon, type IconName } from './icons';
-import { twoLine } from './primitives';
-
-/** 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}`;
-  el.innerHTML = `<span class="ge-lbl">${label}</span>`;
-  el.append(document.createTextNode(value));
-  return el;
-}
-
-// Resting icon is turbo1 (1 line, grey via .ge-iconbtn); engaging turbo adds the
-// .ge-active class which paints it white. Higher levels add more speed lines.
-// level: 0 → turbo1 (grey), 1 → turbo1 (white), 2 → turbo2, 3 → turbo3.
-function turboIcon(level: number): IconName {
-  return (['turbo1', 'turbo1', 'turbo2', 'turbo3'] as const)[Math.max(0, Math.min(3, level))];
-}
-
-/** 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(shell: GameShell): HTMLElement {
-  const { state, config } = shell;
-  const fmt = (n: number) => formatCurrency(n, config.currency);
-  const fmtWin = (n: number) => formatCurrency(n, config.currency, true); // win / total-win: variable decimals
-  const mobile = shell.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', () => shell.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', shell.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', shell.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
-    ? iconBtn('turbo', turboIcon(state.turbo), () => onTurbo(shell), state.turbo > 0) : 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', () => onBet(shell, -1));
-    betUp = iconBtn('bet-up', 'plus', () => onBet(shell, 1));
-    betValue.classList.add('ge-betbtn');                       // tap the stake → bet picker
-    betValue.addEventListener('click', () => { if (!betLocked(shell)) shell.openBetPicker(); });
-    spin = spinButton(shell);
-    auto = config.features.autoplay ? autoButton(shell) : null;
-    buy = (config.features.buyBonus !== false || config.onBonusBuy) ? buyBtn(shell) : null;
-  }
-
-  const winEl = state.win > 0 ? readout('win', shell.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}`;
-  const fsCounter = showFsBlocks ? readout('fs-counter', shell.t('Free spins'), fsText) : null;
-  const fsTotalWin = showFsBlocks ? readout('fs-totalwin', shell.t('Total win'), fmtWin(fs.totalWin)) : null;
-
-  if (mobile) {
-    // rows: [balance · win] · [menu · auto · spin · FS counter · Total Win · turbo · buy] · [− bet +]
-    // FS counter + Total Win live in the controls row (alongside menu/turbo), not the top readouts.
-    bar.appendChild(plaque('ge-m-top ge-pl ge-pl-glass', compact([balance, winEl])));
-    const center = isBase ? spin : null;
-    bar.appendChild(plaque('ge-m-controls ge-pl-dark', compact([menu, auto, center, fsCounter, fsTotalWin, turbo, buy])));
-    bar.appendChild(plaque('ge-m-bet ge-pl ge-pl-dark', compact([betDown, betValue, betUp])));
-  } else {
-    // LEFT: [menu] ⊐ BUY BONUS coin ⊏ [balance] · [Free Spins] · [Total Win]
-    // (the last two only render in FS / a free-spins replay)
-    const menuPlaque = plaque('ge-pl ge-pl-dark ge-pl-menu', [menu]);
-    const balPlaque = balance ? plaque('ge-pl ge-pl-glass ge-pl-bal', [balance]) : null;
-    const fsPlaque = fsCounter ? plaque('ge-pl ge-pl-glass ge-pl-fs', [fsCounter]) : null;
-    const totalWinPlaque = fsTotalWin ? plaque('ge-pl ge-pl-glass ge-pl-totalwin', [fsTotalWin]) : null;
-    const left = zone('ge-zone-left ge-zone-plaques', ...compact([menuPlaque, buy, balPlaque, fsPlaque, totalWinPlaque]));
-
-    // RIGHT: [bet (+ step)] · |divider| · [auto · SPIN · 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 betPlaque = plaque('ge-pl ge-pl-dark ge-pl-bet', betKids);
-    const divider = document.createElement('div'); divider.className = 'ge-pl-divider';
-    const spinWrap = document.createElement('div'); spinWrap.className = 'ge-spinwrap ge-pl-dark';
-    spinWrap.append(...compact([auto, spin, turbo]));
-    const right = zone('ge-zone-right ge-zone-plaques', betPlaque, divider, spinWrap);
-
-    // MIDDLE: per-spin WIN pill in every mode — lifts above the bar on overflow.
-    let middle: HTMLElement | null = null;
-    if (winEl) { winEl.classList.add('ge-winpill'); middle = winEl; }
-    bar.append(...compact([left, middle, right]));
-  }
-
-  applyBusy(shell, bar);
-  return bar;
-}
-
-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(shell: GameShell): HTMLButtonElement {
-  const buy = document.createElement('button');
-  buy.className = 'ge-shell-buybonus'; buy.dataset.ge = 'buybonus';
-  const feature = shell.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>${shell.t('DISABLE')}</span>`;
-    buy.style.background = accent; buy.style.color = contrastText(accent);
-    buy.addEventListener('click', () => { if (!buy.disabled) shell.deactivateFeature(); });
-  } else {
-    buy.innerHTML = `<span>${twoLine(shell.t('BUY BONUS'))}</span>`;
-    buy.addEventListener('click', () => { if (!buy.disabled) shell.openBuyBonus(); });
-  }
-  return buy;
-}
-
-function onBet(shell: GameShell, dir: 1 | -1): void {
-  if (shell.state.busy) return;
-  const next = stepBet(shell.state, dir);
-  if (next !== shell.state.bet) { shell.state.bet = next; shell.emit('betChange', next); shell.render(); }
-}
-function onTurbo(shell: GameShell): void {
-  const next = nextTurbo(shell.state.turbo, shell.config.features.turbo);
-  shell.state.turbo = next; shell.emit('turboChange', next); shell.render();
-}
-function betLocked(shell: GameShell): boolean {
-  return shell.state.busy || shell.state.autoplay.active;
-}
-
-/** SPIN disc — rotates while busy; becomes a STOP + countdown while autoplay runs. */
-function spinButton(shell: GameShell): HTMLButtonElement {
-  const { state } = shell;
-  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) stopAutoplay(shell); });
-  } else {
-    sp.innerHTML = icon('spin');
-    if (state.busy) sp.classList.add('ge-spinning');
-    sp.addEventListener('click', () => { if (!sp.disabled) shell.emit('spin'); });
-  }
-  return sp;
-}
-
-/** Autoplay icon button — opens the count picker; glows accent while running. */
-function autoButton(shell: GameShell): HTMLButtonElement {
-  const active = shell.state.autoplay.active;
-  const b = iconBtn('autoplay', 'autoplay', () => onAutoplay(shell), active);
-  if (active) b.classList.add('ge-glow');
-  return b;
-}
-
-function onAutoplay(shell: GameShell): void {
-  if (shell.state.autoplay.active) stopAutoplay(shell);
-  else shell.openAutoplayPicker();
-}
-function stopAutoplay(shell: GameShell): void {
-  shell.state.autoplay = { active: false, remaining: 0 };
-  shell.emit('autoplayStop');
-  shell.render();
-}
-
-function applyBusy(shell: GameShell, bar: HTMLElement): void {
-  const { busy } = shell.state;
-  const auto = shell.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 = shell.state.availableBets.indexOf(shell.state.bet);
-  disable('bet-up', lockBet || i >= shell.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 || !shell.state.buyBonusEnabled;
-}

package/src/shell/components/BuyBonus.ts

@@ -1,329 +0,0 @@
-import type { GameShell } from '../GameShell';
-import type { BonusOption } from '../types';
-import { formatCurrency } from '../format';
-import { stepBet } from '../state';
-import { betDir } from '../keyboard';
-import { effectiveAccent, contrastText } from '../colors';
-import { createOverlay, createCardModal } from './primitives';
-import { icon, type IconName } from './icons';
-
-/** Mutable state shared between the overlay DOM and the onKey handler. */
-interface OverlayState {
-  /** Index into the affordable-card subset; -1 = none (no affordable cards). */
-  focusIndex: number;
-  /** The bonus whose confirm dialog is currently open, or undefined. */
-  confirmBonus: BonusOption | undefined;
-}
-
-/** Buy-bonus overlay — a grid of art-forward cards, one per option.
- *  Returns the overlay element + a keyboard handler for the shell's `showModal`. */
-export function openBuyBonusOverlay(shell: GameShell): { root: HTMLElement; onKey: (e: KeyboardEvent) => boolean } | null {
-  const bonuses = shell.config.features.buyBonus;
-  if (bonuses === false || bonuses.length === 0) return null;
-
-  const st: OverlayState = { focusIndex: -1, confirmBonus: undefined };
-
-  const { root, body } = createOverlay({ title: shell.t('Buy bonus'), onClose: () => shell.closeModal() });
-  root.dataset.ge = 'buybonus-overlay';
-
-  // Re-render the grid whenever the bet changes so every card's price stays live.
-  const renderGrid = (): void => {
-    body.innerHTML = '';
-    const grid = document.createElement('div'); grid.className = 'ge-bb-grid';
-    // Card count drives the width-fit clamp in CSS (each card is 18em; N cards must fit the frame
-    // width), so the row scales to the available width instead of overflowing into an X-scroll.
-    grid.style.setProperty('--ge-bb-n', String(bonuses.length));
-    const affordable: BonusOption[] = [];
-    for (const bonus of bonuses) {
-      const card = buildCard(shell, bonus, root, st);
-      grid.appendChild(card);
-      if (isAffordable(shell, bonus)) affordable.push(bonus);
-    }
-    body.appendChild(grid);
-    // Initialize or restore focus index
-    if (affordable.length > 0) {
-      if (st.focusIndex < 0) st.focusIndex = 0;
-      else st.focusIndex = Math.min(st.focusIndex, affordable.length - 1);
-      applyFocusClass(root, bonuses, affordable, st.focusIndex);
-    } else {
-      st.focusIndex = -1;
-    }
-  };
-
-  renderGrid();
-  root.appendChild(buildBetBar(shell, renderGrid)); // thin bottom footer, only as tall as the pill
-
-  /** Step the bet by `dir` and re-render the grid (live prices + affordability) when it changed.
-   *  Shared by the keyboard bet keys (the footer ± buttons keep their own copy). */
-  const stepBetBy = (dir: 1 | -1): void => {
-    const next = stepBet(shell.state, dir);
-    if (next === shell.state.bet) return;
-    shell.state.bet = next; shell.emit('betChange', next); shell.render();
-    renderGrid();
-  };
-
-  /** Keyboard handler for both browse and confirm phases. */
-  const onKey = (e: KeyboardEvent): boolean => {
-    const affordable = bonuses.filter((b) => isAffordable(shell, b));
-
-    // ── Confirm phase ──
-    if (st.confirmBonus) {
-      switch (e.code) {
-        case 'Enter':
-        case 'Space': {
-          const bonus = st.confirmBonus;
-          if (!isAffordable(shell, bonus)) return true;
-          if (bonus.type === 'feature') shell.activateFeature(bonus);
-          else shell.emit('buyBonusSelect', { id: bonus.id });
-          shell.closeModal();
-          return true;
-        }
-        case 'Escape':
-          // Remove the confirm dialog, return to browse
-          closeConfirm(root, st);
-          return true;
-        default:
-          return false;
-      }
-    }
-
-    // ── Browse phase ──
-    const last = affordable.length - 1;
-    const mobile = shell.layout === 'mobile';
-
-    // Bet stepping mirrors the bar's keys (Shift+↑/↓, Shift+=/-, Numpad ±). Checked BEFORE arrow
-    // navigation so a bare arrow still moves card focus while a Shift+arrow changes the bet.
-    const bet = betDir(e);
-    if (bet !== null) { stepBetBy(bet); return true; }
-
-    // Determine navigation direction from key code + layout (mobile uses vertical arrows)
-    const fwdKey = e.code === 'ArrowRight' || (mobile && e.code === 'ArrowDown');
-    const bwdKey = e.code === 'ArrowLeft' || (mobile && e.code === 'ArrowUp');
-
-    if (fwdKey) {
-      if (last < 0) return true;
-      if (st.focusIndex < last) {
-        st.focusIndex++;
-        applyFocusClass(root, bonuses, affordable, st.focusIndex);
-      }
-      return true;
-    }
-    if (bwdKey) {
-      if (last < 0) return true;
-      if (st.focusIndex > 0) {
-        st.focusIndex--;
-        applyFocusClass(root, bonuses, affordable, st.focusIndex);
-      }
-      return true;
-    }
-
-    switch (e.code) {
-      case 'Enter':
-      case 'Space':
-        if (last < 0 || st.focusIndex < 0) return true;
-        {
-          const bonus = affordable[st.focusIndex];
-          openConfirm(shell, bonus, root, st);
-        }
-        return true;
-      // Bare =/- also step the bet (the Shift+=/- and Numpad variants are handled by betDir above).
-      case 'Equal':
-        stepBetBy(1);
-        return true;
-      case 'Minus':
-        stepBetBy(-1);
-        return true;
-      case 'Escape':
-        shell.closeModal();
-        return true;
-      default:
-        return false;
-    }
-  };
-
-  return { root, onKey };
-}
-
-/** Apply a CSS keyboard-focus class to the currently focused affordable card. */
-function applyFocusClass(overlay: HTMLElement, bonuses: BonusOption[], affordable: BonusOption[], focusIndex: number): void {
-  for (const b of bonuses) {
-    const card = overlay.querySelector(`[data-ge="bonus-card-${b.id}"]`) as HTMLElement | null;
-    if (!card) continue;
-    card.classList.remove('ge-bonus-card--kbd-focus');
-  }
-  const focused = affordable[focusIndex];
-  if (!focused) return;
-  const card = overlay.querySelector(`[data-ge="bonus-card-${focused.id}"]`) as HTMLElement | null;
-  if (card) card.classList.add('ge-bonus-card--kbd-focus');
-}
-
-/** Open the confirm dialog for the given bonus and track it in overlay state. */
-function openConfirm(shell: GameShell, bonus: BonusOption, overlay: HTMLElement, st: OverlayState): void {
-  closeConfirm(overlay, st); // remove any existing confirm
-  st.confirmBonus = bonus;
-  overlay.appendChild(buildConfirm(shell, bonus, overlay, st));
-  shell.fitModals();
-}
-
-/** Remove the confirm dialog and clear the overlay state. */
-function closeConfirm(overlay: HTMLElement, st: OverlayState): void {
-  // The confirm dialog is a .ge-sheet with data-ge="bonus-confirm" appended directly to overlay.
-  const sheet = overlay.querySelector('[data-ge="bonus-confirm"]') as HTMLElement | null;
-  if (sheet) sheet.remove();
-  st.confirmBonus = undefined;
-}
-
-/** Bet control — a compact −/+ pill around the live stake, in a thin footer at the screen bottom.
- *  Stepping repaints the value, re-prices the cards, and updates the control bar. */
-function buildBetBar(shell: GameShell, onChange: () => void): HTMLElement {
-  const bar = document.createElement('div'); bar.className = 'ge-bb-betbar';
-  const pill = document.createElement('div'); pill.className = 'ge-bb-betpill';
-  const val = document.createElement('div'); val.className = 'ge-bb-betval';
-  const down = stepButton('bb-bet-down', 'minus');
-  const up = stepButton('bb-bet-up', 'plus');
-  // Mirror the control bar: disable a stepper at the end of the bet range, and lock both
-  // while busy — so changing the stake behaves identically here and on the bottom bar.
-  const paint = () => {
-    val.innerHTML = `<span>${shell.t('Bet')}</span><b>${formatCurrency(shell.state.bet, shell.config.currency)}</b>`;
-    const i = shell.state.availableBets.indexOf(shell.state.bet);
-    down.disabled = shell.state.busy || i <= 0;
-    up.disabled = shell.state.busy || i >= shell.state.availableBets.length - 1;
-  };
-  const step = (dir: 1 | -1) => () => {
-    const next = stepBet(shell.state, dir);
-    if (next === shell.state.bet) return;
-    shell.state.bet = next; shell.emit('betChange', next); shell.render();
-    paint(); onChange();
-  };
-  down.addEventListener('click', step(-1));
-  up.addEventListener('click', step(1));
-  paint();
-  pill.append(down, val, up);
-  bar.appendChild(pill);
-  return bar;
-}
-
-function stepButton(ge: string, name: IconName): HTMLButtonElement {
-  const b = document.createElement('button');
-  b.className = 'ge-bb-betstep'; b.dataset.ge = ge; b.innerHTML = icon(name);
-  return b;
-}
-
-/** A grid card: title → thumbnail → description → volatility → price → full-bleed CTA.
- *  Clicking (when affordable) opens the confirmation modal. */
-function buildCard(shell: GameShell, bonus: BonusOption, overlay: HTMLElement, st: OverlayState): HTMLElement {
-  const accent = effectiveAccent(bonus);
-  const card = document.createElement('div');
-  card.className = 'ge-bonus-card'; card.dataset.ge = `bonus-card-${bonus.id}`;
-  card.style.setProperty('--card-acc', accent);
-  card.style.setProperty('--card-ink', contrastText(accent));
-
-  const enabled = isAffordable(shell, bonus);
-  // Stack the confirm on top of the overlay grid (cancel returns to the grid). Re-checks
-  // affordability at click time, so it's a safe no-op when the option can't be bought.
-  const select = (): void => {
-    if (!isAffordable(shell, bonus)) return;
-    openConfirm(shell, bonus, overlay, st);
-  };
-
-  // Game-supplied card UI: the shell keeps the wrapper (grid sizing + accent vars) and runs the
-  // buy flow when the game calls ctx.select(); the game owns everything inside.
-  if (bonus.custom) {
-    card.classList.add('ge-bonus-card--custom');
-    const price = bonus.priceMultiplier * shell.state.bet;
-    card.appendChild(bonus.custom({
-      bonus, bet: shell.state.bet, price,
-      priceText: formatCurrency(price, shell.config.currency),
-      disabled: !enabled, accent, select,
-    }));
-    return card;
-  }
-
-  card.appendChild(cardBody(shell, bonus));
-  const cta = document.createElement('button');
-  cta.className = 'ge-bonus-cta'; cta.dataset.ge = `bonus-cta-${bonus.id}`;
-  cta.textContent = shell.t(actionLabel(bonus));
-  card.appendChild(cta);
-
-  if (!enabled) {
-    card.classList.add('ge-bonus-off');
-    cta.disabled = true;
-  } else {
-    card.addEventListener('click', select);
-  }
-  return card;
-}
-
-/** The shared card interior (everything above the action area), reused by the confirm modal. */
-function cardBody(shell: GameShell, bonus: BonusOption): HTMLElement {
-  const price = bonus.priceMultiplier * shell.state.bet;
-  const wrap = document.createElement('div'); wrap.className = 'ge-bonus-body';
-  wrap.innerHTML =
-    `<div class="ge-bonus-title">${bonus.title}</div>` +
-    `<div class="ge-bonus-thumb">${thumb(bonus)}</div>` +
-    `<div class="ge-bonus-desc">${bonus.description}</div>` +
-    `<div class="ge-bonus-spacer"></div>` +
-    (bonus.volatility ? `<div class="ge-bonus-vol">${volatility(bonus.volatility)}</div>` : '') +
-    `<div class="ge-bonus-price">${formatCurrency(price, shell.config.currency)}</div>`;
-  return wrap;
-}
-
-/** Confirmation modal — the shared card chrome (accent title heading, no ✕) with a bonus
- *  preview body and a full-bleed Cancel + action footer. */
-function buildConfirm(shell: GameShell, bonus: BonusOption, overlay: HTMLElement, st: OverlayState): HTMLElement {
-  const accent = effectiveAccent(bonus);
-  const ui = createCardModal({ ge: 'bonus-confirm', title: bonus.title, accent, onClose: () => { closeConfirm(overlay, st); } });
-
-  const price = bonus.priceMultiplier * shell.state.bet;
-  const preview = document.createElement('div'); preview.className = 'ge-confirm-preview';
-  preview.innerHTML =
-    `<div class="ge-bonus-thumb">${thumb(bonus)}</div>` +
-    `<div class="ge-bonus-desc">${bonus.description}</div>` +
-    (bonus.volatility ? `<div class="ge-bonus-vol">${volatility(bonus.volatility)}</div>` : '') +
-    `<div class="ge-bonus-price">${formatCurrency(price, shell.config.currency)}</div>`;
-  ui.body.appendChild(preview);
-
-  const actions = document.createElement('div'); actions.className = 'ge-modal-actions';
-  const cancel = document.createElement('button');
-  cancel.className = 'ge-modal-btn ge-modal-btn--ghost'; cancel.dataset.ge = 'bonus-confirm-cancel';
-  cancel.textContent = shell.t('Cancel');
-  cancel.addEventListener('click', () => closeConfirm(overlay, st));
-  const buy = document.createElement('button');
-  buy.className = 'ge-modal-btn ge-modal-btn--accent'; buy.dataset.ge = 'bonus-confirm-buy';
-  buy.textContent = shell.t(actionLabel(bonus));
-  buy.style.color = contrastText(accent); // bg comes from --card-acc on the card
-  buy.addEventListener('click', () => {
-    // Re-check at click time: the confirm modal stays open across state changes, so a spin
-    // starting (busy), buy-bonus being disabled, or the balance dropping must block the purchase.
-    if (!isAffordable(shell, bonus)) return;
-    if (bonus.type === 'feature') shell.activateFeature(bonus);
-    else shell.emit('buyBonusSelect', { id: bonus.id });
-    shell.closeModal();
-  });
-  actions.append(cancel, buy);
-  ui.card.appendChild(actions);
-
-  return ui.root;
-}
-
-function thumb(bonus: BonusOption): string {
-  if (bonus.thumbnail) return `<img src="${bonus.thumbnail}" alt="${bonus.title}">`;
-  return `<span class="ge-bonus-thumb-ph">${icon('gift')}</span>`;
-}
-
-/** Volatility as five lightning bolts (the supplied SVG); `level` lit in the accent, rest dimmed. */
-function volatility(level: number): string {
-  const n = Math.max(0, Math.min(5, level));
-  const bolt = icon('lightning');
-  return `<span class="ge-bonus-vol-on">${bolt.repeat(n)}</span>` +
-    `<span class="ge-bonus-vol-off">${bolt.repeat(5 - n)}</span>`;
-}
-
-function actionLabel(bonus: BonusOption): string {
-  return bonus.type === 'feature' ? 'Activate' : 'Buy';
-}
-
-function isAffordable(shell: GameShell, bonus: BonusOption): boolean {
-  if (shell.state.busy || !shell.state.buyBonusEnabled) return false;
-  return bonus.priceMultiplier * shell.state.bet <= shell.state.balance;
-}