@energy8platform/shell 0.4.0 → 0.4.1

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.4.0";
+    readonly engineVersion = "0.4.1";
     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.4.0";
+declare const PACKAGE_VERSION = "0.4.1";
 
 /** 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

@@ -1437,7 +1437,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.4.1';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -4079,28 +4079,69 @@ function sectionHotkeys(host, title, width) {
     visible.forEach((r, i) => {
         if (i > 0)
             sec.add(hairline$1(host, inner));
-        sec.add(hkRow(host, r));
+        sec.add(hkRow(host, r, inner));
     });
     return sec;
 }
-/** Render a single hotkey row: keycap chip(s) on the left, action name on the right. */
+/** Render a single hotkey row: keycap chip(s) on the left, action name on the right. The row is
+ *  constrained to `inner` (chips left, label right). On narrow widths the chip combos stack onto
+ *  their own lines and the label wraps within the leftover width, so nothing clips past the plaque
+ *  — the Pixi analogue of the HTML `.ge-gi-hk-chips { flex:0 1 auto; flex-wrap }` + label wrap. */
 function hkRow(host, r, inner) {
-    const row = new FlexBox({ direction: 'row', align: 'center', gap: 14, padding: { top: 8, bottom: 8 } });
-    // Build chips container
-    const chipsCol = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    const GAP = 14;
+    const LABEL_MIN = 92; // reserve at least this much for the action label before wrapping the chips
     const chipKeys = buildChipKeys(r);
+    // Lay the chips on one line and measure. If that leaves too little room for the label, stack the
+    // combos (split at the '/') onto their own lines so the chips give up horizontal width.
+    let chips = chipLine(host, chipKeys);
+    let chipsW = chips.measureSize().w;
+    if (chipsW > inner - GAP - LABEL_MIN) {
+        chips = chipCombos(host, chipKeys);
+        chipsW = chips.measureSize().w;
+    }
+    // The label takes the leftover width and WRAPS within it (never clips); right-aligned to sit
+    // against the plaque edge like the DOM `.ge-gi-hk-tx`.
+    const labelW = Math.max(LABEL_MIN, inner - chipsW - GAP);
+    const nameText = makeText(host.t(r.name), { size: 15, weight: '700', color: '#ffffff', wrapWidth: labelW, align: 'right' });
+    const row = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between', gap: GAP, padding: { top: 8, bottom: 8 }, width: inner });
+    row.add(chips);
+    row.add(nameText);
+    return row;
+}
+/** Chips on a single row, with '/' separators between the combos (as flattened by buildChipKeys). */
+function chipLine(host, chipKeys) {
+    const line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    for (const key of chipKeys) {
+        if (key === '/')
+            line.add(makeText('/', { size: 12, weight: '500', color: host.tokens.plaqueLabel }));
+        else
+            line.add(keycap(host, key));
+    }
+    return line;
+}
+/** Chips stacked as combos — split at the '/' separators, one combo per line (drops the inline
+ *  '/', which reads as a line break once the combos are stacked). */
+function chipCombos(host, chipKeys) {
+    const col = new FlexBox({ direction: 'column', align: 'start', gap: 4 });
+    let line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    let filled = false;
+    const flush = () => {
+        if (!filled)
+            return;
+        col.add(line);
+        line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+        filled = false;
+    };
     for (const key of chipKeys) {
         if (key === '/') {
-            chipsCol.add(makeText('/', { size: 12, weight: '500', color: host.tokens.plaqueLabel }));
-        }
-        else {
-            chipsCol.add(keycap(host, key));
+            flush();
+            continue;
         }
+        line.add(keycap(host, key));
+        filled = true;
     }
-    const nameText = makeText(host.t(r.name), { size: 15, weight: '700', color: '#ffffff' });
-    row.add(chipsCol);
-    row.add(nameText);
-    return row;
+    flush();
+    return col;
 }
 /** Flatten a row's chip list into display tokens — for bet rows, produce: Shift ↑ / Shift = style. */
 function buildChipKeys(r) {
@@ -5266,8 +5307,27 @@ class PickerModal extends CardModal {
     }
 }
 /** A centred picker (chips grid + accent Confirm) on the shared card modal. */
+/** A ScrollBox that reports a fixed box to the FlexBox layout — so a capped, scrolling grid slots
+ *  into the card body like any other sized child (measured/positioned by its viewport, not its
+ *  full content bounds). */
+class SizedScrollBox extends ScrollBox {
+    boxW;
+    boxH;
+    constructor(boxW, boxH, canvas) {
+        super(canvas);
+        this.boxW = boxW;
+        this.boxH = boxH;
+        this.setViewport(boxW, boxH);
+    }
+    measureSize() {
+        return { w: this.boxW, h: this.boxH };
+    }
+    setLayoutSize() {
+        /* fixed viewport — ignore layout-imposed sizing */
+    }
+}
 function buildSheet(host, opts) {
-    const columns = typeof opts.columns === 'number'
+    const maxColumns = typeof opts.columns === 'number'
         ? opts.columns
         : host.layout === 'mobile' ? opts.columns.mobile : opts.columns.wide;
     let selected = opts.selected;
@@ -5319,27 +5379,51 @@ function buildSheet(host, opts) {
     const em = modal.emSize;
     const gap = 0.65 * em;
     const innerW = modal.cardWidth - 2.4 * em;
+    // Build the chips first (at natural width) so autoFit can measure the widest label.
+    for (let i = 0; i < opts.choices.length; i++) {
+        const c = opts.choices[i];
+        const chipIndex = i;
+        chips.push(new Chip(host, c.id, c.label, chipIndex === focusIndex, em, (id) => {
+            const idx = opts.choices.findIndex((ch) => ch.id === id);
+            if (idx >= 0)
+                setHighlight(idx);
+        }));
+    }
+    // Column count: with autoFit, drop below the max until the widest label fits. Short labels
+    // (a normal currency) exceed the max and clamp back to it — so the compact 6-wide layout is
+    // preserved and only wide currencies reflow to fewer columns.
+    let columns = maxColumns;
+    if (opts.autoFit) {
+        const widest = chips.reduce((m, ch) => Math.max(m, ch.measureSize().w), 0);
+        const fitCols = Math.floor((innerW + gap) / (widest + gap));
+        columns = Math.max(1, Math.min(maxColumns, fitCols));
+    }
     const colW = (innerW - gap * (columns - 1)) / columns;
     const grid = new FlexBox({ direction: 'column', align: 'start', gap });
-    for (let i = 0; i < opts.choices.length; i += columns) {
-        const rowChoices = opts.choices.slice(i, i + columns);
+    for (let i = 0; i < chips.length; i += columns) {
         const row = new FlexBox({ direction: 'row', align: 'center', gap });
-        for (let j = 0; j < rowChoices.length; j++) {
-            const c = rowChoices[j];
-            const chipIndex = i + j;
-            const chip = new Chip(host, c.id, c.label, chipIndex === focusIndex, em, (id) => {
-                const idx = opts.choices.findIndex((ch) => ch.id === id);
-                if (idx >= 0)
-                    setHighlight(idx);
-            });
+        for (let j = 0; j < columns && i + j < chips.length; j++) {
+            const chip = chips[i + j];
             chip.setLayoutSize(colW, undefined);
-            chips.push(chip);
             row.add(chip);
         }
-        row.layout();
         grid.add(row);
     }
-    modal.body.add(grid);
+    // Cap the grid height and scroll when the ladder overflows — the Pixi analogue of the HTML
+    // shell's `max-height:min(50vh,28em); overflow-y:auto`. (Mask hit-testing clips to the viewport
+    // but still lets clicks through to chips inside it — verified against pixi.js 8.16's
+    // EventBoundary.) When it fits, drop the scroll box entirely so nothing is masked needlessly.
+    const gridH = grid.measureSize().h;
+    const maxGridH = Math.min(host.screenH * 0.5, 28 * em);
+    if (opts.autoFit && gridH > maxGridH) {
+        const scroll = new SizedScrollBox(innerW, maxGridH, host.canvas);
+        scroll.content.addChild(grid);
+        scroll.refresh();
+        modal.body.add(scroll);
+    }
+    else {
+        modal.body.add(grid);
+    }
     modal.setActions([
         {
             label: opts.confirmLabel,
@@ -5356,6 +5440,7 @@ function openBetPicker(host) {
         tag: 'bet-modal',
         title: host.t('Bet'),
         columns: { wide: 6, mobile: 3 },
+        autoFit: true, // reflow columns + scroll when a wide currency makes the labels grow
         maxEm: 44, // wider card to fit 6 chips/row
         confirmLabel: host.t('Confirm'),
         choices: host.state.availableBets.map((b) => ({ id: String(b), label: host.fmt(b) })),