@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.cjs +23 -104
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -32
- package/dist/index.d.ts +2 -32
- package/dist/index.js +24 -104
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
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 {
|
|
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,
|
|
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 {
|
|
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,
|
|
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 =
|
|
3400
|
-
const netView =
|
|
3401
|
-
const timerView =
|
|
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
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
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
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
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
|
-
|
|
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
|
|
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,
|
|
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
|