@energy8platform/platform-core 0.22.0 → 0.23.1

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

@@ -28,7 +28,7 @@ export function openGameInfoModal(shell: GameShell): HTMLElement {
 
 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 'modes': return sectionModes(shell, 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))));
@@ -46,20 +46,20 @@ function sec(ge: string, title: string | undefined, fallback: string): HTMLEleme
 }
 
 // ── modes (rows — varying description lengths read better than fixed cards) ────
-function sectionModes(modes: GameMode[], el: HTMLElement): HTMLElement {
+function sectionModes(shell: GameShell, modes: GameMode[], el: HTMLElement): HTMLElement {
   const list = document.createElement('div'); list.className = 'ge-gi-modes';
-  for (const m of modes) list.appendChild(modeRow(m));
+  for (const m of modes) list.appendChild(modeRow(shell, m));
   el.appendChild(list);
   return el;
 }
-function modeRow(m: GameMode): HTMLElement {
+function modeRow(shell: GameShell, 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);
+  if (m.price != null) stats += stat(shell.t('Price'), m.price);
+  if (typeof m.rtp === 'number') stats += stat(shell.t('RTP'), `${m.rtp}%`);
+  if (m.maxWin != null) stats += stat(shell.t('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>' +

package/src/shell/i18n.ts

@@ -30,6 +30,7 @@ const RULES: ReadonlyArray<readonly [string, string]> = [
   ['paid', 'won'],
   ['bought', 'instantly triggered'],
   ['purchase', 'play'],
+  ['price', 'play'],
   ['deposit', 'get coins'],
   ['withdraw', 'redeem'],
   ['currency', 'token'],

package/src/shell/shell.css.ts

@@ -7,6 +7,7 @@ export const SHELL_ROOT_ID = '__ge-game-shell__';
 export const SHELL_CSS = SHELL_FONT_CSS + `
 #${SHELL_ROOT_ID} {
   position: absolute; inset: 0;
+  container-type: size;   /* query container → centred modals size in cq units (responsive on every screen) */
   pointer-events: none; z-index: 9000;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   color: var(--shell-fg);
@@ -218,16 +219,18 @@ 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. */
-#${SHELL_ROOT_ID} .ge-bb-grid .ge-bonus-card { flex:0 0 18.5em; scroll-snap-align:start;
-  font-size:clamp(7px, 4cqh, 13px); }
+#${SHELL_ROOT_ID} .ge-bb-grid .ge-bonus-card { flex:0 0 18em; scroll-snap-align:start;
+  font-size:clamp(7px, 3.6cqh, 12px); }
 /* mobile: vertical stack at a fixed, readable size — scroll the list, don't shrink the cards */
 #${SHELL_ROOT_ID}.ge-mobile .ge-bb-grid { display:flex; flex-direction:column; gap:14px; overflow:visible; }
-#${SHELL_ROOT_ID}.ge-mobile .ge-bb-grid .ge-bonus-card { flex:0 0 auto; font-size:13px; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-bb-grid .ge-bonus-card { flex:0 0 auto; font-size:12px; }
 #${SHELL_ROOT_ID} .ge-bonus-card { display:flex; flex-direction:column; border-radius:1.4em; overflow:hidden;
   background:var(--shell-plaque-glass); border:1px solid var(--shell-plaque-line); color:#fff; text-align:center;
   pointer-events:auto; cursor:pointer; transition:box-shadow .12s ease, background .12s ease; }
@@ -282,8 +285,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; }
@@ -332,40 +337,44 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
   align-items:center; justify-content:center; padding:clamp(10px,4vh,24px); box-sizing:border-box;
   background:rgba(12,17,28,.5); backdrop-filter:blur(var(--ge-sheet-blur,20px)) saturate(120%);
   -webkit-backdrop-filter:blur(var(--ge-sheet-blur,20px)) saturate(120%); animation:ge-ov-in .16s ease-out; }
-/* GameShell.fitModal() scales the whole card down (transform) so it fits short popouts uniformly */
-#${SHELL_ROOT_ID} .ge-modal-card { width:100%; max-width:420px; box-sizing:border-box; overflow:hidden;
-  transform-origin:center center; background:var(--shell-plaque-solid); border-radius:20px; display:flex; flex-direction:column; }
+/* Card sizes in cq units of the shell root → responsive on EVERY screen, not just popouts. The
+   card's font-size is the one knob (clamped for readability); everything inside is em-relative so
+   the whole card scales as a unit. GameShell.fitModal() still transform-scales it down as a
+   backstop for very short popouts. */
+#${SHELL_ROOT_ID} .ge-modal-card { font-size:clamp(11px, 2cqmin, 15px); width:100%; max-width:28em; box-sizing:border-box;
+  overflow:hidden; transform-origin:center center; background:var(--shell-plaque-solid); border-radius:1.3em;
+  display:flex; flex-direction:column; }
 /* ✕ pinned to the overlay corner (the screen), not the card */
 #${SHELL_ROOT_ID} .ge-modal-close { position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px;
   border:none; border-radius:50%; cursor:pointer; pointer-events:auto; background:var(--shell-plaque-dark); color:#fff;
   display:flex; align-items:center; justify-content:center; font-size:20px; transition:background .12s ease, color .12s ease; }
 #${SHELL_ROOT_ID} .ge-modal-close:hover { background:var(--shell-plaque-glass); color:var(--shell-accent); }
-#${SHELL_ROOT_ID} .ge-modal-body { padding:18px; display:flex; flex-direction:column; gap:16px; }
+#${SHELL_ROOT_ID} .ge-modal-body { padding:1.2em; display:flex; flex-direction:column; gap:1.05em; }
 #${SHELL_ROOT_ID} .ge-modal-title { margin:0; text-align:center; color:var(--card-acc, var(--shell-accent));
-  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:18px; }
-#${SHELL_ROOT_ID} .ge-modal-text { margin:0; text-align:center; color:rgba(255,255,255,.85); font-size:14px; line-height:1.5; }
-#${SHELL_ROOT_ID} .ge-sheet-grid { display:grid; gap:10px; }
+  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:1.2em; }
+#${SHELL_ROOT_ID} .ge-modal-text { margin:0; text-align:center; color:rgba(255,255,255,.85); font-size:.93em; line-height:1.5; }
+#${SHELL_ROOT_ID} .ge-sheet-grid { display:grid; gap:.65em; }
 #${SHELL_ROOT_ID} .ge-chip { pointer-events:auto; cursor:pointer; border:1px solid var(--shell-plaque-line);
-  border-radius:12px; background:rgba(255,255,255,.04); color:#fff; font-size:15px; font-weight:700;
-  font-variant-numeric:tabular-nums; padding:12px 8px; transition:background .12s ease, border-color .12s ease; }
+  border-radius:.8em; background:rgba(255,255,255,.04); color:#fff; font-size:1em; font-weight:700;
+  font-variant-numeric:tabular-nums; padding:.8em .55em; transition:background .12s ease, border-color .12s ease; }
 #${SHELL_ROOT_ID} .ge-chip:hover { background:var(--shell-plaque-glass-hover); }
 #${SHELL_ROOT_ID} .ge-chip.ge-on { border-color:var(--shell-accent); background:var(--shell-accent); color:#fff; }
 /* full-bleed footer button(s), flush to the card's bottom edge (card clips the corners) */
 #${SHELL_ROOT_ID} .ge-modal-actions { display:flex; }
 #${SHELL_ROOT_ID} .ge-modal-actions > * { flex:1; }
-#${SHELL_ROOT_ID} .ge-modal-btn { width:100%; border:none; padding:16px; font-size:15px; font-weight:800;
+#${SHELL_ROOT_ID} .ge-modal-btn { width:100%; border:none; padding:1.05em; font-size:1em; font-weight:800;
   letter-spacing:.04em; text-transform:uppercase; cursor:pointer; pointer-events:auto; transition:filter .12s ease; }
 #${SHELL_ROOT_ID} .ge-modal-btn:hover:not([disabled]) { filter:brightness(1.08); }
 #${SHELL_ROOT_ID} .ge-modal-btn--accent { background:var(--card-acc, var(--shell-accent)); color:#fff; }
 #${SHELL_ROOT_ID} .ge-modal-btn--ghost { background:var(--shell-plaque-glass-hover); color:#fff; }
 /* replay summary — label/value rows, accented total-win row */
 #${SHELL_ROOT_ID} .ge-replay-rows { display:flex; flex-direction:column; }
-#${SHELL_ROOT_ID} .ge-replay-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 2px; }
+#${SHELL_ROOT_ID} .ge-replay-row { display:flex; justify-content:space-between; align-items:baseline; gap:1.05em; padding:.73em .13em; }
 #${SHELL_ROOT_ID} .ge-replay-row + .ge-replay-row { border-top:1px solid var(--shell-plaque-line); }
-#${SHELL_ROOT_ID} .ge-replay-row span { color:var(--shell-plaque-label); text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:700; }
-#${SHELL_ROOT_ID} .ge-replay-row b { color:#fff; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; }
-#${SHELL_ROOT_ID} .ge-replay-total span { color:#fff; font-size:12px; }
-#${SHELL_ROOT_ID} .ge-replay-total b { color:var(--shell-accent); font-size:19px; }
+#${SHELL_ROOT_ID} .ge-replay-row span { color:var(--shell-plaque-label); text-transform:uppercase; letter-spacing:.07em; font-size:.73em; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-replay-row b { color:#fff; font-weight:800; font-size:1em; font-variant-numeric:tabular-nums; }
+#${SHELL_ROOT_ID} .ge-replay-total span { color:#fff; font-size:.8em; }
+#${SHELL_ROOT_ID} .ge-replay-total b { color:var(--shell-accent); font-size:1.27em; }
 
 #${SHELL_ROOT_ID}.ge-shell-hidden { opacity:0; pointer-events:none; transition:opacity .25s ease; }
 `;

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/types.ts

@@ -117,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. */