@open-slot-ui/pixi 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1,30 +1,6 @@
 import * as pixi_js from 'pixi.js';
 import { Container, Ticker, Texture, Application, TextStyleOptions, Graphics } from 'pixi.js';
-import { ScreenState, ReadoutControl, OpenUI, Control, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
-
-type StatusBarSide = 'top' | 'bottom';
-/**
- * A thin, full-width black-and-white status strip pinned to the top or bottom edge,
- * holding the compliance readouts (net · RTP · session) as inline items — white
- * text on a dark bar, no theme accent. Only the jurisdiction-revealed readouts take
- * a slot, so it adapts from 0→3 items (and hides itself when empty). A full-screen
- * overlay (OpenUIPixi manages it + insets the HUD by {@link StatusBarView.heightFor}
- * so controls never sit under it).
- */
-declare class StatusBarView extends Container {
-    private readonly ui;
-    private readonly side;
-    private readonly bg;
-    private readonly items;
-    private screen;
-    private readonly disposers;
-    /** The strip's pixel height for the current screen (used for the HUD margin too). */
-    static heightFor(screen: ScreenState): number;
-    constructor(controls: ReadoutControl[], ui: OpenUI, ticker: Ticker, side: StatusBarSide);
-    applyLayout(screen: ScreenState): void;
-    private relayout;
-    dispose(): void;
-}
+import { Control, OpenUI, ScreenState, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, ReadoutControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
 
 /**
  * Base view: a Pixi Container bound to a core Control. Owns layout placement and
@@ -145,12 +121,6 @@ interface OpenUIPixiOptions {
      * `'radial'` fans the count chips around the spin button.
      */
     autoplayPicker?: 'drawer' | 'radial';
-    /**
-     * Put the compliance readouts (net · RTP · session) in a thin status strip at the
-     * `'top'` or `'bottom'` edge instead of at screen corners. Each readout still only
-     * shows when its jurisdiction `display*` flag is set.
-     */
-    statusBar?: StatusBarSide;
     /**
      * Text colour for the top-corner compliance readouts (RTP / net / session). Defaults
      * to the theme text colour; a light-background host can pass a dark colour so the
@@ -385,7 +355,6 @@ declare class TurboView extends ControlView {
     private readonly turbo;
     private readonly art;
     private readonly bg;
-    private readonly pips;
     private sprite;
     private readonly tween;
     private readonly modeTex;
@@ -949,4 +918,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 BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, type StatusBarSide, StatusBarView, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };

package/dist/index.d.ts

@@ -1,30 +1,6 @@
 import * as pixi_js from 'pixi.js';
 import { Container, Ticker, Texture, Application, TextStyleOptions, Graphics } from 'pixi.js';
-import { ScreenState, ReadoutControl, OpenUI, Control, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
-
-type StatusBarSide = 'top' | 'bottom';
-/**
- * A thin, full-width black-and-white status strip pinned to the top or bottom edge,
- * holding the compliance readouts (net · RTP · session) as inline items — white
- * text on a dark bar, no theme accent. Only the jurisdiction-revealed readouts take
- * a slot, so it adapts from 0→3 items (and hides itself when empty). A full-screen
- * overlay (OpenUIPixi manages it + insets the HUD by {@link StatusBarView.heightFor}
- * so controls never sit under it).
- */
-declare class StatusBarView extends Container {
-    private readonly ui;
-    private readonly side;
-    private readonly bg;
-    private readonly items;
-    private screen;
-    private readonly disposers;
-    /** The strip's pixel height for the current screen (used for the HUD margin too). */
-    static heightFor(screen: ScreenState): number;
-    constructor(controls: ReadoutControl[], ui: OpenUI, ticker: Ticker, side: StatusBarSide);
-    applyLayout(screen: ScreenState): void;
-    private relayout;
-    dispose(): void;
-}
+import { Control, OpenUI, ScreenState, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, ReadoutControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
 
 /**
  * Base view: a Pixi Container bound to a core Control. Owns layout placement and
@@ -145,12 +121,6 @@ interface OpenUIPixiOptions {
      * `'radial'` fans the count chips around the spin button.
      */
     autoplayPicker?: 'drawer' | 'radial';
-    /**
-     * Put the compliance readouts (net · RTP · session) in a thin status strip at the
-     * `'top'` or `'bottom'` edge instead of at screen corners. Each readout still only
-     * shows when its jurisdiction `display*` flag is set.
-     */
-    statusBar?: StatusBarSide;
     /**
      * Text colour for the top-corner compliance readouts (RTP / net / session). Defaults
      * to the theme text colour; a light-background host can pass a dark colour so the
@@ -385,7 +355,6 @@ declare class TurboView extends ControlView {
     private readonly turbo;
     private readonly art;
     private readonly bg;
-    private readonly pips;
     private sprite;
     private readonly tween;
     private readonly modeTex;
@@ -949,4 +918,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 BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, type StatusBarSide, StatusBarView, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };

package/dist/index.js

@@ -1511,7 +1511,7 @@ var TurboView = class extends ControlView {
     } else {
       this.art.addChild(this.bg);
     }
-    this.addChild(this.art, this.pips);
+    this.addChild(this.art);
     this.eventMode = "static";
     this.cursor = "pointer";
     this.hitArea = new Circle(0, 0, (this.sprite ? this.target / 2 : this.radius) + 8);
@@ -1526,7 +1526,6 @@ var TurboView = class extends ControlView {
   turbo;
   art = new Container();
   bg = new Graphics();
-  pips = new Graphics();
   sprite;
   tween;
   modeTex;
@@ -1563,19 +1562,6 @@ var TurboView = class extends ControlView {
       this.bg.circle(0, 0, r).fill({ color: lit ? th.color.accent : th.color.surface, alpha: lit ? Math.min(1, 0.55 + i * 0.25) : 1 }).stroke({ width: 4, color: th.color.accent });
       this.bg.poly([-6, -r * 0.42, 8, -4, 0, -4, 7, r * 0.42, -9, 2, 0, 2]).fill({ color: lit ? th.color.accentText : th.color.accent, alpha: disabled ? 0.5 : 1 });
     }
-    this.pips.clear();
-    const steps = this.turbo.modeCount - 1;
-    if (steps >= 2) {
-      const baseR = this.sprite ? this.target / 2 : this.radius;
-      const gap = 16;
-      const total = (steps - 1) * gap;
-      const y = baseR + 14;
-      for (let s = 0; s < steps; s++) {
-        const x = -total / 2 + s * gap;
-        const on = s < i;
-        this.pips.circle(x, y, 5).fill({ color: on ? th.color.accent : th.color.surface, alpha: disabled ? 0.5 : 1 }).stroke({ width: 2, color: th.color.accent, alpha: disabled ? 0.5 : 1 });
-      }
-    }
   }
   play(t) {
     this.animating = true;
@@ -3245,73 +3231,6 @@ var DialogView = class extends ControlView {
     super.dispose();
   }
 };
-var BAR_H = 26;
-var StatusBarView = class _StatusBarView extends Container {
-  constructor(controls, ui, ticker, side) {
-    super();
-    this.ui = ui;
-    this.side = side;
-    this.zIndex = 300;
-    this.addChild(this.bg);
-    for (const c of controls) {
-      const view = new ReadoutView(c, ui, ticker, { inline: true, mono: true });
-      this.addChild(view);
-      this.items.push({ id: c.id, view });
-    }
-    this.disposers.push(
-      this.ui.on("visibilityChanged", ({ id }) => {
-        if (this.items.some((it) => it.id === id)) this.relayout();
-      })
-    );
-  }
-  ui;
-  side;
-  bg = new Graphics();
-  items = [];
-  screen;
-  disposers = [];
-  /** The strip's pixel height for the current screen (used for the HUD margin too). */
-  static heightFor(screen) {
-    const scale = Math.max(0.7, Math.min(1.4, screen.scale));
-    return Math.round(BAR_H * scale);
-  }
-  applyLayout(screen) {
-    this.screen = screen;
-    this.relayout();
-  }
-  relayout() {
-    const s = this.screen;
-    if (!s) return;
-    const W = s.width;
-    const H = s.height;
-    const scale = Math.max(0.7, Math.min(1.4, s.scale));
-    const barH = _StatusBarView.heightFor(s);
-    const y = this.side === "top" ? 0 : H - barH;
-    this.position.set(0, 0);
-    const visible = this.items.filter((it) => !this.ui.hidden.has(it.id));
-    for (const it of this.items) it.view.visible = !this.ui.hidden.has(it.id);
-    this.bg.clear();
-    this.visible = visible.length > 0;
-    if (!visible.length) return;
-    const edgeY = this.side === "top" ? barH - 1 : y;
-    this.bg.rect(0, y, W, barH).fill({ color: 789776, alpha: 0.92 }).rect(0, edgeY, W, 1).fill({ color: 16777215, alpha: 0.18 });
-    const n = visible.length;
-    const cy = y + barH / 2;
-    const pad = 18 * scale;
-    const usableW = Math.max(160, W - pad * 2);
-    visible.forEach((it, i) => {
-      it.view.position.set(pad + usableW * ((i + 0.5) / n), cy);
-      it.view.scale.set(scale);
-    });
-  }
-  dispose() {
-    for (const it of this.items) it.view.dispose();
-    this.items.length = 0;
-    for (const d of this.disposers) d();
-    this.disposers.length = 0;
-    if (!this.destroyed) this.destroy({ children: true });
-  }
-};
 
 // src/OpenUIPixi.ts
 function easeInOutCubic(p) {
@@ -3394,11 +3313,10 @@ var OpenUIPixi = class {
     const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "fullscreen", iconTarget: 60, mono: true });
     muteView.zIndex = 65;
     fullscreenView.zIndex = 65;
-    const statusBarSide = this.opts.statusBar;
     const roOpts = { prefix: true, fill: this.opts.readoutColor };
-    const rtpView = statusBarSide ? void 0 : new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
-    const netView = statusBarSide ? void 0 : new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
-    const timerView = statusBarSide ? void 0 : new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
+    const rtpView = new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
+    const netView = new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
+    const timerView = new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
     const entries = [
       [this.ui.spin.id, spinView],
       [this.ui.balance.id, balanceView],
@@ -3412,9 +3330,9 @@ var OpenUIPixi = class {
       [this.ui.muteButton.id, muteView],
       [this.ui.fullscreenButton.id, fullscreenView]
     ];
-    if (rtpView) entries.push([this.ui.rtp.id, rtpView]);
-    if (netView) entries.push([this.ui.netPosition.id, netView]);
-    if (timerView) entries.push([this.ui.sessionTimer.id, timerView]);
+    entries.push([this.ui.rtp.id, rtpView]);
+    entries.push([this.ui.netPosition.id, netView]);
+    entries.push([this.ui.sessionTimer.id, timerView]);
     const viewById = /* @__PURE__ */ new Map();
     const idByView = /* @__PURE__ */ new Map();
     for (const [id, view] of entries) {
@@ -3475,28 +3393,22 @@ var OpenUIPixi = class {
     const dialog = new DialogView(this.ui.noticePanel, this.ui.noticeBlocks, this.ui.noticeActions, this.ui, ticker, { controlSkins: this.opts.controlSkins });
     this.root.addChild(dialog);
     this.overlays.push(dialog);
-    if (statusBarSide) {
-      const bar = new StatusBarView([this.ui.netPosition, this.ui.rtp, this.ui.sessionTimer], this.ui, ticker, statusBarSide);
-      this.root.addChild(bar);
-      this.overlays.push(bar);
-    } else {
-      const vignette = new Graphics();
-      vignette.zIndex = -1;
-      this.root.addChild(vignette);
-      this.overlays.push({
-        applyLayout: (s) => {
-          const r = 200 * s.scale;
-          vignette.clear();
-          for (let i = 0; i < 14; i++) {
-            const t = i / 14;
-            vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
-          }
-        },
-        dispose: () => {
-          if (!vignette.destroyed) vignette.destroy();
+    const vignette = new Graphics();
+    vignette.zIndex = -1;
+    this.root.addChild(vignette);
+    this.overlays.push({
+      applyLayout: (s) => {
+        const r = 200 * s.scale;
+        vignette.clear();
+        for (let i = 0; i < 14; i++) {
+          const t = i / 14;
+          vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
         }
-      });
-    }
+      },
+      dispose: () => {
+        if (!vignette.destroyed) vignette.destroy();
+      }
+    });
     const replayBadge = new Container();
     const replayBg = new Graphics();
     const replayText = new Text({ text: this.ui.t("openui.replay").toUpperCase(), style: { fontFamily: this.ui.theme.type.family, fontSize: 16, fontWeight: "800", fill: 16777215, letterSpacing: 2 } });
@@ -3510,8 +3422,7 @@ var OpenUIPixi = class {
         const w = replayText.width + 36;
         const h = 32;
         replayBg.clear().roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: 789776 }).stroke({ width: 2, color: 16777215 });
-        const top = statusBarSide === "top" ? StatusBarView.heightFor(s) + 28 : 40;
-        replayBadge.position.set(s.width / 2, top);
+        replayBadge.position.set(s.width / 2, 40);
       },
       dispose: () => {
         if (!replayBadge.destroyed) replayBadge.destroy({ children: true });
@@ -3527,16 +3438,11 @@ var OpenUIPixi = class {
     );
     const applyLayout = () => {
       const screen = this.ui.screen.get();
-      const barH = statusBarSide ? StatusBarView.heightFor(screen) : 0;
       this.slideBaseY.clear();
       this.slideSign.clear();
       for (const v of this.views) {
         v.applyLayout(screen);
         const anchor = this.ui.control(idByView.get(v) ?? "")?.layout.anchor ?? "bottom-center";
-        if (barH) {
-          if (statusBarSide === "top" && anchor.startsWith("top")) v.y += barH;
-          else if (statusBarSide === "bottom" && anchor.startsWith("bottom")) v.y -= barH;
-        }
         this.slideBaseY.set(v, v.y);
         this.slideSign.set(v, anchor.startsWith("top") ? -1 : 1);
       }
@@ -3949,7 +3855,7 @@ function mountHud(app, spec = {}, opts = {}) {
   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, statusBar: pixiOpts.statusBar ?? spec.statusBar });
+  const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
   pixi.mount(app);
   const extra = [];
   if (spec.panels?.length) {
@@ -4007,7 +3913,7 @@ function mountHud(app, spec = {}, opts = {}) {
       ui.showNotice(
         [
           { kind: "heading", id: "buy-title", text: o.title ?? "openui.buyFeature.title" },
-          { kind: "callout", id: "buy-body", tone: "bonus", text: o.message ?? "openui.buyFeature.message" }
+          { kind: "text", id: "buy-body", text: o.message ?? "openui.buyFeature.message" }
         ],
         [
           { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
@@ -4055,6 +3961,6 @@ function svgSpinSkin(textures) {
   };
 }
 
-export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, PanelBodyView, PanelView, PopoverView, ReadoutView, SelectView, SliderView, SpinView, StatusBarView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, PanelBodyView, PanelView, PopoverView, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map