@energy8platform/shell 0.2.1 → 0.2.3

package/dist/pixi.d.ts

@@ -473,7 +473,7 @@ declare class ShellController extends EventEmitter<ShellEvents> implements Shell
     tokens: ShellTokens;
     layout: ShellLayoutMode;
     soundOn: boolean;
-    readonly engineVersion = "0.2.1";
+    readonly engineVersion = "0.2.3";
     readonly actions: ShellActions;
     private renderer;
     private i18n;
@@ -539,7 +539,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.2.1";
+declare const PACKAGE_VERSION = "0.2.3";
 
 /** 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/pixi.esm.js

@@ -1352,7 +1352,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.2.1';
+const PACKAGE_VERSION = '0.2.3';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -4273,6 +4273,10 @@ function imageBox(url, w, h) {
     return c;
 }
 
+/** Below this frame height (px), a wide/landscape popout (e.g. Popout S 400×225) stacks its cards
+ *  vertically and scrolls — like mobile — so descriptions stay readable instead of shrinking to a
+ *  ~4px floor. Wide + taller frames (Popout L and up) keep the centred horizontal row. */
+const SHORT_STACK_H = 340;
 /** Buy-bonus overlay — art-forward cards (one per option), a live bet footer, and a confirm modal.
  *  Returns null when there are no bonus options. */
 function openBuyBonus(host) {
@@ -4302,6 +4306,8 @@ class BuyBonusOverlay extends Container {
     cardEntries = [];
     /** Keyboard focus index into the affordable subset of cardEntries. -1 = none. */
     focusIndex = -1;
+    /** true when cards are stacked vertically (mobile, or a short landscape popout). */
+    stack = false;
     // Drag-scroll state. The drag is handled on the (unmasked) overlay, not the masked strip — a mask
     // prunes pointer events outside its band, stalling globalpointermove mid-drag so later cards never
     // scroll into reach. The overlay sees the whole screen, so the scroll runs the full range.
@@ -4411,7 +4417,10 @@ class BuyBonusOverlay extends Container {
     }
     buildCards() {
         this.strip.removeChildren().forEach((c) => c.destroy({ children: true }));
-        const mobile = this.host.layout === 'mobile';
+        // Stack (readable vertical list + scroll) on mobile OR on a short landscape popout; a shrink-to-fit
+        // horizontal row on wide + tall frames. See SHORT_STACK_H.
+        const stack = this.host.layout === 'mobile' || this.h <= SHORT_STACK_H;
+        this.stack = stack;
         const top = this.headerH + 6;
         const areaH = this.h - top - this.footerH - 6;
         const gap = 14;
@@ -4422,12 +4431,12 @@ class BuyBonusOverlay extends Container {
         // N cards (+ gaps + 24px side margins) fit the frame width. min() of the two = the binding fit.
         // Floor 4 is a last-resort so a 400×225 popout still shows the CTA (then X-drag scrolls the slack).
         const emH = 3.4 * (areaH / 100);
-        const emW = mobile
+        const emW = stack
             ? (this.w - 48) / 18 // vertical stack: a single card spans the width
             : (this.w - 48 - (n - 1) * gap) / (18 * n); // row: N cards + gaps fit the frame width
-        const em = mobile ? Math.min(12, emW) : clamp(4, Math.min(emH, emW), 12);
+        const em = stack ? Math.min(12, emW) : clamp(4, Math.min(emH, emW), 12);
         const cardW = Math.min(18 * em, this.w - 48);
-        const cards = this.bonuses.map((b) => this.buildCard(b, cardW, em, mobile, areaH));
+        const cards = this.bonuses.map((b) => this.buildCard(b, cardW, em, stack, areaH));
         const cardH = Math.max(...cards.map((c) => c.height));
         for (const c of cards)
             c.setHeight(cardH);
@@ -4450,7 +4459,7 @@ class BuyBonusOverlay extends Container {
             this.focusIndex = -1;
         }
         this.stripMask.clear();
-        if (mobile) {
+        if (stack) {
             // vertical stack — scroll vertically if it overflows (simple drag)
             let y = 0;
             const colX = (this.w - cardW) / 2;
@@ -4477,7 +4486,7 @@ class BuyBonusOverlay extends Container {
         }
     }
     // ── one card ──────────────────────────────────────────────────────────────
-    buildCard(bonus, cardW, em, mobile, areaH) {
+    buildCard(bonus, cardW, em, stack, areaH) {
         const accent = effectiveAccent(bonus);
         const ink = contrastText(accent);
         const price = bonus.priceMultiplier * this.host.state.bet;
@@ -4679,7 +4688,8 @@ class BuyBonusOverlay extends Container {
      *  Browse phase: arrows move focus; +/- step bet; Enter/Space opens confirm; Escape closes.
      *  Confirm phase: Enter/Space buys/activates; Escape returns to browse. */
     onKey(e) {
-        const mobile = this.host.layout === 'mobile';
+        // Vertical stack (mobile / short popout) → Up/Down navigate; horizontal row → Left/Right.
+        const stack = this.stack;
         if (this.confirm && this.confirmBonus) {
             // ── Confirm phase ──
             switch (e.code) {
@@ -4713,8 +4723,8 @@ class BuyBonusOverlay extends Container {
             return true;
         }
         // Determine navigation direction from key code + layout
-        const fwdKey = e.code === 'ArrowRight' || (mobile && e.code === 'ArrowDown');
-        const bwdKey = e.code === 'ArrowLeft' || (mobile && e.code === 'ArrowUp');
+        const fwdKey = e.code === 'ArrowRight' || (stack && e.code === 'ArrowDown');
+        const bwdKey = e.code === 'ArrowLeft' || (stack && e.code === 'ArrowUp');
         if (fwdKey) {
             if (last < 0)
                 return true;