@open-slot-ui/pixi 0.8.2 → 0.8.3

package/dist/index.d.cts

@@ -762,6 +762,31 @@ interface BuyFeatureOptions {
 /** Mount the buy-feature modal. Returns a leak-free teardown. */
 declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
 
+/** Minimal HUD surface the confirm needs — the translator + theme font. */
+interface ConfirmUI {
+    t(key: string, params?: Record<string, string | number>): string;
+    theme: {
+        type: {
+            family: string;
+        };
+    };
+}
+interface ConfirmOptions {
+    /** Heading (already resolved text, or an i18n key). Default `Buy Feature`. */
+    title?: string;
+    /** Body message (already resolved). */
+    message: string;
+    /** Confirm button label (resolved text or i18n key). Default `openui.confirm`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `openui.cancel`. */
+    cancelLabel?: string;
+}
+/**
+ * Show the universal confirm dialog. Resolves `true` on Confirm, `false` on Cancel / backdrop
+ * / Escape. Self-mounting + self-cleaning; layers above everything (z-index above the buy modal).
+ */
+declare function showConfirm(ui: ConfirmUI, opts: ConfirmOptions): Promise<boolean>;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -844,4 +869,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, type ConfirmOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm, svgSpinSkin };

package/dist/index.d.ts

@@ -762,6 +762,31 @@ interface BuyFeatureOptions {
 /** Mount the buy-feature modal. Returns a leak-free teardown. */
 declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
 
+/** Minimal HUD surface the confirm needs — the translator + theme font. */
+interface ConfirmUI {
+    t(key: string, params?: Record<string, string | number>): string;
+    theme: {
+        type: {
+            family: string;
+        };
+    };
+}
+interface ConfirmOptions {
+    /** Heading (already resolved text, or an i18n key). Default `Buy Feature`. */
+    title?: string;
+    /** Body message (already resolved). */
+    message: string;
+    /** Confirm button label (resolved text or i18n key). Default `openui.confirm`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `openui.cancel`. */
+    cancelLabel?: string;
+}
+/**
+ * Show the universal confirm dialog. Resolves `true` on Confirm, `false` on Cancel / backdrop
+ * / Escape. Self-mounting + self-cleaning; layers above everything (z-index above the buy modal).
+ */
+declare function showConfirm(ui: ConfirmUI, opts: ConfirmOptions): Promise<boolean>;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -844,4 +869,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, type ConfirmOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm, svgSpinSkin };

package/dist/index.js

@@ -562,6 +562,63 @@ 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();
@@ -680,17 +737,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),
@@ -707,7 +762,7 @@ function mountHud(app, spec = {}, opts = {}) {
 function money(amount, cur) {
   return formatAmount(amount, cur);
 }
-var esc2 = (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 mountBuyFeatureModal(_app, hud, features, opts = {}) {
   const ui = hud.ui;
   const tr = (k) => ui.t(k);
@@ -733,23 +788,14 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
     <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>
+        <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">${esc2(tr("Bet"))}</span><b id="bfm-betval">\u2014</b></div>
+          <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>
-    <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;
@@ -760,29 +806,11 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
   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 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;
@@ -814,11 +842,11 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
             <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>
+              <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" : ""}>${esc2(label)}</button>
+          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc3(label)}</button>
         </div>`;
     }).join("");
     betValEl.textContent = money(bet, cur);
@@ -846,11 +874,11 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
         return;
       }
       const total = 1 + (f?.cost ?? 0);
-      askConfirm(total, f?.name ?? id, money(total * bet, cur), commit);
+      askConfirm(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), () => {
+      askConfirm(f?.name ?? id, money(cost, cur), () => {
         ui.bus.emit("cardActivated", { id });
         close();
         opts.onBuy?.(id, cost);
@@ -919,22 +947,11 @@ var BFM_CSS = `
 .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 esc3 = (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.";
@@ -948,10 +965,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">${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>` : ""}
+      <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;
@@ -979,6 +996,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map