@open-slot-ui/pixi 0.8.1 → 0.8.3

package/dist/index.cjs

@@ -4269,10 +4269,67 @@ var OHM_CSS = `
 .ohm-group { margin: 8px 0; }
 `;
 
+// 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 money = (n) => core.formatAmount(n, cur);
+  const money2 = (n) => core.formatAmount(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -4280,10 +4337,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) }
         ]
       }
     ],
@@ -4387,17 +4444,15 @@ function mountHud(app, spec = {}, opts = {}) {
         o.onConfirm();
         return;
       }
-      const message = o.message ?? (o.name ? ui.t("openui.buyFeature.confirm", { name: ui.t(o.name), price: o.price ?? "" }) : "openui.buyFeature.message");
-      ui.showNotice(
-        [
-          { kind: "heading", id: "buy-title", text: o.title ?? "openui.buyFeature.title" },
-          { kind: "text", id: "buy-body", text: message }
-        ],
-        [
-          { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
-          { label: o.confirmLabel ?? "openui.confirm", variant: "primary", onSelect: o.onConfirm }
-        ]
-      );
+      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();
+      });
     },
     showControls: () => pixi.setControlsVisible(true),
     hideControls: () => pixi.setControlsVisible(false),
@@ -4411,10 +4466,199 @@ function mountHud(app, spec = {}, opts = {}) {
     dispose: teardown
   };
 }
+function money(amount, cur) {
+  return core.formatAmount(amount, cur);
+}
+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);
+  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 = 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">${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));
+    });
+    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(f?.name ?? id, money(total * bet, cur), commit);
+    } else {
+      if (blocksBuy && boosts.size > 0) return;
+      const cost = (f?.cost ?? 0) * bet;
+      askConfirm(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); }
+`;
 
 // src/bootError.ts
 var host = null;
-var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var esc4 = (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.";
@@ -4428,10 +4672,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">${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>` : ""}
+      <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>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -4511,9 +4755,11 @@ exports.defaultSpinSkin = defaultSpinSkin;
 exports.drawSpin = drawSpin;
 exports.hideBootError = hideBootError;
 exports.isDesktop = isDesktop;
+exports.mountBuyFeatureModal = mountBuyFeatureModal;
 exports.mountHud = mountHud;
 exports.mountInfoMenu = mountInfoMenu;
 exports.showBootError = showBootError;
+exports.showConfirm = showConfirm;
 exports.svgSpinSkin = svgSpinSkin;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map