@energy8platform/shell 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energy8platform/shell",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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.4.0';
+export const PACKAGE_VERSION = '0.4.1';

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

@@ -12,6 +12,9 @@ interface SheetOpts {
    *  with the shell's mobile breakpoint (driven by CSS custom props, so an open modal
    *  re-columns live on resize/rotate without being rebuilt). */
   columns: number | { wide: number; mobile: number };
+  /** Size the columns to the widest chip label (via `--chip-min`) instead of a fixed count, so
+   *  variable-width labels (e.g. a wide currency's bet values) reflow rather than clip. */
+  autoFit?: boolean;
   confirmLabel: string;
   onConfirm: (id: string) => void;
   /** Called to dismiss the picker (should invoke host.actions.closeOverlay()). */
@@ -33,6 +36,15 @@ function buildSheet(opts: SheetOpts): Sheet {
   const cols = typeof opts.columns === 'number' ? { wide: opts.columns, mobile: opts.columns } : opts.columns;
   grid.style.setProperty('--cols', String(cols.wide));
   grid.style.setProperty('--cols-m', String(cols.mobile));
+  if (opts.autoFit) {
+    // Widest label in ch (tabular digits ≈ 1ch each; symbols/separators are narrower, so this
+    // slightly over-estimates → safe) + chip padding/border. Floored so normal-width currencies
+    // keep the compact ~6-per-row look and only wide currencies drop to fewer columns.
+    const maxLen = opts.choices.reduce((m, c) => Math.max(m, c.label.length), 0);
+    // Floor at 6em ≈ the natural width of a chip in the 6-wide layout (44em card): short labels
+    // clamp here so a normal currency keeps 6 columns; wider labels raise it and drop to fewer.
+    grid.style.setProperty('--chip-min', `max(6em, calc(${maxLen}ch + 1.4em))`);
+  }
   let selected = opts.selected;
   let focusIndex = opts.choices.findIndex((c) => c.id === selected);
   if (focusIndex < 0) focusIndex = 0;
@@ -105,7 +117,7 @@ function buildSheet(opts: SheetOpts): Sheet {
 /** Bet picker — all available bets as chips (6 per row, 3 on mobile), accent Confirm applies it. */
 export function openBetModal(host: ShellHost): { root: HTMLElement; onKey: (e: KeyboardEvent) => boolean } {
   return buildSheet({
-    ge: 'bet-modal', title: host.t('Bet'), columns: { wide: 6, mobile: 3 }, confirmLabel: host.t('Confirm'),
+    ge: 'bet-modal', title: host.t('Bet'), columns: { wide: 6, mobile: 3 }, autoFit: true, confirmLabel: host.t('Confirm'),
     choices: host.state.availableBets.map((b) => ({ id: String(b), label: host.formatCurrency(b) })),
     selected: String(host.state.bet),
     onClose: () => host.actions.closeOverlay(),

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

@@ -203,7 +203,12 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-gi-hk-block { display:flex; flex-direction:column; }
 #${SHELL_ROOT_ID} .ge-gi-hk { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; }
 #${SHELL_ROOT_ID} .ge-gi-hk + .ge-gi-hk { border-top:1px solid var(--shell-plaque-line); }
-#${SHELL_ROOT_ID} .ge-gi-hk-chips { display:flex; align-items:center; flex-wrap:wrap; gap:4px; flex:0 0 auto; }
+/* Let the keycaps SHRINK instead of hogging the row: flex:0 1 auto lets the chips block give up
+   width down to its widest single combo, and flex-wrap reflows the extra combos onto another line.
+   On narrow/mobile widths the many-chip rows (Raise/Lower bet) otherwise squeeze the label off the
+   right edge and clip it. (No min-width:0 here — the min-content floor is what keeps a combo intact
+   and wrapping rather than overflowing.) */
+#${SHELL_ROOT_ID} .ge-gi-hk-chips { display:flex; align-items:center; flex-wrap:wrap; gap:4px; flex:0 1 auto; }
 #${SHELL_ROOT_ID} .ge-gi-hk-combo { display:inline-flex; align-items:center; gap:4px; }
 #${SHELL_ROOT_ID} .ge-gi-hk-chip { display:inline-flex; align-items:center; justify-content:center;
   padding:2px 7px; border-radius:6px; border:1px solid var(--shell-plaque-line);
@@ -212,7 +217,10 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
   font-weight:600; line-height:1.5; white-space:nowrap; min-width:1.6em; text-align:center; }
 #${SHELL_ROOT_ID} .ge-gi-hk-sep { color:var(--shell-plaque-label); font-size:11px; padding:0 1px; }
 #${SHELL_ROOT_ID} .ge-gi-hk-sep2 { color:var(--shell-plaque-label); font-size:11px; padding:0 4px; }
-#${SHELL_ROOT_ID} .ge-gi-hk-tx { color:rgba(255,255,255,.88); font-size:14px; font-weight:600; text-align:right; flex:1; }
+/* flex:1 1 auto (content-based basis, NOT flex:1's 0 basis) so the label keeps demanding its word
+   width and shrinks in PROPORTION to the chips — both give ground and wrap, instead of the label
+   collapsing to nothing. No min-width:0: the min-content floor stops a word being clipped. */
+#${SHELL_ROOT_ID} .ge-gi-hk-tx { color:rgba(255,255,255,.88); font-size:14px; font-weight:600; text-align:right; flex:1 1 auto; }
 
 /* controls — two blocks (gameplay / menu & info), icon/name/description per control */
 #${SHELL_ROOT_ID} .ge-gi-ctl-block + .ge-gi-ctl-block { margin-top:16px; padding-top:4px; border-top:1px solid var(--shell-plaque-line); }
@@ -226,7 +234,7 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-gi-ctl-ic--bet { flex-direction:column; font-size:18px; gap:0; }
 /* buy bonus draws the real control-bar badge, scaled down & non-interactive */
 #${SHELL_ROOT_ID} .ge-gi-ctl-ic .ge-shell-buybonus { width:46px; height:46px; font-size:8px; border-width:2px; pointer-events:none; }
-#${SHELL_ROOT_ID} .ge-gi-ctl-tx { display:flex; flex-direction:column; gap:2px; }
+#${SHELL_ROOT_ID} .ge-gi-ctl-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
 #${SHELL_ROOT_ID} .ge-gi-ctl-tx b { color:#fff; font-size:15px; font-weight:700; }
 #${SHELL_ROOT_ID} .ge-gi-ctl-tx span { color:rgba(255,255,255,.7); font-size:13px; line-height:1.4; }
 
@@ -513,6 +521,14 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID}.ge-mobile .ge-sheet-grid { grid-template-columns:repeat(var(--cols-m,var(--cols,3)),1fr); }
 /* the bet picker packs 6 chips/row → give its card room (autoplay & co. stay at the 28em default) */
 #${SHELL_ROOT_ID} .ge-sheet[data-ge="bet-modal"] .ge-modal-card { max-width:44em; }
+/* Bet chips carry variable-width currency (a wide currency makes labels grow). Reflow the columns
+   to the widest label (--chip-min, computed in JS) so no chip is ever clipped, and cap the grid
+   height so a long bet ladder scrolls instead of overflowing the card's clipped edge. */
+#${SHELL_ROOT_ID} .ge-sheet[data-ge="bet-modal"] .ge-sheet-grid,
+#${SHELL_ROOT_ID}.ge-mobile .ge-sheet[data-ge="bet-modal"] .ge-sheet-grid {
+  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--chip-min, 6em)), 1fr));
+  max-height:min(50vh, 28em); overflow-y:auto; overflow-x:hidden; }
+#${SHELL_ROOT_ID} .ge-sheet[data-ge="bet-modal"] .ge-chip { min-width:0; }
 #${SHELL_ROOT_ID} .ge-chip { pointer-events:auto; cursor:pointer; border:1px solid var(--shell-plaque-line);
   border-radius:.8em; background:rgba(255,255,255,.04); color:#fff; font-size:1em; font-weight:700;
   font-variant-numeric:tabular-nums; padding:.8em .55em; transition:background .12s ease, border-color .12s ease; }

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

@@ -282,27 +282,66 @@ function sectionHotkeys(host: PixiComponentContext, title: string, width: number
   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: PixiComponentContext, r: HkRow, inner: number): FlexBox {
-  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);
-  for (const key of chipKeys) {
-    if (key === '/') {
-      chipsCol.add(makeText('/', { size: 12, weight: '500', color: host.tokens.plaqueLabel }));
-    } else {
-      chipsCol.add(keycap(host, key));
-    }
+
+  // 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: FlexBox = chipLine(host, chipKeys);
+  let chipsW = chips.measureSize().w;
+  if (chipsW > inner - GAP - LABEL_MIN) {
+    chips = chipCombos(host, chipKeys);
+    chipsW = chips.measureSize().w;
   }
 
-  const nameText = makeText(host.t(r.name), { size: 15, weight: '700', color: '#ffffff' });
-  row.add(chipsCol);
+  // 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: PixiComponentContext, chipKeys: string[]): FlexBox {
+  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: PixiComponentContext, chipKeys: string[]): FlexBox {
+  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 = (): void => {
+    if (!filled) return;
+    col.add(line);
+    line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    filled = false;
+  };
+  for (const key of chipKeys) {
+    if (key === '/') { flush(); continue; }
+    line.add(keycap(host, key));
+    filled = true;
+  }
+  flush();
+  return col;
+}
+
 /** Flatten a row's chip list into display tokens — for bet rows, produce: Shift ↑ / Shift = style. */
 function buildChipKeys(r: HkRow): string[] {
   if ((r.name === 'Raise bet' || r.name === 'Lower bet') && r.chips.length === 4) {

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

@@ -1,7 +1,8 @@
 import type { PixiComponentContext, ShellLayer } from '../context';
 import { CardModal } from '../primitives/card';
 import { Chip } from '../primitives/controls';
-import { FlexBox } from '../primitives/flex';
+import { FlexBox, type Sizable } from '../primitives/flex';
+import { ScrollBox } from '../primitives/scroll';
 
 interface Choice {
   id: string;
@@ -13,8 +14,15 @@ interface SheetOpts {
   title: string;
   choices: Choice[];
   selected: string;
-  /** Chips per row — a fixed number, or `{ wide, mobile }` that reflows with the layout. */
+  /** Chips per row — a fixed number, or `{ wide, mobile }` that reflows with the layout.
+   *  With `autoFit`, this is the *maximum* column count; the grid drops to fewer when the labels
+   *  are too wide to fit that many. */
   columns: number | { wide: number; mobile: number };
+  /** Size the columns to the widest chip label (instead of always packing `columns`), and cap the
+   *  grid height with a scroll region. For variable-width labels (a wide currency's bet values)
+   *  this reflows + scrolls rather than clipping — the Pixi analogue of the HTML shell's
+   *  `auto-fill minmax` + `overflow-y:auto`. */
+  autoFit?: boolean;
   /** Max card width in em (the 6-wide bet picker needs 44em vs the 28em default). */
   maxEm?: number;
   confirmLabel: string;
@@ -36,8 +44,24 @@ 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 implements Sizable {
+  constructor(private readonly boxW: number, private readonly boxH: number, canvas?: HTMLCanvasElement) {
+    super(canvas);
+    this.setViewport(boxW, boxH);
+  }
+  measureSize(): { w: number; h: number } {
+    return { w: this.boxW, h: this.boxH };
+  }
+  setLayoutSize(): void {
+    /* fixed viewport — ignore layout-imposed sizing */
+  }
+}
+
 function buildSheet(host: PixiComponentContext, opts: SheetOpts): ShellLayer {
-  const columns = typeof opts.columns === 'number'
+  const maxColumns = typeof opts.columns === 'number'
     ? opts.columns
     : host.layout === 'mobile' ? opts.columns.mobile : opts.columns.wide;
 
@@ -91,27 +115,53 @@ function buildSheet(host: PixiComponentContext, opts: SheetOpts): ShellLayer {
   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([
     {
@@ -130,6 +180,7 @@ export function openBetPicker(host: PixiComponentContext): ShellLayer {
     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) })),