@energy8platform/platform-core 0.20.0 → 0.21.0

package/src/shell/INTER-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/shell/colors.ts

@@ -0,0 +1,32 @@
+import type { BonusOption } from './types';
+
+/** The single brand accent (purple). The bar accent default (theme.ts) and the buy-a-bonus
+ *  card default both derive from this, so a rebrand only touches one constant. */
+export const BRAND_ACCENT = '#8b5cf6';
+
+/** Type-default accents for bonus options. A per-option `accentColor` overrides these. */
+export const ACCENT_BONUS = BRAND_ACCENT; // brand purple — buy a bonus round
+export const ACCENT_FEATURE = '#f0b429'; // gold — activate a base-game feature (e.g. Ante)
+
+/** The accent a card/button/bet-tint uses: explicit override, else the type default. */
+export function effectiveAccent(b: Pick<BonusOption, 'type' | 'accentColor'>): string {
+  return b.accentColor ?? (b.type === 'feature' ? ACCENT_FEATURE : ACCENT_BONUS);
+}
+
+/** Readable text colour for a solid accent button: dark on light accents, white on dark.
+ *  Only #rgb / #rrggbb are measured; anything else (named, var(), etc.) → white. */
+export function contrastText(accent: string): string {
+  const rgb = parseHex(accent);
+  if (!rgb) return '#ffffff';
+  // Relative luminance (sRGB, perceptual-ish). >0.6 → use dark ink.
+  const lum = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;
+  return lum > 0.6 ? '#1a1205' : '#ffffff';
+}
+
+function parseHex(hex: string): [number, number, number] | null {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}

package/src/shell/components/BottomBar.ts

@@ -0,0 +1,217 @@
+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 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; FS puts the spins counter in the centre pill (where WIN normally is).
+  const isBase = state.mode === 'base';
+  const isFS = state.mode === 'freeSpins';
+
+  const balance = 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) { betValue.classList.add('ge-bet-feature'); betValue.style.color = effectiveAccent(feature); }
+  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 ? buyBtn(shell) : null;
+  }
+
+  const winEl = state.win > 0 ? readout('win', shell.t('Win'), fmt(state.win)) : null;
+  // FS readouts — the spins counter plus the accumulated/last win for the round.
+  const fsCounter = isFS ? readout('fs-counter', shell.t('Free spins'), `${state.freeSpins.current} / ${state.freeSpins.total}`) : null;
+  const fsTotalWin = isFS ? readout('fs-totalwin', shell.t('Total win'), fmt(state.freeSpins.totalWin)) : null;
+  const fsLastWin = isFS ? readout('fs-lastwin', shell.t('Last win'), fmt(state.freeSpins.lastWin)) : null;
+
+  if (mobile) {
+    // rows: [balance · win/(FS last+total)] · [menu · auto · (spin | FS counter) · turbo · buy] · [− bet +]
+    bar.appendChild(plaque('ge-m-top ge-pl ge-pl-glass', compact([balance, winEl, fsLastWin, fsTotalWin])));
+    const center = isBase ? spin : fsCounter;
+    bar.appendChild(plaque('ge-m-controls ge-pl-dark', compact([menu, auto, center, turbo, buy])));
+    bar.appendChild(plaque('ge-m-bet ge-pl ge-pl-dark', compact([betDown, betValue, betUp])));
+  } else {
+    // LEFT: [menu] ⊐ BUY BONUS coin ⊏ [balance]
+    const menuPlaque = plaque('ge-pl ge-pl-dark ge-pl-menu', [menu]);
+    const balPlaque = plaque('ge-pl ge-pl-glass ge-pl-bal', [balance]);
+    const left = zone('ge-zone-left ge-zone-plaques', ...compact([menuPlaque, buy, balPlaque]));
+
+    // 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: FS → last win · counter · total win plaque; base/replay → WIN pill (lifts on overflow)
+    let middle: HTMLElement | null = null;
+    if (isFS) middle = plaque('ge-pl ge-pl-glass ge-fscount', compact([fsLastWin, fsCounter, fsTotalWin]));
+    else 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

@@ -0,0 +1,163 @@
+import type { GameShell } from '../GameShell';
+import type { BonusOption } from '../types';
+import { formatCurrency } from '../format';
+import { stepBet } from '../state';
+import { effectiveAccent, contrastText } from '../colors';
+import { createOverlay, createCardModal } from './primitives';
+import { icon, type IconName } from './icons';
+
+/** Buy-bonus overlay — a grid of art-forward cards, one per option. */
+export function openBuyBonusOverlay(shell: GameShell): HTMLElement | null {
+  const bonuses = shell.config.features.buyBonus;
+  if (bonuses === false || bonuses.length === 0) return null;
+
+  const { root, body } = createOverlay({ title: shell.t('Buy bonus'), onClose: () => root.remove() });
+  root.dataset.ge = 'buybonus-overlay';
+  // Re-render the grid whenever the bet changes so every card's price stays live.
+  const renderGrid = () => {
+    body.innerHTML = '';
+    const grid = document.createElement('div'); grid.className = 'ge-bb-grid';
+    for (const bonus of bonuses) grid.appendChild(buildCard(shell, bonus, root));
+    body.appendChild(grid);
+  };
+  renderGrid();
+  root.appendChild(buildBetBar(shell, renderGrid)); // thin bottom footer, only as tall as the pill
+  return root;
+}
+
+/** 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): 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));
+  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);
+
+  const enabled = isAffordable(shell, bonus);
+  if (!enabled) {
+    card.classList.add('ge-bonus-off');
+    cta.disabled = true;
+  } else {
+    // Stack the confirm on top of the overlay grid (cancel returns to the grid).
+    card.addEventListener('click', () => { overlay.appendChild(buildConfirm(shell, bonus, overlay)); shell.fitModals(); });
+  }
+  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): HTMLElement {
+  const accent = effectiveAccent(bonus);
+  const ui = createCardModal({ ge: 'bonus-confirm', title: bonus.title, accent, onClose: () => ui.root.remove() });
+
+  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', () => ui.root.remove());
+  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 });
+    ui.root.remove();
+    overlay.remove();
+  });
+  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;
+}