@energy8platform/shell 0.4.1 → 0.6.0

package/dist/html.cjs.js

@@ -65,9 +65,19 @@ function createInitialState(config) {
         turbo: 0,
         buyBonusEnabled: true,
         freeSpins: { current: 0, total: 0, totalWin: 0 },
+        bonus: null,
         activeFeature: null,
+        volumes: {
+            master: clampVolume(config.volumes?.master),
+            music: clampVolume(config.volumes?.music),
+            sfx: clampVolume(config.volumes?.sfx),
+        },
     };
 }
+/** Clamp a configured volume to 0..1, defaulting to full (1) when unset/invalid. */
+function clampVolume(v) {
+    return typeof v === 'number' && Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
+}
 /** Step bet up/down within availableBets, clamped at the ends. */
 function stepBet(state, direction) {
     const idx = state.availableBets.indexOf(state.bet);
@@ -1438,7 +1448,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.1';
+const PACKAGE_VERSION = '0.6.0';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -1455,6 +1465,7 @@ function resolveConfig(config) {
         features: config.features,
         theme: config.theme,
         onBonusBuy: config.onBonusBuy,
+        volumes: config.volumes,
         version: config.version ?? '1.0.0',
         isSocial: config.isSocial ?? false,
         replay: config.replay ?? config.mode === 'replay',
@@ -1476,6 +1487,7 @@ class ShellController extends EventEmitter {
     kbd;
     overlay = null;
     soundRefresh = null;
+    volumeRefresh = null;
     prevBalance;
     prevWin;
     destroyed = false;
@@ -1499,9 +1511,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 +1586,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,33 +1619,59 @@ 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)
             return;
         this.overlay = null;
         this.soundRefresh = null;
+        this.volumeRefresh = null;
         this.renderer.closeOverlay();
     }
     // ── sound ──────────────────────────────────────────────────────────────────
@@ -1625,7 +1681,25 @@ class ShellController extends EventEmitter {
         this.soundRefresh?.(on);
         this.renderer.refreshSoundIcon?.(on);
     }
-    setSoundRefresh(fn) { this.soundRefresh = fn; }
+    setSoundRefresh(fn) {
+        this.soundRefresh = fn;
+    }
+    // ── volume ─────────────────────────────────────────────────────────────────
+    getVolume(key) {
+        return this.state.volumes[key];
+    }
+    /** Set a volume slider (0..1). Shared by the slider control (drag) and game code (public API):
+     *  clamps, stores so a reopened Settings overlay reflects it, emits `settingChange`, and
+     *  live-updates the slider if the overlay is currently open. */
+    setVolume(key, value) {
+        const v = Math.max(0, Math.min(1, value));
+        this.state.volumes[key] = v;
+        this.emit('settingChange', { key, value: v });
+        this.volumeRefresh?.(key, v);
+    }
+    setVolumeRefresh(fn) {
+        this.volumeRefresh = fn;
+    }
     // ── features ─────────────────────────────────────────────────────────────────
     activateFeature(bonus) {
         this.state.activeFeature = bonus;
@@ -1646,21 +1720,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();
@@ -2382,8 +2516,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) {
@@ -2399,15 +2535,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;
@@ -2430,21 +2564,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) {
@@ -2487,13 +2625,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;
@@ -2513,7 +2651,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';
@@ -2526,15 +2666,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;
 }
@@ -2552,15 +2696,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;
 }
@@ -2709,7 +2857,10 @@ function openSettingsModal(host) {
         return row;
     })();
     body.appendChild(sound);
-    // Volume sliders — full-width column rows with a live value readout
+    // Volume sliders — full-width column rows with a live value readout. Positions are read from the
+    // shell's stored volumes (not hardcoded to 100%), so reopening the overlay reflects the last set
+    // value, and `host.setVolume()` from game code updates them live via the registered refreshers.
+    const updaters = {};
     const slider = (key, label) => {
         const row = document.createElement('div');
         row.className = 'ge-ov-row ge-col';
@@ -2717,7 +2868,6 @@ function openSettingsModal(host) {
         head.className = 'ge-row-head';
         const val = document.createElement('span');
         val.className = 'ge-val';
-        val.textContent = '100%';
         head.innerHTML = `<span>${label}</span>`;
         head.appendChild(val);
         const input = document.createElement('input');
@@ -2725,19 +2875,23 @@ function openSettingsModal(host) {
         input.min = '0';
         input.max = '1';
         input.step = '0.05';
-        input.value = '1';
         input.className = 'ge-slider';
         input.dataset.ge = `setting-${key}`;
+        const paint = (v) => { input.value = String(v); val.textContent = `${Math.round(v * 100)}%`; };
+        paint(host.getVolume(key));
         input.addEventListener('input', () => {
             val.textContent = `${Math.round(Number(input.value) * 100)}%`;
-            host.emit('settingChange', { key, value: Number(input.value) });
+            host.setVolume(key, Number(input.value));
         });
+        updaters[key] = paint;
         row.append(head, input);
         return row;
     };
     body.appendChild(slider('master', host.t('Master volume')));
     body.appendChild(slider('music', host.t('Music')));
     body.appendChild(slider('sfx', host.t('SFX')));
+    // Live-update sliders when volume changes via host.setVolume (shell clears on close).
+    host.setVolumeRefresh((key, v) => updaters[key]?.(v));
     // Game info — full-width row button that opens its own overlay
     const gameInfo = document.createElement('button');
     gameInfo.className = 'ge-ov-row';