@energy8platform/shell 0.3.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.3.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.3.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

@@ -1166,8 +1166,31 @@ const DISCLAIMER_LOCALES = {
         [D.L5]: '奖金根据从 Remote Game Server 收到的金额结算，而非依据网页浏览器内的事件。',
     },
 };
-/** Merge the base UI catalog with the separately-authored disclaimer lines, per language. */
-const LOCALES = Object.fromEntries(Object.keys(BASE_LOCALES).map((l) => [l, { ...BASE_LOCALES[l], ...DISCLAIMER_LOCALES[l] }]));
+// ── Replay summary labels ──────────────────────────────────────────────────────────────────────
+// The replay modal (html + pixi) renders these row labels via host.t(); grouped here (merged into
+// LOCALES below) so the whole replay screen localizes. Terminology matches the base Bet/Win keys.
+const REPLAY_LOCALES = {
+    da: { Mode: 'Tilstand', 'Base bet': 'Grundindsats', 'Cost multiplier': 'Omkostningsmultiplikator', 'Total cost': 'Samlede omkostninger', 'Win multiplier': 'Gevinstmultiplikator' },
+    de: { Mode: 'Modus', 'Base bet': 'Grundeinsatz', 'Cost multiplier': 'Kostenmultiplikator', 'Total cost': 'Gesamtkosten', 'Win multiplier': 'Gewinnmultiplikator' },
+    es: { Mode: 'Modo', 'Base bet': 'Apuesta base', 'Cost multiplier': 'Multiplicador de coste', 'Total cost': 'Coste total', 'Win multiplier': 'Multiplicador de premio' },
+    fi: { Mode: 'Tila', 'Base bet': 'Peruspanos', 'Cost multiplier': 'Kustannuskerroin', 'Total cost': 'Kokonaiskustannus', 'Win multiplier': 'Voittokerroin' },
+    fr: { Mode: 'Mode', 'Base bet': 'Mise de base', 'Cost multiplier': 'Multiplicateur de coût', 'Total cost': 'Coût total', 'Win multiplier': 'Multiplicateur de gain' },
+    hi: { Mode: 'मोड', 'Base bet': 'आधार दांव', 'Cost multiplier': 'लागत गुणक', 'Total cost': 'कुल लागत', 'Win multiplier': 'जीत गुणक' },
+    id: { Mode: 'Mode', 'Base bet': 'Taruhan dasar', 'Cost multiplier': 'Pengganda biaya', 'Total cost': 'Total biaya', 'Win multiplier': 'Pengganda kemenangan' },
+    ja: { Mode: 'モード', 'Base bet': '基本ベット', 'Cost multiplier': 'コスト倍率', 'Total cost': '合計コスト', 'Win multiplier': '当選倍率' },
+    ko: { Mode: '모드', 'Base bet': '기본 베팅', 'Cost multiplier': '비용 배수', 'Total cost': '총 비용', 'Win multiplier': '당첨 배수' },
+    pl: { Mode: 'Tryb', 'Base bet': 'Zakład podstawowy', 'Cost multiplier': 'Mnożnik kosztu', 'Total cost': 'Całkowity koszt', 'Win multiplier': 'Mnożnik wygranej' },
+    pt: { Mode: 'Modo', 'Base bet': 'Aposta base', 'Cost multiplier': 'Multiplicador de custo', 'Total cost': 'Custo total', 'Win multiplier': 'Multiplicador de ganho' },
+    ru: { Mode: 'Режим', 'Base bet': 'Базовая ставка', 'Cost multiplier': 'Множитель стоимости', 'Total cost': 'Общая стоимость', 'Win multiplier': 'Множитель выигрыша' },
+    tr: { Mode: 'Mod', 'Base bet': 'Temel bahis', 'Cost multiplier': 'Maliyet çarpanı', 'Total cost': 'Toplam maliyet', 'Win multiplier': 'Kazanç çarpanı' },
+    vi: { Mode: 'Chế độ', 'Base bet': 'Cược cơ bản', 'Cost multiplier': 'Hệ số chi phí', 'Total cost': 'Tổng chi phí', 'Win multiplier': 'Hệ số thắng' },
+    zh: { Mode: '模式', 'Base bet': '基础投注', 'Cost multiplier': '成本倍数', 'Total cost': '总成本', 'Win multiplier': '奖金倍数' },
+};
+/** Merge the base UI catalog with the separately-authored disclaimer + replay lines, per language. */
+const LOCALES = Object.fromEntries(Object.keys(BASE_LOCALES).map((l) => [
+    l,
+    { ...BASE_LOCALES[l], ...DISCLAIMER_LOCALES[l], ...REPLAY_LOCALES[l] },
+]));
 
 // Social-casino language. English is the source (and, for now, the only) language; `socialize`
 // rewrites the restricted gambling vocabulary into social-safe phrasing while preserving case.
@@ -1414,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.3.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) {
@@ -4056,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) {
@@ -5243,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;
@@ -5296,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,
@@ -5333,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) })),