@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.cjs
CHANGED
|
@@ -3247,73 +3247,6 @@ var DialogView = class extends ControlView {
|
|
|
3247
3247
|
super.dispose();
|
|
3248
3248
|
}
|
|
3249
3249
|
};
|
|
3250
|
-
var BAR_H = 26;
|
|
3251
|
-
var StatusBarView = class _StatusBarView extends pixi_js.Container {
|
|
3252
|
-
constructor(controls, ui, ticker, side) {
|
|
3253
|
-
super();
|
|
3254
|
-
this.ui = ui;
|
|
3255
|
-
this.side = side;
|
|
3256
|
-
this.zIndex = 300;
|
|
3257
|
-
this.addChild(this.bg);
|
|
3258
|
-
for (const c of controls) {
|
|
3259
|
-
const view = new ReadoutView(c, ui, ticker, { inline: true, mono: true });
|
|
3260
|
-
this.addChild(view);
|
|
3261
|
-
this.items.push({ id: c.id, view });
|
|
3262
|
-
}
|
|
3263
|
-
this.disposers.push(
|
|
3264
|
-
this.ui.on("visibilityChanged", ({ id }) => {
|
|
3265
|
-
if (this.items.some((it) => it.id === id)) this.relayout();
|
|
3266
|
-
})
|
|
3267
|
-
);
|
|
3268
|
-
}
|
|
3269
|
-
ui;
|
|
3270
|
-
side;
|
|
3271
|
-
bg = new pixi_js.Graphics();
|
|
3272
|
-
items = [];
|
|
3273
|
-
screen;
|
|
3274
|
-
disposers = [];
|
|
3275
|
-
/** The strip's pixel height for the current screen (used for the HUD margin too). */
|
|
3276
|
-
static heightFor(screen) {
|
|
3277
|
-
const scale = Math.max(0.7, Math.min(1.4, screen.scale));
|
|
3278
|
-
return Math.round(BAR_H * scale);
|
|
3279
|
-
}
|
|
3280
|
-
applyLayout(screen) {
|
|
3281
|
-
this.screen = screen;
|
|
3282
|
-
this.relayout();
|
|
3283
|
-
}
|
|
3284
|
-
relayout() {
|
|
3285
|
-
const s = this.screen;
|
|
3286
|
-
if (!s) return;
|
|
3287
|
-
const W = s.width;
|
|
3288
|
-
const H = s.height;
|
|
3289
|
-
const scale = Math.max(0.7, Math.min(1.4, s.scale));
|
|
3290
|
-
const barH = _StatusBarView.heightFor(s);
|
|
3291
|
-
const y = this.side === "top" ? 0 : H - barH;
|
|
3292
|
-
this.position.set(0, 0);
|
|
3293
|
-
const visible = this.items.filter((it) => !this.ui.hidden.has(it.id));
|
|
3294
|
-
for (const it of this.items) it.view.visible = !this.ui.hidden.has(it.id);
|
|
3295
|
-
this.bg.clear();
|
|
3296
|
-
this.visible = visible.length > 0;
|
|
3297
|
-
if (!visible.length) return;
|
|
3298
|
-
const edgeY = this.side === "top" ? barH - 1 : y;
|
|
3299
|
-
this.bg.rect(0, y, W, barH).fill({ color: 789776, alpha: 0.92 }).rect(0, edgeY, W, 1).fill({ color: 16777215, alpha: 0.18 });
|
|
3300
|
-
const n = visible.length;
|
|
3301
|
-
const cy = y + barH / 2;
|
|
3302
|
-
const pad = 18 * scale;
|
|
3303
|
-
const usableW = Math.max(160, W - pad * 2);
|
|
3304
|
-
visible.forEach((it, i) => {
|
|
3305
|
-
it.view.position.set(pad + usableW * ((i + 0.5) / n), cy);
|
|
3306
|
-
it.view.scale.set(scale);
|
|
3307
|
-
});
|
|
3308
|
-
}
|
|
3309
|
-
dispose() {
|
|
3310
|
-
for (const it of this.items) it.view.dispose();
|
|
3311
|
-
this.items.length = 0;
|
|
3312
|
-
for (const d of this.disposers) d();
|
|
3313
|
-
this.disposers.length = 0;
|
|
3314
|
-
if (!this.destroyed) this.destroy({ children: true });
|
|
3315
|
-
}
|
|
3316
|
-
};
|
|
3317
3250
|
|
|
3318
3251
|
// src/OpenUIPixi.ts
|
|
3319
3252
|
function easeInOutCubic(p) {
|
|
@@ -3396,11 +3329,10 @@ var OpenUIPixi = class {
|
|
|
3396
3329
|
const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "fullscreen", iconTarget: 60, mono: true });
|
|
3397
3330
|
muteView.zIndex = 65;
|
|
3398
3331
|
fullscreenView.zIndex = 65;
|
|
3399
|
-
const statusBarSide = this.opts.statusBar;
|
|
3400
3332
|
const roOpts = { prefix: true, fill: this.opts.readoutColor };
|
|
3401
|
-
const rtpView =
|
|
3402
|
-
const netView =
|
|
3403
|
-
const timerView =
|
|
3333
|
+
const rtpView = new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
|
|
3334
|
+
const netView = new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
|
|
3335
|
+
const timerView = new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
|
|
3404
3336
|
const entries = [
|
|
3405
3337
|
[this.ui.spin.id, spinView],
|
|
3406
3338
|
[this.ui.balance.id, balanceView],
|
|
@@ -3414,9 +3346,9 @@ var OpenUIPixi = class {
|
|
|
3414
3346
|
[this.ui.muteButton.id, muteView],
|
|
3415
3347
|
[this.ui.fullscreenButton.id, fullscreenView]
|
|
3416
3348
|
];
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3349
|
+
entries.push([this.ui.rtp.id, rtpView]);
|
|
3350
|
+
entries.push([this.ui.netPosition.id, netView]);
|
|
3351
|
+
entries.push([this.ui.sessionTimer.id, timerView]);
|
|
3420
3352
|
const viewById = /* @__PURE__ */ new Map();
|
|
3421
3353
|
const idByView = /* @__PURE__ */ new Map();
|
|
3422
3354
|
for (const [id, view] of entries) {
|
|
@@ -3477,28 +3409,22 @@ var OpenUIPixi = class {
|
|
|
3477
3409
|
const dialog = new DialogView(this.ui.noticePanel, this.ui.noticeBlocks, this.ui.noticeActions, this.ui, ticker, { controlSkins: this.opts.controlSkins });
|
|
3478
3410
|
this.root.addChild(dialog);
|
|
3479
3411
|
this.overlays.push(dialog);
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
const r = 200 * s.scale;
|
|
3491
|
-
vignette.clear();
|
|
3492
|
-
for (let i = 0; i < 14; i++) {
|
|
3493
|
-
const t = i / 14;
|
|
3494
|
-
vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
|
|
3495
|
-
}
|
|
3496
|
-
},
|
|
3497
|
-
dispose: () => {
|
|
3498
|
-
if (!vignette.destroyed) vignette.destroy();
|
|
3412
|
+
const vignette = new pixi_js.Graphics();
|
|
3413
|
+
vignette.zIndex = -1;
|
|
3414
|
+
this.root.addChild(vignette);
|
|
3415
|
+
this.overlays.push({
|
|
3416
|
+
applyLayout: (s) => {
|
|
3417
|
+
const r = 200 * s.scale;
|
|
3418
|
+
vignette.clear();
|
|
3419
|
+
for (let i = 0; i < 14; i++) {
|
|
3420
|
+
const t = i / 14;
|
|
3421
|
+
vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
|
|
3499
3422
|
}
|
|
3500
|
-
}
|
|
3501
|
-
|
|
3423
|
+
},
|
|
3424
|
+
dispose: () => {
|
|
3425
|
+
if (!vignette.destroyed) vignette.destroy();
|
|
3426
|
+
}
|
|
3427
|
+
});
|
|
3502
3428
|
const replayBadge = new pixi_js.Container();
|
|
3503
3429
|
const replayBg = new pixi_js.Graphics();
|
|
3504
3430
|
const replayText = new pixi_js.Text({ text: this.ui.t("openui.replay").toUpperCase(), style: { fontFamily: this.ui.theme.type.family, fontSize: 16, fontWeight: "800", fill: 16777215, letterSpacing: 2 } });
|
|
@@ -3512,8 +3438,7 @@ var OpenUIPixi = class {
|
|
|
3512
3438
|
const w = replayText.width + 36;
|
|
3513
3439
|
const h = 32;
|
|
3514
3440
|
replayBg.clear().roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: 789776 }).stroke({ width: 2, color: 16777215 });
|
|
3515
|
-
|
|
3516
|
-
replayBadge.position.set(s.width / 2, top);
|
|
3441
|
+
replayBadge.position.set(s.width / 2, 40);
|
|
3517
3442
|
},
|
|
3518
3443
|
dispose: () => {
|
|
3519
3444
|
if (!replayBadge.destroyed) replayBadge.destroy({ children: true });
|
|
@@ -3529,16 +3454,11 @@ var OpenUIPixi = class {
|
|
|
3529
3454
|
);
|
|
3530
3455
|
const applyLayout = () => {
|
|
3531
3456
|
const screen = this.ui.screen.get();
|
|
3532
|
-
const barH = statusBarSide ? StatusBarView.heightFor(screen) : 0;
|
|
3533
3457
|
this.slideBaseY.clear();
|
|
3534
3458
|
this.slideSign.clear();
|
|
3535
3459
|
for (const v of this.views) {
|
|
3536
3460
|
v.applyLayout(screen);
|
|
3537
3461
|
const anchor = this.ui.control(idByView.get(v) ?? "")?.layout.anchor ?? "bottom-center";
|
|
3538
|
-
if (barH) {
|
|
3539
|
-
if (statusBarSide === "top" && anchor.startsWith("top")) v.y += barH;
|
|
3540
|
-
else if (statusBarSide === "bottom" && anchor.startsWith("bottom")) v.y -= barH;
|
|
3541
|
-
}
|
|
3542
3462
|
this.slideBaseY.set(v, v.y);
|
|
3543
3463
|
this.slideSign.set(v, anchor.startsWith("top") ? -1 : 1);
|
|
3544
3464
|
}
|
|
@@ -3951,7 +3871,7 @@ function mountHud(app, spec = {}, opts = {}) {
|
|
|
3951
3871
|
if (menu && spec.game && (spec.game.name || spec.game.version)) {
|
|
3952
3872
|
menu.push({ kind: "legal", id: "openui-game-info", text: [spec.game.name, spec.game.version ? `v${spec.game.version}` : ""].filter(Boolean).join(" \xB7 ") });
|
|
3953
3873
|
}
|
|
3954
|
-
const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu
|
|
3874
|
+
const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
|
|
3955
3875
|
pixi.mount(app);
|
|
3956
3876
|
const extra = [];
|
|
3957
3877
|
if (spec.panels?.length) {
|
|
@@ -4071,7 +3991,6 @@ exports.ReadoutView = ReadoutView;
|
|
|
4071
3991
|
exports.SelectView = SelectView;
|
|
4072
3992
|
exports.SliderView = SliderView;
|
|
4073
3993
|
exports.SpinView = SpinView;
|
|
4074
|
-
exports.StatusBarView = StatusBarView;
|
|
4075
3994
|
exports.StepperView = StepperView;
|
|
4076
3995
|
exports.TextCellRenderer = TextCellRenderer;
|
|
4077
3996
|
exports.ToggleView = ToggleView;
|