@energy8platform/platform-core 0.21.0 → 0.23.0

package/src/shell/components/BottomBar.ts

@@ -43,10 +43,13 @@ export function renderBottomBar(shell: GameShell): HTMLElement {
   // 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).
+  // All three modes share the base plaque layout. FS/replay hide the controls that don't apply
+  // and add Free Spins + Total Win blocks on the left; the per-spin WIN uses the base pill.
   const isBase = state.mode === 'base';
   const isFS = state.mode === 'freeSpins';
+  // FS always shows the spins counter + accumulated Total Win (even €0); a replay shows them
+  // only when it's a free-spins replay (freeSpins.total > 0).
+  const showFsBlocks = isFS || (state.mode === 'replay' && state.freeSpins.total > 0);
 
   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
@@ -72,22 +75,25 @@ export function renderBottomBar(shell: GameShell): HTMLElement {
   }
 
   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;
+  // FS/replay left blocks: spins counter + accumulated Total Win (shown even at €0).
+  const fsCounter = showFsBlocks ? readout('fs-counter', shell.t('Free spins'), `${state.freeSpins.current} / ${state.freeSpins.total}`) : null;
+  const fsTotalWin = showFsBlocks ? readout('fs-totalwin', shell.t('Total win'), fmt(state.freeSpins.totalWin)) : 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])));
+    // rows: [balance · win] · [menu · auto · spin · FS counter · Total Win · turbo · buy] · [− bet +]
+    // FS counter + Total Win live in the controls row (alongside menu/turbo), not the top readouts.
+    bar.appendChild(plaque('ge-m-top ge-pl ge-pl-glass', compact([balance, winEl])));
+    const center = isBase ? spin : null;
+    bar.appendChild(plaque('ge-m-controls ge-pl-dark', compact([menu, auto, center, fsCounter, fsTotalWin, turbo, buy])));
     bar.appendChild(plaque('ge-m-bet ge-pl ge-pl-dark', compact([betDown, betValue, betUp])));
   } else {
-    // LEFT: [menu] ⊐ BUY BONUS coin ⊏ [balance]
+    // LEFT: [menu] ⊐ BUY BONUS coin ⊏ [balance] · [Free Spins] · [Total Win]
+    // (the last two only render in FS / a free-spins replay)
     const menuPlaque = plaque('ge-pl ge-pl-dark ge-pl-menu', [menu]);
     const balPlaque = plaque('ge-pl ge-pl-glass ge-pl-bal', [balance]);
-    const left = zone('ge-zone-left ge-zone-plaques', ...compact([menuPlaque, buy, balPlaque]));
+    const fsPlaque = fsCounter ? plaque('ge-pl ge-pl-glass ge-pl-fs', [fsCounter]) : null;
+    const totalWinPlaque = fsTotalWin ? plaque('ge-pl ge-pl-glass ge-pl-totalwin', [fsTotalWin]) : null;
+    const left = zone('ge-zone-left ge-zone-plaques', ...compact([menuPlaque, buy, balPlaque, fsPlaque, totalWinPlaque]));
 
     // RIGHT: [bet (+ step)] · |divider| · [auto · SPIN · turbo]
     const betKids: HTMLElement[] = [betValue];
@@ -101,10 +107,9 @@ export function renderBottomBar(shell: GameShell): HTMLElement {
     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)
+    // MIDDLE: per-spin WIN pill in every mode — lifts above the bar 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; }
+    if (winEl) { winEl.classList.add('ge-winpill'); middle = winEl; }
     bar.append(...compact([left, middle, right]));
   }
 

package/src/shell/components/GameInfo.ts

@@ -81,7 +81,7 @@ function sectionControls(shell: GameShell, el: HTMLElement): HTMLElement {
     { 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('autoplay')), name: 'Autoplay', desc: 'Spin automatically a set number of times.', on: features.autoplay != null },
     { 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 },
   ];

package/src/shell/components/pickers.ts

@@ -60,14 +60,27 @@ export function openBetModal(shell: GameShell): HTMLElement {
 
 const AUTOPLAY_COUNTS = [10, 25, 50, 100, 250, 500, 1000, 2000, Infinity];
 
-/** Autoplay picker — spin counts incl. ∞; Confirm starts autoplay. */
+/** 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(shell: GameShell): HTMLElement {
+  const maxCount = shell.config.features.autoplay?.maxCount;
+  const counts = autoplayCounts(maxCount);
   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),
+    choices: counts.map((n) => ({ id: String(n), label: Number.isFinite(n) ? String(n) : '∞' })),
+    selected: String(shell.state.autoplay.remaining || counts[0]),
     onConfirm: (id) => {
-      const remaining = Number(id); // "Infinity" → Infinity
+      let remaining = Number(id); // "Infinity" → Infinity
+      if (maxCount != null) remaining = Math.min(remaining, maxCount); // defensive cap
       shell.state.autoplay = { active: true, remaining };
       shell.emit('autoplayStart', { active: true, remaining });
       shell.render();

package/src/shell/shell.css.ts

@@ -218,8 +218,10 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
 /* the buy-bonus scroll area is a SIZE CONTAINER, so the cards' cqh units measure the overlay
    (the popout frame) and not the browser window — cards fit without any vertical scroll. */
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-scroll { container-type:size; }
-#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-body { padding:clamp(8px,3cqh,16px); }
-#${SHELL_ROOT_ID} .ge-bb-grid { display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
+/* buy-bonus uses the FULL overlay width (no 800px centre cap) so the card row isn't cropped at
+   the sides; small horizontal padding keeps the cards off the screen edges. */
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-body { max-width:none; padding:clamp(8px,3cqh,16px) clamp(12px,3vw,28px); }
+#${SHELL_ROOT_ID} .ge-bb-grid { display:flex; gap:14px; justify-content:safe center; overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
   scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
 /* the one knob that scales the whole card — cqh measures the overlay (popout frame), not the
    browser window, so cards shrink to fit the real container height. */
@@ -282,8 +284,10 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
   border-radius:16px; padding:0 20px; gap:18px; }
 #${SHELL_ROOT_ID} .ge-pl-dark { background:var(--shell-plaque-dark); }
 #${SHELL_ROOT_ID} .ge-pl-glass { background:var(--shell-plaque-glass); }
-/* FS spins-counter plaque (wide) — sits between balance and bet, glass like balance */
-#${SHELL_ROOT_ID} .ge-fscount { justify-content:center; min-width:150px; }
+/* FS/replay left blocks — Free Spins counter (compact) + Total Win, standalone glass plaques
+   sitting just right of the balance pill */
+#${SHELL_ROOT_ID} .ge-pl-fs, #${SHELL_ROOT_ID} .ge-pl-totalwin { margin-left:8px; }
+#${SHELL_ROOT_ID} .ge-pl-fs { padding:0 16px; }
 #${SHELL_ROOT_ID} .ge-pl .ge-rd { color:#fff; text-shadow:none; }
 #${SHELL_ROOT_ID} .ge-pl .ge-rd .ge-lbl { color:var(--shell-plaque-label); }
 #${SHELL_ROOT_ID} .ge-pl .ge-iconbtn { color:#fff; }

package/src/shell/state.ts

@@ -11,7 +11,7 @@ export function createInitialState(config: ShellConfig): ShellState {
     autoplay: { active: false, remaining: 0 },
     turbo: 0,
     buyBonusEnabled: true,
-    freeSpins: { current: 0, total: 0, totalWin: 0, lastWin: 0 },
+    freeSpins: { current: 0, total: 0, totalWin: 0 },
     activeFeature: null,
   };
 }

package/src/shell/theme.ts

@@ -41,9 +41,9 @@ export function buildThemeVars(theme: ThemeConfig = {}): string {
     // Plaque tokens — the grouped dark/glass panel language shared by the control bar
     // AND the overlays. Scheme-independent (always dark, white-on-dark) so bar + overlays
     // stay visually identical regardless of the dark/light `scheme`.
-    `--shell-plaque-dark: rgba(6,9,15,.76)`,
-    `--shell-plaque-glass: rgba(30,36,48,.5)`,
-    `--shell-plaque-glass-hover: rgba(40,48,64,.62)`,
+    `--shell-plaque-dark: rgba(6,9,15,.86)`,
+    `--shell-plaque-glass: rgba(30,36,48,.70)`,
+    `--shell-plaque-glass-hover: rgba(40,48,64,.86)`,
     // Opaque surface for centred modals (confirm, bet/autoplay pickers) so they read solid,
     // not see-through, over the frosted backdrop.
     `--shell-plaque-solid: #1a2030`,

package/src/shell/types.ts

@@ -90,9 +90,21 @@ export interface GameInfoContent {
   sections?: GameInfoSection[];
 }
 
+/** Autoplay limits. Presence of this object (vs `null`) is what enables autoplay. */
+export interface AutoplayConfig {
+  /** Maximum selectable spin count in the autoplay picker. Caps the built-in presets and
+   *  drops the unlimited (∞) choice; if it isn't already a preset it becomes the top choice.
+   *  Omit for the default presets (including ∞). */
+  maxCount?: number;
+}
+
 export interface ShellFeatures {
   turbo: 0 | 1 | 2 | 3;
-  autoplay: boolean;
+  /** Spacebar starts a spin in base mode. Defaults to `true`; set `false` to disable the
+   *  keyboard shortcut (e.g. jurisdictions that forbid quick-spin keys). */
+  spacebar?: boolean;
+  /** Autoplay: `null` (or omitted) disables it; an object enables it (optionally with limits). */
+  autoplay?: AutoplayConfig | null;
   buyBonus: BonusOption[] | false;
 }
 
@@ -105,7 +117,6 @@ export interface FreeSpinsState {
   current: number;
   total: number;
   totalWin: number;
-  lastWin: number;
 }
 
 /** One footer button of a generic modal. Clicking it runs `on` (if any), then closes the modal. */