@energy8platform/shell 0.2.0 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energy8platform/shell",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "Energy8 branded game shell — one logic core, pluggable html/pixi renderers behind a stable contract.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/src/core/version.ts

@@ -1,3 +1,3 @@
 // 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. */
-export const PACKAGE_VERSION = '0.2.0';
+export const PACKAGE_VERSION = '0.2.3';

package/src/ui/html/HtmlRenderer.ts

@@ -167,7 +167,7 @@ export class HtmlRenderer implements ShellRenderer {
         return { root };
       }
       case 'modal': {
-        const root = buildModal(req.opts);
+        const root = buildModal(this.host, req.opts);
         return { root, onKey: req.opts.onKey };
       }
     }

package/src/ui/html/components/GameInfo.ts

@@ -18,7 +18,7 @@ export interface GameInfoModal {
 export function openGameInfoModal(host: ShellHost): GameInfoModal {
   const { root, body, scroll } = createOverlay({
     title: host.t('Game info'),
-    onClose: () => root.remove(),
+    onClose: () => host.actions.closeOverlay(),
     onBack: () => { root.remove(); host.actions.openSettings(); },
   });
   root.dataset.ge = 'info-modal';

package/src/ui/html/components/Modal.ts

@@ -1,17 +1,21 @@
 import type { ModalOptions } from '@/core/types';
+import type { ShellHost } from '@/core/renderer';
 import { contrastText } from '@/core/colors';
 import { createCardModal } from '../primitives';
 
 /** Build a generic, externally-triggered modal (title + body text + optional action buttons),
  *  on the shared card-modal chrome. Each action runs its `on` then closes; the ✕ (if
- *  `availableClose`) and the actions are the only ways to dismiss. See GameShell.openModal. */
-export function buildModal(opts: ModalOptions): HTMLElement {
+ *  `availableClose`) and the actions are the only ways to dismiss. See GameShell.openModal.
+ *  Dismissals route through host.actions.closeOverlay() so the controller clears its overlay handle
+ *  (a bare root.remove() leaves the handle stale → keydowns keep routing to a torn-down layer). */
+export function buildModal(host: ShellHost, opts: ModalOptions): HTMLElement {
+  const close = () => host.actions.closeOverlay();
   const ui = createCardModal({
     ge: 'modal',
     title: opts.title,
     closable: opts.availableClose,
     blur: opts.blurLevel,
-    onClose: () => ui.root.remove(),
+    onClose: close,
   });
 
   const text = document.createElement('p');
@@ -27,7 +31,7 @@ export function buildModal(opts: ModalOptions): HTMLElement {
       btn.textContent = a.title;
       if (a.color) { btn.style.background = a.color; btn.style.color = contrastText(a.color); }
       else btn.classList.add('ge-modal-btn--ghost');
-      btn.addEventListener('click', () => { a.on?.(); ui.root.remove(); });
+      btn.addEventListener('click', () => { a.on?.(); close(); });
       actions.appendChild(btn);
     }
     ui.card.appendChild(actions);

package/src/ui/html/components/Settings.ts

@@ -3,7 +3,7 @@ import { createOverlay } from '../primitives';
 import { icon } from '../icons';
 
 export function openSettingsModal(host: ShellHost): HTMLElement {
-  const { root, body } = createOverlay({ title: host.t('Settings'), onClose: () => root.remove() });
+  const { root, body } = createOverlay({ title: host.t('Settings'), onClose: () => host.actions.closeOverlay() });
   root.dataset.ge = 'settings-modal';
 
   // Sound on/off — backed by the shell's shared `soundOn` state so this toggle and the Shift+M

package/src/ui/html/shell.css.ts

@@ -397,6 +397,17 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval { min-width:clamp(50px,14cqh,66px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval b { font-size:clamp(9px,2.5cqh,11px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval span { font-size:clamp(5px,1.25cqh,6px); }
+/* Popout S (very short landscape, e.g. 400×225): the height-fit shrank the cards' descriptions to an
+   unreadable ~4px floor with nothing to scroll. Below a ~340px frame height, drop the shrink-to-fit and
+   switch the (non-mobile) buy-bonus to a READABLE vertical stack that scrolls vertically — like mobile.
+   Query the overlay's ge-bb-frame size container so it tracks the popout frame, not the browser window. */
+@container ge-bb-frame (max-height: 340px) {
+  #${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-scroll { overflow-y:auto; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-body { justify-content:flex-start; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) .ge-bb-grid { flex-direction:column; align-items:center; overflow:visible; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) .ge-bb-grid .ge-bonus-card {
+    flex:0 0 auto; width:18em; font-size:min(12px, calc(84cqw / 18)); }
+}
 
 /* ═══ desktop control bar — one continuous dark panel; white-disc buttons; BUY BONUS outside-left ═══ */
 /* the dark surface fills the row width (BUY BONUS sits outside, to its left) */

package/src/ui/pixi/PixiRenderer.ts

@@ -340,7 +340,10 @@ export class PixiRenderer implements ShellRenderer {
       get screenH() { return self.app.screen.height; },
       render: () => self.renderBar(),
       pushLayer: (node) => self.pushLayer(node),
-      closeLayer: () => self.closeLayer(),
+      // Route component-initiated closes through the controller (not straight to self.closeLayer) so
+      // it clears its OverlayHandle. Otherwise the handle goes stale: hasOpenLayer() stays true and
+      // keydowns keep routing to onKey on a destroyed overlay → write to a torn-down ScrollBox.
+      closeLayer: () => host.actions.closeOverlay(),
       fitModals: () => self.fitModals(),
       fmt: (n) => host.formatCurrency(n),
       fmtWin: (n) => host.formatCurrency(n, true),

package/src/ui/pixi/components/BuyBonus.ts

@@ -10,6 +10,11 @@ import { clamp } from '../primitives/overlay';
 import { attachHover } from '../primitives/widgets';
 import { roundedPath } from '../primitives/flex';
 
+/** 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. */
 export function openBuyBonus(host: PixiComponentContext): ShellLayer | null {
@@ -46,6 +51,8 @@ class BuyBonusOverlay extends Container implements ShellLayer {
   private cardEntries: CardEntry[] = [];
   /** Keyboard focus index into the affordable subset of cardEntries. -1 = none. */
   private focusIndex = -1;
+  /** true when cards are stacked vertically (mobile, or a short landscape popout). */
+  private 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.
@@ -155,7 +162,10 @@ class BuyBonusOverlay extends Container implements ShellLayer {
 
   private buildCards(): void {
     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;
@@ -166,13 +176,13 @@ class BuyBonusOverlay extends Container implements ShellLayer {
     // 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);
 
@@ -193,7 +203,7 @@ class BuyBonusOverlay extends Container implements ShellLayer {
     }
 
     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;
@@ -220,7 +230,7 @@ class BuyBonusOverlay extends Container implements ShellLayer {
   }
 
   // ── one card ──────────────────────────────────────────────────────────────
-  private buildCard(bonus: BonusOption, cardW: number, em: number, mobile: boolean, areaH: number): CardView {
+  private buildCard(bonus: BonusOption, cardW: number, em: number, stack: boolean, areaH: number): CardView {
     const accent = effectiveAccent(bonus);
     const ink = contrastText(accent);
     const price = bonus.priceMultiplier * this.host.state.bet;
@@ -255,7 +265,7 @@ class BuyBonusOverlay extends Container implements ShellLayer {
       ctaLabel: this.host.t(bonus.type === 'feature' ? 'Activate' : 'Buy'),
       onSelect: select,
     });
-    void mobile;
+    void stack;
     void areaH;
     return card;
   }
@@ -435,7 +445,8 @@ class BuyBonusOverlay extends Container implements ShellLayer {
    *  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: KeyboardEvent): boolean {
-    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 ──
@@ -467,8 +478,8 @@ class BuyBonusOverlay extends Container implements ShellLayer {
     if (bet !== null) { this.stepBetBy(bet); 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;

package/src/ui/pixi/primitives/scroll.ts

@@ -82,6 +82,9 @@ export class ScrollBox extends Container {
   }
 
   private setScroll(y: number): void {
+    // Ignore late scrolls after teardown: a queued keydown (or resize) can route here once the modal
+    // has been destroyed, and writing to a torn-down content Container throws (use-after-destroy).
+    if (this.destroyed || !this.content || this.content.destroyed) return;
     this.scrollY = Math.max(0, Math.min(this.maxScroll, y)) || 0; // || 0 converts -0 to 0
     this.content.y = this.scrollY === 0 ? 0 : -this.scrollY;
   }