@open-slot-ui/pixi 0.11.1 → 0.12.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { ControlView, ButtonView, SliderView, buildBlockColumn, OpenUIPixi } from './chunk-Z7X5JH7H.js';
-export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin } from './chunk-Z7X5JH7H.js';
-import { Text, Graphics, Container, Rectangle } from 'pixi.js';
-import { INFO_MENU_VARS, escapeHtml, LOCALE_LABELS, renderBlocksHtml, INFO_MENU_CSS, createUI, composeMenu, buildPanel, formatAmountPrecise, factsVars, renderRulesAuditHtml, auditRules } from '@open-slot-ui/core';
+import { ControlView, ButtonView, SliderView, buildBlockColumn, OpenUIPixi } from './chunk-FN6UJ3WO.js';
+export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin } from './chunk-FN6UJ3WO.js';
+import { Text, Graphics, Container, Rectangle, Texture, Sprite, Assets } from 'pixi.js';
+import { INFO_MENU_VARS, escapeHtml, LOCALE_LABELS, renderBlocksHtml, INFO_MENU_CSS, createUI, composeMenu, buildPanel, factsVars, renderRulesAuditHtml, auditRules, formatAmountPrecise } from '@open-slot-ui/core';
 
 var RISE = 26;
 var STAGGER = 38;
@@ -435,67 +435,10 @@ function mountInfoMenu(app, ui) {
   };
 }
 
-// src/confirmModal.ts
-var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function showConfirm(ui, opts) {
-  return new Promise((resolve) => {
-    const host2 = document.createElement("div");
-    host2.className = "osc-confirm";
-    host2.style.setProperty("--font", ui.theme.type.family);
-    const title = ui.t(opts.title ?? "Buy Feature");
-    const yes = ui.t(opts.confirmLabel ?? "openui.confirm");
-    const no = ui.t(opts.cancelLabel ?? "openui.cancel");
-    host2.innerHTML = `
-      <div class="osc-confirm-backdrop" data-no></div>
-      <div class="osc-confirm-card" role="dialog" aria-modal="true">
-        ${title ? `<h3 class="osc-confirm-title">${esc2(title)}</h3>` : ""}
-        <p class="osc-confirm-msg">${esc2(opts.message)}</p>
-        <div class="osc-confirm-row">
-          <button class="osc-confirm-btn osc-confirm-no" data-no>${esc2(no)}</button>
-          <button class="osc-confirm-btn osc-confirm-yes" data-yes>${esc2(yes)}</button>
-        </div>
-      </div>`;
-    const style = document.createElement("style");
-    style.textContent = CONFIRM_CSS;
-    host2.appendChild(style);
-    document.body.appendChild(host2);
-    let settled = false;
-    const close = (val) => {
-      if (settled) return;
-      settled = true;
-      window.removeEventListener("keydown", onKey);
-      host2.remove();
-      resolve(val);
-    };
-    const onKey = (e) => {
-      if (e.key === "Escape") close(false);
-      else if (e.key === "Enter") close(true);
-    };
-    host2.querySelectorAll("[data-no]").forEach((b) => b.addEventListener("click", () => close(false)));
-    host2.querySelector("[data-yes]")?.addEventListener("click", () => close(true));
-    window.addEventListener("keydown", onKey);
-  });
-}
-var CONFIRM_CSS = `
-.osc-confirm { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; font-family: var(--font); }
-.osc-confirm *, .osc-confirm *::before, .osc-confirm *::after { box-sizing: border-box; }
-.osc-confirm-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
-.osc-confirm-card { position: relative; width: min(90vw, 420px); background: #ffffff; color: #181b20; border: 3px solid #000; border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; }
-.osc-confirm-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: .3px; }
-.osc-confirm-msg { margin: 0 0 22px; font-size: 19px; font-weight: 700; line-height: 1.4; }
-.osc-confirm-row { display: flex; gap: 14px; }
-.osc-confirm-btn { flex: 1; padding: 14px 10px; border-radius: 12px; border: 3px solid #000; font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .12s; }
-.osc-confirm-btn:active { transform: scale(.96); }
-.osc-confirm-no { background: #ffffff; color: #181b20; }
-.osc-confirm-no:hover { background: #eef1f6; }
-.osc-confirm-yes { background: #d99000; color: #1a1200; }
-.osc-confirm-yes:hover { filter: brightness(1.05); }
-`;
-
 // src/mountHud.ts
 function showReplayModal(ui, info, buttonKey, onSelect) {
   const cur = info.currency ?? ui.balance.currency.get();
-  const money2 = (n) => formatAmountPrecise(n, cur);
+  const money = (n) => formatAmountPrecise(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -503,10 +446,10 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
         kind: "stat-grid",
         id: "openui-replay-g",
         items: [
-          { label: "openui.replay.baseBet", value: money2(info.baseBet) },
+          { label: "openui.replay.baseBet", value: money(info.baseBet) },
           { label: "openui.replay.costMultiplier", value: `${info.costMultiplier}\xD7` },
           { label: "openui.replay.payoutMultiplier", value: `${info.payoutMultiplier}\xD7` },
-          { label: "openui.replay.amount", value: money2(info.amount) }
+          { label: "openui.replay.amount", value: money(info.amount) }
         ]
       }
     ],
@@ -520,7 +463,7 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
 function mountHud(app, spec = {}, opts = {}) {
   const { hooks, infoMenu, ...pixiOpts } = opts;
   const ui = createUI(spec, hooks);
-  const useInfoMenu = infoMenu !== false && pixiOpts.menu !== false;
+  const useInfoMenu = infoMenu === true && pixiOpts.menu !== false;
   const locales = spec.locale ? Array.from(/* @__PURE__ */ new Set([spec.locale.locale, ...Object.keys(spec.locale.messages)])) : [];
   const menu = pixiOpts.menu === false || useInfoMenu ? false : composeMenu(spec.menu, { locales, localeSelectId: spec.localeSelectId, rulesFallback: spec.rules });
   if (menu && spec.game && (spec.game.name || spec.game.version)) {
@@ -529,6 +472,21 @@ function mountHud(app, spec = {}, opts = {}) {
   const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
   pixi.mount(app);
   const disposeInfoMenu = useInfoMenu ? mountInfoMenu(app, ui) : void 0;
+  const canvas = app.canvas;
+  const cancelToUp = (e) => {
+    canvas?.dispatchEvent(new PointerEvent("pointerup", {
+      pointerId: e.pointerId,
+      pointerType: e.pointerType,
+      isPrimary: e.isPrimary,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      pressure: 0,
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    }));
+  };
+  canvas?.addEventListener("pointercancel", cancelToUp, true);
   const extra = [];
   if (spec.panels?.length) {
     for (const ps of spec.panels) {
@@ -549,6 +507,7 @@ function mountHud(app, spec = {}, opts = {}) {
   });
   const teardown = () => {
     offRelayout();
+    canvas?.removeEventListener("pointercancel", cancelToUp, true);
     disposeInfoMenu?.();
     for (const v of extra) v.dispose();
     extra.length = 0;
@@ -611,14 +570,19 @@ function mountHud(app, spec = {}, opts = {}) {
         return;
       }
       const message = o.message ?? (o.name ? ui.t("openui.buyFeature.confirm", { name: ui.t(o.name), price: o.price ?? "" }) : ui.t("openui.buyFeature.message"));
-      void showConfirm(ui, {
-        title: o.title ?? "openui.buyFeature.title",
-        message,
-        confirmLabel: o.confirmLabel,
-        cancelLabel: o.cancelLabel
-      }).then((ok) => {
-        if (ok) o.onConfirm();
-      });
+      ui.showNotice(
+        [
+          { kind: "heading", id: "buy-confirm-title", text: o.title ?? "openui.buyFeature.title" },
+          { kind: "text", id: "buy-confirm-body", text: message }
+        ],
+        [
+          { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
+          { label: o.confirmLabel ?? "openui.confirm", variant: "primary", onSelect: () => {
+            ui.hideNotice();
+            o.onConfirm();
+          } }
+        ]
+      );
     },
     showControls: () => pixi.setControlsVisible(true),
     hideControls: () => pixi.setControlsVisible(false),
@@ -632,208 +596,332 @@ function mountHud(app, spec = {}, opts = {}) {
     dispose: teardown
   };
 }
-function money(amount, cur) {
-  return formatAmountPrecise(amount, cur);
+var LIGHT = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  accent: "#d99000",
+  accentText: "#1a1200",
+  scrim: "#080604"
+};
+var CARD_W = 200;
+var IMG_H = 120;
+var STRIP_H = 8;
+var CARD_H = 214;
+var ACT_GAP = 12;
+var ACT_H = 50;
+var CELL_H = CARD_H + ACT_GAP + ACT_H;
+var GAP2 = 18;
+var STEP_R = 27;
+var BET_W = 220;
+var BET_H = 60;
+var TITLE_H = 40;
+var ROW_GAP = 22;
+var TAP_SLOP = 24;
+var texCache = /* @__PURE__ */ new Map();
+function loadTex(url) {
+  let p = texCache.get(url);
+  if (!p) {
+    p = Assets.load(url).catch(() => Texture.EMPTY);
+    texCache.set(url, p);
+  }
+  return p;
 }
-var esc3 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function mountBuyFeatureModal(_app, hud, features, opts = {}) {
-  const ui = hud.ui;
-  const tr = (k) => ui.t(k);
-  const list = features.slice(0, 4);
-  ui.declareFacts({ modes: list.map((f) => ({ id: f.id, name: f.name, kind: f.variant, cost: f.cost })) });
-  const boosts = /* @__PURE__ */ new Set();
-  const activation = opts.activation ?? "multi";
-  const blocksBuy = opts.activationBlocksBuy ?? false;
-  const disposers = [];
-  const host2 = document.createElement("div");
-  host2.className = "bfm-root";
-  const vars = {
-    "--accent": "#d99000",
-    "--accent-text": "#1a1200",
-    "--surface": "#ffffff",
-    "--surface-alt": "#eef1f6",
-    "--text": "#181b20",
-    "--text-dim": "#5b6472",
-    "--font": ui.theme.type.family
-  };
-  for (const [k, v] of Object.entries(vars)) host2.style.setProperty(k, v);
-  host2.innerHTML = `
-    <div class="bfm-backdrop" data-close></div>
-    <button class="bfm-x" data-close aria-label="Close">\u2715</button>
-    <div class="bfm-panel" role="dialog" aria-modal="true">
-      <div class="bfm-fit" id="bfm-fit">
-        <h2 class="bfm-title" data-t="Buy Feature">${esc3(tr("Buy Feature"))}</h2>
-        <div class="bfm-bet">
-          <button class="bfm-step" id="bfm-minus" aria-label="Decrease">\u2212</button>
-          <div class="bfm-betbox"><span class="bfm-betlabel" data-t="Bet">${esc3(tr("Bet"))}</span><b id="bfm-betval">\u2014</b></div>
-          <button class="bfm-step" id="bfm-plus" aria-label="Increase">+</button>
-        </div>
-        <div class="bfm-cards" id="bfm-cards"></div>
-      </div>
-    </div>`;
-  const style = document.createElement("style");
-  style.textContent = BFM_CSS;
-  host2.appendChild(style);
-  document.body.appendChild(host2);
-  const $ = (sel) => host2.querySelector(sel);
-  const panel = $(".bfm-panel");
-  const fitEl = $("#bfm-fit");
-  const cardsEl = $("#bfm-cards");
-  const betValEl = $("#bfm-betval");
-  const askConfirm = (name, price, onYes) => {
-    const message = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
-    void showConfirm(ui, { title: "Buy Feature", message }).then((ok) => {
-      if (ok) onYes();
-    });
-  };
-  const layout = () => {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const cols = vw >= 720 && (vw >= 900 || vh <= 540) ? Math.min(4, list.length) : Math.min(2, list.length);
-    cardsEl.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
-    const fitW = Math.min(vw * 0.96, cols >= 4 ? 1180 : cols === 1 ? 380 : 760);
-    fitEl.style.width = `${fitW}px`;
-    fitEl.style.transform = "none";
-    const natH = fitEl.offsetHeight;
-    const s = Math.min(1, vh * 0.95 / natH);
-    fitEl.style.transform = `translateX(-50%) scale(${s})`;
-    panel.style.width = `${Math.ceil(fitW * s)}px`;
-    panel.style.height = `${Math.ceil(natH * s)}px`;
+function wireTap(node, hit, onTap) {
+  node.eventMode = "static";
+  node.cursor = "pointer";
+  node.hitArea = hit;
+  let down = null;
+  node.on("pointerdown", (e) => {
+    down = { x: e.global.x, y: e.global.y };
+    node.alpha = 0.82;
+  });
+  const end = (e, inside) => {
+    node.alpha = 1;
+    const p = down;
+    down = null;
+    if (!p) return;
+    if (inside || Math.hypot(e.global.x - p.x, e.global.y - p.y) <= TAP_SLOP) onTap();
   };
-  const renderCards = () => {
-    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+  node.on("pointerup", (e) => end(e, true));
+  node.on("pointerupoutside", (e) => end(e, false));
+}
+var FeatureCard = class extends Container {
+  priceText;
+  actionBg = new Graphics();
+  actionLabel;
+  action = new Container();
+  constructor(spec, ui, onAction) {
+    super();
+    const fam = ui.theme.type.family;
+    const fill = new Graphics().roundRect(0, 0, CARD_W, CARD_H, 14).fill({ color: LIGHT.surface });
+    const clip = new Container();
+    const clipMask = new Graphics().roundRect(0, 0, CARD_W, CARD_H, 14).fill({ color: 16777215 });
+    clip.mask = clipMask;
+    const placeholder = new Graphics().rect(0, 0, CARD_W, IMG_H).fill({ color: LIGHT.surfaceAlt });
+    clip.addChild(placeholder);
+    if (spec.image) {
+      void loadTex(spec.image).then((tex) => {
+        if (this.destroyed || tex === Texture.EMPTY) return;
+        const sp = new Sprite(tex);
+        const s = Math.max(CARD_W / tex.width, IMG_H / tex.height);
+        sp.scale.set(s);
+        sp.x = (CARD_W - tex.width * s) / 2;
+        sp.y = (IMG_H - tex.height * s) / 2;
+        clip.addChildAt(sp, 1);
+      });
+    }
+    const strip = new Graphics().rect(0, IMG_H, CARD_W, STRIP_H).fill({ color: LIGHT.accent });
+    const name = new Text({ text: ui.t(spec.name), style: { fontFamily: fam, fontSize: 16, fontWeight: "600", fill: LIGHT.text } });
+    name.anchor.set(0.5, 0);
+    name.position.set(CARD_W / 2, IMG_H + STRIP_H + 12);
+    this.priceText = new Text({ text: "", style: { fontFamily: fam, fontSize: 22, fontWeight: "800", fill: LIGHT.text } });
+    this.priceText.anchor.set(0.5, 0);
+    this.priceText.position.set(CARD_W / 2, IMG_H + STRIP_H + 36);
+    clip.addChild(strip, name, this.priceText);
+    const stroke = new Graphics().roundRect(0, 0, CARD_W, CARD_H, 14).stroke({ width: 4, color: LIGHT.border });
+    this.addChild(fill, clip, clipMask, stroke);
+    this.actionLabel = new Text({ text: "", style: { fontFamily: fam, fontSize: 15, fontWeight: "800", fill: LIGHT.text, letterSpacing: 0.5 } });
+    this.actionLabel.anchor.set(0.5);
+    this.actionLabel.position.set(CARD_W / 2, CARD_H + ACT_GAP + ACT_H / 2);
+    this.action.addChild(this.actionBg, this.actionLabel);
+    wireTap(this.action, new Rectangle(0, CARD_H + ACT_GAP, CARD_W, ACT_H), onAction);
+    this.addChild(this.action);
+  }
+  /** Update price + action label/state for the current bet + boost state. */
+  update(price, label, active, blocked) {
+    this.priceText.text = price;
+    this.actionLabel.text = label;
+    this.actionLabel.style.fill = active ? LIGHT.accentText : LIGHT.text;
+    this.actionBg.clear().roundRect(0, CARD_H + ACT_GAP, CARD_W, ACT_H, 12).fill({ color: active ? LIGHT.accent : LIGHT.surface }).stroke({ width: 4, color: LIGHT.border });
+    this.action.eventMode = blocked ? "none" : "static";
+    this.action.alpha = blocked ? 0.38 : 1;
+  }
+};
+var BuyFeatureModalView = class extends Container {
+  constructor(hud, features, opts) {
+    super();
+    this.hud = hud;
+    this.opts = opts;
+    const ui = hud.ui;
+    const fam = ui.theme.type.family;
+    this.list = features.slice(0, 4);
+    this.zIndex = 125;
+    this.visible = false;
+    this.eventMode = "none";
+    ui.declareFacts({ modes: this.list.map((f) => ({ id: f.id, name: f.name, kind: f.variant, cost: f.cost })) });
+    this.backdrop.eventMode = "static";
+    this.backdrop.on("pointertap", () => this.close());
+    this.title = new Text({ text: ui.t("Buy Feature"), style: { fontFamily: fam, fontSize: 30, fontWeight: "800", fill: "#ffffff", letterSpacing: 1 } });
+    this.title.anchor.set(0.5, 0);
+    const minus = this.stepButton("\u2212", () => ui.betStepper.dec());
+    const plus = this.stepButton("+", () => ui.betStepper.inc());
+    const betBox = new Container();
+    const betBg = new Graphics().roundRect(-BET_W / 2, -BET_H / 2, BET_W, BET_H, 12).fill({ color: LIGHT.surface }).stroke({ width: 3, color: LIGHT.border });
+    const betLabel = new Text({ text: ui.t("Bet"), style: { fontFamily: fam, fontSize: 12, fontWeight: "700", fill: LIGHT.textDim, letterSpacing: 1 } });
+    betLabel.anchor.set(0.5, 0);
+    betLabel.position.set(0, -BET_H / 2 + 8);
+    this.betValue = new Text({ text: "", style: { fontFamily: fam, fontSize: 24, fontWeight: "800", fill: LIGHT.text } });
+    this.betValue.anchor.set(0.5, 1);
+    this.betValue.position.set(0, BET_H / 2 - 8);
+    betBox.addChild(betBg, betLabel, this.betValue);
+    const betRow = new Container();
+    minus.position.set(STEP_R, 0);
+    betBox.position.set(STEP_R * 2 + 16 + BET_W / 2, 0);
+    plus.position.set(STEP_R * 2 + 16 + BET_W + 16 + STEP_R, 0);
+    betRow.addChild(minus, betBox, plus);
+    this.betRow = betRow;
+    for (const spec of this.list) {
+      const card = new FeatureCard(spec, ui, () => this.onAction(spec.id, spec.variant));
+      this.cards.push(card);
+      this.cardsRow.addChild(card);
+    }
+    this.content.addChild(this.title, betRow, this.cardsRow);
+    const cbg = new Graphics().circle(0, 0, 23).fill({ color: LIGHT.scrim, alpha: 0.85 });
+    const cx = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
+    this.closeBtn.addChild(cbg, cx);
+    wireTap(this.closeBtn, new Rectangle(-23, -23, 46, 46), () => this.close());
+    this.addChild(this.backdrop, this.content, this.closeBtn);
+    this.disposers.push(
+      ui.bet.value.subscribe(() => this.refresh()),
+      ui.locale.subscribe(() => {
+        this.title.text = ui.t("Buy Feature");
+        betLabel.text = ui.t("Bet");
+        this.refresh();
+        this.relayout();
+      })
+    );
+  }
+  hud;
+  opts;
+  backdrop = new Graphics();
+  content = new Container();
+  closeBtn = new Container();
+  title;
+  betValue;
+  cardsRow = new Container();
+  cards = [];
+  list;
+  boosts = /* @__PURE__ */ new Set();
+  disposers = [];
+  screen;
+  betRow;
+  stepButton(glyph, onTap) {
+    const c = new Container();
+    const fam = this.hud.ui.theme.type.family;
+    const bg = new Graphics().circle(0, 0, STEP_R).fill({ color: LIGHT.surface }).stroke({ width: 3, color: LIGHT.border });
+    const t = new Text({ text: glyph, style: { fontFamily: fam, fontSize: 28, fontWeight: "800", fill: LIGHT.text } });
+    t.anchor.set(0.5);
+    t.position.set(0, -1);
+    c.addChild(bg, t);
+    wireTap(c, new Rectangle(-STEP_R, -STEP_R, STEP_R * 2, STEP_R * 2), onTap);
+    return c;
+  }
+  /** Price + action state per current bet + boosts. */
+  refresh() {
+    const ui = this.hud.ui;
+    const bet = this.opts.getBet ? this.opts.getBet() : ui.bet.get();
     const cur = ui.bet.currency.get();
-    cardsEl.innerHTML = list.map((f) => {
-      const active = boosts.has(f.id);
-      const buyBlocked = f.variant === "buy" && blocksBuy && boosts.size > 0;
+    const money = (n) => formatAmountPrecise(n, cur);
+    this.betValue.text = money(bet);
+    const blocksBuy = this.opts.activationBlocksBuy ?? false;
+    this.list.forEach((f, i) => {
+      const active = this.boosts.has(f.id);
       const perSpin = (f.variant === "buy" ? f.cost : 1 + f.cost) * bet;
-      const price = money(perSpin, cur);
-      const label = f.variant === "buy" ? tr("Buy") : active ? tr("Activated") : tr("Activate");
-      const cls = `bfm-action bfm-action--${f.variant}${active ? " is-active" : ""}${buyBlocked ? " is-blocked" : ""}`;
-      const img = f.image ? ` style="background-image:url('${f.image}')"` : "";
-      return `
-        <div class="bfm-cell">
-          <div class="bfm-card">
-            <div class="bfm-cardimg"${img}></div>
-            <div class="bfm-strip"></div>
-            <div class="bfm-cardbody">
-              <span class="bfm-name">${esc3(tr(f.name))}</span>
-              <b class="bfm-price">${esc3(price)}</b>
-            </div>
-          </div>
-          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc3(label)}</button>
-        </div>`;
-    }).join("");
-    betValEl.textContent = money(bet, cur);
-    cardsEl.querySelectorAll(".bfm-action").forEach((b) => {
-      b.addEventListener("click", () => onAction(b.dataset.id, b.dataset.variant));
+      const label = f.variant === "buy" ? ui.t("Buy") : active ? ui.t("Activated") : ui.t("Activate");
+      const blocked = f.variant === "buy" && blocksBuy && this.boosts.size > 0;
+      this.cards[i].update(money(perSpin), label, active, blocked);
     });
-    layout();
-  };
-  const onAction = (id, variant) => {
-    const f = list.find((x) => x.id === id);
-    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+  }
+  onAction(id, variant) {
+    const ui = this.hud.ui;
+    const f = this.list.find((x) => x.id === id);
+    const bet = this.opts.getBet ? this.opts.getBet() : ui.bet.get();
     const cur = ui.bet.currency.get();
+    const money = (n) => formatAmountPrecise(n, cur);
+    const activation = this.opts.activation ?? "multi";
+    const blocksBuy = this.opts.activationBlocksBuy ?? false;
     if (variant === "boost") {
-      const wasActive = boosts.has(id);
+      const wasActive = this.boosts.has(id);
       const commit = () => {
-        if (activation === "single") boosts.clear();
-        if (wasActive) boosts.delete(id);
-        else boosts.add(id);
+        if (activation === "single") this.boosts.clear();
+        if (wasActive) this.boosts.delete(id);
+        else this.boosts.add(id);
         ui.bus.emit("cardActivated", { id });
-        renderCards();
-        opts.onActivate?.([...boosts], id, boosts.has(id));
+        this.refresh();
+        this.opts.onActivate?.([...this.boosts], id, this.boosts.has(id));
       };
       if (wasActive) {
         commit();
         return;
       }
       const total = 1 + (f?.cost ?? 0);
-      askConfirm(f?.name ?? id, money(total * bet, cur), commit);
+      this.askConfirm(f?.name ?? id, money(total * bet), commit);
     } else {
-      if (blocksBuy && boosts.size > 0) return;
+      if (blocksBuy && this.boosts.size > 0) return;
       const cost = (f?.cost ?? 0) * bet;
-      askConfirm(f?.name ?? id, money(cost, cur), () => {
+      this.askConfirm(f?.name ?? id, money(cost), () => {
         ui.bus.emit("cardActivated", { id });
-        close();
-        opts.onBuy?.(id, cost);
+        this.close();
+        this.opts.onBuy?.(id, cost);
       });
     }
-  };
-  $("#bfm-minus").addEventListener("click", () => ui.betStepper.dec());
-  $("#bfm-plus").addEventListener("click", () => ui.betStepper.inc());
-  disposers.push(ui.bet.value.subscribe(() => renderCards()));
-  const open = () => {
-    if (host2.classList.contains("open")) return;
-    renderCards();
-    host2.classList.add("open");
-    ui.lock();
-  };
-  const close = () => {
-    if (!host2.classList.contains("open")) return;
-    host2.classList.remove("open");
-    ui.unlock();
-  };
-  host2.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", close));
-  disposers.push(ui.on("buttonActivated", ({ id }) => {
-    if (id === "bonus") open();
-  }));
-  const onResize = () => {
-    if (host2.classList.contains("open")) layout();
-  };
-  window.addEventListener("resize", onResize);
-  disposers.push(
-    ui.locale.subscribe(() => {
-      host2.querySelectorAll("[data-t]").forEach((n) => n.textContent = tr(n.dataset.t));
-      renderCards();
-    })
-  );
-  renderCards();
+  }
+  /** The ONE universal confirm — the in-canvas Pixi notice (DialogView, zIndex 130), so it
+   *  layers over this modal. Message + labels come from the library's i18n (social-aware). */
+  askConfirm(name, price, onYes) {
+    const ui = this.hud.ui;
+    const message = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
+    ui.showNotice(
+      [
+        { kind: "heading", id: "bfm-confirm-h", text: "Buy Feature" },
+        { kind: "text", id: "bfm-confirm-b", text: message }
+      ],
+      [
+        { label: "openui.cancel", variant: "secondary" },
+        { label: "openui.confirm", variant: "primary", onSelect: () => {
+          ui.hideNotice();
+          onYes();
+        } }
+      ]
+    );
+  }
+  layout(screen) {
+    this.screen = screen;
+    if (this.visible) this.relayout();
+  }
+  relayout() {
+    const s = this.screen;
+    if (!s) return;
+    const W = s.width;
+    const H = s.height;
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: LIGHT.scrim, alpha: 0.55 });
+    this.backdrop.hitArea = new Rectangle(0, 0, W, H);
+    const n = this.list.length;
+    const cols = W >= 720 && (W >= 900 || H <= 540) ? Math.min(4, n) : Math.min(2, n);
+    const rows = Math.ceil(n / cols);
+    this.cards.forEach((card, i) => {
+      const r = Math.floor(i / cols);
+      const c = i % cols;
+      card.position.set(c * (CARD_W + GAP2), r * (CELL_H + GAP2));
+    });
+    const gridW = cols * CARD_W + (cols - 1) * GAP2;
+    const gridH = rows * CELL_H + (rows - 1) * GAP2;
+    const betW = 4 * STEP_R + BET_W + 32;
+    const contentW = Math.max(gridW, betW, 340);
+    this.title.position.set(contentW / 2, 0);
+    this.betRow.position.set((contentW - betW) / 2, TITLE_H + ROW_GAP + STEP_R);
+    this.cardsRow.position.set((contentW - gridW) / 2, TITLE_H + ROW_GAP + BET_H + ROW_GAP);
+    const contentH = TITLE_H + ROW_GAP + BET_H + ROW_GAP + gridH;
+    const scale = Math.min(1, W * 0.94 / contentW, H * 0.92 / contentH);
+    this.content.scale.set(scale);
+    this.content.position.set((W - contentW * scale) / 2, (H - contentH * scale) / 2);
+    this.closeBtn.position.set(W - 34, 34);
+  }
+  open() {
+    if (this.visible) return;
+    this.hud.ui.lock();
+    this.visible = true;
+    this.eventMode = "static";
+    this.refresh();
+    this.relayout();
+  }
+  close() {
+    if (!this.visible) return;
+    this.visible = false;
+    this.eventMode = "none";
+    this.hud.ui.unlock();
+  }
+  get isOpen() {
+    return this.visible;
+  }
+  dispose() {
+    if (this.visible) this.hud.ui.unlock();
+    for (const d of this.disposers.splice(0)) d();
+    if (!this.destroyed) this.destroy({ children: true });
+  }
+};
+function mountBuyFeatureModal(_app, hud, features, opts = {}) {
+  const ui = hud.ui;
+  const view = new BuyFeatureModalView(hud, features, opts);
+  hud.pixi.root.addChild(view);
+  view.layout(ui.screen.get());
+  const offScreen = ui.screen.subscribe(() => view.layout(ui.screen.get()));
+  const offOpen = ui.on("buttonActivated", ({ id }) => {
+    if (id === "bonus") view.open();
+  });
   return () => {
-    window.removeEventListener("resize", onResize);
-    if (host2.classList.contains("open")) ui.unlock();
-    for (const d of disposers.splice(0)) d();
-    host2.remove();
+    offScreen();
+    offOpen();
+    view.dispose();
   };
 }
-var BFM_CSS = `
-.bfm-root { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
-.bfm-root.open { opacity: 1; pointer-events: auto; }
-.bfm-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,0); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); transition: background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease; }
-.bfm-root.open .bfm-backdrop { background: rgba(8,6,4,.5); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
-.bfm-x { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(18,14,10,.82); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); z-index: 2; transition: transform .12s, background .12s; }
-.bfm-x:hover { transform: scale(1.08); background: rgba(18,14,10,.95); }
-.bfm-root *, .bfm-root *::before, .bfm-root *::after { box-sizing: border-box; }
-.bfm-panel { position: relative; transform: translateY(8px) scale(.985); transition: transform .18s ease; }
-.bfm-root.open .bfm-panel { transform: none; }
-.bfm-fit { position: absolute; top: 0; left: 50%; transform: translateX(-50%); transform-origin: top center; }
-.bfm-title { margin: 0 0 14px; text-align: center; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
-.bfm-bet { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 24px; }
-.bfm-betbox { min-width: 200px; padding: 10px 22px; border-radius: 12px; background: var(--surface); border: 3px solid #000; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
-.bfm-betlabel { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
-.bfm-betbox b { font-size: 24px; color: var(--text); }
-.bfm-step { flex: none; width: 54px; height: 54px; border-radius: 999px; border: 3px solid #000; background: var(--surface); color: var(--text); font-size: 28px; font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1; transition: transform .1s, background .12s; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
-.bfm-step:hover { background: var(--surface-alt); }
-.bfm-step:active { transform: scale(.92); }
-.bfm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
-.bfm-cell { display: flex; flex-direction: column; min-width: 0; }
-.bfm-card { background: var(--surface); border: 4px solid #000; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
-.bfm-cardimg { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--surface-alt); background-image: linear-gradient(135deg, #e7ebf2, #cfd6e2); }
-.bfm-strip { height: 8px; background: linear-gradient(90deg, #f0a500, #ffd166, #f0a500); }
-.bfm-cardbody { padding: 12px 14px 16px; text-align: center; }
-.bfm-name { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.bfm-price { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--text); }
-.bfm-action { display: block; width: 100%; margin-top: 12px; padding: 14px 10px; border-radius: 12px; border: 4px solid #000; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .12s, color .12s; box-shadow: 0 5px 14px rgba(0,0,0,.35); white-space: nowrap; }
-.bfm-action:hover { background: var(--surface-alt); }
-.bfm-action:active { transform: scale(.96); }
-.bfm-action.is-active { background: var(--accent); color: var(--accent-text); border-color: #000; }
-.bfm-action.is-blocked, .bfm-action:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
-.bfm-action.is-blocked:hover, .bfm-action:disabled:hover { background: var(--surface); }
-`;
 
 // src/bootError.ts
 var host = null;
-var esc4 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 function showBootError(opts = {}) {
   const title = opts.title ?? "Connection lost";
   const message = opts.message ?? "The game could not reach the game server. Please reload to reconnect and continue.";
@@ -847,10 +935,10 @@ function showBootError(opts = {}) {
       <div class="openui-be-icon" aria-hidden="true">
         <svg viewBox="0 0 48 48" width="48" height="48"><path d="M24 4 3 42h42L24 4Z" fill="none" stroke="#ffc935" stroke-width="3" stroke-linejoin="round"/><rect x="22" y="18" width="4" height="12" rx="2" fill="#ffc935"/><circle cx="24" cy="35" r="2.4" fill="#ffc935"/></svg>
       </div>
-      <h1 class="openui-be-title">${esc4(title)}</h1>
-      <p class="openui-be-msg">${esc4(message)}</p>
-      ${opts.detail ? `<p class="openui-be-detail">${esc4(opts.detail)}</p>` : ""}
-      ${showReload ? `<button class="openui-be-reload" type="button">${esc4(opts.reloadLabel ?? "Reload")}</button>` : ""}
+      <h1 class="openui-be-title">${esc2(title)}</h1>
+      <p class="openui-be-msg">${esc2(message)}</p>
+      ${opts.detail ? `<p class="openui-be-detail">${esc2(opts.detail)}</p>` : ""}
+      ${showReload ? `<button class="openui-be-reload" type="button">${esc2(opts.reloadLabel ?? "Reload")}</button>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -878,6 +966,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map