@energy8platform/shell 0.4.0 → 0.5.0

package/dist/html.cjs.js

@@ -65,6 +65,7 @@ function createInitialState(config) {
         turbo: 0,
         buyBonusEnabled: true,
         freeSpins: { current: 0, total: 0, totalWin: 0 },
+        bonus: null,
         activeFeature: null,
     };
 }
@@ -1438,7 +1439,7 @@ class KeyboardController {
 
 // AUTO-GENERATED by scripts/gen-version.mjs — do not edit. Mirrors package.json "version".
 /** The @energy8platform/shell package version, stamped into the game-info footer. */
-const PACKAGE_VERSION = '0.4.0';
+const PACKAGE_VERSION = '0.5.0';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -1499,9 +1500,15 @@ class ShellController extends EventEmitter {
         this.renderer.renderBar();
     }
     // ── ShellHost ──────────────────────────────────────────────────────────────
-    t(text) { return this.i18n.t(text); }
-    formatCurrency(n, win = false) { return formatCurrency(n, this.config.currency, win); }
-    formatWin(value) { return this.formatCurrency(value, true); }
+    t(text) {
+        return this.i18n.t(text);
+    }
+    formatCurrency(n, win = false) {
+        return formatCurrency(n, this.config.currency, win);
+    }
+    formatWin(value) {
+        return this.formatCurrency(value, true);
+    }
     notifyResize(w, h) {
         const layout = w !== 0 && h > w ? 'mobile' : 'wide';
         if (layout !== this.layout) {
@@ -1568,12 +1575,24 @@ class ShellController extends EventEmitter {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const self = this;
         const host = {
-            get state() { return self.state; },
-            get hotkeysEnabled() { return self.config.features.hotkeys !== false; },
-            get spacebarEnabled() { return self.config.features.spacebar !== false; },
-            get turboLevels() { return self.config.features.turbo; },
-            get autoplayEnabled() { return self.config.features.autoplay != null; },
-            get buyBonusEnabled() { return self.config.features.buyBonus !== false; },
+            get state() {
+                return self.state;
+            },
+            get hotkeysEnabled() {
+                return self.config.features.hotkeys !== false;
+            },
+            get spacebarEnabled() {
+                return self.config.features.spacebar !== false;
+            },
+            get turboLevels() {
+                return self.config.features.turbo;
+            },
+            get autoplayEnabled() {
+                return self.config.features.autoplay != null;
+            },
+            get buyBonusEnabled() {
+                return self.config.features.buyBonus !== false;
+            },
             hasOpenLayer: () => self.overlay !== null,
             routeToLayer: (e) => self.overlay?.onKey?.(e) ?? false,
             spin: () => self.actions.spin(),
@@ -1589,27 +1608,52 @@ class ShellController extends EventEmitter {
         this.kbd = new KeyboardController(host);
         this.kbd.attach();
     }
-    pullFocus = () => { try {
-        globalThis.focus?.();
-    }
-    catch { /* cross-origin */ } };
+    pullFocus = () => {
+        try {
+            globalThis.focus?.();
+        }
+        catch {
+            /* cross-origin */
+        }
+    };
     // ── overlay flow ─────────────────────────────────────────────────────────────
     show(req) {
         this.closeModal();
         this.overlay = this.renderer.openOverlay(req) ?? null;
     }
-    openMenu() { this.emit('menuOpen'); this.openSettings(); }
-    openSettings() { this.emit('settingsOpen'); this.show({ kind: 'settings' }); }
-    openInfo() { this.emit('infoOpen'); this.show({ kind: 'gameInfo' }); }
-    openBuyBonus() { if (this.config.onBonusBuy) {
-        this.config.onBonusBuy();
-        return;
-    } this.show({ kind: 'buyBonus' }); }
-    openBetPicker() { this.show({ kind: 'betPicker' }); }
-    openAutoplayPicker() { this.show({ kind: 'autoplayPicker' }); }
-    openReplay(opts) { if (this.destroyed)
-        return; this.show({ kind: 'replay', opts }); }
-    openModal(opts) { this.show({ kind: 'modal', opts }); }
+    openMenu() {
+        this.emit('menuOpen');
+        this.openSettings();
+    }
+    openSettings() {
+        this.emit('settingsOpen');
+        this.show({ kind: 'settings' });
+    }
+    openInfo() {
+        this.emit('infoOpen');
+        this.show({ kind: 'gameInfo' });
+    }
+    openBuyBonus() {
+        if (this.config.onBonusBuy) {
+            this.config.onBonusBuy();
+            return;
+        }
+        this.show({ kind: 'buyBonus' });
+    }
+    openBetPicker() {
+        this.show({ kind: 'betPicker' });
+    }
+    openAutoplayPicker() {
+        this.show({ kind: 'autoplayPicker' });
+    }
+    openReplay(opts) {
+        if (this.destroyed)
+            return;
+        this.show({ kind: 'replay', opts });
+    }
+    openModal(opts) {
+        this.show({ kind: 'modal', opts });
+    }
     /** Programmatically dismiss whatever overlay/modal is open. No-op when nothing is shown. */
     closeModal() {
         if (!this.overlay)
@@ -1625,7 +1669,9 @@ class ShellController extends EventEmitter {
         this.soundRefresh?.(on);
         this.renderer.refreshSoundIcon?.(on);
     }
-    setSoundRefresh(fn) { this.soundRefresh = fn; }
+    setSoundRefresh(fn) {
+        this.soundRefresh = fn;
+    }
     // ── features ─────────────────────────────────────────────────────────────────
     activateFeature(bonus) {
         this.state.activeFeature = bonus;
@@ -1646,21 +1692,81 @@ class ShellController extends EventEmitter {
         if (to !== from)
             this.renderer.animateMoney(field, from, to);
     }
-    setBalance(n) { const from = this.prevBalance; this.state.balance = n; this.prevBalance = n; this.money('balance', from, n); }
-    setWin(n) { const from = this.prevWin; this.state.win = n; this.prevWin = n; this.money('win', from, n); }
-    setBet(n) { this.state.bet = n; this.renderer.renderBar(); }
-    setMode(mode) { if (mode === 'replay')
-        this.state.replay = true; this.state.mode = mode; this.renderer.renderBar(); }
-    setBusy(busy) { this.state.busy = busy; this.renderer.renderBar(); this.kbd?.notifyBusyChanged(busy); }
-    setAutoplay(a) { this.state.autoplay = a; this.renderer.renderBar(); }
-    setTurbo(level) { this.state.turbo = level; this.renderer.renderBar(); }
-    setBuyBonusEnabled(enabled) { this.state.buyBonusEnabled = enabled; this.renderer.renderBar(); }
-    setFreeSpins(fs) { this.state.freeSpins = fs; this.renderer.renderBar(); }
-    setTheme(theme) { this.config.theme = theme; this.tokens = resolveTheme(theme); this.renderer.applyTheme(this.tokens); this.renderer.renderBar(); }
-    setLanguage(lang) { this.config.language = lang; this.i18n = createI18n({ language: lang, isSocial: this.config.isSocial }); this.renderer.renderBar(); }
-    setSocial(isSocial) { this.config.isSocial = isSocial; this.i18n = createI18n({ language: this.config.language, isSocial }); this.renderer.renderBar(); }
-    setLayout(layout) { if (layout === this.layout)
-        return; this.layout = layout; this.renderer.setLayout(layout); this.renderer.renderBar(); }
+    setBalance(n) {
+        const from = this.prevBalance;
+        this.state.balance = n;
+        this.prevBalance = n;
+        this.money('balance', from, n);
+    }
+    setWin(n) {
+        const from = this.prevWin;
+        this.state.win = n;
+        this.prevWin = n;
+        this.money('win', from, n);
+    }
+    setBet(n) {
+        this.state.bet = n;
+        this.renderer.renderBar();
+    }
+    setMode(mode) {
+        if (mode === 'replay')
+            this.state.replay = true;
+        this.state.mode = mode;
+        this.renderer.renderBar();
+    }
+    setBusy(busy) {
+        this.state.busy = busy;
+        this.renderer.renderBar();
+        this.kbd?.notifyBusyChanged(busy);
+    }
+    setAutoplay(a) {
+        this.state.autoplay = a;
+        this.renderer.renderBar();
+    }
+    setTurbo(level) {
+        this.state.turbo = level;
+        this.renderer.renderBar();
+    }
+    setBuyBonusEnabled(enabled) {
+        this.state.buyBonusEnabled = enabled;
+        this.renderer.renderBar();
+    }
+    setFreeSpins(fs) {
+        this.state.freeSpins = fs;
+        this.state.bonus = null;
+        this.renderer.renderBar();
+    }
+    /** Generic bonus readout (adventure / hold-and-spin / respins). Sets a game-supplied label+value
+     *  override for the bar hero and folds `totalWin` into the shared accumulator. Pairs with
+     *  `setMode('bonus')`. `setFreeSpins()` clears the override back to the derived current/total. */
+    setBonus(b) {
+        this.state.bonus = { label: b.label, value: b.value };
+        this.state.freeSpins = { ...this.state.freeSpins, totalWin: b.totalWin };
+        this.renderer.renderBar();
+    }
+    setTheme(theme) {
+        this.config.theme = theme;
+        this.tokens = resolveTheme(theme);
+        this.renderer.applyTheme(this.tokens);
+        this.renderer.renderBar();
+    }
+    setLanguage(lang) {
+        this.config.language = lang;
+        this.i18n = createI18n({ language: lang, isSocial: this.config.isSocial });
+        this.renderer.renderBar();
+    }
+    setSocial(isSocial) {
+        this.config.isSocial = isSocial;
+        this.i18n = createI18n({ language: this.config.language, isSocial });
+        this.renderer.renderBar();
+    }
+    setLayout(layout) {
+        if (layout === this.layout)
+            return;
+        this.layout = layout;
+        this.renderer.setLayout(layout);
+        this.renderer.renderBar();
+    }
     destroy() {
         if (this.destroyed)
             return Promise.resolve();
@@ -1912,7 +2018,12 @@ const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-gi-hk-block { display:flex; flex-direction:column; }
 #${SHELL_ROOT_ID} .ge-gi-hk { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; }
 #${SHELL_ROOT_ID} .ge-gi-hk + .ge-gi-hk { border-top:1px solid var(--shell-plaque-line); }
-#${SHELL_ROOT_ID} .ge-gi-hk-chips { display:flex; align-items:center; flex-wrap:wrap; gap:4px; flex:0 0 auto; }
+/* Let the keycaps SHRINK instead of hogging the row: flex:0 1 auto lets the chips block give up
+   width down to its widest single combo, and flex-wrap reflows the extra combos onto another line.
+   On narrow/mobile widths the many-chip rows (Raise/Lower bet) otherwise squeeze the label off the
+   right edge and clip it. (No min-width:0 here — the min-content floor is what keeps a combo intact
+   and wrapping rather than overflowing.) */
+#${SHELL_ROOT_ID} .ge-gi-hk-chips { display:flex; align-items:center; flex-wrap:wrap; gap:4px; flex:0 1 auto; }
 #${SHELL_ROOT_ID} .ge-gi-hk-combo { display:inline-flex; align-items:center; gap:4px; }
 #${SHELL_ROOT_ID} .ge-gi-hk-chip { display:inline-flex; align-items:center; justify-content:center;
   padding:2px 7px; border-radius:6px; border:1px solid var(--shell-plaque-line);
@@ -1921,7 +2032,10 @@ const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
   font-weight:600; line-height:1.5; white-space:nowrap; min-width:1.6em; text-align:center; }
 #${SHELL_ROOT_ID} .ge-gi-hk-sep { color:var(--shell-plaque-label); font-size:11px; padding:0 1px; }
 #${SHELL_ROOT_ID} .ge-gi-hk-sep2 { color:var(--shell-plaque-label); font-size:11px; padding:0 4px; }
-#${SHELL_ROOT_ID} .ge-gi-hk-tx { color:rgba(255,255,255,.88); font-size:14px; font-weight:600; text-align:right; flex:1; }
+/* flex:1 1 auto (content-based basis, NOT flex:1's 0 basis) so the label keeps demanding its word
+   width and shrinks in PROPORTION to the chips — both give ground and wrap, instead of the label
+   collapsing to nothing. No min-width:0: the min-content floor stops a word being clipped. */
+#${SHELL_ROOT_ID} .ge-gi-hk-tx { color:rgba(255,255,255,.88); font-size:14px; font-weight:600; text-align:right; flex:1 1 auto; }
 
 /* controls — two blocks (gameplay / menu & info), icon/name/description per control */
 #${SHELL_ROOT_ID} .ge-gi-ctl-block + .ge-gi-ctl-block { margin-top:16px; padding-top:4px; border-top:1px solid var(--shell-plaque-line); }
@@ -1935,7 +2049,7 @@ const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-gi-ctl-ic--bet { flex-direction:column; font-size:18px; gap:0; }
 /* buy bonus draws the real control-bar badge, scaled down & non-interactive */
 #${SHELL_ROOT_ID} .ge-gi-ctl-ic .ge-shell-buybonus { width:46px; height:46px; font-size:8px; border-width:2px; pointer-events:none; }
-#${SHELL_ROOT_ID} .ge-gi-ctl-tx { display:flex; flex-direction:column; gap:2px; }
+#${SHELL_ROOT_ID} .ge-gi-ctl-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
 #${SHELL_ROOT_ID} .ge-gi-ctl-tx b { color:#fff; font-size:15px; font-weight:700; }
 #${SHELL_ROOT_ID} .ge-gi-ctl-tx span { color:rgba(255,255,255,.7); font-size:13px; line-height:1.4; }
 
@@ -2222,6 +2336,14 @@ const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID}.ge-mobile .ge-sheet-grid { grid-template-columns:repeat(var(--cols-m,var(--cols,3)),1fr); }
 /* the bet picker packs 6 chips/row → give its card room (autoplay & co. stay at the 28em default) */
 #${SHELL_ROOT_ID} .ge-sheet[data-ge="bet-modal"] .ge-modal-card { max-width:44em; }
+/* Bet chips carry variable-width currency (a wide currency makes labels grow). Reflow the columns
+   to the widest label (--chip-min, computed in JS) so no chip is ever clipped, and cap the grid
+   height so a long bet ladder scrolls instead of overflowing the card's clipped edge. */
+#${SHELL_ROOT_ID} .ge-sheet[data-ge="bet-modal"] .ge-sheet-grid,
+#${SHELL_ROOT_ID}.ge-mobile .ge-sheet[data-ge="bet-modal"] .ge-sheet-grid {
+  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--chip-min, 6em)), 1fr));
+  max-height:min(50vh, 28em); overflow-y:auto; overflow-x:hidden; }
+#${SHELL_ROOT_ID} .ge-sheet[data-ge="bet-modal"] .ge-chip { min-width:0; }
 #${SHELL_ROOT_ID} .ge-chip { pointer-events:auto; cursor:pointer; border:1px solid var(--shell-plaque-line);
   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; }
@@ -2366,8 +2488,10 @@ function iconBtn(ge, name, onClick, active = false) {
     b.className = `ge-iconbtn${active ? ' ge-active' : ''}`;
     b.dataset.ge = ge;
     b.innerHTML = icon(name);
-    b.addEventListener('click', () => { if (!b.disabled)
-        onClick(); });
+    b.addEventListener('click', () => {
+        if (!b.disabled)
+            onClick();
+    });
     return b;
 }
 function renderBottomBar(host) {
@@ -2383,15 +2507,13 @@ function renderBottomBar(host) {
     // 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';
+    const isFS = state.mode === 'freeSpins' || state.mode === 'bonus';
     // 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);
     // Replay is a read-only historical round — there's no real balance to show, so hide it. Keyed on
     // the sticky `replay` flag (not `mode`) so it stays hidden through a replay's free-spins phase.
-    const balance = state.replay
-        ? null
-        : readout('balance', host.t('Balance'), fmt(state.balance));
+    const balance = state.replay ? null : readout('balance', host.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.
     const feature = state.activeFeature;
@@ -2414,21 +2536,25 @@ function renderBottomBar(host) {
         betDown = iconBtn('bet-down', 'minus', () => host.actions.stepBet(-1));
         betUp = iconBtn('bet-up', 'plus', () => host.actions.stepBet(1));
         betValue.classList.add('ge-betbtn'); // tap the stake → bet picker
-        betValue.addEventListener('click', () => { if (!betLocked(host))
-            host.actions.openBetPicker(); });
+        betValue.addEventListener('click', () => {
+            if (!betLocked(host))
+                host.actions.openBetPicker();
+        });
         spin = spinButton(host);
         auto = config.features.autoplay ? autoButton(host) : null;
-        buy = (config.features.buyBonus !== false || config.onBonusBuy) ? buyBtn(host) : null;
+        buy = config.features.buyBonus !== false || config.onBonusBuy ? buyBtn(host) : null;
     }
     const winEl = state.win > 0 ? readout('win', host.t('Win'), fmtWin(state.win)) : null;
     // FS/replay left blocks: spins counter + accumulated Total Win (shown even at €0).
     // current = number → "current / total"; current = null/undefined → just the (game-driven) total.
     const fs = state.freeSpins;
-    const fsText = fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`;
+    const fsText = state.bonus?.value ?? (fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`);
     // In FS the spins counter takes the SPIN slot as a rectangular hero plaque (same white/black-ring
     // style as the SPIN disc); Total Win stays an inline readout.
-    const fsHero = showFsBlocks ? fsHeroPlaque(host, fsText) : null;
-    const fsTotalWin = showFsBlocks ? readout('fs-totalwin', host.t('Total win'), fmtWin(fs.totalWin)) : null;
+    const fsHero = showFsBlocks ? fsHeroPlaque(host, fsText, state.bonus?.label) : null;
+    const fsTotalWin = showFsBlocks
+        ? readout('fs-totalwin', host.t('Total win'), fmtWin(fs.totalWin))
+        : null;
     // The hero in the centre/spin position: SPIN in base, the FS counter in free spins, nothing else.
     const hero = isBase ? spin : fsHero;
     if (mobile) {
@@ -2471,13 +2597,13 @@ function renderBottomBar(host) {
 }
 /** Free-spins hero plaque — takes the SPIN slot in FS: same white disc/black-ring language as SPIN,
  *  but a rounded RECTANGLE showing the spins counter ("3 / 10"). */
-function fsHeroPlaque(host, text) {
+function fsHeroPlaque(host, text, label) {
     const el = document.createElement('div');
     el.className = 'ge-fs-hero';
     el.dataset.ge = 'fs-counter';
     const lbl = document.createElement('span');
     lbl.className = 'ge-fs-lbl';
-    lbl.textContent = host.t('Free spins');
+    lbl.textContent = host.t(label ?? 'Free spins');
     const num = document.createElement('span');
     num.className = 'ge-fs-num';
     num.textContent = text;
@@ -2497,7 +2623,9 @@ function plaque(cls, children) {
     d.append(...children);
     return d;
 }
-function compact(items) { return items.filter((x) => x !== null); }
+function compact(items) {
+    return items.filter((x) => x !== null);
+}
 function buyBtn(host) {
     const buy = document.createElement('button');
     buy.className = 'ge-shell-buybonus';
@@ -2510,15 +2638,19 @@ function buyBtn(host) {
         buy.innerHTML = `<span>${host.t('DISABLE')}</span>`;
         buy.style.background = accent;
         buy.style.color = contrastText(accent);
-        buy.addEventListener('click', () => { if (!buy.disabled)
-            host.actions.deactivateFeature(); });
+        buy.addEventListener('click', () => {
+            if (!buy.disabled)
+                host.actions.deactivateFeature();
+        });
     }
     else {
         // Ticket icon (no text); keep the label for screen readers.
         buy.setAttribute('aria-label', host.t('BUY BONUS'));
         buy.innerHTML = `<span class="ge-bb-tk">${icon('ticket')}</span>`;
-        buy.addEventListener('click', () => { if (!buy.disabled)
-            host.actions.openBuyBonus(); });
+        buy.addEventListener('click', () => {
+            if (!buy.disabled)
+                host.actions.openBuyBonus();
+        });
     }
     return buy;
 }
@@ -2536,15 +2668,19 @@ function spinButton(host) {
         const rem = state.autoplay.remaining;
         const label = Number.isFinite(rem) ? String(rem) : '∞';
         sp.innerHTML = `<span class="ge-spin-stop">${icon('stop')}</span><span class="ge-spin-count">${label}</span>`;
-        sp.addEventListener('click', () => { if (!sp.disabled)
-            host.actions.stopAutoplay(); });
+        sp.addEventListener('click', () => {
+            if (!sp.disabled)
+                host.actions.stopAutoplay();
+        });
     }
     else {
         sp.innerHTML = icon('spin');
         if (state.busy)
             sp.classList.add('ge-spinning');
-        sp.addEventListener('click', () => { if (!sp.disabled)
-            host.actions.spin(); });
+        sp.addEventListener('click', () => {
+            if (!sp.disabled)
+                host.actions.spin();
+        });
     }
     return sp;
 }
@@ -3472,6 +3608,15 @@ function buildSheet(opts) {
     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));
+    if (opts.autoFit) {
+        // Widest label in ch (tabular digits ≈ 1ch each; symbols/separators are narrower, so this
+        // slightly over-estimates → safe) + chip padding/border. Floored so normal-width currencies
+        // keep the compact ~6-per-row look and only wide currencies drop to fewer columns.
+        const maxLen = opts.choices.reduce((m, c) => Math.max(m, c.label.length), 0);
+        // Floor at 6em ≈ the natural width of a chip in the 6-wide layout (44em card): short labels
+        // clamp here so a normal currency keeps 6 columns; wider labels raise it and drop to fewer.
+        grid.style.setProperty('--chip-min', `max(6em, calc(${maxLen}ch + 1.4em))`);
+    }
     let selected = opts.selected;
     let focusIndex = opts.choices.findIndex((c) => c.id === selected);
     if (focusIndex < 0)
@@ -3543,7 +3688,7 @@ function buildSheet(opts) {
 /** Bet picker — all available bets as chips (6 per row, 3 on mobile), accent Confirm applies it. */
 function openBetModal(host) {
     return buildSheet({
-        ge: 'bet-modal', title: host.t('Bet'), columns: { wide: 6, mobile: 3 }, confirmLabel: host.t('Confirm'),
+        ge: 'bet-modal', title: host.t('Bet'), columns: { wide: 6, mobile: 3 }, autoFit: true, 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(),