@open-slot-ui/pixi 0.4.2 → 0.5.1

package/dist/index.cjs

@@ -172,15 +172,14 @@ var SpinView = class extends ControlView {
     this.holdDelayMs = opts.holdDelayMs ?? 260;
     this.skin = skinFactory(ui.theme);
     this.art.addChild(this.skin.view);
-    const c = ui.theme.color;
-    const ring = new pixi_js.Graphics().circle(0, 0, 64).fill({ color: c.surface }).stroke({ width: 6, color: c.accent });
-    this.fsCount = new pixi_js.Text({ text: "0", style: { fontFamily: ui.theme.type.family, fontSize: 44, fill: c.text, fontWeight: "800" } });
+    const fsRing = new pixi_js.Graphics().circle(0, 0, 98).fill({ color: 16777215 }).circle(0, 0, 94).stroke({ width: 8, color: 657930 });
+    this.fsCount = new pixi_js.Text({ text: "0", style: { fontFamily: ui.theme.type.family, fontSize: 60, fill: 657930, fontWeight: "900" } });
     this.fsCount.anchor.set(0.5);
-    this.fsCount.y = -8;
-    this.fsLabel = new pixi_js.Text({ text: ui.t("openui.freeSpins"), style: { fontFamily: ui.theme.type.family, fontSize: 18, fill: c.accent, fontWeight: "800", letterSpacing: 2 } });
+    this.fsCount.y = -14;
+    this.fsLabel = new pixi_js.Text({ text: ui.t("openui.freeSpins"), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: 657930, fontWeight: "900", letterSpacing: 3 } });
     this.fsLabel.anchor.set(0.5);
-    this.fsLabel.y = 26;
-    this.fsFace.addChild(ring, this.fsCount, this.fsLabel);
+    this.fsLabel.y = 34;
+    this.fsFace.addChild(fsRing, this.fsCount, this.fsLabel);
     this.fsFace.visible = false;
     this.art.addChild(this.fsFace);
     const stopRing = new pixi_js.Graphics().circle(0, 0, 96).fill({ color: 16777215 }).stroke({ width: 7, color: 657930 });
@@ -1220,7 +1219,6 @@ var ValueDisplayView = class extends ControlView {
   }
   build() {
     const theme = this.ui.theme;
-    const side = this.side();
     if (this.vd.label) {
       this.caption = new pixi_js.Text({
         // Figma: the label is NOT uppercased — "Баланс" / "Ставка" as authored.
@@ -1228,19 +1226,32 @@ var ValueDisplayView = class extends ControlView {
         style: { fontFamily: theme.type.family, fontSize: 28, fill: 16777215, fontWeight: "900", letterSpacing: 0 }
       });
       this.caption.anchor.set(0.5, 0.5);
-      const padX = 24;
-      const padY = 8;
-      const pillW = Math.ceil(this.caption.width) + padX * 2;
-      const pillH = Math.ceil(this.caption.height) + padY * 2;
-      const pillX = side === "left" ? 0 : side === "right" ? -pillW : -pillW / 2;
-      const pillY = -DIGIT_H / 2 - pillH - 14;
-      this.captionPill = new pixi_js.Graphics().roundRect(pillX, pillY, pillW, pillH, 12).fill({ color: 0 });
-      this.caption.position.set(pillX + pillW / 2, pillY + pillH / 2);
+      this.captionPill = new pixi_js.Graphics();
       this.addChild(this.captionPill, this.caption);
+      this.sizeCaptionPill();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        void document.fonts.ready.then(() => {
+          if (!this.destroyed && this.caption) this.sizeCaptionPill();
+        });
+      }
     }
     const cur = this.vd.currency.get();
     this.buildCounter(core.displayDigits(this.vd.get(), this.vd.digits, cur.decimals), this.vd.minorUnits);
   }
+  /** Size the caption pill to the caption's current measured width + padding and centre
+   *  the text in it, anchored to the value's side. Re-runnable (fonts-ready / relayout). */
+  sizeCaptionPill() {
+    if (!this.caption || !this.captionPill) return;
+    const side = this.side();
+    const padX = 24;
+    const padY = 8;
+    const pillW = Math.ceil(this.caption.width) + padX * 2;
+    const pillH = Math.ceil(this.caption.height) + padY * 2;
+    const pillX = side === "left" ? 0 : side === "right" ? -pillW : -pillW / 2;
+    const pillY = -DIGIT_H / 2 - pillH - 14;
+    this.captionPill.clear().roundRect(pillX, pillY, pillW, pillH, 12).fill({ color: 0 });
+    this.caption.position.set(pillX + pillW / 2, pillY + pillH / 2);
+  }
   /** (Re)create the rolling counter sized to `total` columns, starting at `fromMinor`. */
   buildCounter(total, fromMinor) {
     this.counter?.destroy();
@@ -1282,7 +1293,7 @@ var ValueDisplayView = class extends ControlView {
     const symbolMode = cur.display === "symbol" && !!cur.symbol;
     const affix = symbolMode ? cur.symbol : cur.code;
     if ((cur.position ?? "suffix") === "prefix") opts.prefix = symbolMode ? affix : `${affix} `;
-    else opts.suffix = symbolMode ? affix : ` ${affix}`;
+    else opts.suffix = ` ${affix}`;
     if (this.fitGsap) {
       opts.fit = {
         gsap: this.fitGsap,
@@ -1297,7 +1308,13 @@ var ValueDisplayView = class extends ControlView {
     if (this.fitGsap) {
       this.counter.x = 0;
     } else {
-      this.counter.x = side === "left" ? 0 : side === "right" ? -this.counter.width : -this.counter.width / 2;
+      const budget = core.valueFitMaxWidth(Math.max(this.vd.digits, FIT_BUDGET_COLS), DIGIT_W);
+      const natural = this.counter.width;
+      const k = natural > budget ? Math.max(0.5, budget / natural) : 1;
+      this.counter.scale.set(k);
+      this.counter.y = -DIGIT_H * k / 2;
+      const w = natural * k;
+      this.counter.x = side === "left" ? 0 : side === "right" ? -w : -w / 2;
     }
     this.addChild(this.counter);
   }
@@ -2390,6 +2407,16 @@ function buildBlockColumn(blocks, controls, ui, ticker, bodyW, opts = {}) {
     wrap.addChild(txt);
     return wrap;
   };
+  const hintNode = (s) => {
+    const wrap = new pixi_js.Container();
+    const txt = new pixi_js.Text({
+      text: s,
+      style: { fontFamily: t.type.family, fontSize: 12.5, fill: t.color.textDim, align: "center", wordWrap: true, wordWrapWidth: innerW * 0.86, lineHeight: 17 }
+    });
+    txt.anchor.set(0.5);
+    wrap.addChild(txt);
+    return wrap;
+  };
   const makeView = (b, control) => {
     const skin = opts.controlSkins?.[b.id];
     if (skin) return skin(control, ui, ticker);
@@ -2475,6 +2502,8 @@ function buildBlockColumn(blocks, controls, ui, ticker, bodyW, opts = {}) {
           if (b.kind === "slider") view.position.set(-130, -27);
           wrap.addChild(view);
           placeFixed(wrap, ROW_H);
+          const hint = b.hint;
+          if (hint) placeAuto(hintNode(tr(hint)), 12);
         }
       }
     }
@@ -2985,6 +3014,8 @@ var ReadoutView = class extends ControlView {
     const inline = opts.inline ?? false;
     this.prefix = opts.prefix ?? false;
     const fill = opts.fill ?? (opts.mono ? "#ffffff" : t.color.text);
+    this.baseFill = this.prefix ? opts.fill ?? "#ffffff" : fill;
+    this.accentFill = t.color.accent;
     if (this.prefix) {
       this.valueText = new pixi_js.Text({
         text: "",
@@ -3003,13 +3034,15 @@ var ReadoutView = class extends ControlView {
         this.ro.value.subscribe(() => this.render()),
         this.ui.locale.subscribe(() => {
           if (!this.destroyed) this.render();
-        })
+        }),
+        this.ro.emphasized.subscribe(() => this.applyEmphasis())
       );
       if (this.ro.currency) this.disposers.push(this.ro.currency.subscribe(() => this.render()));
       if (this.ro.kind === "duration") {
         this.tick = (tk) => this.ro.tick(tk.deltaMS / 1e3);
         this.ticker.add(this.tick);
       }
+      this.applyEmphasis();
       this.render();
       return;
     }
@@ -3044,10 +3077,12 @@ var ReadoutView = class extends ControlView {
       })
     );
     if (this.ro.currency) this.disposers.push(this.ro.currency.subscribe(() => this.render()));
+    this.disposers.push(this.ro.emphasized.subscribe(() => this.applyEmphasis()));
     if (this.ro.kind === "duration") {
       this.tick = (tk) => this.ro.tick(tk.deltaMS / 1e3);
       this.ticker.add(this.tick);
     }
+    this.applyEmphasis();
     this.render();
   }
   ro;
@@ -3056,6 +3091,14 @@ var ReadoutView = class extends ControlView {
   valueText;
   tick;
   prefix;
+  /** Normal + accent value colours for the `emphasized` (modified) tint. */
+  baseFill;
+  accentFill;
+  /** Tint the value in the theme accent while the readout is emphasized (modified). */
+  applyEmphasis() {
+    if (this.destroyed) return;
+    this.valueText.style.fill = this.ro.emphasized.get() ? this.accentFill : this.baseFill;
+  }
   render() {
     const v = this.ro.value.get();
     let text;
@@ -3291,6 +3334,10 @@ var OpenUIPixi = class {
   slideTickFn;
   slideBaseY = /* @__PURE__ */ new Map();
   slideSign = /* @__PURE__ */ new Map();
+  /** Buy-feature ⇄ total-win swap: only one shows at a time (see `setupBonusSwap`). */
+  bonusView;
+  totalWinView;
+  fadeFns = /* @__PURE__ */ new Map();
   /** The bus event log backing `window.__OPENUI__.events` (available after mount). */
   get eventLog() {
     return this._eventLog;
@@ -3338,6 +3385,9 @@ var OpenUIPixi = class {
     const bonusView = new ButtonView(this.ui.bonusButton, this.ui, ticker, { shape: "circle", radius: 60, iconTexture: ic.bonus, iconTarget: 130 });
     const betPlusView = new ButtonView(this.ui.betPlus, this.ui, ticker, { shape: "circle", radius: 30, iconTexture: ic.betPlus, iconTarget: 64 });
     const betMinusView = new ButtonView(this.ui.betMinus, this.ui, ticker, { shape: "circle", radius: 30, iconTexture: ic.betMinus, iconTarget: 64 });
+    const totalWinView = new ValueDisplayView(this.ui.totalWin, this.ui, ticker, this.opts.gsap);
+    this.bonusView = bonusView;
+    this.totalWinView = totalWinView;
     const muteView = new ButtonView(this.ui.muteButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "speaker", iconTarget: 60, mono: true });
     const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "fullscreen", iconTarget: 60, mono: true });
     muteView.zIndex = 65;
@@ -3354,6 +3404,7 @@ var OpenUIPixi = class {
       [this.ui.turbo.id, turboView],
       [this.ui.autoplay.id, autoplayView],
       [this.ui.bonusButton.id, bonusView],
+      [this.ui.totalWin.id, totalWinView],
       [this.ui.betPlus.id, betPlusView],
       [this.ui.betMinus.id, betMinusView],
       [this.ui.muteButton.id, muteView],
@@ -3482,9 +3533,81 @@ var OpenUIPixi = class {
       if (intro === "slide-in") this.setControlsVisible(true);
     }
     this.disposers.push(() => renderer.off("resize", onResize), unsubScreen);
+    this.setupBonusSwap();
     this._eventLog = new core.EventLog(this.ui.bus);
     if (this.opts.expose ?? true) this.expose();
   }
+  /**
+   * Wire the buy-feature ⇄ total-win swap. In base play the buy button shows (unless
+   * hidden by config/jurisdiction); once the spin button enters free-spins mode
+   * (`setFreeSpins(n > 0)` — you "can't buy" mid-bonus) the buy button fades out and
+   * the localized total-win counter fades in over the same slot, then back on exit.
+   */
+  setupBonusSwap() {
+    const bonus = this.bonusView;
+    const tw = this.totalWinView;
+    if (!bonus || !tw) return;
+    const apply = (inBonus, animate) => {
+      const bonusShouldShow = !inBonus && !this.ui.hidden.has(this.ui.bonusButton.id);
+      if (animate) {
+        if (inBonus) {
+          tw.visible = true;
+          tw.alpha = 0;
+          this.fadeTo(tw, 1, 220);
+          this.fadeTo(bonus, 0, 160, () => bonus.visible = false);
+        } else {
+          if (bonusShouldShow) {
+            bonus.visible = true;
+            bonus.alpha = 0;
+            this.fadeTo(bonus, this.ui.bonusButton.interactable ? 1 : 0.4, 220);
+          }
+          this.fadeTo(tw, 0, 160, () => tw.visible = false);
+        }
+      } else {
+        this.stopFade(bonus);
+        this.stopFade(tw);
+        bonus.visible = bonusShouldShow;
+        bonus.alpha = this.ui.bonusButton.interactable ? 1 : 0.4;
+        tw.visible = inBonus;
+        tw.alpha = inBonus ? 1 : 0;
+      }
+    };
+    apply(this.ui.spin.freeSpins.get() > 0, false);
+    this.disposers.push(this.ui.spin.freeSpins.subscribe((n) => apply(n > 0, true)));
+  }
+  /** Fade a view's alpha to `to` over `ms` (wall-clock paced); cancels any prior fade
+   *  on the same view. `onDone` runs once when it settles. */
+  fadeTo(view, to, ms, onDone) {
+    this.stopFade(view);
+    const t = this.appTicker;
+    const from = view.alpha;
+    if (!t || from === to) {
+      view.alpha = to;
+      onDone?.();
+      return;
+    }
+    const startMs = typeof performance !== "undefined" ? performance.now() : 0;
+    const fn = () => {
+      const nowMs = typeof performance !== "undefined" ? performance.now() : startMs + ms;
+      const k = Math.min(1, (nowMs - startMs) / Math.max(ms, 1));
+      view.alpha = from + (to - from) * k;
+      if (k >= 1) {
+        view.alpha = to;
+        this.stopFade(view);
+        onDone?.();
+      }
+    };
+    this.fadeFns.set(view, fn);
+    t.add(fn);
+  }
+  /** Cancel an in-flight fade on `view` (if any). */
+  stopFade(view) {
+    const fn = this.fadeFns.get(view);
+    if (fn) {
+      this.appTicker?.remove(fn);
+      this.fadeFns.delete(view);
+    }
+  }
   /**
    * Build the unified scrollable MENU bound to the ☰ panel. Composed `menu` blocks
    * are given by `mountHud`; absent → a default Settings-only menu. Built-in ids
@@ -3559,6 +3682,8 @@ var OpenUIPixi = class {
   unmount() {
     if (this.slideTickFn && this.appTicker) this.appTicker.remove(this.slideTickFn);
     this.slideTickFn = void 0;
+    for (const fn of this.fadeFns.values()) this.appTicker?.remove(fn);
+    this.fadeFns.clear();
     for (const v of this.views) v.dispose();
     this.views.length = 0;
     for (const o of this.overlays) o.dispose();
@@ -3904,9 +4029,11 @@ function mountHud(app, spec = {}, opts = {}) {
     on,
     setBalance: (n) => ui.balance.set(n),
     setBet: (n) => ui.bet.set(n),
+    setTotalWin: (n) => ui.totalWin.set(n),
     setCurrency: (c) => {
       ui.balance.setCurrency(c);
       ui.bet.setCurrency(c);
+      ui.totalWin.setCurrency(c);
       ui.netPosition.setCurrency(c);
     },
     applyJurisdiction: (j) => ui.applyJurisdiction(j),