@energy8platform/shell 0.7.2 → 0.9.0

package/dist/html.d.ts

@@ -160,6 +160,11 @@ interface BonusOption {
     priceMultiplier: number;
     /** Per-option accent override. Falls back to the type default (bonus → purple, feature → gold). */
     accentColor?: string;
+    /** Options sharing a `groupedBy` key occupy ONE card slot and are flipped through with arrows —
+     *  e.g. four same-priced Ante variants that each swap the character, its art and its volatility.
+     *  Pixi shell only; the DOM shell ignores the key and keeps a card per option. Options with a
+     *  `custom` renderer are never grouped. */
+    groupedBy?: string;
     /** Override the card UI. Return the card's inner content; the shell keeps the grid wrapper,
      *  accent vars and live re-pricing, and runs the normal buy flow when you call `ctx.select()`.
      *  Core uses `unknown`; each renderer re-exports a typed alias (ui/html → HTMLElement,
@@ -298,8 +303,13 @@ interface AutoplayConfig {
 }
 interface ShellFeatures {
     turbo: 0 | 1 | 2 | 3;
-    /** Master keyboard-shortcut switch. Defaults to `true`; set `false` to disable ALL hotkeys
-     *  (overrides `spacebar` and any future hotkey). */
+    /** Master keyboard-shortcut switch: `false` disables ALL hotkeys (overrides `spacebar` and any
+     *  future hotkey) AND hides the Hotkeys section of Game Info, including one the game supplied
+     *  itself — a keycap chart for keys that do nothing is worse than no chart.
+     *
+     *  Left unset, the shell measures the client (`core/device.ts`): a touchscreen has no keys to
+     *  press, so it gets neither the shortcuts nor the chart. Set it explicitly when you know better
+     *  than the media query — which is what the host does with the platform's `device` field. */
     hotkeys?: boolean;
     /** Spacebar starts a spin in base mode. Defaults to `true`; set `false` to disable the
      *  keyboard shortcut (e.g. jurisdictions that forbid quick-spin keys). */
@@ -631,7 +641,7 @@ declare class ShellController extends EventEmitter<ShellEvents> implements Shell
     tokens: ShellTokens;
     layout: ShellLayoutMode;
     soundOn: boolean;
-    readonly engineVersion = "0.7.2";
+    readonly engineVersion = "0.9.0";
     readonly actions: ShellActions;
     private renderer;
     private i18n;
@@ -776,7 +786,7 @@ interface I18n {
 declare function createI18n(opts: I18nOptions): I18n;
 
 /** The @energy8platform/shell package version, stamped into the game-info footer. */
-declare const PACKAGE_VERSION = "0.7.2";
+declare const PACKAGE_VERSION = "0.9.0";
 
 /** A shell: the renderer-agnostic controller plus the surface facade (safeArea/barHeight/setVisible)
  *  an embedding host reads. `createShell`, `createGameShell` and `createPixiShell` all return this. */

package/dist/html.esm.js

@@ -1689,9 +1689,41 @@ class KeyboardController {
     }
 }
 
+/**
+ * Can the player in front of this client actually press a key?
+ *
+ * The shell documents its shortcuts in a Hotkeys section and binds Spacebar to spin. On a phone
+ * neither is reachable, and showing a keycap chart to someone holding a touchscreen is a promise
+ * the game can't keep — a certification lab reads it as a feature offered where it doesn't work.
+ *
+ * The question is deliberately NOT "is the layout narrow" (a portrait desktop window still has a
+ * keyboard) and NOT "is there a touchscreen" (a touch laptop has both). It is: what does the
+ * PRIMARY pointer look like, and can it hover? Coarse-and-hoverless is a touchscreen, and a
+ * touchscreen is the one case where the keys genuinely aren't there.
+ *
+ * A tablet with a keyboard case answers "coarse, no hover" too and loses the chart. That is the
+ * right side to be wrong on: the chart is a convenience, and the keys keep working for anyone who
+ * has them — the media query only decides what the shell ADVERTISES (hosts can still say outright,
+ * via `features.hotkeys`, and the platform's own `device` field does exactly that).
+ */
+/** A touchscreen: the primary pointer is a finger, and nothing can hover. */
+const TOUCH_ONLY = '(pointer: coarse) and (hover: none)';
+function keyboardCapable(win = typeof window === 'undefined' ? undefined : window) {
+    // No window (SSR, node tests) or a browser too old for matchMedia: assume a keyboard rather than
+    // silently stripping shortcuts from a desktop we simply failed to measure.
+    if (typeof win?.matchMedia !== 'function')
+        return true;
+    try {
+        return !win.matchMedia(TOUCH_ONLY).matches;
+    }
+    catch {
+        return true;
+    }
+}
+
 // 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.7.2';
+const PACKAGE_VERSION = '0.9.0';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -1705,7 +1737,10 @@ function resolveConfig(config) {
         win: config.win,
         mode: config.mode,
         gameInfo: config.gameInfo,
-        features: config.features,
+        // `hotkeys` unset means "decide for me": a touchscreen has no keys to press, so the shell
+        // neither binds them nor advertises them there. A host that knows better — the platform's own
+        // `device` field, a jurisdiction rule — says so outright and that wins. See core/device.ts.
+        features: { ...config.features, hotkeys: config.features.hotkeys ?? keyboardCapable() },
         theme: config.theme,
         onBonusBuy: config.onBonusBuy,
         volumes: config.volumes,
@@ -1799,7 +1834,11 @@ class ShellController extends EventEmitter {
                 this.renderer.renderBar();
             },
             toggleAutoplay: () => {
-                if (this.state.autoplay.active)
+                // A halted run (stopped, but with spins still owed after a lost connection) counts as
+                // "autoplay is on screen": the toggle retires its leftover count, exactly as it stops a
+                // running one. Resuming those spins is the disc's job, not this one's.
+                const { active, remaining } = this.state.autoplay;
+                if (active || remaining > 0)
                     a.stopAutoplay();
                 else
                     this.openAutoplayPicker();
@@ -2262,6 +2301,11 @@ const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 /* the STOP glyph is a solid dark square, so the autoplay count is always pure white to read on it. */
 #${SHELL_ROOT_ID} .ge-spin-count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
   font-size:22px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:#fff; }
+/* autoplay halted with spins still owed (a lost connection): the run is stopped, so no STOP square —
+   the auto glyph sits above the leftover count, both in the disc's own ink, and a tap resumes. */
+#${SHELL_ROOT_ID} .ge-shell-spin.ge-auto-paused { flex-direction:column; gap:1px; position:relative; }
+#${SHELL_ROOT_ID} .ge-auto-paused .ge-spin-auto { display:flex; font-size:.46em; line-height:0; }
+#${SHELL_ROOT_ID} .ge-auto-paused .ge-spin-count { position:static; inset:auto; color:inherit; font-size:20px; }
 
 /* BUY BONUS — round accent badge, 2-line label, text pulses + accent glow on hover */
 #${SHELL_ROOT_ID} .ge-shell-buybonus { pointer-events:auto; cursor:pointer; box-sizing:border-box;
@@ -3083,22 +3127,36 @@ function buyBtn(host) {
 function betLocked(host) {
     return host.state.busy || host.state.autoplay.active;
 }
-/** SPIN disc — rotates while busy; becomes a STOP + countdown while autoplay runs. */
+/**
+ * SPIN disc — rotates while busy; becomes a STOP + countdown while autoplay runs; becomes an
+ * autoplay glyph + the SAME countdown when a run was halted with spins still owed (a lost
+ * connection), where a tap resumes it. That third state is what a certification lab means by "after
+ * reconnection the counter is displayed correctly": the run stopped, but the spins the player asked
+ * for are still on screen and one tap away, instead of silently reset to zero.
+ */
 function spinButton(host) {
     const { state } = host;
     const sp = document.createElement('button');
     sp.className = 'ge-shell-spin';
     sp.dataset.ge = 'spin';
+    const rem = state.autoplay.remaining;
+    const count = Number.isFinite(rem) ? String(rem) : '∞';
     if (state.autoplay.active) {
         sp.classList.add('ge-stop');
-        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.innerHTML = `<span class="ge-spin-stop">${icon('stop')}</span><span class="ge-spin-count">${count}</span>`;
         sp.addEventListener('click', () => {
             if (!sp.disabled)
                 host.actions.stopAutoplay();
         });
     }
+    else if (rem > 0) {
+        sp.classList.add('ge-auto-paused');
+        sp.innerHTML = `<span class="ge-spin-auto">${icon('autoplay')}</span><span class="ge-spin-count">${count}</span>`;
+        sp.addEventListener('click', () => {
+            if (!sp.disabled)
+                host.actions.startAutoplay(rem);
+        });
+    }
     else {
         sp.innerHTML = icon('spin');
         if (state.busy)
@@ -3118,8 +3176,11 @@ function autoButton(host) {
         b.classList.add('ge-glow');
     return b;
 }
+/** Same button, three jobs: stop a running run, retire a halted run's leftover count (which frees
+ *  the disc for a manual spin again), or open the picker. */
 function onAutoplay(host) {
-    if (host.state.autoplay.active)
+    const { active, remaining } = host.state.autoplay;
+    if (active || remaining > 0)
         host.actions.stopAutoplay();
     else
         host.actions.openAutoplayPicker();
@@ -3475,10 +3536,15 @@ function openGameInfoModal(host) {
         onBack: () => { root.remove(); host.actions.openMenu(); },
     });
     root.dataset.ge = 'info-modal';
-    const rawSections = host.config.gameInfo.sections ?? [];
-    // Auto-inject a hotkeys section unless the game already provides one or features.hotkeys === false.
+    const allSections = host.config.gameInfo.sections ?? [];
+    // Auto-inject a hotkeys section unless the game already provides one. With hotkeys off — a
+    // jurisdiction that forbids them, or a touchscreen that has no keys at all (see core/device.ts) —
+    // there is no keyboard surface to document, and a game-supplied section is dropped along with the
+    // auto-injected one: a keycap chart for keys the player cannot press is a promise the game breaks.
+    const keys = host.config.features.hotkeys !== false;
+    const rawSections = keys ? allSections : allSections.filter((s) => s.type !== 'hotkeys');
     const sectionsWithHotkeys = [...rawSections];
-    if (host.config.features.hotkeys !== false && !rawSections.some((s) => s.type === 'hotkeys')) {
+    if (keys && !rawSections.some((s) => s.type === 'hotkeys')) {
         sectionsWithHotkeys.push({ type: 'hotkeys', order: HOTKEYS_DEFAULT_ORDER });
     }
     const sections = sectionsWithHotkeys;