@energy8platform/platform-core 0.20.0 → 0.21.0

package/src/shell/components/GameInfo.ts

@@ -0,0 +1,253 @@
+import type { GameShell } from '../GameShell';
+import type { CellRef, GameInfoSection, GameMode, PaytableRow, PaylineDef, WinSection } from '../types';
+import { createOverlay, twoLine } from './primitives';
+import { icon } from './icons';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+export function openGameInfoModal(shell: GameShell): HTMLElement {
+  const { root, body } = createOverlay({
+    title: shell.t('Game info'),
+    onClose: () => root.remove(),
+    onBack: () => { root.remove(); shell.openSettings(); },
+  });
+  root.dataset.ge = 'info-modal';
+
+  const sections = shell.config.gameInfo.sections ?? [];
+  // Default placement: modes first, controls second, the rest in declaration order.
+  // An explicit `order` overrides; ties keep declaration order (stable).
+  const base = (s: GameInfoSection, i: number): number =>
+    s.order ?? (s.type === 'modes' ? -2 : s.type === 'controls' ? -1 : i);
+  sections
+    .map((s, i) => ({ s, i, k: base(s, i) }))
+    .sort((a, b) => a.k - b.k || a.i - b.i)
+    .forEach(({ s }) => body.appendChild(renderSection(shell, s)));
+
+  return root;
+}
+
+function renderSection(shell: GameShell, s: GameInfoSection): HTMLElement {
+  switch (s.type) {
+    case 'modes': return sectionModes(s.modes, sec('info-modes', s.title, shell.t('Modes')));
+    case 'controls': return sectionControls(shell, sec('info-controls', s.title, shell.t('Controls')));
+    case 'paytable': return sectionPaytable(s.rows, sec('info-paytable', s.title, shell.t('Paytable')));
+    case 'wins': return sectionWins(s, sec('info-wins', s.title, shell.t(winFallbackTitle(s.kind))));
+    case 'custom': return sectionCustom(s, sec('info-custom', s.title, ''));
+  }
+}
+
+/** A titled glass-plaque section shell. */
+function sec(ge: string, title: string | undefined, fallback: string): HTMLElement {
+  const el = document.createElement('section');
+  el.dataset.ge = ge; el.className = 'ge-gi-sec';
+  const t = title ?? fallback;
+  if (t) { const h = document.createElement('h3'); h.textContent = t; el.appendChild(h); }
+  return el;
+}
+
+// ── modes (rows — varying description lengths read better than fixed cards) ────
+function sectionModes(modes: GameMode[], el: HTMLElement): HTMLElement {
+  const list = document.createElement('div'); list.className = 'ge-gi-modes';
+  for (const m of modes) list.appendChild(modeRow(m));
+  el.appendChild(list);
+  return el;
+}
+function modeRow(m: GameMode): HTMLElement {
+  const row = document.createElement('div'); row.className = 'ge-gi-mode';
+  const stat = (label: string, val: string) =>
+    `<span class="ge-gi-mode-st"><span>${label}</span><b>${val}</b></span>`;
+  let stats = '';
+  if (m.price != null) stats += stat('Price', m.price);
+  if (typeof m.rtp === 'number') stats += stat('RTP', `${m.rtp}%`);
+  if (m.maxWin != null) stats += stat('Max win', m.maxWin);
+  row.innerHTML =
+    `<div class="ge-gi-mode-top"><span class="ge-gi-mode-h">${m.title}</span>` +
+    (stats ? `<span class="ge-gi-mode-stats">${stats}</span>` : '') + '</div>' +
+    (m.description ? `<p class="ge-gi-mode-desc">${m.description}</p>` : '');
+  return row;
+}
+
+// ── controls (auto-generated, split into a gameplay block and a menu/overlay block) ──
+type CtlRow = { vis: string; name: string; desc: string; on: boolean };
+
+function sectionControls(shell: GameShell, el: HTMLElement): HTMLElement {
+  const { features } = shell.config;
+  const slot = (inner: string, cls = '') => `<span class="ge-gi-ctl-ic ${cls}">${inner}</span>`;
+  const buyLabel = twoLine(shell.t('BUY BONUS'));
+  const buyBadge = slot(`<span class="ge-shell-buybonus"><span>${buyLabel}</span></span>`);
+
+  // Block 1 — gameplay. Bet is split into two rows: one to raise, one to lower.
+  const game: CtlRow[] = [
+    { vis: slot(icon('spin')), name: 'Spin', desc: 'Start a spin at the current bet.', on: true },
+    { vis: slot(icon('plus')), name: 'Raise bet', desc: 'Increase your stake.', on: true },
+    { vis: slot(icon('minus')), name: 'Lower bet', desc: 'Decrease your stake.', on: true },
+    { vis: slot(icon('autoplay')), name: 'Autoplay', desc: 'Spin automatically a set number of times.', on: features.autoplay },
+    { vis: slot(icon('turbo1')), name: 'Turbo', desc: 'Speed up spin animations.', on: features.turbo > 0 },
+    { vis: buyBadge, name: 'Buy bonus', desc: 'Pay a fixed cost to enter a bonus feature.', on: features.buyBonus !== false },
+  ];
+  // Block 2 — menu & overlay chrome (always available).
+  const menu: CtlRow[] = [
+    { vis: slot(icon('menu')), name: 'Menu', desc: 'Open settings and game info.', on: true },
+    { vis: slot(icon('soundOn')), name: 'Sound', desc: 'Mute or unmute the game.', on: true },
+    { vis: slot(icon('info')), name: 'Game info', desc: 'Open the paytable and rules.', on: true },
+    { vis: slot(icon('close')), name: 'Close', desc: 'Dismiss the current overlay.', on: true },
+  ];
+
+  el.appendChild(ctlBlock(shell, 'Game', game));
+  el.appendChild(ctlBlock(shell, 'Menu & info', menu));
+  return el;
+}
+
+function ctlBlock(shell: GameShell, label: string, rows: CtlRow[]): HTMLElement {
+  const block = document.createElement('div'); block.className = 'ge-gi-ctl-block';
+  const h = document.createElement('h4'); h.className = 'ge-gi-ctl-block-h'; h.textContent = shell.t(label);
+  block.appendChild(h);
+  for (const r of rows.filter((x) => x.on)) {
+    const row = document.createElement('div'); row.className = 'ge-gi-ctl';
+    row.innerHTML = `${r.vis}<div class="ge-gi-ctl-tx"><b>${shell.t(r.name)}</b><span>${shell.t(r.desc)}</span></div>`;
+    block.appendChild(row);
+  }
+  return block;
+}
+
+// ── paytable (cards — image on top, name, then win tiers "<count> x<mult>") ────
+function sectionPaytable(rows: PaytableRow[], el: HTMLElement): HTMLElement {
+  const grid = document.createElement('div'); grid.className = 'ge-gi-pt-grid';
+  for (const r of rows) grid.appendChild(paytableCard(r));
+  el.appendChild(grid);
+  return el;
+}
+function paytableCard(r: PaytableRow): HTMLElement {
+  const card = document.createElement('div'); card.className = 'ge-gi-pt-card';
+  const sym = document.createElement('div'); sym.className = 'ge-gi-pt-sym';
+  if (r.symbol.image) {
+    const img = document.createElement('img'); img.src = r.symbol.image; img.alt = r.symbol.text ?? '';
+    sym.appendChild(img);
+  }
+  if (r.symbol.text) {
+    const t = document.createElement('span'); t.textContent = r.symbol.text; sym.appendChild(t);
+  }
+  const wins = document.createElement('div'); wins.className = 'ge-gi-pt-wins';
+  for (const w of r.wins) {
+    const wi = document.createElement('span'); wi.className = 'ge-gi-pt-win';
+    wi.innerHTML = (w.count ? `<i>${w.count}</i> ` : '') + `<b>x${w.multiplier}</b>`;
+    wins.appendChild(wi);
+  }
+  card.append(sym, wins);
+  return card;
+}
+
+// ── wins (one section = one pay type; cells filled in the accent colour, no line) ──
+function winFallbackTitle(kind: WinSection['kind']): string {
+  return { classic: 'Paylines', cluster: 'Cluster pays', anywhere: 'Pays anywhere', ways: 'Ways to win' }[kind];
+}
+
+function sectionWins(s: WinSection, el: HTMLElement): HTMLElement {
+  if (s.kind === 'classic') {
+    if (s.description) el.appendChild(winDesc(s.description));
+    const wrap = document.createElement('div'); wrap.className = 'ge-gi-pl-grid';
+    s.lines.forEach((line, i) => {
+      const def: PaylineDef = Array.isArray(line) ? { pattern: line } : line;
+      wrap.appendChild(lineItem(s.grid, def, i + 1));
+    });
+    el.appendChild(wrap);
+  } else if (s.kind === 'cluster' || s.kind === 'anywhere') {
+    badge(el, `min ${s.minCount}`);
+    const row = document.createElement('div'); row.className = 'ge-gi-win-row';
+    const example = s.example ?? (s.kind === 'cluster' ? clusterExample(s.grid, s.minCount) : anywhereExample(s.grid, s.minCount));
+    row.appendChild(gridSvg(s.grid, example));
+    if (s.description) row.appendChild(winDesc(s.description));
+    el.appendChild(row);
+  } else {
+    if (s.description) el.appendChild(winDesc(s.description));
+    const two = document.createElement('div'); two.className = 'ge-gi-win-two';
+    two.append(
+      waysCol('✓ wins', 'ge-gi-win-ok', s.grid, s.winExample ?? waysWin(s.grid)),
+      waysCol('✗ no win', 'ge-gi-win-no', s.grid, s.loseExample ?? waysLose(s.grid)),
+    );
+    el.appendChild(two);
+  }
+  return el;
+}
+
+function winDesc(text: string): HTMLElement {
+  const p = document.createElement('p'); p.className = 'ge-gi-win-desc'; p.textContent = text;
+  return p;
+}
+/** Append a "min N" pill to the section header. */
+function badge(el: HTMLElement, text: string): void {
+  const h = el.querySelector('h3');
+  if (!h) return;
+  const b = document.createElement('span'); b.className = 'ge-gi-win-badge'; b.textContent = text;
+  h.appendChild(b);
+}
+
+/** A cols×rows grid SVG; `on` cells are filled in the accent colour, the rest are faint. */
+function gridSvg(grid: { cols: number; rows: number }, on: CellRef[]): SVGSVGElement {
+  const { cols, rows } = grid;
+  const W = 100, H = Math.round((rows / cols) * 100);
+  const cw = W / cols, ch = H / rows;
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+  svg.setAttribute('class', 'ge-gi-pl-svg');
+  const onSet = new Set(on.map(([c, r]) => `${c},${r}`));
+  for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) {
+    const r = document.createElementNS(SVG_NS, 'rect');
+    r.setAttribute('x', String(x * cw + 1)); r.setAttribute('y', String(y * ch + 1));
+    r.setAttribute('width', String(cw - 2)); r.setAttribute('height', String(ch - 2));
+    r.setAttribute('rx', '2'); r.setAttribute('class', onSet.has(`${x},${y}`) ? 'ge-gi-pl-on' : 'ge-gi-pl-cell');
+    svg.appendChild(r);
+  }
+  return svg;
+}
+
+/** A classic payline: number caption on top, filled cells (no connecting line). */
+function lineItem(grid: { cols: number; rows: number }, def: PaylineDef, n: number): HTMLElement {
+  const item = document.createElement('div'); item.className = 'ge-gi-pl-item';
+  const cap = document.createElement('span'); cap.className = 'ge-gi-pl-cap'; cap.textContent = String(n);
+  const on: CellRef[] = def.pattern.map((rowIdx, col) => [col, rowIdx]);
+  item.append(cap, gridSvg(grid, on)); // caption first → renders above the grid
+  return item;
+}
+
+function waysCol(tag: string, tagCls: string, grid: { cols: number; rows: number }, cells: CellRef[]): HTMLElement {
+  const col = document.createElement('div'); col.className = 'ge-gi-win-col';
+  const t = document.createElement('span'); t.className = `ge-gi-win-tag ${tagCls}`; t.textContent = tag;
+  col.append(t, gridSvg(grid, cells));
+  return col;
+}
+
+// Default illustrations (used when the section omits an explicit example).
+function clusterExample(grid: { cols: number; rows: number }, n: number): CellRef[] {
+  const w = Math.min(grid.cols, Math.max(1, Math.ceil(Math.sqrt(n))));
+  const cells: CellRef[] = [];
+  for (let y = 0; y < grid.rows && cells.length < n; y++)
+    for (let x = 0; x < w && cells.length < n; x++) cells.push([x, y]);
+  return cells;
+}
+function anywhereExample(grid: { cols: number; rows: number }, n: number): CellRef[] {
+  const count = Math.min(n, grid.cols * grid.rows);
+  const cells: CellRef[] = [];
+  for (let i = 0; i < count; i++) cells.push([Math.floor((i * grid.cols) / count), (i * 2 + 1) % grid.rows]);
+  return cells;
+}
+function waysWin(grid: { cols: number; rows: number }): CellRef[] {
+  const cells: CellRef[] = [];
+  for (let c = 0; c < grid.cols; c++) cells.push([c, c % grid.rows]); // one symbol on every reel
+  return cells;
+}
+function waysLose(grid: { cols: number; rows: number }): CellRef[] {
+  const gap = Math.floor(grid.cols / 2);
+  return waysWin(grid).filter(([c]) => c !== gap); // a broken chain (reel `gap` empty)
+}
+
+// ── custom ───────────────────────────────────────────────────────────────────
+function sectionCustom(s: Extract<GameInfoSection, { type: 'custom' }>, el: HTMLElement): HTMLElement {
+  if (s.node) {
+    el.appendChild(s.node);
+  } else if (s.html) {
+    const d = document.createElement('div'); d.className = 'ge-gi-custom'; d.innerHTML = s.html;
+    el.appendChild(d);
+  }
+  return el;
+}

package/src/shell/components/Modal.ts

@@ -0,0 +1,36 @@
+import type { ModalOptions } from '../types';
+import { contrastText } from '../colors';
+import { createCardModal } from './primitives';
+
+/** Build a generic, externally-triggered modal (title + body text + optional action buttons),
+ *  on the shared card-modal chrome. Each action runs its `on` then closes; the ✕ (if
+ *  `availableClose`) and the actions are the only ways to dismiss. See GameShell.openModal. */
+export function buildModal(opts: ModalOptions): HTMLElement {
+  const ui = createCardModal({
+    ge: 'modal',
+    title: opts.title,
+    closable: opts.availableClose,
+    blur: opts.blurLevel,
+    onClose: () => ui.root.remove(),
+  });
+
+  const text = document.createElement('p');
+  text.className = 'ge-modal-text'; text.dataset.ge = 'modal-body';
+  text.textContent = opts.body;
+  ui.body.appendChild(text);
+
+  if (opts.actions?.length) {
+    const actions = document.createElement('div'); actions.className = 'ge-modal-actions';
+    for (const a of opts.actions) {
+      const btn = document.createElement('button');
+      btn.className = 'ge-modal-btn'; btn.dataset.ge = 'modal-action';
+      btn.textContent = a.title;
+      if (a.color) { btn.style.background = a.color; btn.style.color = contrastText(a.color); }
+      else btn.classList.add('ge-modal-btn--ghost');
+      btn.addEventListener('click', () => { a.on?.(); ui.root.remove(); });
+      actions.appendChild(btn);
+    }
+    ui.card.appendChild(actions);
+  }
+  return ui.root;
+}

package/src/shell/components/ReplayModal.ts

@@ -0,0 +1,56 @@
+import type { GameShell } from '../GameShell';
+import type { ReplayModalOptions } from '../types';
+import { formatCurrency } from '../format';
+import { createCardModal } from './primitives';
+
+/** The replay summary modal — built on the shared card chrome, but NOT dismissable: no ✕,
+ *  and the backdrop never closes it. The only way out is START REPLAY, which closes the
+ *  modal, runs `onReplay`, then reopens it (whether the handler resolves OR rejects, so a
+ *  failed replay can't strand the user). */
+export function buildReplayModal(shell: GameShell, opts: ReplayModalOptions): HTMLElement {
+  const { bonusId, bet, payoutMultiplier } = opts;
+  const fmt = (n: number) => formatCurrency(n, shell.config.currency);
+  const bonus = Array.isArray(shell.config.features.buyBonus)
+    ? shell.config.features.buyBonus.find((b) => b.id === bonusId)
+    : undefined;
+  const mode = bonus?.title ?? bonusId;
+  const costMultiplier = bonus?.priceMultiplier ?? 1;
+
+  const ui = createCardModal({
+    ge: 'replay-modal',
+    title: shell.t('Replay'),
+    closable: false, // no ✕; the backdrop never dismisses it either
+    onClose: () => {}, // unused — there is no close affordance
+  });
+
+  const rows = document.createElement('div'); rows.className = 'ge-replay-rows';
+  const row = (label: string, value: string, total = false): void => {
+    const r = document.createElement('div'); r.className = `ge-replay-row${total ? ' ge-replay-total' : ''}`;
+    const l = document.createElement('span'); l.textContent = shell.t(label);
+    const v = document.createElement('b'); v.textContent = value;
+    r.append(l, v); rows.appendChild(r);
+  };
+  row('Mode', mode);
+  row('Base bet', fmt(bet));
+  row('Cost multiplier', `${costMultiplier}×`);
+  row('Total cost bet', fmt(bet * costMultiplier));
+  row('Payout multiplier', `${payoutMultiplier}×`);
+  row('Total win', fmt(payoutMultiplier * bet), true);
+  ui.body.appendChild(rows);
+
+  const actions = document.createElement('div'); actions.className = 'ge-modal-actions';
+  const btn = document.createElement('button');
+  btn.className = 'ge-modal-btn ge-modal-btn--accent'; btn.dataset.ge = 'replay-start';
+  btn.textContent = shell.t('Start replay');
+  btn.addEventListener('click', () => {
+    ui.root.remove(); // close immediately
+    // Reopen after the handler settles. On rejection we still reopen — this modal is the only
+    // way out of replay mode, so a failed play must not strand the user on an empty screen.
+    const reopen = (): void => { shell.openReplay(opts); };
+    Promise.resolve(opts.onReplay()).then(reopen, reopen);
+  });
+  actions.appendChild(btn);
+  ui.card.appendChild(actions);
+
+  return ui.root;
+}

package/src/shell/components/Settings.ts

@@ -0,0 +1,60 @@
+import type { GameShell } from '../GameShell';
+import { createOverlay } from './primitives';
+import { icon } from './icons';
+
+export function openSettingsModal(shell: GameShell): HTMLElement {
+  const { root, body } = createOverlay({ title: shell.t('Settings'), onClose: () => root.remove() });
+  root.dataset.ge = 'settings-modal';
+
+  // Sound on/off (starts on) — full-width row with a speaker icon button
+  const sound = (() => {
+    let on = true;
+    const btn = document.createElement('button');
+    btn.className = 'ge-snd ge-active'; btn.dataset.ge = 'setting-sound';
+    btn.setAttribute('aria-label', 'Sound');
+    const paint = () => {
+      btn.innerHTML = icon(on ? 'soundOn' : 'soundOff');
+      btn.classList.toggle('ge-active', on);
+      btn.setAttribute('aria-pressed', String(on));
+    };
+    paint();
+    btn.addEventListener('click', () => {
+      on = !on; paint();
+      shell.emit('settingChange', { key: 'sound', value: on });
+    });
+    const row = document.createElement('div'); row.className = 'ge-ov-row';
+    row.innerHTML = `<span class="ge-grow">${shell.t('Sound')}</span>`; row.appendChild(btn);
+    return row;
+  })();
+  body.appendChild(sound);
+
+  // Volume sliders — full-width column rows with a live value readout
+  const slider = (key: string, label: string) => {
+    const row = document.createElement('div'); row.className = 'ge-ov-row ge-col';
+    const head = document.createElement('div'); head.className = 'ge-row-head';
+    const val = document.createElement('span'); val.className = 'ge-val'; val.textContent = '100%';
+    head.innerHTML = `<span>${label}</span>`; head.appendChild(val);
+    const input = document.createElement('input');
+    input.type = 'range'; input.min = '0'; input.max = '1'; input.step = '0.05'; input.value = '1';
+    input.className = 'ge-slider'; input.dataset.ge = `setting-${key}`;
+    input.addEventListener('input', () => {
+      val.textContent = `${Math.round(Number(input.value) * 100)}%`;
+      shell.emit('settingChange', { key, value: Number(input.value) });
+    });
+    row.append(head, input);
+    return row;
+  };
+  body.appendChild(slider('master', shell.t('Master volume')));
+  body.appendChild(slider('music', shell.t('Music')));
+  body.appendChild(slider('sfx', shell.t('SFX')));
+
+  // Game info — full-width row button that opens its own overlay
+  const gameInfo = document.createElement('button');
+  gameInfo.className = 'ge-ov-row'; gameInfo.dataset.ge = 'game-info-btn';
+  gameInfo.style.marginTop = '6px';
+  gameInfo.innerHTML = `<span style="width:22px;font-size:22px">${icon('info')}</span><span class="ge-grow">${shell.t('Game info')}</span><span style="width:20px;font-size:20px;color:var(--shell-muted)">${icon('chevronRight')}</span>`;
+  gameInfo.addEventListener('click', () => { root.remove(); shell.openInfo(); });
+  body.appendChild(gameInfo);
+
+  return root;
+}

package/src/shell/components/icons.ts

@@ -0,0 +1,40 @@
+// Sharp monochrome icon set, traced from the brand sheet. Every glyph uses
+// currentColor so the caller's color cascades (active states recolour via CSS);
+// hollow shapes set fill-rule="evenodd". All return an inline <svg> sized 1em.
+const SVGS: Record<string, string> = {
+  // sharp angular set, traced from the brand sheet — monochrome currentColor
+  // (glow via CSS drop-shadow). Hollow shapes rely on fill-rule="evenodd".
+  // hollow loop ring + two arrowheads (renders dark-on-bright inside SPIN)
+  spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.92 4.68 L13.91 2.81 L10.55 1.6 L12.05 3.47 L11.95 3.56 L10.93 3.65 L9.25 4.12 L7.94 4.77 L7.01 5.42 L5.61 6.82 L4.58 8.41 L4.03 9.53 L3.28 11.67 L2.91 13.91 L4.49 16.52 L4.68 16.62 L6.54 14.94 L6.17 14.01 L6.08 13.17 L5.98 13.07 L5.98 11.49 L6.08 10.93 L6.45 9.71 L6.82 8.97 L7.48 8.04 L8.22 7.29 L9.25 6.54 L9.99 6.17 L11.21 5.8 L11.77 5.7 L13.73 5.7 L13.82 5.8 L14.57 5.89 L15.87 6.45 L16.06 6.45 L17.92 4.86Z"/><path d="M19.6 7.66 L19.42 7.57 L17.83 9.16 L18.11 9.9 L18.2 10.74 L18.3 10.83 L18.3 12.7 L18.2 12.79 L18.11 13.54 L17.46 15.03 L16.9 15.87 L15.87 16.9 L14.94 17.55 L14.1 17.92 L13.17 18.2 L12.05 18.39 L11.02 18.39 L10.93 18.3 L9.9 18.2 L9.06 17.92 L8.41 17.55 L8.22 17.55 L6.73 18.76 L6.26 19.32 L11.21 21.56 L12.7 22.03 L13.45 22.4 L13.73 22.4 L12.23 20.53 L12.33 20.44 L13.54 20.35 L15.31 19.79 L16.8 18.95 L17.64 18.3 L18.76 17.08 L19.51 15.96 L20.16 14.66 L20.25 14.19 L20.53 13.63 L20.72 12.98 L20.72 12.61 L20.91 12.14 L21.09 10.37 L19.97 8.5Z"/></g>`,
+  turbo: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.16 1.71 L16.47 1.71 L16.36 1.6 L13.23 1.6 L12.78 1.71 L11.78 3.39 L10.55 5.85 L10.32 6.07 L8.31 9.99 L8.09 10.21 L7.19 12.11 L12 12.34 L14.46 9.88 L14.24 9.65 L12.89 9.54 L12.89 9.2 L17.03 4.4Z"/><path d="M19.83 6.97 L18.93 7.64 L16.36 9.99 L9.65 16.47 L4.17 21.62 L4.17 22.4 L5.4 21.39 L13.34 13.9 L13.45 14.12 L10.43 20.16 L10.21 20.83 L9.65 21.95 L9.76 21.95 L19.27 10.32 L19.27 10.21 L17.59 10.1 L17.48 9.88 L18.71 8.53Z"/></g>`,
+  // bolt with 1/2/3 speed lines — escalating turbo level
+  turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.82 1.6 L21.59 1.72 L21.01 1.72 L20.44 1.95 L18.7 2.29 L18.12 2.29 L18.01 2.41 L16.39 2.64 L14.77 3.1 L13.73 5.41 L13.73 5.64 L13.27 6.45 L13.27 6.68 L12.81 7.49 L12.81 7.72 L12.35 8.53 L12.35 8.76 L11.77 9.8 L11.42 10.84 L10.15 13.5 L10.15 13.73 L14.54 13.73 L14.66 13.85 L13.39 16.16 L12.81 16.97 L11.54 19.4 L11.31 19.63 L11.08 20.2 L10.04 21.82 L9.8 22.4 L9.92 22.4 L20.9 11.19 L22.05 10.15 L22.05 10.04 L16.62 10.15 L16.51 10.27 L15.7 10.27 L15.58 10.15 L15.81 9.69 L16.28 9.23 L21.48 2.29Z"/><path d="M8.53 12.46 L7.72 12.58 L7.26 12.81 L6.92 12.81 L6.45 13.04 L6.11 13.04 L5.64 13.27 L3.68 13.73 L1.95 14.31 L1.95 14.43 L7.61 14.43Z"/></g>`,
+  turbo2: `<g fill="currentColor" fill-rule="evenodd"><path d="M22.4 2.68 L18.38 3.61 L15.4 4.43 L14.68 5.98 L13.96 7.93 L13.65 8.45 L13.65 8.65 L13.34 9.17 L13.34 9.37 L13.03 9.89 L13.03 10.1 L12.72 10.61 L12.72 10.82 L12.41 11.33 L12.41 11.54 L12.1 12.05 L12.1 12.26 L11.79 12.77 L11.49 13.7 L15.3 13.7 L15.5 13.9 L14.47 15.55 L14.16 16.27 L13.96 16.48 L11.28 21.32 L11.9 20.91 L20.65 11.95 L22.09 10.61 L22.09 10.51 L20.55 10.51 L20.44 10.61 L16.32 10.71 L16.22 10.51 L19.83 6.08Z"/><path d="M10.04 15.04 L9.43 15.14 L8.81 14.93 L7.98 14.93 L7.88 15.04 L6.34 15.14 L6.23 15.24 L5.62 15.24 L4.28 15.55 L2.84 15.76 L1.6 16.17 L10.04 16.17Z"/><path d="M10.56 9.99 L9.43 10.1 L9.32 10.2 L7.37 10.51 L6.85 10.71 L6.44 10.71 L5.51 11.02 L3.04 11.54 L2.94 11.74 L5.1 11.85 L5.2 11.95 L6.65 11.95 L6.75 12.05 L9.01 12.05 L9.12 12.15 L9.73 12.15 L10.56 10.3Z"/></g>`,
+  turbo3: `<g fill="currentColor" fill-rule="evenodd"><path d="M22.4 3 L22 3 L20.3 3.5 L19.9 3.5 L19.5 3.7 L19.1 3.7 L15.9 4.6 L13.9 9.1 L13.9 9.3 L13.6 10 L13.2 10.7 L13.2 10.9 L12.6 12.1 L12.3 13 L12 13.6 L15.8 13.6 L15.9 13.8 L14.4 16.3 L13.7 17.7 L13.2 18.4 L12.8 19.1 L12.5 19.8 L12 20.5 L11.9 21 L22.2 10.6 L22.2 10.5 L16.8 10.6 L16.7 10.4 L22.3 3.3Z"/><path d="M11 11.3 L9.9 11.3 L9.8 11.4 L7.8 11.6 L6 11.9 L5.4 12.1 L3.9 12.3 L3.1 12.5 L3.1 12.6 L5.6 12.7 L5.7 12.8 L7.9 12.8 L8 12.9 L10.4 12.9 L11 11.6Z"/><path d="M12.7 7.3 L12 7.3 L11.9 7.4 L10.7 7.5 L10.1 7.7 L9.6 7.7 L7.2 8.2 L6.7 8.4 L5.5 8.6 L5.6 8.8 L7 8.8 L7.1 8.9 L8.5 8.9 L8.6 9 L12 9.1Z"/><path d="M10.9 15.4 L10.3 15.7 L10 15.7 L9.1 15.4 L7.8 15.5 L7.7 15.6 L6.9 15.6 L6.8 15.7 L6 15.7 L5.9 15.8 L4.1 16 L3.5 16.2 L2.5 16.3 L1.6 16.6 L2.6 16.6 L2.7 16.7 L10.9 16.7Z"/></g>`,
+  autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.48 5.36 L15.02 1.6 L14.82 1.6 L15.62 3.28 L15.52 3.78 L14.82 3.78 L14.72 3.88 L12.64 3.88 L12.54 3.78 L5.71 3.78 L3.23 6.35 L3.23 16.26 L3.33 16.26 L4.82 14.48 L4.82 12.5 L4.72 12.4 L4.72 7.25 L4.82 7.05 L6.4 5.56 L8.29 5.56 L8.38 5.46 L19.48 5.46Z"/><path d="M9.87 8.83 L9.87 15.27 L9.97 15.27 L11.26 14.38 L15.12 12.1 L15.12 12 L11.16 9.62 L10.66 9.23Z"/><path d="M20.67 7.94 L20.17 8.34 L19.18 9.52 L19.18 16.85 L17.5 18.44 L17.1 18.54 L4.42 18.54 L4.42 18.64 L7.3 21.21 L8.78 22.4 L8.78 22 L8.09 20.42 L8.19 20.22 L18.29 20.22 L20.77 17.65 L20.67 17.35Z"/></g>`,
+  // hollow square — stop autoplay / halt
+  stop: `<g fill="currentColor" fill-rule="evenodd"><path d="M22.4 3.04 L21.1 4.82 L21.1 9.47 L21.03 9.54 L21.03 12.41 L21.1 12.96 L21.03 18.84 L21.1 19.18 L20.35 20.01 L19.39 20.89 L17.27 20.89 L16.72 20.96 L4.75 20.96 L4.68 20.89 L3.04 22.33 L4.13 22.33 L4.2 22.4 L6.66 22.4 L6.73 22.33 L9.13 22.33 L9.19 22.4 L20.48 22.4 L22.4 20.48Z"/><path d="M20.96 1.6 L3.38 1.6 L1.6 3.45 L1.6 20.96 L2.9 19.12 L2.9 4.75 L4.54 3.11 L19.12 3.11 L19.46 2.97Z"/></g>`,
+  menu: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 13.52 L19.61 13.52 L22.27 10.73 L22.4 10.35 L4.39 10.35 L2.36 12.51Z"/><path d="M1.6 6.04 L19.61 6.04 L22.15 3.38 L22.4 2.87 L4.39 2.87 L2.36 5.02Z"/><path d="M1.6 21 L3.25 21 L3.38 21.13 L4.9 21.13 L5.02 21 L19.61 21 L22.4 17.96 L4.52 17.83 L4.26 17.96 L2.36 19.99Z"/></g>`,
+  betUp: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.01 15.43 L19.18 13.07 L14.68 6.75 L12.32 3.64 L12 3.42 L8.57 7.93 L6.42 11.04 L2.89 15.75 L2.78 16.07 L12 8.14 L12.21 8.14 L20.68 15.43Z"/><path d="M22.4 20.26 L20.04 17.79 L12.21 10.28 L12 10.28 L6.53 15.43 L6.42 15.65 L1.81 20.15 L1.6 20.58 L12 14.04 L12.21 14.04 L12.75 14.47 L18.11 17.68 L18.65 18.11 L19.51 18.54 L22.29 20.36Z"/></g>`,
+  betDown: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 2.74 L1.84 3.22 L5.57 7.43 L11.7 14.04 L12.06 14.28 L12.42 14.04 L18.79 7.19 L22.4 2.98 L22.28 2.86 L18.55 5.51 L12.06 10.44 L5.81 5.63Z"/><path d="M20.84 9.35 L18.07 11.52 L12.18 16.57 L11.94 16.57 L4.49 10.2 L3.52 9.48 L3.4 9.6 L8.57 16.57 L8.81 17.05 L10.26 18.85 L10.5 19.33 L11.34 20.3 L11.58 20.78 L12.18 21.26 L18.43 12.84Z"/></g>`,
+  minus: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 13.26 L12.42 13.26 L12.5 13.18 L19.81 13.26 L22.4 10.82 L4.27 10.74Z"/></g>`,
+  plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.16 1.6 L12.26 3.17 L10.77 5.42 L10.77 10.73 L10.69 10.8 L4.33 10.8 L1.79 13.2 L10.69 13.2 L10.77 13.27 L10.77 22.4 L12.41 19.71 L13.16 18.66 L13.16 13.27 L13.23 13.2 L19.59 13.2 L22.21 10.8 L13.23 10.8 L13.16 10.73Z"/></g>`,
+  gift: `<rect x="4" y="9" width="16" height="11" rx="2" fill="currentColor"/><path d="M9 9a2.5 2.5 0 1 1 3-3 2.5 2.5 0 1 1 3 3z" fill="currentColor"/><rect x="11" y="9" width="2" height="11" fill="rgba(0,0,0,.35)"/>`,
+  info: `<g fill="currentColor" fill-rule="evenodd"><path d="M14.22 7.78 L11.13 7.86 L9.4 9.21 L9.17 9.29 L10.15 9.29 L10.23 9.59 L9.32 13.73 L8.87 17.12 L8.57 18.78 L8.5 19.69 L8.27 20.74 L8.12 22.32 L8.04 22.4 L13.62 17.95 L11.96 17.95 L11.89 17.58 L12.41 15.69 L12.49 15.01 L12.87 13.73 L12.87 13.43 L13.24 12.15 L13.77 9.97 L14 8.68 L14.22 8.08Z"/><path d="M15.96 1.6 L12.94 1.6 L11.74 3.18 L11.51 3.63 L10.08 5.67 L12.79 5.59 L14.37 3.71Z"/></g>`,
+  soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M16.61 6.68 L17.16 8.4 L17.4 9.97 L17.4 13.88 L17.32 13.95 L17.16 15.44 L16.61 17.16 L18.88 13.72 L18.88 12.86 L18.96 12.78 L18.88 10.12Z"/><path d="M19.27 4.34 L19.58 4.88 L19.66 5.28 L20.05 6.14 L20.6 7.93 L20.91 9.5 L20.91 10.44 L20.99 10.51 L20.99 13.25 L20.91 13.33 L20.91 14.19 L20.76 15.13 L20.05 17.63 L19.27 19.43 L20.29 18.02 L21.15 16.61 L22.4 14.19 L22.4 9.58 L21.31 7.39 L20.29 5.74Z"/><path d="M13.17 1.76 L10.28 4.34 L6.29 8.17 L1.6 8.25 L1.6 15.6 L2.15 15.75 L6.29 16.3 L9.97 19.58 L13.17 22.24Z"/><path d="M11.69 5.59 L11.92 5.67 L11.92 19.04 L11.69 19.12 L7.07 14.82 L4.57 14.5 L4.42 14.35 L4.42 10.51 L4.57 10.36 L7.07 10.28Z"/></g>`,
+  soundOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.68 13.18 L12.53 14.4 L12.53 18.44 L12.3 18.51 L10.4 16.76 L9.33 17.83 L12.84 20.88 L13.75 21.56 L13.75 13.18Z"/><path d="M17.71 8.69 L17.49 8.91 L17.56 9.9 L17.64 9.98 L17.64 13.1 L17.33 14.7 L17.03 15.39 L18.78 12.88 L18.78 11.66 L18.86 11.58 L18.78 10.29Z"/><path d="M19.47 6.63 L19.85 7.47 L20.46 9.6 L20.53 10.13 L20.53 13.03 L20.08 15.01 L19.31 16.91 L20.61 14.93 L21.3 13.49 L21.52 13.18 L21.52 9.9 L20.76 8.53Z"/><path d="M20.91 2.21 L16.5 6.63 L13.98 9.3 L13.75 9.22 L13.75 1.6 L10.86 4.19 L7.05 7.85 L2.4 7.92 L2.48 8 L2.48 15.16 L6.51 15.7 L7.73 14.32 L5.3 14.02 L5.22 13.94 L5.22 10.13 L5.75 9.98 L7.81 9.9 L12.3 5.33 L12.53 5.41 L12.53 10.9 L10.32 13.26 L6.9 17.14 L2.55 22.4 L6.9 18.36 L9.79 15.47 L13.52 11.5 L18.25 5.71Z"/></g>`,
+  close: `<g fill="currentColor" fill-rule="evenodd"><path d="M22.16 1.6 L21.3 2.09 L20.44 2.82 L16.89 5.27 L12.12 10.29 L10.53 8.82 L7.35 5.39 L2.21 2.09 L5.88 7.23 L8.21 9.55 L10.41 12 L5.76 16.89 L2.33 21.54 L1.84 22.4 L2.58 22.03 L2.95 21.67 L4.17 20.93 L5.88 19.59 L7.23 18.73 L12 13.71 L12.12 13.71 L17.02 18.73 L22.16 22.16 L22.16 21.91 L20.2 19.46 L18.48 17.02 L13.71 12.12 L13.71 11.88 L18.48 6.86 L20.32 4.17 L21.67 2.46Z"/></g>`,
+  back: `<path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
+  chevronRight: `<path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
+  star: `<path d="M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.9 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z" fill="currentColor"/>`,
+  // volatility bolt (buy-bonus cards) — supplied art, scaled from its 1254 viewBox into 24×24
+  lightning: `<path transform="scale(0.019139)" d="M747,205L433,629L622,633L497,986L801,550L614,547Z" fill="currentColor"/>`,
+};
+
+export type IconName = keyof typeof SVGS;
+export const ICON_NAMES = Object.keys(SVGS) as IconName[];
+
+/** Inline SVG string for an icon, sized to 1em (scale via font-size/width). */
+export function icon(name: IconName): string {
+  return `<svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true">${SVGS[name]}</svg>`;
+}

package/src/shell/components/pickers.ts

@@ -0,0 +1,76 @@
+import type { GameShell } from '../GameShell';
+import { formatCurrency } from '../format';
+import { createCardModal } from './primitives';
+
+interface Choice { id: string; label: string }
+
+interface SheetOpts {
+  ge: string;
+  title: string;
+  choices: Choice[];
+  selected: string;
+  columns: number;
+  confirmLabel: string;
+  onConfirm: (id: string) => void;
+}
+
+/** A centred picker (chips grid + accent Confirm) on the shared card modal. */
+function buildSheet(opts: SheetOpts): HTMLElement {
+  const ui = createCardModal({ ge: opts.ge, title: opts.title, onClose: () => ui.root.remove() });
+
+  const grid = document.createElement('div'); grid.className = 'ge-sheet-grid';
+  grid.style.gridTemplateColumns = `repeat(${opts.columns}, 1fr)`;
+  let selected = opts.selected;
+  const chips: HTMLButtonElement[] = [];
+  for (const c of opts.choices) {
+    const chip = document.createElement('button');
+    chip.className = 'ge-chip' + (c.id === selected ? ' ge-on' : '');
+    chip.dataset.id = c.id; chip.textContent = c.label;
+    chip.addEventListener('click', () => {
+      selected = c.id;
+      for (const x of chips) x.classList.toggle('ge-on', x.dataset.id === selected);
+    });
+    chips.push(chip); grid.appendChild(chip);
+  }
+  ui.body.appendChild(grid);
+
+  // Single full-bleed Confirm; dismissal is the ✕ (top-right). No Cancel button.
+  const confirm = document.createElement('button');
+  confirm.className = 'ge-modal-btn ge-modal-btn--accent'; confirm.dataset.ge = 'sheet-confirm';
+  confirm.textContent = opts.confirmLabel;
+  confirm.addEventListener('click', () => { opts.onConfirm(selected); ui.root.remove(); });
+  ui.card.appendChild(confirm);
+
+  return ui.root;
+}
+
+/** Bet picker — all available bets as chips (3 per row), accent Confirm applies it. */
+export function openBetModal(shell: GameShell): HTMLElement {
+  return buildSheet({
+    ge: 'bet-modal', title: shell.t('Bet'), columns: 3, confirmLabel: shell.t('Confirm'),
+    choices: shell.state.availableBets.map((b) => ({ id: String(b), label: formatCurrency(b, shell.config.currency) })),
+    selected: String(shell.state.bet),
+    onConfirm: (id) => {
+      const v = Number(id);
+      if (v !== shell.state.bet) { shell.state.bet = v; shell.emit('betChange', v); }
+      shell.render();
+    },
+  });
+}
+
+const AUTOPLAY_COUNTS = [10, 25, 50, 100, 250, 500, 1000, 2000, Infinity];
+
+/** Autoplay picker — spin counts incl. ∞; Confirm starts autoplay. */
+export function openAutoplayModal(shell: GameShell): HTMLElement {
+  return buildSheet({
+    ge: 'autoplay-modal', title: shell.t('Autoplay'), columns: 3, confirmLabel: shell.t('Start'),
+    choices: AUTOPLAY_COUNTS.map((n) => ({ id: String(n), label: Number.isFinite(n) ? String(n) : '∞' })),
+    selected: String(shell.state.autoplay.remaining || 10),
+    onConfirm: (id) => {
+      const remaining = Number(id); // "Infinity" → Infinity
+      shell.state.autoplay = { active: true, remaining };
+      shell.emit('autoplayStart', { active: true, remaining });
+      shell.render();
+    },
+  });
+}

package/src/shell/components/primitives.ts

@@ -0,0 +1,84 @@
+import { icon } from './icons';
+
+/** Render a (possibly socialised) two-word label across two lines — the BUY BONUS badge.
+ *  Shared so the bottom-bar button and the Game-info control legend break identically. */
+export function twoLine(label: string): string {
+  return label.split(/\s+/).join('<br>');
+}
+
+export interface CardModalOpts {
+  ge: string;
+  title: string;
+  /** Accent for the title heading + accent footer button (defaults to the shell accent). */
+  accent?: string;
+  onClose: () => void;
+  /** Render the ✕ in the overlay's top-right corner (default true). */
+  closable?: boolean;
+  /** Backdrop blur in px; omit to use the stylesheet's default blur. */
+  blur?: number;
+}
+
+/** A centred CARD modal — frosted backdrop + opaque card with an accent title heading and an
+ *  overlay ✕ in the top-right. The shared chrome for every centred modal (buy-bonus confirm,
+ *  bet, autoplay, generic openModal). Append content to `body`; append full-bleed footer
+ *  button(s) directly to `card`. Closes only via the ✕ / footer buttons — the backdrop does NOT. */
+export function createCardModal(
+  opts: CardModalOpts,
+): { root: HTMLDivElement; card: HTMLDivElement; body: HTMLDivElement } {
+  const root = document.createElement('div');
+  root.className = 'ge-sheet'; root.dataset.ge = opts.ge;
+  if (opts.blur != null) root.style.setProperty('--ge-sheet-blur', `${opts.blur}px`);
+  const card = document.createElement('div'); card.className = 'ge-modal-card';
+  if (opts.accent) card.style.setProperty('--card-acc', opts.accent);
+  const body = document.createElement('div'); body.className = 'ge-modal-body';
+  const h = document.createElement('h4'); h.className = 'ge-modal-title'; h.textContent = opts.title;
+  body.appendChild(h);
+  card.appendChild(body);
+  root.appendChild(card);
+  // ✕ lives on the overlay itself (top-right of the screen), not on the card
+  if (opts.closable !== false) {
+    const close = document.createElement('button');
+    close.className = 'ge-modal-close'; close.dataset.ge = 'modal-close';
+    close.setAttribute('aria-label', 'Close'); close.innerHTML = icon('close');
+    close.addEventListener('click', opts.onClose);
+    root.appendChild(close);
+  }
+  return { root, card, body };
+}
+
+export interface OverlayOpts {
+  title: string;
+  onClose: () => void;
+  onBack?: () => void;
+}
+
+/** Full-screen overlay. Returns { root, body }; append content to body. */
+export function createOverlay(opts: OverlayOpts): { root: HTMLDivElement; body: HTMLDivElement } {
+  const root = document.createElement('div');
+  root.className = 'ge-shell-overlay';
+  const head = document.createElement('div');
+  head.className = 'ge-ov-head';
+  if (opts.onBack) {
+    const back = document.createElement('button');
+    back.className = 'ge-ov-nav'; back.dataset.ge = 'info-back'; back.innerHTML = icon('back');
+    back.addEventListener('click', opts.onBack);
+    head.appendChild(back);
+  } else {
+    // reserve a slot equal to the close button so the title stays centred
+    const spacer = document.createElement('div');
+    spacer.className = 'ge-ov-spacer';
+    head.appendChild(spacer);
+  }
+  const h = document.createElement('h4'); h.className = 'ge-ov-title'; h.textContent = opts.title; head.appendChild(h);
+  const close = document.createElement('button');
+  close.className = 'ge-ov-nav'; close.setAttribute('aria-label', 'Close'); close.innerHTML = icon('close');
+  close.addEventListener('click', opts.onClose);
+  head.appendChild(close);
+  // Header stays fixed; only this wrapper scrolls — the X never scrolls away,
+  // and vh-clamped padding keeps it usable on small popouts (e.g. 400×225).
+  const scroll = document.createElement('div'); scroll.className = 'ge-ov-scroll';
+  const body = document.createElement('div'); body.className = 'ge-ov-body';
+  scroll.appendChild(body);
+  root.append(head, scroll);
+  return { root, body };
+}