@open-slot-ui/pixi 0.7.1 → 0.8.2

package/dist/index.js

@@ -1,7 +1,7 @@
 import { ControlView, ButtonView, SliderView, buildBlockColumn, OpenUIPixi } from './chunk-PYXZIGXG.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-PYXZIGXG.js';
 import { Text, Graphics, Container, Rectangle } from 'pixi.js';
-import { createUI, composeMenu, buildPanel, formatAmount } from '@open-slot-ui/core';
+import { LOCALE_LABELS, createUI, composeMenu, buildPanel, formatAmount } from '@open-slot-ui/core';
 
 var RISE = 26;
 var STAGGER = 38;
@@ -278,9 +278,294 @@ var PanelBodyView = class extends ControlView {
     super.dispose();
   }
 };
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var rich = (s) => esc(s).replace(/\*\*(.+?)\*\*/g, "<b>$1</b>");
+function renderBlocks(blocks, tr) {
+  const out = [];
+  for (const b of blocks) {
+    switch (b.kind) {
+      case "text":
+        out.push(`<p>${rich(tr(b.text))}</p>`);
+        break;
+      case "heading":
+        out.push(`<div class="ohm-sec"><span>${esc(tr(b.text))}</span></div>`);
+        break;
+      case "subheading":
+        out.push(`<h4 class="ohm-subh">${esc(tr(b.text))}</h4>`);
+        break;
+      case "legal":
+        out.push(`<p class="ohm-legal">${rich(tr(b.text))}</p>`);
+        break;
+      case "divider":
+        out.push('<hr class="ohm-hr">');
+        break;
+      case "image":
+        out.push(`<img class="ohm-feature" alt="${esc(tr(b.alt ?? ""))}" src="${b.src}" loading="lazy">`);
+        break;
+      case "media": {
+        const img = `<img alt="${esc(tr(b.alt ?? ""))}" src="${b.src}" loading="lazy">`;
+        const body = `<div class="ohm-media-body">${b.title ? `<h4>${esc(tr(b.title))}</h4>` : ""}<p>${rich(tr(b.text))}</p></div>`;
+        out.push(`<div class="ohm-media ohm-media--${b.side ?? "left"}">${img}${body}</div>`);
+        break;
+      }
+      case "cards": {
+        const cards = b.items.map((it) => `<div class="ohm-fcard">${it.icon ? `<img src="${it.icon}" alt="" loading="lazy">` : ""}<h5>${esc(tr(it.title))}</h5>${it.text ? `<p>${rich(tr(it.text))}</p>` : ""}</div>`).join("");
+        out.push(`<div class="ohm-cards">${cards}</div>`);
+        break;
+      }
+      case "paytable":
+        out.push(`<div class="ohm-grid">${renderPaytable(b.rows, tr)}</div>`);
+        break;
+      case "table": {
+        const head = b.columns?.length ? `<thead><tr>${b.columns.map((c) => `<th>${esc(tr(c))}</th>`).join("")}</tr></thead>` : "";
+        const body = b.rows.map((r) => `<tr>${r.map((c) => `<td>${esc(tr(c))}</td>`).join("")}</tr>`).join("");
+        out.push(`<table class="ohm-table">${head}<tbody>${body}</tbody></table>`);
+        break;
+      }
+      case "stat-grid": {
+        const rows = b.items.map((it) => `<div><dt>${esc(tr(it.label))}</dt><dd>${esc(tr(it.value))}</dd></div>`).join("");
+        out.push(`<dl class="ohm-stats">${rows}</dl>`);
+        break;
+      }
+      case "steps": {
+        const items = b.items.map((s) => `<li>${rich(tr(s))}</li>`).join("");
+        out.push(b.ordered ? `<ol class="ohm-steps">${items}</ol>` : `<ul class="ohm-steps">${items}</ul>`);
+        break;
+      }
+      case "callout":
+        out.push(`<div class="ohm-callout ohm-callout--${b.tone ?? "info"}">${b.title ? `<b>${esc(tr(b.title))}</b>` : ""}<p>${rich(tr(b.text))}</p></div>`);
+        break;
+      case "group":
+        out.push(`<div class="ohm-group">${b.title ? `<h4 class="ohm-subh">${esc(tr(b.title))}</h4>` : ""}${renderBlocks(b.children, tr)}</div>`);
+        break;
+    }
+  }
+  return out.join("\n");
+}
+function renderPaytable(rows, tr) {
+  return rows.map((r) => {
+    const icon = r.icon ? `<img class="ohm-symimg" src="${r.icon}" alt="" loading="lazy">` : `<span class="ohm-emoji">${esc(tr(r.symbol ?? ""))}</span>`;
+    const lines = r.payouts.split("\n").map((line) => {
+      const i = line.indexOf(":");
+      return i >= 0 ? `<div><b>${esc(line.slice(0, i))}</b><span>${esc(line.slice(i + 1))}</span></div>` : `<div><span>${esc(line)}</span></div>`;
+    }).join("");
+    return `<div class="ohm-sym">${icon}<div class="ohm-pay">${lines}</div></div>`;
+  }).join("");
+}
+function renderSettingBlock(b, tr) {
+  const hint = "hint" in b && b.hint ? `<div class="ohm-hint">${esc(tr(b.hint))}</div>` : "";
+  const label = "label" in b && b.label ? esc(tr(b.label)) : "";
+  switch (b.kind) {
+    case "toggle":
+      return `<div class="ohm-setting"><label class="ohm-row ohm-check"><span>${label}</span><span class="ohm-ctl"><input data-set="${b.id}" type="checkbox"${b.on ? " checked" : ""}></span></label>${hint}</div>`;
+    case "slider":
+      return `<div class="ohm-setting"><label class="ohm-row"><span>${label}</span><input data-set="${b.id}" type="range" min="0" max="1" step="0.01" value="${b.initial ?? 1}"></label>${hint}</div>`;
+    case "select": {
+      const opts = b.options.map((o, i) => `<option value="${esc(o.value)}"${i === (b.index ?? 0) ? " selected" : ""}>${esc(tr(o.label))}</option>`).join("");
+      return `<div class="ohm-setting"><label class="ohm-row"><span>${label}</span><select data-set="${b.id}">${opts}</select></label>${hint}</div>`;
+    }
+    default:
+      return "";
+  }
+}
+function mountInfoMenu(app, ui) {
+  const menu = ui.spec?.menu ?? {};
+  const tr = (k) => ui.t(k);
+  const disposers = [];
+  const host2 = document.createElement("div");
+  host2.className = "ohm-root";
+  const vars = {
+    "--accent": "#d99000",
+    "--accent-text": "#1a1200",
+    "--surface": "#ffffff",
+    "--surface-alt": "#eef1f6",
+    "--text": "#181b20",
+    "--text-dim": "#5b6472",
+    "--card-radius": "8px",
+    "--font": ui.theme.type.family
+  };
+  for (const [k, v] of Object.entries(vars)) host2.style.setProperty(k, v);
+  const locales = ui.spec?.locale ? Array.from(/* @__PURE__ */ new Set([ui.spec.locale.locale, ...Object.keys(ui.spec.locale.messages)])) : [];
+  const langRow = locales.length > 1 ? `<div class="ohm-setting"><label class="ohm-row"><span>${tr("Language")}</span><select id="ohm-lang">${locales.map((c) => `<option value="${c}"${c === ui.locale.get() ? " selected" : ""}>${esc(LOCALE_LABELS[c] ?? c)}</option>`).join("")}</select></label></div>` : "";
+  const turbo = ui.turbo;
+  const cap = (m) => m.charAt(0).toUpperCase() + m.slice(1);
+  const turboCtl = turbo.modeCount <= 2 ? `<span class="ohm-ctl"><input id="ohm-turbo" type="checkbox"></span>` : `<span class="ohm-ctl"><div class="ohm-segmented" id="ohm-turbo-seg">${turbo.modes.map((m, i) => `<button class="ohm-seg" data-i="${i}">${esc(tr(cap(m)))}</button>`).join("")}</div></span>`;
+  const customSettings = (menu.settings ?? []).map((b) => renderSettingBlock(b, tr)).join("");
+  const soundMode = menu.sound ?? "sliders";
+  const volRow = (id, label, hint, val) => `<div class="ohm-setting"><label class="ohm-row"><span>${esc(tr(label))}</span><input class="ohm-slider" data-vol="${id}" type="range" min="0" max="1" step="0.01" value="${val}"></label><div class="ohm-hint">${esc(tr(hint))}</div></div>`;
+  const soundSliders = soundMode === "master" ? volRow("master", "Volume", "Adjust the overall game volume.", ui.sfxSlider.value.get()) : soundMode === "sliders" ? volRow("music", "Music", "Adjust the background music volume.", ui.musicSlider.value.get()) + volRow("sfx", "Effects", "Adjust the sound-effects volume.", ui.sfxSlider.value.get()) : "";
+  const paytableHtml = menu.paytable ? renderBlocks(menu.paytable, tr) : "";
+  const rulesHtml = menu.rules ? renderBlocks(menu.rules, tr) : "";
+  const banner = menu.banner ? `<img class="ohm-logo" alt="" src="${menu.banner.src}"${menu.banner.width ? ` width="${menu.banner.width}"` : ""}${menu.banner.height ? ` height="${menu.banner.height}"` : ""}>` : ui.gameInfo.name ? `<h1 class="ohm-logo-text">${esc(ui.gameInfo.name)}</h1>` : "";
+  host2.innerHTML = `
+    <div class="ohm-backdrop" data-close></div>
+    <button class="ohm-x" data-close aria-label="Close">\u2715</button>
+    <div class="ohm-card" role="dialog" aria-modal="true">
+      <div class="ohm-body">
+        ${banner}
+        <div class="ohm-sec"><span>${tr("Settings")}</span></div>
+        <div class="ohm-setting"><label class="ohm-row ohm-check"><span>${tr("Sound")}</span><span class="ohm-ctl"><input id="ohm-sound" type="checkbox" checked></span></label><div class="ohm-hint">${tr("Turn all game sound and music on or off.")}</div></div>
+        ${soundSliders}
+        ${langRow}
+        <div class="ohm-setting"><div class="ohm-row ohm-check"><span>${tr("Quick spin")}</span>${turboCtl}</div><div class="ohm-hint">${tr("Speed up rounds by shortening the animation. The result is identical.")}</div></div>
+        ${customSettings}
+        ${paytableHtml ? `<div class="ohm-sec"><span>${tr("Paytable")}</span></div>${paytableHtml}` : ""}
+        ${rulesHtml ? `<div class="ohm-sec"><span>${tr("Rules")}</span></div><div class="ohm-rules" id="ohm-rules">${rulesHtml}</div>` : ""}
+      </div>
+    </div>`;
+  const style = document.createElement("style");
+  style.textContent = OHM_CSS;
+  host2.appendChild(style);
+  document.body.appendChild(host2);
+  const $ = (sel) => host2.querySelector(sel);
+  const sound = $("#ohm-sound");
+  if (sound) {
+    sound.checked = !ui.muted.get();
+    sound.addEventListener("change", () => ui.setMuted(!sound.checked));
+    disposers.push(ui.muted.subscribe((m) => {
+      sound.checked = !m;
+    }));
+  }
+  host2.querySelectorAll("[data-vol]").forEach((el) => {
+    const which = el.dataset.vol;
+    el.addEventListener("input", () => {
+      const v = Number(el.value);
+      if (which === "music") ui.musicSlider.setNormalized(v);
+      else if (which === "sfx") ui.sfxSlider.setNormalized(v);
+      else {
+        ui.musicSlider.setNormalized(v);
+        ui.sfxSlider.setNormalized(v);
+      }
+    });
+    const src = which === "music" ? ui.musicSlider : ui.sfxSlider;
+    disposers.push(src.value.subscribe((v) => {
+      el.value = String(v);
+    }));
+  });
+  const lang = $("#ohm-lang");
+  if (lang) lang.addEventListener("change", () => ui.setLocale(lang.value));
+  if (turbo.modeCount <= 2) {
+    const tg = $("#ohm-turbo");
+    if (tg) {
+      tg.checked = turbo.isOn;
+      tg.addEventListener("change", () => turbo.set(tg.checked));
+      disposers.push(turbo.index.subscribe(() => {
+        tg.checked = turbo.isOn;
+      }));
+    }
+  } else {
+    const segs = Array.from(host2.querySelectorAll(".ohm-seg"));
+    segs.forEach((b) => b.addEventListener("click", () => turbo.setIndex(Number(b.dataset.i))));
+    const sync = () => segs.forEach((b, i) => b.classList.toggle("active", i === turbo.index.get()));
+    disposers.push(turbo.index.subscribe(sync));
+    sync();
+  }
+  host2.querySelectorAll("[data-set]").forEach((el) => {
+    const id = el.dataset.set;
+    if (el instanceof HTMLInputElement && el.type === "checkbox") el.addEventListener("change", () => ui.bus.emit("toggled", { id, on: el.checked }));
+    else if (el instanceof HTMLInputElement && el.type === "range") el.addEventListener("input", () => ui.bus.emit("valueChanged", { id, value: Number(el.value) }));
+    else if (el instanceof HTMLSelectElement) el.addEventListener("change", () => ui.bus.emit("optionSelected", { id, value: el.value, index: el.selectedIndex }));
+  });
+  host2.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", () => ui.settingsPanel.closePanel()));
+  disposers.push(
+    ui.locale.subscribe(() => {
+      const body = host2.querySelector(".ohm-body");
+      if (body) {
+        const rulesEl = host2.querySelector("#ohm-rules");
+        if (rulesEl && menu.rules) rulesEl.innerHTML = renderBlocks(menu.rules, tr);
+        if (lang) lang.value = ui.locale.get();
+      }
+    })
+  );
+  disposers.push(ui.settingsPanel.state.subscribe(() => host2.classList.toggle("open", ui.settingsPanel.isOpen)));
+  return () => {
+    for (const d of disposers.splice(0)) d();
+    host2.remove();
+  };
+}
+var OHM_CSS = `
+.ohm-root { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
+.ohm-root.open { opacity: 1; pointer-events: auto; }
+.ohm-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; }
+.ohm-root.open .ohm-backdrop { background: rgba(8,6,4,.34); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
+.ohm-card { position: relative; width: min(92%, 1100px); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1.5px solid #000; border-radius: var(--card-radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; transform: translateY(8px) scale(.99); transition: transform .18s ease; }
+.ohm-root.open .ohm-card { transform: none; }
+.ohm-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; }
+.ohm-x:hover { transform: scale(1.08); background: rgba(18,14,10,.95); }
+.ohm-body { padding: 24px 26px 26px; overflow-y: scroll; }
+.ohm-body::-webkit-scrollbar { width: 18px; }
+.ohm-body::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
+.ohm-body::-webkit-scrollbar-thumb { background-color: #111; border: 6px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 44px; }
+.ohm-body::-webkit-scrollbar-thumb:hover { background-color: #000; }
+.ohm-logo { display: block; margin: 6px auto 18px; max-width: 64%; height: auto; }
+.ohm-logo-text { margin: 6px 0 18px; text-align: center; font-size: 30px; font-weight: 900; letter-spacing: 1px; color: var(--text); }
+.ohm-sec { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; color: var(--text); font-weight: 800; letter-spacing: 1px; }
+.ohm-sec::before, .ohm-sec::after { content: ""; flex: 1; height: 2px; background: color-mix(in srgb, var(--text) 80%, transparent); border-radius: 2px; }
+.ohm-root *, .ohm-root *::before, .ohm-root *::after { box-sizing: border-box; }
+.ohm-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; font-weight: 700; }
+.ohm-setting { margin: 14px 0; }
+.ohm-setting .ohm-row { margin: 0; }
+.ohm-hint { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
+.ohm-row > span:first-child { flex: none; min-width: 110px; }
+.ohm-row input[type=range] { flex: 1; min-width: 0; max-width: min(440px, 60dvw); accent-color: var(--accent); height: 6px; }
+.ohm-row select { flex: 1; min-width: 0; max-width: min(440px, 60dvw); padding: 11px 14px; border-radius: 4px; border: 2px solid var(--accent); background: var(--surface-alt); color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer; }
+.ohm-row select option { background: var(--surface); color: var(--text); font-weight: 600; }
+.ohm-row select option:checked { background: var(--accent); color: var(--accent-text); }
+.ohm-ctl { flex: 1; min-width: 0; max-width: min(440px, 60dvw); display: flex; align-items: center; justify-content: flex-end; }
+.ohm-check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 50px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 38%, transparent); position: relative; cursor: pointer; transition: background .15s; flex: none; }
+.ohm-check input[type=checkbox]:checked { background: var(--accent); }
+.ohm-check input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
+.ohm-check input[type=checkbox]:checked::before { left: 25px; }
+.ohm-segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-alt); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); }
+.ohm-seg { border: 0; background: transparent; color: var(--text-dim); font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; }
+.ohm-seg.active { background: var(--accent); color: var(--accent-text); }
+.ohm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
+.ohm-sym { display: flex; align-items: center; gap: 16px; padding: 6px 4px; }
+.ohm-emoji { font-size: 48px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
+.ohm-symimg { width: 56px; height: 56px; object-fit: contain; flex: none; }
+.ohm-pay { font-size: 13px; line-height: 1.6; }
+.ohm-pay div { display: flex; gap: 6px; }
+.ohm-pay b { min-width: 42px; }
+.ohm-pay span { color: var(--accent); font-weight: 700; }
+.ohm-body p { color: var(--text-dim); line-height: 1.6; }
+.ohm-body p b { color: var(--text); }
+.ohm-feature { display: block; width: 100%; height: auto; margin: 10px 0; }
+.ohm-stats { margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
+.ohm-stats > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 20%, transparent); }
+.ohm-stats dt { color: var(--text-dim); margin: 0; } .ohm-stats dd { margin: 0; font-weight: 700; }
+.ohm-callout { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
+.ohm-callout b { color: var(--accent); } .ohm-callout p { margin: 4px 0 0; color: var(--text); }
+.ohm-callout--warning { border-left-color: #e0a106; background: color-mix(in srgb, #e0a106 10%, transparent); }
+.ohm-callout--warning b { color: #b07d09; }
+.ohm-subh { margin: 22px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: .5px; color: var(--text); }
+.ohm-legal { font-size: 12px; line-height: 1.6; color: var(--text-dim); opacity: .85; }
+.ohm-hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); margin: 18px 0; }
+.ohm-media { display: flex; align-items: center; gap: 18px; margin: 14px 0; }
+.ohm-media--right { flex-direction: row-reverse; }
+.ohm-media > img { width: 40%; max-width: 320px; height: auto; flex: none; }
+.ohm-media-body { flex: 1; }
+.ohm-media-body h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
+.ohm-media-body p { margin: 0; }
+.ohm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
+.ohm-fcard { padding: 8px 6px; text-align: center; }
+.ohm-fcard img { display: block; width: 48px; height: 48px; margin: 0 auto 8px; }
+.ohm-fcard h5 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
+.ohm-fcard p { margin: 0; font-size: 12px; line-height: 1.5; }
+.ohm-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
+.ohm-table th { text-align: left; padding: 8px 10px; font-weight: 800; color: var(--text); border-bottom: 2px solid color-mix(in srgb, var(--text-dim) 35%, transparent); }
+.ohm-table td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 18%, transparent); }
+.ohm-table td:first-child { color: var(--text); font-weight: 700; }
+.ohm-table td:not(:first-child) { color: var(--accent); font-weight: 700; }
+.ohm-steps { margin: 12px 0; padding-left: 22px; color: var(--text-dim); line-height: 1.7; }
+.ohm-steps li { margin: 5px 0; }
+.ohm-steps b { color: var(--text); }
+.ohm-group { margin: 8px 0; }
+`;
+
+// src/mountHud.ts
 function showReplayModal(ui, info, buttonKey, onSelect) {
   const cur = info.currency ?? ui.balance.currency.get();
-  const money = (n) => formatAmount(n, cur);
+  const money2 = (n) => formatAmount(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -288,10 +573,10 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
         kind: "stat-grid",
         id: "openui-replay-g",
         items: [
-          { label: "openui.replay.baseBet", value: money(info.baseBet) },
+          { label: "openui.replay.baseBet", value: money2(info.baseBet) },
           { label: "openui.replay.costMultiplier", value: `${info.costMultiplier}\xD7` },
           { label: "openui.replay.payoutMultiplier", value: `${info.payoutMultiplier}\xD7` },
-          { label: "openui.replay.amount", value: money(info.amount) }
+          { label: "openui.replay.amount", value: money2(info.amount) }
         ]
       }
     ],
@@ -303,15 +588,17 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
   );
 }
 function mountHud(app, spec = {}, opts = {}) {
-  const { hooks, ...pixiOpts } = opts;
+  const { hooks, infoMenu, ...pixiOpts } = opts;
   const ui = createUI(spec, hooks);
+  const useInfoMenu = infoMenu !== false && 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 ? false : composeMenu(spec.menu, { locales, localeSelectId: spec.localeSelectId, rulesFallback: spec.rules });
+  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)) {
     menu.push({ kind: "legal", id: "openui-game-info", text: [spec.game.name, spec.game.version ? `v${spec.game.version}` : ""].filter(Boolean).join("  \xB7  ") });
   }
   const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
   pixi.mount(app);
+  const disposeInfoMenu = useInfoMenu ? mountInfoMenu(app, ui) : void 0;
   const extra = [];
   if (spec.panels?.length) {
     for (const ps of spec.panels) {
@@ -332,6 +619,7 @@ function mountHud(app, spec = {}, opts = {}) {
   });
   const teardown = () => {
     offRelayout();
+    disposeInfoMenu?.();
     for (const v of extra) v.dispose();
     extra.length = 0;
     pixi.unmount();
@@ -416,10 +704,237 @@ function mountHud(app, spec = {}, opts = {}) {
     dispose: teardown
   };
 }
+function money(amount, cur) {
+  return formatAmount(amount, cur);
+}
+var esc2 = (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);
+  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">${esc2(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">${esc2(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>
+    <div class="bfm-confirm" id="bfm-confirm">
+      <div class="bfm-confirm-card">
+        <p class="bfm-confirm-msg" id="bfm-confirm-msg"></p>
+        <div class="bfm-confirm-row">
+          <button class="bfm-confirm-btn bfm-confirm-no" id="bfm-confirm-no" data-t="openui.cancel">${esc2(tr("openui.cancel"))}</button>
+          <button class="bfm-confirm-btn bfm-confirm-yes" id="bfm-confirm-yes" data-t="openui.confirm">${esc2(tr("openui.confirm"))}</button>
+        </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 confirmEl = $("#bfm-confirm");
+  const confirmMsg = $("#bfm-confirm-msg");
+  const confirmYes = $("#bfm-confirm-yes");
+  const confirmNo = $("#bfm-confirm-no");
+  let pendingConfirm = null;
+  const hideConfirm = () => {
+    confirmEl.classList.remove("show");
+    pendingConfirm = null;
+  };
+  confirmNo.addEventListener("click", hideConfirm);
+  confirmYes.addEventListener("click", () => {
+    const fn = pendingConfirm;
+    hideConfirm();
+    fn?.();
+  });
+  const askConfirm = (totalCost, name, price, onYes) => {
+    if (!hud.shouldConfirmBuy(totalCost)) {
+      onYes();
+      return;
+    }
+    confirmMsg.textContent = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
+    pendingConfirm = onYes;
+    confirmEl.classList.add("show");
+  };
+  const layout = () => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const cols = vh <= 540 || vw >= 900 ? 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`;
+  };
+  const renderCards = () => {
+    const bet = opts.getBet ? 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 price = f.variant === "buy" ? money(f.cost * bet, cur) : `+${money(f.cost * bet, 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">${esc2(tr(f.name))}</span>
+              <b class="bfm-price">${esc2(price)}</b>
+            </div>
+          </div>
+          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc2(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));
+    });
+    layout();
+  };
+  const onAction = (id, variant) => {
+    const f = list.find((x) => x.id === id);
+    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+    const cur = ui.bet.currency.get();
+    if (variant === "boost") {
+      const wasActive = boosts.has(id);
+      const commit = () => {
+        if (activation === "single") boosts.clear();
+        if (wasActive) boosts.delete(id);
+        else boosts.add(id);
+        ui.bus.emit("cardActivated", { id });
+        renderCards();
+        opts.onActivate?.([...boosts], id, boosts.has(id));
+      };
+      if (wasActive) {
+        commit();
+        return;
+      }
+      const total = 1 + (f?.cost ?? 0);
+      askConfirm(total, f?.name ?? id, money(total * bet, cur), commit);
+    } else {
+      if (blocksBuy && boosts.size > 0) return;
+      const cost = (f?.cost ?? 0) * bet;
+      askConfirm(f?.cost ?? 0, f?.name ?? id, money(cost, cur), () => {
+        ui.bus.emit("cardActivated", { id });
+        close();
+        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 = () => {
+    renderCards();
+    host2.classList.add("open");
+  };
+  const close = () => host2.classList.remove("open");
+  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();
+  return () => {
+    window.removeEventListener("resize", onResize);
+    for (const d of disposers.splice(0)) d();
+    host2.remove();
+  };
+}
+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); }
+.bfm-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
+.bfm-confirm.show { opacity: 1; pointer-events: auto; }
+.bfm-confirm::before { content: ""; position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
+.bfm-confirm-card { position: relative; width: min(90%, 420px); background: var(--surface); color: var(--text); border: 3px solid #000; border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; }
+.bfm-confirm-msg { margin: 0 0 22px; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--text); }
+.bfm-confirm-row { display: flex; gap: 14px; }
+.bfm-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; }
+.bfm-confirm-btn:active { transform: scale(.96); }
+.bfm-confirm-no { background: var(--surface); color: var(--text); }
+.bfm-confirm-no:hover { background: var(--surface-alt); }
+.bfm-confirm-yes { background: var(--accent); color: var(--accent-text); }
+`;
 
 // src/bootError.ts
 var host = null;
-var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var esc3 = (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.";
@@ -433,10 +948,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">${esc(title)}</h1>
-      <p class="openui-be-msg">${esc(message)}</p>
-      ${opts.detail ? `<p class="openui-be-detail">${esc(opts.detail)}</p>` : ""}
-      ${showReload ? `<button class="openui-be-reload" type="button">${esc(opts.reloadLabel ?? "Reload")}</button>` : ""}
+      <h1 class="openui-be-title">${esc3(title)}</h1>
+      <p class="openui-be-msg">${esc3(message)}</p>
+      ${opts.detail ? `<p class="openui-be-detail">${esc3(opts.detail)}</p>` : ""}
+      ${showReload ? `<button class="openui-be-reload" type="button">${esc3(opts.reloadLabel ?? "Reload")}</button>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -464,6 +979,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountHud, showBootError };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map