@energy8platform/platform-core 0.22.0 → 0.23.1

package/README.md

@@ -714,7 +714,7 @@ the previous value.
 shell.setBalance(n); shell.setWin(n); shell.setBet(n);
 shell.setBusy(true);                 // disables controls mid-spin
 shell.setMode('freeSpins');
-shell.setFreeSpins({ current: 1, total: 10, totalWin: 0, lastWin: 0 });   // freeSpins bar readout
+shell.setFreeSpins({ current: 1, total: 10, totalWin: 0 });   // Free Spins + Total Win bar readout
 shell.setAutoplay({ active: true, remaining: 25 });
 shell.setTurbo(2);
 shell.setBuyBonusEnabled(false);     // grey out BUY BONUS (e.g. insufficient balance)

package/dist/index.cjs.js

@@ -963,7 +963,7 @@ function createInitialState(config) {
         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,
     };
 }
@@ -1078,6 +1078,7 @@ const SHELL_ROOT_ID = '__ge-game-shell__';
 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);
@@ -1289,16 +1290,18 @@ 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; }
@@ -1353,8 +1356,10 @@ 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; }
@@ -1403,40 +1408,44 @@ 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; }
 `;
@@ -1625,10 +1634,13 @@ function renderBottomBar(shell) {
     bar.dataset.geMode = state.mode;
     // menu icon button (always)
     const menu = iconBtn('menu', 'menu', () => shell.openMenu());
-    // All three modes share the base plaque layout. FS/replay hide the controls that
-    // don't apply; FS puts the spins counter in the centre pill (where WIN normally is).
+    // 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
     // the feature accent; the base state.bet is unchanged and returns once the feature is off.
@@ -1655,22 +1667,25 @@ function renderBottomBar(shell) {
         buy = config.features.buyBonus !== false ? buyBtn(shell) : null;
     }
     const winEl = state.win > 0 ? readout('win', shell.t('Win'), fmt(state.win)) : null;
-    // FS readouts — the spins counter plus the accumulated/last win for the round.
-    const fsCounter = isFS ? readout('fs-counter', shell.t('Free spins'), `${state.freeSpins.current} / ${state.freeSpins.total}`) : null;
-    const fsTotalWin = isFS ? readout('fs-totalwin', shell.t('Total win'), fmt(state.freeSpins.totalWin)) : null;
-    const fsLastWin = isFS ? readout('fs-lastwin', shell.t('Last win'), fmt(state.freeSpins.lastWin)) : null;
+    // 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 = [betValue];
         if (betUp && betDown) {
@@ -1686,11 +1701,9 @@ function renderBottomBar(shell) {
         spinWrap.className = 'ge-spinwrap ge-pl-dark';
         spinWrap.append(...compact([auto, spin, turbo]));
         const right = zone('ge-zone-right ge-zone-plaques', betPlaque, divider, spinWrap);
-        // MIDDLE: FS → last win · counter · total win plaque; base/replay → WIN pill (lifts on overflow)
+        // MIDDLE: per-spin WIN pill in every mode — lifts above the bar on overflow.
         let middle = null;
-        if (isFS)
-            middle = plaque('ge-pl ge-pl-glass ge-fscount', compact([fsLastWin, fsCounter, fsTotalWin]));
-        else if (winEl) {
+        if (winEl) {
             winEl.classList.add('ge-winpill');
             middle = winEl;
         }
@@ -1908,7 +1921,7 @@ function openGameInfoModal(shell) {
 }
 function renderSection(shell, s) {
     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))));
@@ -1929,25 +1942,25 @@ function sec(ge, title, fallback) {
     return el;
 }
 // ── modes (rows — varying description lengths read better than fixed cards) ────
-function sectionModes(modes, el) {
+function sectionModes(shell, modes, el) {
     const list = document.createElement('div');
     list.className = 'ge-gi-modes';
     for (const m of modes)
-        list.appendChild(modeRow(m));
+        list.appendChild(modeRow(shell, m));
     el.appendChild(list);
     return el;
 }
-function modeRow(m) {
+function modeRow(shell, m) {
     const row = document.createElement('div');
     row.className = 'ge-gi-mode';
     const stat = (label, val) => `<span class="ge-gi-mode-st"><span>${label}</span><b>${val}</b></span>`;
     let stats = '';
     if (m.price != null)
-        stats += stat('Price', m.price);
+        stats += stat(shell.t('Price'), m.price);
     if (typeof m.rtp === 'number')
-        stats += stat('RTP', `${m.rtp}%`);
+        stats += stat(shell.t('RTP'), `${m.rtp}%`);
     if (m.maxWin != null)
-        stats += stat('Max win', m.maxWin);
+        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>' +
@@ -2575,6 +2588,7 @@ const RULES = [
     ['paid', 'won'],
     ['bought', 'instantly triggered'],
     ['purchase', 'play'],
+    ['price', 'play'],
     ['deposit', 'get coins'],
     ['withdraw', 'redeem'],
     ['currency', 'token'],