@energy8platform/platform-core 0.23.0 → 0.23.2

package/README.md

@@ -691,6 +691,7 @@ await removeGameShell();
 | `mode` | `'base' \| 'freeSpins' \| 'replay'` | Drives which bottom-bar variant renders. |
 | `gameInfo` | `GameInfoContent` | Sections for the game-info overlay (see below). |
 | `features` | `ShellFeatures` | `{ turbo: 0–3, spacebar?, autoplay, buyBonus }`. `spacebar?: boolean` (default `true`) — `false` disables the Spacebar → spin shortcut. `autoplay: AutoplayConfig \| null` — `null`/omitted disables it; `{}` enables it; `{ maxCount }` caps the picker (drops ∞). `buyBonus: BonusOption[] \| false`. |
+| `onBonusBuy` | `(() => void)?` | Override the BUY BONUS button action — opens your own UI instead of the built-in overlay (also shows the button without a `buyBonus` array). See [Buy bonus](#buy-bonus--features). |
 
 ### Events (`shell.on(name, handler)`)
 
@@ -738,6 +739,26 @@ shell.deactivateFeature();        // revert
 
 Each card price renders as `priceMultiplier × current bet` in the shell currency.
 
+**Customisation.** Two override hooks let a game replace the built-in UI while keeping the
+shell's buy flow:
+
+```typescript
+// 1) Per-card UI — render your own card; the shell keeps the grid wrapper, accent vars and live
+//    re-pricing, and runs the normal confirm → buy flow when you call ctx.select().
+{ id: 'fs', title: 'Free Spins', description: '…', priceMultiplier: 100,
+  custom: ({ priceText, disabled, accent, select }) => {
+    const el = document.createElement('button');
+    el.textContent = priceText; el.disabled = disabled;
+    el.style.background = accent; el.addEventListener('click', select); // select() = internal flow
+    return el;                                                          // ctx also has { bonus, bet, price }
+  } }
+
+// 2) Bar button action — open your OWN bonus UI instead of the built-in overlay.
+createGameShell({ /* … */, onBonusBuy: () => myGame.openBonusScreen() });
+```
+
+`onBonusBuy` also makes the BUY BONUS button appear without a `features.buyBonus` array.
+
 ### Game info (`gameInfo.sections`)
 
 The game-info overlay is composed from typed sections — declare what your game has and the shell

package/dist/index.cjs.js

@@ -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);
@@ -1296,16 +1297,18 @@ const SHELL_CSS = SHELL_FONT_CSS + `
   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; }
 #${SHELL_ROOT_ID} .ge-bonus-card:hover:not(.ge-bonus-off) {
   box-shadow:0 0 0 1px var(--card-acc), 0 12px 34px -12px var(--card-acc); }
+/* custom card (BonusOption.custom): keep grid sizing + accent vars, drop the default chrome so the game owns the UI */
+#${SHELL_ROOT_ID} .ge-bonus-card--custom { background:none; border:none; cursor:default; }
 #${SHELL_ROOT_ID} .ge-bonus-body { display:flex; flex-direction:column; align-items:center; flex:1; padding:1.25em 1.1em .9em; }
 #${SHELL_ROOT_ID} .ge-bonus-title { font-size:1.3em; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
   color:var(--card-acc); margin-bottom:.75em; }
@@ -1407,40 +1410,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; }
 `;
@@ -1659,7 +1666,7 @@ function renderBottomBar(shell) {
             shell.openBetPicker(); });
         spin = spinButton(shell);
         auto = config.features.autoplay ? autoButton(shell) : null;
-        buy = config.features.buyBonus !== false ? buyBtn(shell) : null;
+        buy = (config.features.buyBonus !== false || config.onBonusBuy) ? buyBtn(shell) : null;
     }
     const winEl = state.win > 0 ? readout('win', shell.t('Win'), fmt(state.win)) : null;
     // FS/replay left blocks: spins counter + accumulated Total Win (shown even at €0).
@@ -1916,7 +1923,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))));
@@ -1937,25 +1944,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>' +
@@ -2244,20 +2251,39 @@ function buildCard(shell, bonus, overlay) {
     card.dataset.ge = `bonus-card-${bonus.id}`;
     card.style.setProperty('--card-acc', accent);
     card.style.setProperty('--card-ink', contrastText(accent));
+    const enabled = isAffordable(shell, bonus);
+    // Stack the confirm on top of the overlay grid (cancel returns to the grid). Re-checks
+    // affordability at click time, so it's a safe no-op when the option can't be bought.
+    const select = () => {
+        if (!isAffordable(shell, bonus))
+            return;
+        overlay.appendChild(buildConfirm(shell, bonus, overlay));
+        shell.fitModals();
+    };
+    // Game-supplied card UI: the shell keeps the wrapper (grid sizing + accent vars) and runs the
+    // buy flow when the game calls ctx.select(); the game owns everything inside.
+    if (bonus.custom) {
+        card.classList.add('ge-bonus-card--custom');
+        const price = bonus.priceMultiplier * shell.state.bet;
+        card.appendChild(bonus.custom({
+            bonus, bet: shell.state.bet, price,
+            priceText: formatCurrency(price, shell.config.currency),
+            disabled: !enabled, accent, select,
+        }));
+        return card;
+    }
     card.appendChild(cardBody(shell, bonus));
     const cta = document.createElement('button');
     cta.className = 'ge-bonus-cta';
     cta.dataset.ge = `bonus-cta-${bonus.id}`;
     cta.textContent = shell.t(actionLabel(bonus));
     card.appendChild(cta);
-    const enabled = isAffordable(shell, bonus);
     if (!enabled) {
         card.classList.add('ge-bonus-off');
         cta.disabled = true;
     }
     else {
-        // Stack the confirm on top of the overlay grid (cancel returns to the grid).
-        card.addEventListener('click', () => { overlay.appendChild(buildConfirm(shell, bonus, overlay)); shell.fitModals(); });
+        card.addEventListener('click', select);
     }
     return card;
 }
@@ -2583,6 +2609,7 @@ const RULES = [
     ['paid', 'won'],
     ['bought', 'instantly triggered'],
     ['purchase', 'play'],
+    ['price', 'play'],
     ['deposit', 'get coins'],
     ['withdraw', 'redeem'],
     ['currency', 'token'],
@@ -2846,6 +2873,10 @@ class GameShell extends EventEmitter {
     openSettings() { this.emit('settingsOpen'); this.showModal(openSettingsModal(this)); }
     openInfo() { this.emit('infoOpen'); this.showModal(openGameInfoModal(this)); }
     openBuyBonus() {
+        if (this.config.onBonusBuy) {
+            this.config.onBonusBuy();
+            return;
+        } // game handles it (own UI)
         const overlay = openBuyBonusOverlay(this);
         if (overlay)
             this.showModal(overlay);