@open-slot-ui/pixi 0.1.1 → 0.2.1

package/dist/index.d.cts

@@ -355,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;
@@ -686,6 +685,8 @@ declare class MenuView extends ControlView {
     private childViews;
     private readonly titleKey;
     private readonly maxWidth;
+    /** `ui` proxy with a light theme — feeds the shared block renderer dark-on-white. */
+    private readonly lightUi;
     private vpW;
     private vpH;
     private scrollY;

package/dist/index.d.ts

@@ -355,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;
@@ -686,6 +685,8 @@ declare class MenuView extends ControlView {
     private childViews;
     private readonly titleKey;
     private readonly maxWidth;
+    /** `ui` proxy with a light theme — feeds the shared block renderer dark-on-white. */
+    private readonly lightUi;
     private vpW;
     private vpH;
     private scrollY;

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;
@@ -2794,6 +2780,14 @@ function paytableCell(r, ui, cellW, lineH) {
 var MARGIN = 16;
 var HEADER_H = 60;
 var INSET = 22;
+var LIGHT = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  accent: "#d99000"
+};
 var MenuView = class extends ControlView {
   constructor(panel, controls, blocks, ui, ticker, opts = {}) {
     super(panel, ui);
@@ -2805,9 +2799,11 @@ var MenuView = class extends ControlView {
     this.zIndex = 120;
     this.titleKey = opts.title ?? "Menu";
     this.maxWidth = opts.maxWidth ?? 1600;
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT.surface, surfaceAlt: LIGHT.surfaceAlt, text: LIGHT.text, textDim: LIGHT.textDim, accent: LIGHT.accent } };
+    this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
     this.backdrop.eventMode = "static";
     this.backdrop.on("pointertap", () => this.panel.closePanel());
-    this.title = new Text({ text: ui.t(this.titleKey), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: ui.theme.color.text, fontWeight: "800", letterSpacing: 1 } });
+    this.title = new Text({ text: ui.t(this.titleKey), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: LIGHT.text, fontWeight: "800", letterSpacing: 1 } });
     this.title.anchor.set(0, 0.5);
     this.buildClose();
     this.viewport.addChild(this.catcher, this.content);
@@ -2848,6 +2844,8 @@ var MenuView = class extends ControlView {
   childViews = [];
   titleKey;
   maxWidth;
+  /** `ui` proxy with a light theme — feeds the shared block renderer dark-on-white. */
+  lightUi;
   vpW = 0;
   vpH = 0;
   scrollY = 0;
@@ -2856,10 +2854,9 @@ var MenuView = class extends ControlView {
   lastY = 0;
   wheelHandler;
   buildClose() {
-    const t = this.ui.theme;
     const r = 22;
-    const bg = new Graphics().circle(0, 0, r).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.textDim });
-    const x = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: t.color.text });
+    const bg = new Graphics().circle(0, 0, r).fill({ color: LIGHT.border });
+    const x = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
     this.closeBtn.addChild(bg, x);
     this.closeBtn.eventMode = "static";
     this.closeBtn.cursor = "pointer";
@@ -2871,7 +2868,7 @@ var MenuView = class extends ControlView {
     this.childViews.length = 0;
     for (const child of this.content.removeChildren()) child.destroy();
     const bodyW = this.vpW > 0 ? this.vpW : Math.min(this.maxWidth - INSET * 2, 520);
-    const col = buildBlockColumn(this.blocks, this.controls, this.ui, this.ticker, bodyW, { controlSkins: this.opts.controlSkins, dropdownLayer: this.dropdownLayer });
+    const col = buildBlockColumn(this.blocks, this.controls, this.lightUi, this.ticker, bodyW, { controlSkins: this.opts.controlSkins, dropdownLayer: this.dropdownLayer });
     this.childViews = col.views;
     this.content.addChild(...col.content.removeChildren());
     this.content.x = bodyW / 2;
@@ -2883,16 +2880,15 @@ var MenuView = class extends ControlView {
     const H = screen.height;
     this.position.set(0, 0);
     this.scale.set(1);
-    const t = this.ui.theme;
-    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.62 });
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
     this.backdrop.hitArea = new Rectangle(0, 0, W, H);
     const marginX = Math.max(MARGIN, Math.round(W * 0.05));
     const cardW = Math.min(W - marginX * 2, this.maxWidth);
     const cardH = H - MARGIN * 2;
     const cx = (W - cardW) / 2;
     const cy = MARGIN;
-    this.card.clear().roundRect(cx, cy, cardW, cardH, t.radius.card).fill({ color: t.color.surface }).stroke({ width: 2, color: t.color.accent });
-    this.headerBar.clear().roundRect(cx, cy, cardW, HEADER_H, t.radius.card).fill({ color: t.color.surfaceAlt }).moveTo(cx + INSET, cy + HEADER_H).lineTo(cx + cardW - INSET, cy + HEADER_H).stroke({ width: 1, color: t.color.textDim, alpha: 0.3 });
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+    this.headerBar.clear().roundRect(cx, cy, cardW, HEADER_H, 14).fill({ color: LIGHT.surfaceAlt }).moveTo(cx + INSET, cy + HEADER_H).lineTo(cx + cardW - INSET, cy + HEADER_H).stroke({ width: 1, color: LIGHT.textDim, alpha: 0.4 });
     this.title.position.set(cx + INSET, cy + HEADER_H / 2);
     this.closeBtn.position.set(cx + cardW - INSET - 8, cy + HEADER_H / 2);
     const vpX = cx + INSET;
@@ -3068,7 +3064,7 @@ var INSET2 = 24;
 var BTN_H = 52;
 var BTN_GAP = 14;
 var ROW_GAP = 16;
-var LIGHT = {
+var LIGHT2 = {
   surface: "#ffffff",
   surfaceAlt: "#eef1f6",
   text: "#181b20",
@@ -3087,7 +3083,7 @@ var DialogView = class extends ControlView {
     this.opts = opts;
     this.zIndex = 130;
     this.maxWidth = opts.maxWidth ?? 520;
-    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT.surface, surfaceAlt: LIGHT.surfaceAlt, text: LIGHT.text, textDim: LIGHT.textDim } };
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT2.surface, surfaceAlt: LIGHT2.surfaceAlt, text: LIGHT2.text, textDim: LIGHT2.textDim } };
     this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
     this.backdrop.eventMode = "static";
     this.backdrop.on("pointertap", () => {
@@ -3133,7 +3129,7 @@ var DialogView = class extends ControlView {
   lightUi;
   buildClose() {
     const r = 22;
-    const bg = new Graphics().circle(0, 0, r).fill({ color: LIGHT.primary });
+    const bg = new Graphics().circle(0, 0, r).fill({ color: LIGHT2.primary });
     const x = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
     this.closeBtn.addChild(bg, x);
     this.closeBtn.eventMode = "static";
@@ -3170,7 +3166,7 @@ var DialogView = class extends ControlView {
     const cy = (H - cardH) / 2;
     this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
     this.backdrop.hitArea = new Rectangle(0, 0, W, H);
-    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT2.surface }).stroke({ width: 2.5, color: LIGHT2.border });
     const bodyH = cardH - (buttonsH ? ROW_GAP + buttonsH + INSET2 : INSET2);
     this.content.x = cx + cardW / 2;
     this.content.y = cy;
@@ -3209,7 +3205,7 @@ var DialogView = class extends ControlView {
     const bg = new Graphics();
     const label = new Text({
       text: this.ui.t(action.label),
-      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? LIGHT.primaryText : LIGHT.text, letterSpacing: 0.5 }
+      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? LIGHT2.primaryText : LIGHT2.text, letterSpacing: 0.5 }
     });
     label.anchor.set(0.5);
     node.addChild(bg, label);
@@ -3228,9 +3224,9 @@ var DialogView = class extends ControlView {
   drawButton(bg, variant, width) {
     bg.clear();
     if (variant === "primary") {
-      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT.primary });
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT2.primary });
     } else {
-      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT2.surface }).stroke({ width: 2.5, color: LIGHT2.border });
     }
   }
   applyOpen(open) {
@@ -3927,7 +3923,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" },