@energy8platform/shell 0.2.0

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

@@ -0,0 +1,146 @@
+import type { ShellHost } from '@/core/renderer';
+import { createCardModal } from '../primitives';
+
+interface Choice { id: string; label: string }
+
+interface SheetOpts {
+  ge: string;
+  title: string;
+  choices: Choice[];
+  selected: string;
+  /** Chips per row. A single number is fixed across layouts; `{ wide, mobile }` reflows
+   *  with the shell's mobile breakpoint (driven by CSS custom props, so an open modal
+   *  re-columns live on resize/rotate without being rebuilt). */
+  columns: number | { wide: number; mobile: number };
+  confirmLabel: string;
+  onConfirm: (id: string) => void;
+  /** Called to dismiss the picker (should invoke host.actions.closeOverlay()). */
+  onClose: () => void;
+}
+
+/** Result of buildSheet — the root DOM element plus a keyboard handler. */
+interface Sheet {
+  root: HTMLElement;
+  /** Route keydown events here. Returns true if the event was consumed. */
+  onKey: (e: KeyboardEvent) => boolean;
+}
+
+/** A centred picker (chips grid + accent Confirm) on the shared card modal. */
+function buildSheet(opts: SheetOpts): Sheet {
+  const ui = createCardModal({ ge: opts.ge, title: opts.title, onClose: () => opts.onClose() });
+
+  const grid = document.createElement('div'); grid.className = 'ge-sheet-grid';
+  const cols = typeof opts.columns === 'number' ? { wide: opts.columns, mobile: opts.columns } : opts.columns;
+  grid.style.setProperty('--cols', String(cols.wide));
+  grid.style.setProperty('--cols-m', String(cols.mobile));
+  let selected = opts.selected;
+  let focusIndex = opts.choices.findIndex((c) => c.id === selected);
+  if (focusIndex < 0) focusIndex = 0;
+  const chips: HTMLButtonElement[] = [];
+
+  /** Update chip visuals to reflect the current selected/focused index. */
+  function setHighlight(newIndex: number): void {
+    focusIndex = newIndex;
+    selected = opts.choices[focusIndex].id;
+    for (let i = 0; i < chips.length; i++) {
+      chips[i].classList.toggle('ge-on', i === focusIndex);
+    }
+  }
+
+  for (let i = 0; i < opts.choices.length; i++) {
+    const c = opts.choices[i];
+    const chip = document.createElement('button');
+    chip.className = 'ge-chip' + (i === focusIndex ? ' ge-on' : '');
+    chip.dataset.id = c.id; chip.textContent = c.label;
+    const idx = i; // capture for closure
+    chip.addEventListener('click', () => {
+      setHighlight(idx);
+    });
+    chips.push(chip); grid.appendChild(chip);
+  }
+  ui.body.appendChild(grid);
+
+  function doConfirm(): void {
+    opts.onConfirm(selected);
+    opts.onClose();
+  }
+
+  // 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', doConfirm);
+  ui.card.appendChild(confirm);
+
+  function onKey(e: KeyboardEvent): boolean {
+    const last = opts.choices.length - 1;
+    switch (e.code) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+      case 'Equal':         // + on most keyboards
+      case 'NumpadAdd':
+        if (focusIndex < last) setHighlight(focusIndex + 1);
+        return true;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'Minus':
+      case 'NumpadSubtract':
+        if (focusIndex > 0) setHighlight(focusIndex - 1);
+        return true;
+      case 'Enter':
+      case 'Space':
+        doConfirm();
+        return true;
+      case 'Escape':
+        opts.onClose();
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  return { root: ui.root, onKey };
+}
+
+/** Bet picker — all available bets as chips (6 per row, 3 on mobile), accent Confirm applies it. */
+export function openBetModal(host: ShellHost): { root: HTMLElement; onKey: (e: KeyboardEvent) => boolean } {
+  return buildSheet({
+    ge: 'bet-modal', title: host.t('Bet'), columns: { wide: 6, mobile: 3 }, confirmLabel: host.t('Confirm'),
+    choices: host.state.availableBets.map((b) => ({ id: String(b), label: host.formatCurrency(b) })),
+    selected: String(host.state.bet),
+    onClose: () => host.actions.closeOverlay(),
+    onConfirm: (id) => {
+      const v = Number(id);
+      host.actions.setBet(v);
+    },
+  });
+}
+
+const AUTOPLAY_COUNTS = [10, 25, 50, 100, 250, 500, 1000, 2000, Infinity];
+
+/** The selectable spin counts, honouring an optional jurisdiction max. With a `maxCount`:
+ *  drop ∞, keep presets ≤ max, and append the max itself when it isn't already a preset
+ *  (so the cap is always offered). Without one: the default presets including ∞. */
+function autoplayCounts(maxCount?: number): number[] {
+  if (maxCount == null) return AUTOPLAY_COUNTS;
+  const capped = AUTOPLAY_COUNTS.filter((n) => Number.isFinite(n) && n <= maxCount);
+  if (!capped.includes(maxCount)) capped.push(maxCount);
+  return capped;
+}
+
+/** Autoplay picker — spin counts (incl. ∞ unless a maxCount caps them); Confirm starts autoplay. */
+export function openAutoplayModal(host: ShellHost): { root: HTMLElement; onKey: (e: KeyboardEvent) => boolean } {
+  const maxCount = host.config.features.autoplay?.maxCount;
+  const counts = autoplayCounts(maxCount);
+  return buildSheet({
+    ge: 'autoplay-modal', title: host.t('Autoplay'), columns: 3, confirmLabel: host.t('Start'),
+    choices: counts.map((n) => ({ id: String(n), label: Number.isFinite(n) ? String(n) : '∞' })),
+    selected: String(host.state.autoplay.remaining || counts[0]),
+    onClose: () => host.actions.closeOverlay(),
+    onConfirm: (id) => {
+      let remaining = Number(id); // "Infinity" → Infinity
+      if (maxCount != null) remaining = Math.min(remaining, maxCount); // defensive cap
+      host.actions.startAutoplay(remaining);
+    },
+  });
+}

package/src/ui/html/icons-preview.svg

@@ -0,0 +1,224 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_Слой_1" data-name="Слой_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 716 826">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <defs>
+    <style>
+      .st0, .st1, .st2, .st3 {
+        font-family: MyriadPro-Regular, 'Myriad Pro';
+      }
+
+      .st0, .st4, .st5 {
+        isolation: isolate;
+      }
+
+      .st0, .st5 {
+        fill: #7d8794;
+        font-size: 13px;
+      }
+
+      .st1 {
+        letter-spacing: 0em;
+      }
+
+      .st6 {
+        font-family: AppleBraille-Outline6Dot, 'Apple Braille';
+      }
+
+      .st2 {
+        letter-spacing: 0em;
+      }
+
+      .st4 {
+        fill: #f0f3f8;
+        font-family: Helvetica-Bold, Helvetica;
+        font-size: 22px;
+        font-weight: 700;
+      }
+
+      .st7 {
+        stroke-miterlimit: 10;
+      }
+
+      .st7, .st8, .st9 {
+        fill: #e6edf3;
+      }
+
+      .st7, .st10 {
+        stroke: #283039;
+      }
+
+      .st7, .st9 {
+        fill-rule: evenodd;
+      }
+
+      .st11 {
+        fill: none;
+        stroke: #e6edf3;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 3.67px;
+      }
+
+      .st12 {
+        fill: #0d1117;
+      }
+
+      .st10 {
+        fill: #161b22;
+      }
+    </style>
+  </defs>
+  <rect class="st12" width="716" height="826"/>
+  <text class="st4" transform="translate(28 58)"><tspan x="0" y="0">Energy8 Shell Icons</tspan></text>
+  <text class="st5" transform="translate(28 80)"><tspan class="st3" x="0" y="0">21</tspan><tspan class="st6" x="13.34" y="0"> </tspan><tspan class="st3" x="17.78" y="0">glyphs</tspan><tspan class="st6" x="54" y="0"> </tspan><tspan class="st2" x="58.44" y="0">·</tspan><tspan class="st6" x="61.13" y="0"> </tspan><tspan class="st3" x="65.58" y="0">24×24</tspan><tspan class="st6" x="100" y="0"> </tspan><tspan class="st3" x="104.44" y="0">viewBox</tspan><tspan class="st6" x="150.02" y="0"> </tspan><tspan class="st3" x="154.46" y="0">·</tspan><tspan class="st6" x="157.15" y="0"> </tspan><tspan class="st1" x="161.6" y="0">currentColor</tspan></text>
+  <g>
+    <rect class="st10" x="48" y="98" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M104.49,130.91c-3.25-1.64-10.05-4.6-13.51-5.65l2.57,3.59h0c-9.83.29-15.77,10.03-16.57,18.97l2.9,4.78.35.18,3.41-3.08c-.39-.77-1.03-3.43-1.03-3.43h0c-.76-8.34,6.02-14.44,14.21-13.51h0l4.27,1.37,3.41-2.91v-.33Z"/>
+      <path class="st9" d="M83.54,157.53c3.29,1.57,10.15,4.38,13.63,5.36l-2.64-3.54h0c9.82-.5,15.55-10.36,16.16-19.32l-3-4.72-.35-.18-3.34,3.15c.41.77,1.1,3.41,1.1,3.41h0c.94,8.32-5.72,14.57-13.92,13.81h0l-4.3-1.28-3.35,2.99v.33Z"/>
+    </g>
+    <text class="st0" transform="translate(85.11 214)"><tspan x="0" y="0">spin</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="180" y="98" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M239.13,125.13h-4.93l-.2-.2h-5.74l-.82.2-1.83,3.08-2.25,4.51-.42.4-3.68,7.19-.4.4-1.65,3.48,8.82.42,4.51-4.51-.4-.42-2.47-.2v-.62l7.59-8.8,3.9-4.93Z"/>
+      <path class="st9" d="M240.35,134.78l-1.65,1.23-4.71,4.31-12.3,11.88-10.05,9.44v1.43l2.25-1.85,14.56-13.73.2.4-5.54,11.07-.4,1.23-1.03,2.05h.2l17.43-21.32v-.2l-3.08-.2-.2-.4,2.25-2.47,2.05-2.86Z"/>
+    </g>
+    <text class="st0" transform="translate(214.89 214)"><tspan x="0" y="0">turbo</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="312" y="98" width="92" height="92" rx="14" ry="14"/>
+    <path class="st7" d="M357.57,126.96l-8.47,19.49h8.05c-3.81,7.07-8.69,15.89-8.69,15.89h.43s21.9-22.3,21.9-22.3l-10.61.05,10.32-15.89-12.92,2.75Z"/>
+    <text class="st0" transform="translate(344.67 214)"><tspan x="0" y="0">turbo1</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="444" y="98" width="92" height="92" rx="14" ry="14"/>
+    <path class="st9" d="M490.06,126.73c-2.38,6.37-6,13.22-8.47,19.49h8.05c-3.81,7.07-5.79,10.85-8.69,15.89h.43c1.95-1.89,20.58-21.23,22.02-22.21v-.45s-11.85.2-11.85.2h0c1.22-2.04,10.5-13.31,11.44-15.67"/>
+    <text class="st0" transform="translate(476.67 214)"><tspan x="0" y="0">turbo2</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="576" y="98" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M641.07,127.5h-.73l-3.12.92h-.73l-.73.37h-.73l-5.87,1.65-3.67,8.25v.37l-.55,1.28-.73,1.28v.37l-1.1,2.2-.55,1.65-.55,1.1h6.97l.18.37-2.75,4.58-1.28,2.57-.92,1.28-.73,1.28-.55,1.28-.92,1.28-.18.92,18.88-19.07v-.18l-9.9.18-.18-.37,10.27-13.02.18-.55Z"/>
+      <path class="st9" d="M620.17,142.72h-2.02l-.18.18-3.67.37-3.3.55-1.1.37-2.75.37-1.47.37v.18l4.58.18.18.18h4.03l.18.18h4.4l1.1-2.38v-.55Z"/>
+      <path class="st9" d="M623.28,135.38h-1.28l-.18.18-2.2.18-1.1.37h-.92l-4.4.92-.92.37-2.2.37.18.37h2.57l.18.18h2.57l.18.18,6.23.18,1.28-3.3Z"/>
+      <path class="st9" d="M619.98,150.23l-1.1.55h-.55l-1.65-.55-2.38.18-.18.18h-1.47l-.18.18h-1.47l-.18.18-3.3.37-1.1.37-1.83.18-1.65.55h1.83l.18.18h15.03v-2.38Z"/>
+    </g>
+    <text class="st0" transform="translate(608.67 214)"><tspan x="0" y="0">turbo3</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="48.47" y="237.74" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M90.09,278.19v11.81h.18c1.5-1.2,7.69-4.77,9.44-5.81v-.18c-1.82-1-7.92-4.92-9.62-5.81Z"/>
+      <path class="st9" d="M109.73,277.01l-2.75,2.41v13.44l-3.81,3.1s-23.25,0-23.25,0v.18l7.99,6.89-1.08-4h18.52l4.55-4.71h0l-.17-17.31Z"/>
+      <path class="st9" d="M77.75,290.87l2.76-2.39.09-13.44,3.83-3.07s23.25.15,23.25.15v-.18s-7.95-6.95-7.95-6.95l1.06,4h0l-18.52-.12-4.58,4.68h0l.05,17.31Z"/>
+    </g>
+    <text class="st0" transform="translate(76.23 354)"><tspan x="0" y="0">autoplay</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="180" y="238" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M242.43,264.93h-32.23l-3.26,3.39v32.1l2.38-3.37v-26.34l3.01-3.01h26.73l3.37-2.77Z"/>
+      <path class="st9" d="M209.66,303.01l32.23-.07,3.26-3.4-.07-32.1-2.38,3.38.06,26.34-3,3.01-26.73.06h0l-3.37,2.78Z"/>
+    </g>
+    <text class="st0" transform="translate(217.11 354)"><tspan x="0" y="0">stop</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="312" y="238" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M338.93,286.79h33.02l5.11-5.81h-33.02l-5.11,5.81h0Z"/>
+      <path class="st9" d="M338.93,273.07h33.02l5.11-5.81h-33.02l-5.11,5.81h0Z"/>
+      <path class="st9" d="M339.01,300.53h33.02l5.11-5.81h-33.02l-5.11,5.81h0Z"/>
+    </g>
+    <text class="st0" transform="translate(349.11 354)"><tspan x="0" y="0">menu</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="444" y="238" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M506.52,290.29l-3.35-4.33-8.25-11.59-4.33-5.7-.59-.4-6.29,8.27-3.94,5.7-6.47,8.63-.2.59,16.9-14.54h.38l15.53,13.36h.6Z"/>
+      <path class="st9" d="M509.07,299.14l-4.33-4.53-14.35-13.77h-.38l-10.03,9.44-.2.4-8.45,8.25-.38.79,19.07-11.99h.38l.99.79,9.83,5.88.99.79,1.58.79,5.1,3.34.2-.18Z"/>
+    </g>
+    <text class="st0" transform="translate(478.89 354)"><tspan x="0" y="0">betUp</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="576" y="238" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M602.93,267.02l.44.88,6.84,7.72,11.24,12.12.66.44.66-.44,11.68-12.56,6.62-7.72-.22-.22-6.84,4.86-11.9,9.04-11.46-8.82-7.72-5.3Z"/>
+      <path class="st9" d="M638.21,279.14l-5.08,3.98-10.8,9.26h-.44l-13.66-11.68-1.78-1.32-.22.22,9.48,12.78.44.88,2.66,3.3.44.88,1.54,1.78.44.88,1.1.88,11.46-15.44,4.42-6.4Z"/>
+    </g>
+    <text class="st0" transform="translate(606.45 354)"><tspan x="0" y="0">betDown</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="48" y="378" width="92" height="92" rx="14" ry="14"/>
+    <path class="st9" d="M108.32,426.31l4.75-4.47-33.24-.15-4.89,4.62"/>
+    <text class="st0" transform="translate(82.89 494)"><tspan x="0" y="0">minus</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="180" y="378" width="92" height="92" rx="14" ry="14"/>
+    <path class="st9" d="M228.13,404.93h0l-4.38,7v9.73l-.15.13h-11.66l-4.66,4.4h16.32l.15.13v16.74l4.38-6.86h0v-9.88l.13-.13h11.66l4.8-4.4h-16.46l-.13-.13v-16.74Z"/>
+    <text class="st0" transform="translate(217.11 494)"><tspan x="0" y="0">plus</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="312" y="378" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <rect class="st8" x="343.33" y="418.5" width="29.33" height="20.17" rx="3.67" ry="3.67"/>
+      <path class="st8" d="M352.5,418.5c-2.47-.57-4-3.03-3.43-5.5s3.03-4,5.5-3.43c1.7.4,3.03,1.73,3.43,3.43.57-2.47,3.03-4,5.5-3.43,2.47.57,4,3.03,3.43,5.5-.4,1.7-1.73,3.03-3.43,3.43h-11Z"/>
+      <rect x="356.17" y="418.5" width="3.67" height="20.17"/>
+    </g>
+    <text class="st0" transform="translate(349.11 494)"><tspan x="0" y="0">gift</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="444" y="378" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M494.07,416.26l-5.66.15s-3.33,2.73-3.59,2.62h1.8l-3.72,23.89h0l10.08-8.01h-3.04"/>
+      <path class="st9" d="M497.26,404.93h-5.54c-1.57,1.9-3.77,5.46-5.24,7.46l4.97-.15c1.54-1.74,4.45-5.42,5.81-7.31Z"/>
+    </g>
+    <text class="st0" transform="translate(481.11 494)"><tspan x="0" y="0">info</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="576" y="378" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M634.61,420.55l-4.16-6.31,1.01,3.15.44,2.88v7.17l-.44,2.86-1.01,3.15,4.16-6.31"/>
+      <path class="st9" d="M638.33,426.44c.15,3.51-1.59,8.04-3.01,11.18,2.05-2.53,4.31-6.67,5.74-9.61,0,0,0-8.45,0-8.45-1.38-3.02-3.66-7.02-5.74-9.61,1.56,3.27,3.09,7.48,3.01,11.18"/>
+      <path class="st9" d="M624.14,405.23c-3.12,2.66-9.64,8.84-12.61,11.75l-8.6.15v13.47c.25.26,8.02,1.19,8.6,1.28,3.06,2.79,9.4,8.32,12.61,10.89v-37.55Z"/>
+      <path class="st9" d="M621.43,412.25l.42.15v24.51l-.42.15-8.47-7.88-4.58-.59-.27-.27v-7.04l.27-.27,4.58-.15,8.47-8.6Z"/>
+    </g>
+    <text class="st0" transform="translate(606.45 494)"><tspan x="0" y="0">soundOn</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="48" y="518" width="92" height="92" rx="14" ry="14"/>
+    <g>
+      <path class="st9" d="M97.08,566.16l-2.11,2.24v7.41l-.42.13-3.48-3.21-1.96,1.96,6.43,5.59,1.67,1.25v-15.36h-.13Z"/>
+      <path class="st9" d="M104.47,557.93l-.4.4.13,1.81s.41,7.68-.97,10.06l3.21-4.6v-4.75l-1.96-2.93Z"/>
+      <path class="st9" d="M107.69,554.15l1.94,6.42v5.32l-2.24,7.11,4.05-6.84v-6.01l-3.76-5.99Z"/>
+      <path class="st9" d="M110.33,546.05c-3.01,2.99-9.92,9.93-12.7,13l-.42-.15v-13.97c-3.06,2.63-9.36,8.59-12.28,11.46l-8.52.13.15.15v13.13l7.39.99,2.24-2.53-4.45-.55-.15-.15v-6.98l4.75-.42,8.23-8.38.42.15v10.06c-5.56,5.73-13.22,14.84-18.3,21.08,12-10.58,24.26-24.07,33.66-37.01Z"/>
+    </g>
+    <text class="st0" transform="translate(76.23 634)"><tspan x="0" y="0">soundOff</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="180" y="518" width="92" height="92" rx="14" ry="14"/>
+    <path class="st9" d="M234.96,551.66l-8.74,9.2-8.74-8.98-9.42-6.05,6.73,9.42,8.3,8.74-9.26,9.51-6.45,9.55,9.88-6.73,8.74-9.2h.22l8.98,9.2,9.42,6.29-6.42-9.15-9.07-9.26v-.44l8.83-9.32,6.66-9.52"/>
+    <text class="st0" transform="translate(214.89 634)"><tspan x="0" y="0">close</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="312" y="518" width="92" height="92" rx="14" ry="14"/>
+    <path class="st11" d="M363.5,553l-11,11,11,11"/>
+    <text class="st0" transform="translate(349.11 634)"><tspan x="0" y="0">back</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="444" y="518" width="92" height="92" rx="14" ry="14"/>
+    <path class="st11" d="M484.5,553l11,11-11,11"/>
+    <text class="st0" transform="translate(463.34 634)"><tspan x="0" y="0">chevronRight</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="576" y="518" width="92" height="92" rx="14" ry="14"/>
+    <path class="st8" d="M622,547.5l4.77,10.27,11.18,1.28-8.25,7.7,2.2,11-9.9-4.77-9.9,4.77,2.2-11-8.25-7.7,11.18-1.28,4.77-10.27Z"/>
+    <text class="st0" transform="translate(613.11 634)"><tspan x="0" y="0">star</tspan></text>
+  </g>
+  <g>
+    <rect class="st10" x="48" y="658" width="92" height="92" rx="14" ry="14"/>
+    <path class="st8" d="M98.21,689.19l-11.02,14.88,6.63.14-4.39,12.39,10.67-15.3-6.56-.11,4.67-12Z"/>
+    <text class="st0" transform="translate(74 774)"><tspan x="0" y="0">lightning</tspan></text>
+  </g>
+</svg>

package/src/ui/html/icons.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED from ./icons-preview.svg by scripts/gen-icons.mjs — do not edit by hand.
+// Sharp monochrome icon set: each glyph is a 24×24 viewBox fragment using currentColor
+// (hollow shapes use fill-rule="evenodd"; the few stroked glyphs use stroke="currentColor").
+// Coordinates are baked into the 24×24 space (no <g transform>), so the same fragment renders
+// identically in the DOM <svg> and in Pixi's GraphicsContext.svg.
+// To change an icon: edit icons-preview.svg, then run `node scripts/gen-icons.mjs`.
+const SVGS: Record<string, string> = {
+  spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.72 4.86c-1.77 -0.89 -5.48 -2.51 -7.37 -3.08l1.4 1.96h0c-5.36 0.16 -8.6 5.47 -9.04 10.35l1.58 2.61l0.19 0.1l1.86 -1.68c-0.21 -0.42 -0.56 -1.87 -0.56 -1.87h0c-0.41 -4.55 3.28 -7.88 7.75 -7.37h0l2.33 0.75l1.86 -1.59v-0.18Z"/><path d="M6.29 19.38c1.79 0.86 5.54 2.39 7.43 2.92l-1.44 -1.93h0c5.36 -0.27 8.48 -5.65 8.81 -10.54l-1.64 -2.57l-0.19 -0.1l-1.82 1.72c0.22 0.42 0.6 1.86 0.6 1.86h0c0.51 4.54 -3.12 7.95 -7.59 7.53h0l-2.35 -0.7l-1.83 1.63v0.18Z"/></g>`,
+  turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M11.77 2.71l-4.62 10.63h4.39c-2.08 3.86 -4.74 8.67 -4.74 8.67h0.23s11.95 -12.16 11.95 -12.16l-5.79 0.03l5.63 -8.67l-7.05 1.5Z"/></g>`,
+  autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M9.61 8.97v6.44h0.1c0.82 -0.65 4.19 -2.6 5.15 -3.17v-0.1c-0.99 -0.55 -4.32 -2.68 -5.25 -3.17Z"/><path d="M20.32 8.33l-1.5 1.31v7.33l-2.08 1.69s-12.68 0 -12.68 0v0.1l4.36 3.76l-0.59 -2.18h10.1l2.48 -2.57h0l-0.09 -9.44Z"/><path d="M2.88 15.89l1.51 -1.3l0.05 -7.33l2.09 -1.67s12.68 0.08 12.68 0.08v-0.1s-4.34 -3.79 -4.34 -3.79l0.58 2.18h0l-10.1 -0.07l-2.5 2.55h0l0.03 9.44Z"/></g>`,
+  stop: `<g fill="currentColor" fill-rule="evenodd"><path d="M20.96 1.6h-17.58l-1.78 1.85v17.51l1.3 -1.84v-14.37l1.64 -1.64h14.58l1.84 -1.51Z"/><path d="M3.09 22.37l17.58 -0.04l1.78 -1.85l-0.04 -17.51l-1.3 1.84l0.03 14.37l-1.64 1.64l-14.58 0.03h0l-1.84 1.52Z"/></g>`,
+  menu: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 13.52h18.01l2.79 -3.17h-18.01l-2.79 3.17h0Z"/><path d="M1.6 6.04h18.01l2.79 -3.17h-18.01l-2.79 3.17h0Z"/><path d="M1.64 21.02h18.01l2.79 -3.17h-18.01l-2.79 3.17h0Z"/></g>`,
+  minus: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.81 13.26l2.59 -2.44l-18.13 -0.08l-2.67 2.52"/></g>`,
+  plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.16 1.6h0l-2.39 3.82v5.31l-0.08 0.07h-6.36l-2.54 2.4h8.9l0.08 0.07v9.13l2.39 -3.74h0v-5.39l0.07 -0.07h6.36l2.62 -2.4h-8.98l-0.07 -0.07v-9.13Z"/></g>`,
+  gift: `<rect x="4" y="9" width="16" height="11" rx="2" fill="currentColor"/><path d="M9 9c-1.35 -0.31 -2.18 -1.65 -1.87 -3s1.65 -2.18 3 -1.87c0.93 0.22 1.65 0.94 1.87 1.87c0.31 -1.35 1.65 -2.18 3 -1.87c1.35 0.31 2.18 1.65 1.87 3c-0.22 0.93 -0.94 1.65 -1.87 1.87h-6Z" 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.78l-3.09 0.08s-1.82 1.49 -1.96 1.43h0.98l-2.03 13.03h0l5.5 -4.37h-1.66"/><path d="M15.96 1.6h-3.02c-0.86 1.04 -2.06 2.98 -2.86 4.07l2.71 -0.08c0.84 -0.95 2.43 -2.96 3.17 -3.99Z"/></g>`,
+  soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M18.88 10.12l-2.27 -3.44l0.55 1.72l0.24 1.57v3.91l-0.24 1.56l-0.55 1.72l2.27 -3.44"/><path d="M20.91 13.33c0.08 1.91 -0.87 4.39 -1.64 6.1c1.12 -1.38 2.35 -3.64 3.13 -5.24c0 0 0 -4.61 0 -4.61c-0.75 -1.65 -2 -3.83 -3.13 -5.24c0.85 1.78 1.69 4.08 1.64 6.1"/><path d="M13.17 1.76c-1.7 1.45 -5.26 4.82 -6.88 6.41l-4.69 0.08v7.35c0.14 0.14 4.37 0.65 4.69 0.7c1.67 1.52 5.13 4.54 6.88 5.94v-20.48Z"/><path d="M11.69 5.59l0.23 0.08v13.37l-0.23 0.08l-4.62 -4.3l-2.5 -0.32l-0.15 -0.15v-3.84l0.15 -0.15l2.5 -0.08l4.62 -4.69Z"/></g>`,
+  soundOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.68 13.18l-1.15 1.22v4.04l-0.23 0.07l-1.9 -1.75l-1.07 1.07l3.51 3.05l0.91 0.68v-8.38h-0.07Z"/><path d="M17.71 8.69l-0.22 0.22l0.07 0.99s0.22 4.19 -0.53 5.49l1.75 -2.51v-2.59l-1.07 -1.6Z"/><path d="M19.47 6.63l1.06 3.5v2.9l-1.22 3.88l2.21 -3.73v-3.28l-2.05 -3.27Z"/><path d="M20.91 2.21c-1.64 1.63 -5.41 5.42 -6.93 7.09l-0.23 -0.08v-7.62c-1.67 1.43 -5.11 4.69 -6.7 6.25l-4.65 0.07l0.08 0.08v7.16l4.03 0.54l1.22 -1.38l-2.43 -0.3l-0.08 -0.08v-3.81l2.59 -0.23l4.49 -4.57l0.23 0.08v5.49c-3.03 3.13 -7.21 8.09 -9.98 11.5c6.55 -5.77 13.23 -13.13 18.36 -20.19Z"/></g>`,
+  close: `<g fill="currentColor" fill-rule="evenodd"><path d="M16.89 5.27l-4.77 5.02l-4.77 -4.9l-5.14 -3.3l3.67 5.14l4.53 4.77l-5.05 5.19l-3.52 5.21l5.39 -3.67l4.77 -5.02h0.12l4.9 5.02l5.14 3.43l-3.5 -4.99l-4.95 -5.05v-0.24l4.82 -5.08l3.63 -5.19"/></g>`,
+  back: `<path d="M15 6l-6 6l6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
+  chevronRight: `<path d="M9 6l6 6l-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
+  ticket: `<g transform="translate(12 12) scale(0.0354) translate(-518.2 -535.2)"><g transform="rotate(-15 512 512)"><path d="M250 392H774L774 462C739 474 720 504 720 536C720 568 739 598 774 610V680H250V610C285 598 304 568 304 536C304 504 285 474 250 462V392Z" fill="none" stroke="currentColor" stroke-width="52" stroke-linejoin="miter" stroke-linecap="square"/><path d="M562.9 408.3L441.5 553.9L506.9 546.3L472.9 664.1L604 504L528.9 514.3Z" fill="currentColor"/></g></g>`,
+};
+
+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/ui/html/index.ts

@@ -0,0 +1,36 @@
+import { createShell, ShellController } from '@/core';
+import type { ShellConfig } from '@/core/types';
+import { HtmlRenderer } from './HtmlRenderer';
+
+export interface HtmlShellConfig extends ShellConfig {
+  mount: HTMLElement;
+}
+
+let active: ShellController | null = null;
+
+/** Drop-in replacement for the platform-core createGameShell.
+ *  Singleton: returns the existing shell if already created. */
+export function createGameShell(config: HtmlShellConfig): ShellController {
+  if (active) return active;
+  active = createShell({ ...config, renderer: new HtmlRenderer({ mount: config.mount }) });
+  return active;
+}
+
+/** Tear down the active shell (no argument — singleton). Resolves immediately when nothing is active. */
+export function removeGameShell(): Promise<void> {
+  if (!active) return Promise.resolve();
+  const shell = active;
+  active = null;
+  return shell.destroy();
+}
+
+export { HtmlRenderer };
+export { ShellController as GameShell };
+export * from '@/core';
+
+// Re-export socialize/createI18n/normalizeLang/Lang to mirror platform-core/src/shell/index.ts.
+// They are already re-exported by `@/core` (which includes i18n), so the above wildcard covers it.
+
+// HTML-typed narrowed aliases (node = HTMLElement rather than unknown)
+export type { BonusOption, GameInfoSection } from '@/core/types';
+export type { HtmlShellConfig as ShellConfig };

package/src/ui/html/motion-dom.ts

@@ -0,0 +1,29 @@
+import { prefersReducedMotion } from '@/core/motion';
+
+/** Animate el's text from→to via fmt on requestAnimationFrame; jumps to final when motion is
+ *  reduced/unavailable. Returns a canceler. (Verbatim behavior of platform-core motion.ts countUp.) */
+export function countUp(el: HTMLElement, from: number, to: number, fmt: (n: number) => string, durationMs = 450): () => void {
+  const raf = (globalThis as { requestAnimationFrame?: typeof requestAnimationFrame }).requestAnimationFrame;
+  const caf = (globalThis as { cancelAnimationFrame?: typeof cancelAnimationFrame }).cancelAnimationFrame;
+  if (prefersReducedMotion() || typeof raf !== 'function') {
+    el.textContent = fmt(to);
+    return () => {};
+  }
+  let handle = 0;
+  let cancelled = false;
+  const origin = (globalThis as { performance?: { now(): number } }).performance?.now() ?? 0;
+  const tick = (t: number) => {
+    if (cancelled) return;
+    const start = origin;
+    const p = Math.min(1, (t - start) / durationMs);
+    const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
+    el.textContent = fmt(from + (to - from) * eased);
+    if (p < 1) handle = raf(tick);
+    else el.textContent = fmt(to);
+  };
+  handle = raf(tick);
+  return () => {
+    cancelled = true;
+    if (typeof caf === 'function') caf(handle);
+  };
+}

package/src/ui/html/primitives.ts

@@ -0,0 +1,85 @@
+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, scroll }; append content to body.
+ *  The `scroll` element is the scrollable container (overflow-y: auto). */
+export function createOverlay(opts: OverlayOpts): { root: HTMLDivElement; body: HTMLDivElement; scroll: 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, scroll };
+}