@open-slot-ui/pixi 0.12.0 → 0.13.0

package/dist/art.js

@@ -1,4 +1,4 @@
-import { svgSpinSkin } from './chunk-FN6UJ3WO.js';
+import { svgSpinSkin } from './chunk-MKTMN76I.js';
 import { CanvasSource, Texture, Rectangle } from 'pixi.js';
 
 async function svgToTexture(svg, resolution = 3) {

package/dist/{chunk-FN6UJ3WO.js → chunk-MKTMN76I.js}

@@ -2485,6 +2485,9 @@ function buildBlockColumn(blocks, controls, ui, ticker, bodyW, opts = {}) {
         case "paytable":
           placeAuto(paytableNode(b, ui, innerW));
           break;
+        case "paylines":
+          placeAuto(paylinesNode(b, ui, innerW));
+          break;
         case "media":
           placeAuto(mediaNode(b, ui, innerW));
           break;
@@ -2730,6 +2733,42 @@ function imageBoxNode(src, w, h, ui) {
   }
   return box;
 }
+function paylinesNode(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new Container();
+  const GAP_X = 12;
+  const ITEM_MIN = 76;
+  const cols = Math.max(1, Math.floor((innerW + GAP_X) / (ITEM_MIN + GAP_X)));
+  const itemW = (innerW - GAP_X * (cols - 1)) / cols;
+  const cellGap = 2;
+  const gridW = Math.min(72, itemW);
+  const cell = (gridW - cellGap * (b.reels - 1)) / b.reels;
+  const drawnW = cell * b.reels + cellGap * (b.reels - 1);
+  const drawnH = cell * b.rows + cellGap * (b.rows - 1);
+  const labelH = 16;
+  const itemH = drawnH + 5 + labelH;
+  const gridRows = Math.ceil(b.lines.length / cols);
+  const totalH = gridRows * itemH + (gridRows - 1) * GAP_X;
+  b.lines.forEach((line, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const itemCx = -innerW / 2 + col * (itemW + GAP_X) + itemW / 2;
+    const gy0 = -totalH / 2 + row * (itemH + GAP_X);
+    const gx0 = itemCx - drawnW / 2;
+    const g = new Graphics();
+    for (let r = 0; r < b.rows; r++) {
+      for (let re = 0; re < b.reels; re++) {
+        g.rect(gx0 + re * (cell + cellGap), gy0 + r * (cell + cellGap), cell, cell).fill({ color: line[re] === r ? 1118481 : 14869994 });
+      }
+    }
+    const idx = new Text({ text: String(i + 1), style: { fontFamily: t.type.family, fontSize: 11, fill: t.color.textDim, fontWeight: "700" } });
+    idx.anchor.set(0.5, 0);
+    idx.position.set(itemCx, gy0 + drawnH + 5);
+    c.addChild(g, idx);
+  });
+  c.addChild(new Graphics().rect(-innerW / 2, -totalH / 2, 1, totalH).fill({ color: 16777215, alpha: 0 }));
+  return c;
+}
 function paytableNode(b, ui, innerW) {
   const want = Math.max(1, b.columns ?? 1);
   const fit = Math.max(1, Math.floor(innerW / 170));
@@ -2822,8 +2861,8 @@ function paytableCell(r, ui, cellW, lineH) {
   return cell;
 }
 var MARGIN = 16;
-var HEADER_H = 60;
-var INSET = 22;
+var HEADER_H = 62;
+var INSET = 24;
 var LIGHT = {
   surface: "#ffffff",
   surfaceAlt: "#eef1f6",
@@ -2842,13 +2881,13 @@ var MenuView = class extends ControlView {
     this.opts = opts;
     this.zIndex = 120;
     this.titleKey = opts.title ?? "Menu";
-    this.maxWidth = opts.maxWidth ?? 1600;
+    this.maxWidth = opts.maxWidth ?? 760;
     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: LIGHT.text, fontWeight: "800", letterSpacing: 1 } });
-    this.title.anchor.set(0, 0.5);
+    this.title = new Text({ text: ui.t(this.titleKey), style: { fontFamily: ui.theme.type.family, fontSize: 28, fill: LIGHT.text, fontWeight: "900", letterSpacing: 1 } });
+    this.title.anchor.set(0.5, 0.5);
     this.buildClose();
     this.viewport.addChild(this.catcher, this.content);
     this.viewport.mask = this.maskG;
@@ -2924,17 +2963,17 @@ var MenuView = class extends ControlView {
     const H = screen.height;
     this.position.set(0, 0);
     this.scale.set(1);
-    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 657414, alpha: 0.42 });
     this.backdrop.hitArea = new Rectangle(0, 0, W, H);
-    const marginX = Math.max(MARGIN, Math.round(W * 0.05));
+    const marginX = Math.max(MARGIN, Math.round(W * 0.04));
     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, 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);
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 8).fill({ color: LIGHT.surface }).stroke({ width: 1.5, color: LIGHT.border });
+    this.headerBar.clear();
+    this.title.position.set(cx + cardW / 2, cy + HEADER_H / 2);
+    this.closeBtn.position.set(cx + cardW - INSET, cy + INSET);
     const vpX = cx + INSET;
     const vpY = cy + HEADER_H + INSET;
     const newVpW = cardW - INSET * 2;
@@ -3742,5 +3781,5 @@ function svgSpinSkin(textures) {
 }
 
 export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin };
-//# sourceMappingURL=chunk-FN6UJ3WO.js.map
-//# sourceMappingURL=chunk-FN6UJ3WO.js.map
+//# sourceMappingURL=chunk-MKTMN76I.js.map
+//# sourceMappingURL=chunk-MKTMN76I.js.map