@open-slot-ui/pixi 0.12.0 → 0.13.0

package/dist/index.cjs

@@ -2491,6 +2491,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;
@@ -2736,6 +2739,42 @@ function imageBoxNode(src, w, h, ui) {
   }
   return box;
 }
+function paylinesNode(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new pixi_js.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 pixi_js.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 pixi_js.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 pixi_js.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));
@@ -2830,8 +2869,8 @@ function paytableCell(r, ui, cellW, lineH) {
 
 // src/views/MenuView.ts
 var MARGIN = 16;
-var HEADER_H = 60;
-var INSET = 22;
+var HEADER_H = 62;
+var INSET = 24;
 var LIGHT = {
   surface: "#ffffff",
   surfaceAlt: "#eef1f6",
@@ -2850,13 +2889,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 pixi_js.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 pixi_js.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;
@@ -2932,17 +2971,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 pixi_js.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;
@@ -4653,7 +4692,7 @@ function showBootError(opts = {}) {
   host.innerHTML = `
     <div class="openui-be-card">
       <div class="openui-be-icon" aria-hidden="true">
-        <svg viewBox="0 0 48 48" width="48" height="48"><path d="M24 4 3 42h42L24 4Z" fill="none" stroke="#ffc935" stroke-width="3" stroke-linejoin="round"/><rect x="22" y="18" width="4" height="12" rx="2" fill="#ffc935"/><circle cx="24" cy="35" r="2.4" fill="#ffc935"/></svg>
+        <svg viewBox="0 0 48 48" width="46" height="46"><path d="M24 5 4 41h40L24 5Z" fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round"/><rect x="22" y="19" width="4" height="12" rx="2" fill="#000"/><circle cx="24" cy="35.5" r="2.5" fill="#000"/></svg>
       </div>
       <h1 class="openui-be-title">${esc2(title)}</h1>
       <p class="openui-be-msg">${esc2(message)}</p>
@@ -4661,19 +4700,23 @@ function showBootError(opts = {}) {
       ${showReload ? `<button class="openui-be-reload" type="button">${esc2(opts.reloadLabel ?? "Reload")}</button>` : ""}
     </div>
     <style>
+      /* MONOCHROME by design \u2014 a neutral black-and-white system card, no theme accent. */
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
-        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e9edf2;
-        background: rgba(6,8,11,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
-      .openui-be-card { width: min(90%, 440px); text-align: center; padding: 38px 32px 34px;
-        background: #161b22; border: 1.5px solid #ffc935; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
-      .openui-be-icon { margin-bottom: 14px; line-height: 0; }
-      .openui-be-title { margin: 0 0 12px; font-size: 24px; font-weight: 800; color: #ffc935; letter-spacing: .3px; }
-      .openui-be-msg { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: #c4ccd6; }
-      .openui-be-detail { margin: 0 0 20px; font-size: 12px; line-height: 1.4; color: #78828f; word-break: break-word; }
-      .openui-be-reload { appearance: none; border: 0; cursor: pointer; padding: 13px 42px; border-radius: 999px;
-        background: #ffc935; color: #161b22; font-weight: 800; font-size: 15px; letter-spacing: .3px;
-        box-shadow: 0 8px 22px rgba(255,201,53,.32); transition: transform .12s, filter .12s; }
-      .openui-be-reload:hover { filter: brightness(1.06); }
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #181b20;
+        background: rgba(8,8,8,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
+      .openui-be-card { width: min(90%, 440px); text-align: center; padding: 40px 36px 32px;
+        display: flex; flex-direction: column; align-items: center; gap: 14px;
+        background: #fff; border: 4px solid #000; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
+      .openui-be-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 999px;
+        border: 4px solid #000; line-height: 0; }
+      .openui-be-title { margin: 0; font-size: 26px; font-weight: 800; color: #000; letter-spacing: .01em; }
+      .openui-be-msg { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #3a3f47; max-width: 34ch; }
+      .openui-be-detail { margin: 0; font-size: 12px; line-height: 1.4; color: #8a9099; word-break: break-word;
+        font-family: ui-monospace, "SF Mono", Menlo, monospace; max-width: 40ch; }
+      .openui-be-reload { appearance: none; cursor: pointer; margin-top: 8px; padding: 14px 42px; border-radius: 999px;
+        border: 4px solid #000; background: #000; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .03em;
+        transition: transform .1s ease, background .12s ease; }
+      .openui-be-reload:hover { background: #1c1c1c; }
       .openui-be-reload:active { transform: scale(.96); }
     </style>`;
   if (showReload) {