@open-slot-ui/pixi 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,30 +1,6 @@
1
1
  import * as pixi_js from 'pixi.js';
2
2
  import { Container, Ticker, Texture, Application, TextStyleOptions, Graphics } from 'pixi.js';
3
- 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';
4
-
5
- type StatusBarSide = 'top' | 'bottom';
6
- /**
7
- * A thin, full-width black-and-white status strip pinned to the top or bottom edge,
8
- * holding the compliance readouts (net · RTP · session) as inline items — white
9
- * text on a dark bar, no theme accent. Only the jurisdiction-revealed readouts take
10
- * a slot, so it adapts from 0→3 items (and hides itself when empty). A full-screen
11
- * overlay (OpenUIPixi manages it + insets the HUD by {@link StatusBarView.heightFor}
12
- * so controls never sit under it).
13
- */
14
- declare class StatusBarView extends Container {
15
- private readonly ui;
16
- private readonly side;
17
- private readonly bg;
18
- private readonly items;
19
- private screen;
20
- private readonly disposers;
21
- /** The strip's pixel height for the current screen (used for the HUD margin too). */
22
- static heightFor(screen: ScreenState): number;
23
- constructor(controls: ReadoutControl[], ui: OpenUI, ticker: Ticker, side: StatusBarSide);
24
- applyLayout(screen: ScreenState): void;
25
- private relayout;
26
- dispose(): void;
27
- }
3
+ 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';
28
4
 
29
5
  /**
30
6
  * Base view: a Pixi Container bound to a core Control. Owns layout placement and
@@ -145,12 +121,6 @@ interface OpenUIPixiOptions {
145
121
  * `'radial'` fans the count chips around the spin button.
146
122
  */
147
123
  autoplayPicker?: 'drawer' | 'radial';
148
- /**
149
- * Put the compliance readouts (net · RTP · session) in a thin status strip at the
150
- * `'top'` or `'bottom'` edge instead of at screen corners. Each readout still only
151
- * shows when its jurisdiction `display*` flag is set.
152
- */
153
- statusBar?: StatusBarSide;
154
124
  /**
155
125
  * Text colour for the top-corner compliance readouts (RTP / net / session). Defaults
156
126
  * to the theme text colour; a light-background host can pass a dark colour so the
@@ -949,4 +919,4 @@ declare class Tweener {
949
919
  /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
950
920
  declare function isDesktop(): boolean;
951
921
 
952
- 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 };
922
+ 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 CHANGED
@@ -1,30 +1,6 @@
1
1
  import * as pixi_js from 'pixi.js';
2
2
  import { Container, Ticker, Texture, Application, TextStyleOptions, Graphics } from 'pixi.js';
3
- 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';
4
-
5
- type StatusBarSide = 'top' | 'bottom';
6
- /**
7
- * A thin, full-width black-and-white status strip pinned to the top or bottom edge,
8
- * holding the compliance readouts (net · RTP · session) as inline items — white
9
- * text on a dark bar, no theme accent. Only the jurisdiction-revealed readouts take
10
- * a slot, so it adapts from 0→3 items (and hides itself when empty). A full-screen
11
- * overlay (OpenUIPixi manages it + insets the HUD by {@link StatusBarView.heightFor}
12
- * so controls never sit under it).
13
- */
14
- declare class StatusBarView extends Container {
15
- private readonly ui;
16
- private readonly side;
17
- private readonly bg;
18
- private readonly items;
19
- private screen;
20
- private readonly disposers;
21
- /** The strip's pixel height for the current screen (used for the HUD margin too). */
22
- static heightFor(screen: ScreenState): number;
23
- constructor(controls: ReadoutControl[], ui: OpenUI, ticker: Ticker, side: StatusBarSide);
24
- applyLayout(screen: ScreenState): void;
25
- private relayout;
26
- dispose(): void;
27
- }
3
+ 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';
28
4
 
29
5
  /**
30
6
  * Base view: a Pixi Container bound to a core Control. Owns layout placement and
@@ -145,12 +121,6 @@ interface OpenUIPixiOptions {
145
121
  * `'radial'` fans the count chips around the spin button.
146
122
  */
147
123
  autoplayPicker?: 'drawer' | 'radial';
148
- /**
149
- * Put the compliance readouts (net · RTP · session) in a thin status strip at the
150
- * `'top'` or `'bottom'` edge instead of at screen corners. Each readout still only
151
- * shows when its jurisdiction `display*` flag is set.
152
- */
153
- statusBar?: StatusBarSide;
154
124
  /**
155
125
  * Text colour for the top-corner compliance readouts (RTP / net / session). Defaults
156
126
  * to the theme text colour; a light-background host can pass a dark colour so the
@@ -949,4 +919,4 @@ declare class Tweener {
949
919
  /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
950
920
  declare function isDesktop(): boolean;
951
921
 
952
- 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 };
922
+ 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 CHANGED
@@ -3245,73 +3245,6 @@ var DialogView = class extends ControlView {
3245
3245
  super.dispose();
3246
3246
  }
3247
3247
  };
3248
- var BAR_H = 26;
3249
- var StatusBarView = class _StatusBarView extends Container {
3250
- constructor(controls, ui, ticker, side) {
3251
- super();
3252
- this.ui = ui;
3253
- this.side = side;
3254
- this.zIndex = 300;
3255
- this.addChild(this.bg);
3256
- for (const c of controls) {
3257
- const view = new ReadoutView(c, ui, ticker, { inline: true, mono: true });
3258
- this.addChild(view);
3259
- this.items.push({ id: c.id, view });
3260
- }
3261
- this.disposers.push(
3262
- this.ui.on("visibilityChanged", ({ id }) => {
3263
- if (this.items.some((it) => it.id === id)) this.relayout();
3264
- })
3265
- );
3266
- }
3267
- ui;
3268
- side;
3269
- bg = new Graphics();
3270
- items = [];
3271
- screen;
3272
- disposers = [];
3273
- /** The strip's pixel height for the current screen (used for the HUD margin too). */
3274
- static heightFor(screen) {
3275
- const scale = Math.max(0.7, Math.min(1.4, screen.scale));
3276
- return Math.round(BAR_H * scale);
3277
- }
3278
- applyLayout(screen) {
3279
- this.screen = screen;
3280
- this.relayout();
3281
- }
3282
- relayout() {
3283
- const s = this.screen;
3284
- if (!s) return;
3285
- const W = s.width;
3286
- const H = s.height;
3287
- const scale = Math.max(0.7, Math.min(1.4, s.scale));
3288
- const barH = _StatusBarView.heightFor(s);
3289
- const y = this.side === "top" ? 0 : H - barH;
3290
- this.position.set(0, 0);
3291
- const visible = this.items.filter((it) => !this.ui.hidden.has(it.id));
3292
- for (const it of this.items) it.view.visible = !this.ui.hidden.has(it.id);
3293
- this.bg.clear();
3294
- this.visible = visible.length > 0;
3295
- if (!visible.length) return;
3296
- const edgeY = this.side === "top" ? barH - 1 : y;
3297
- this.bg.rect(0, y, W, barH).fill({ color: 789776, alpha: 0.92 }).rect(0, edgeY, W, 1).fill({ color: 16777215, alpha: 0.18 });
3298
- const n = visible.length;
3299
- const cy = y + barH / 2;
3300
- const pad = 18 * scale;
3301
- const usableW = Math.max(160, W - pad * 2);
3302
- visible.forEach((it, i) => {
3303
- it.view.position.set(pad + usableW * ((i + 0.5) / n), cy);
3304
- it.view.scale.set(scale);
3305
- });
3306
- }
3307
- dispose() {
3308
- for (const it of this.items) it.view.dispose();
3309
- this.items.length = 0;
3310
- for (const d of this.disposers) d();
3311
- this.disposers.length = 0;
3312
- if (!this.destroyed) this.destroy({ children: true });
3313
- }
3314
- };
3315
3248
 
3316
3249
  // src/OpenUIPixi.ts
3317
3250
  function easeInOutCubic(p) {
@@ -3394,11 +3327,10 @@ var OpenUIPixi = class {
3394
3327
  const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "fullscreen", iconTarget: 60, mono: true });
3395
3328
  muteView.zIndex = 65;
3396
3329
  fullscreenView.zIndex = 65;
3397
- const statusBarSide = this.opts.statusBar;
3398
3330
  const roOpts = { prefix: true, fill: this.opts.readoutColor };
3399
- const rtpView = statusBarSide ? void 0 : new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
3400
- const netView = statusBarSide ? void 0 : new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
3401
- const timerView = statusBarSide ? void 0 : new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
3331
+ const rtpView = new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
3332
+ const netView = new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
3333
+ const timerView = new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
3402
3334
  const entries = [
3403
3335
  [this.ui.spin.id, spinView],
3404
3336
  [this.ui.balance.id, balanceView],
@@ -3412,9 +3344,9 @@ var OpenUIPixi = class {
3412
3344
  [this.ui.muteButton.id, muteView],
3413
3345
  [this.ui.fullscreenButton.id, fullscreenView]
3414
3346
  ];
3415
- if (rtpView) entries.push([this.ui.rtp.id, rtpView]);
3416
- if (netView) entries.push([this.ui.netPosition.id, netView]);
3417
- if (timerView) entries.push([this.ui.sessionTimer.id, timerView]);
3347
+ entries.push([this.ui.rtp.id, rtpView]);
3348
+ entries.push([this.ui.netPosition.id, netView]);
3349
+ entries.push([this.ui.sessionTimer.id, timerView]);
3418
3350
  const viewById = /* @__PURE__ */ new Map();
3419
3351
  const idByView = /* @__PURE__ */ new Map();
3420
3352
  for (const [id, view] of entries) {
@@ -3475,28 +3407,22 @@ var OpenUIPixi = class {
3475
3407
  const dialog = new DialogView(this.ui.noticePanel, this.ui.noticeBlocks, this.ui.noticeActions, this.ui, ticker, { controlSkins: this.opts.controlSkins });
3476
3408
  this.root.addChild(dialog);
3477
3409
  this.overlays.push(dialog);
3478
- if (statusBarSide) {
3479
- const bar = new StatusBarView([this.ui.netPosition, this.ui.rtp, this.ui.sessionTimer], this.ui, ticker, statusBarSide);
3480
- this.root.addChild(bar);
3481
- this.overlays.push(bar);
3482
- } else {
3483
- const vignette = new Graphics();
3484
- vignette.zIndex = -1;
3485
- this.root.addChild(vignette);
3486
- this.overlays.push({
3487
- applyLayout: (s) => {
3488
- const r = 200 * s.scale;
3489
- vignette.clear();
3490
- for (let i = 0; i < 14; i++) {
3491
- const t = i / 14;
3492
- vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
3493
- }
3494
- },
3495
- dispose: () => {
3496
- if (!vignette.destroyed) vignette.destroy();
3410
+ const vignette = new Graphics();
3411
+ vignette.zIndex = -1;
3412
+ this.root.addChild(vignette);
3413
+ this.overlays.push({
3414
+ applyLayout: (s) => {
3415
+ const r = 200 * s.scale;
3416
+ vignette.clear();
3417
+ for (let i = 0; i < 14; i++) {
3418
+ const t = i / 14;
3419
+ vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
3497
3420
  }
3498
- });
3499
- }
3421
+ },
3422
+ dispose: () => {
3423
+ if (!vignette.destroyed) vignette.destroy();
3424
+ }
3425
+ });
3500
3426
  const replayBadge = new Container();
3501
3427
  const replayBg = new Graphics();
3502
3428
  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 +3436,7 @@ var OpenUIPixi = class {
3510
3436
  const w = replayText.width + 36;
3511
3437
  const h = 32;
3512
3438
  replayBg.clear().roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: 789776 }).stroke({ width: 2, color: 16777215 });
3513
- const top = statusBarSide === "top" ? StatusBarView.heightFor(s) + 28 : 40;
3514
- replayBadge.position.set(s.width / 2, top);
3439
+ replayBadge.position.set(s.width / 2, 40);
3515
3440
  },
3516
3441
  dispose: () => {
3517
3442
  if (!replayBadge.destroyed) replayBadge.destroy({ children: true });
@@ -3527,16 +3452,11 @@ var OpenUIPixi = class {
3527
3452
  );
3528
3453
  const applyLayout = () => {
3529
3454
  const screen = this.ui.screen.get();
3530
- const barH = statusBarSide ? StatusBarView.heightFor(screen) : 0;
3531
3455
  this.slideBaseY.clear();
3532
3456
  this.slideSign.clear();
3533
3457
  for (const v of this.views) {
3534
3458
  v.applyLayout(screen);
3535
3459
  const anchor = this.ui.control(idByView.get(v) ?? "")?.layout.anchor ?? "bottom-center";
3536
- if (barH) {
3537
- if (statusBarSide === "top" && anchor.startsWith("top")) v.y += barH;
3538
- else if (statusBarSide === "bottom" && anchor.startsWith("bottom")) v.y -= barH;
3539
- }
3540
3460
  this.slideBaseY.set(v, v.y);
3541
3461
  this.slideSign.set(v, anchor.startsWith("top") ? -1 : 1);
3542
3462
  }
@@ -3949,7 +3869,7 @@ function mountHud(app, spec = {}, opts = {}) {
3949
3869
  if (menu && spec.game && (spec.game.name || spec.game.version)) {
3950
3870
  menu.push({ kind: "legal", id: "openui-game-info", text: [spec.game.name, spec.game.version ? `v${spec.game.version}` : ""].filter(Boolean).join(" \xB7 ") });
3951
3871
  }
3952
- const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu, statusBar: pixiOpts.statusBar ?? spec.statusBar });
3872
+ const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
3953
3873
  pixi.mount(app);
3954
3874
  const extra = [];
3955
3875
  if (spec.panels?.length) {
@@ -4055,6 +3975,6 @@ function svgSpinSkin(textures) {
4055
3975
  };
4056
3976
  }
4057
3977
 
4058
- 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 };
3978
+ 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 };
4059
3979
  //# sourceMappingURL=index.js.map
4060
3980
  //# sourceMappingURL=index.js.map