@open-slot-ui/core 0.12.0 → 0.13.0

package/dist/index.cjs

@@ -133,10 +133,10 @@ function anchorFactors(anchor) {
 function resolvePlacement(spec, screen) {
   const [ax, ay] = anchorFactors(spec.anchor);
   const [ox, oy] = spec.offset ?? [0, 0];
-  const st = screen.stage;
+  const rect = spec.origin === "screen" ? { x: 0, y: 0, width: screen.width, height: screen.height } : screen.stage;
   return {
-    x: st.x + ax * st.width + ox * screen.scale,
-    y: st.y + ay * st.height + oy * screen.scale,
+    x: rect.x + ax * rect.width + ox * screen.scale,
+    y: rect.y + ay * rect.height + oy * screen.scale,
     scale: screen.scale * (spec.scale ?? 1),
     rotation: (spec.rotation ?? 0) * Math.PI / 180
   };
@@ -160,11 +160,13 @@ var landscapeDefaultLayouts = Object.freeze({
   // Right-anchored so a long localized caption grows LEFT and never clips the edge.
   "total-win": { anchor: "bottom-right", offset: [-150, -300] },
   settings: { anchor: "bottom-center", offset: [-740, -320], rotation: -5 },
-  mute: { anchor: "top-right", offset: [-122, 46] },
-  fullscreen: { anchor: "top-right", offset: [-46, 46] },
-  rtp: { anchor: "top-left", offset: [20, 18] },
-  "session-timer": { anchor: "top-left", offset: [20, 46] },
-  "net-position": { anchor: "top-left", offset: [20, 74] }
+  // Corner utilities anchor to the SCREEN (not the letterboxed frame) so they hug the true
+  // viewport corners at every aspect — see `LayoutSpec.origin`.
+  mute: { anchor: "top-right", offset: [-122, 46], origin: "screen" },
+  fullscreen: { anchor: "top-right", offset: [-46, 46], origin: "screen" },
+  rtp: { anchor: "top-left", offset: [20, 18], origin: "screen" },
+  "session-timer": { anchor: "top-left", offset: [20, 46], origin: "screen" },
+  "net-position": { anchor: "top-left", offset: [20, 74], origin: "screen" }
 });
 var portraitDefaultLayouts = Object.freeze({
   // Mobile sizes run ~1.5× the desktop base (the Figma mobile frame draws the
@@ -179,19 +181,21 @@ var portraitDefaultLayouts = Object.freeze({
   settings: { anchor: "bottom-center", offset: [438, -480], scale: 1.5, rotation: -5 },
   "bet-minus": { anchor: "bottom-center", offset: [-105, -267], scale: 1.5 },
   "bet-plus": { anchor: "bottom-center", offset: [105, -267], scale: 1.5 },
-  mute: { anchor: "top-right", offset: [-159, 57], scale: 1.5 },
-  fullscreen: { anchor: "top-right", offset: [-57, 57], scale: 1.5 },
+  // Corner utilities anchor to the SCREEN (see `LayoutSpec.origin`) so they stay in the true
+  // viewport corner even when the portrait frame is letterboxed.
+  mute: { anchor: "top-right", offset: [-159, 57], scale: 1.5, origin: "screen" },
+  fullscreen: { anchor: "top-right", offset: [-57, 57], scale: 1.5, origin: "screen" },
   // Compliance readouts scale up ~2× on mobile with wider line spacing.
-  rtp: { anchor: "top-left", offset: [16, 16], scale: 2 },
-  "session-timer": { anchor: "top-left", offset: [16, 66], scale: 2 },
-  "net-position": { anchor: "top-left", offset: [16, 116], scale: 2 },
+  rtp: { anchor: "top-left", offset: [16, 16], scale: 2, origin: "screen" },
+  "session-timer": { anchor: "top-left", offset: [16, 66], scale: 2, origin: "screen" },
+  "net-position": { anchor: "top-left", offset: [16, 116], scale: 2, origin: "screen" },
   balance: { anchor: "bottom-left", offset: [36, -110], rotation: -5 },
   bet: { anchor: "bottom-right", offset: [-36, -110], rotation: 5 }
 });
 function defaultLayout(id) {
   const l = landscapeDefaultLayouts[id];
   if (!l) return { anchor: "center" };
-  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation };
+  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation, origin: l.origin };
 }
 
 // src/transition/Transition.ts
@@ -1275,6 +1279,7 @@ var BLOCK_KINDS = [
   "steps",
   "table",
   "paytable",
+  "paylines",
   "image",
   "media",
   "cards",
@@ -1436,6 +1441,10 @@ function validateSpec(spec) {
         if (b.kind === "paytable" && (!b.rows || b.rows.length === 0)) {
           add("warn", `${p}.rows`, "empty-paytable", "a paytable block has no rows");
         }
+        if (b.kind === "paylines") {
+          if (!(b.reels > 0) || !(b.rows > 0)) add("error", `${p}.reels`, "paylines-shape", "a paylines block needs reels > 0 and rows > 0");
+          if (!b.lines || b.lines.length === 0) add("warn", `${p}.lines`, "empty-paylines", "a paylines block has no lines");
+        }
         if (b.kind === "image" && (!b.src || !b.src.trim())) {
           add("error", `${p}.src`, "image-src", "an image block needs a src");
         }
@@ -2459,7 +2468,7 @@ var OpenUI = class {
 
 // src/spec/responsive.ts
 function cloneLayout(l) {
-  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation };
+  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation, origin: l.origin };
 }
 function activeKeys(screen) {
   return [screen.orientation, screen.breakpoint];
@@ -2917,6 +2926,15 @@ function renderBlocksHtml(blocks, tr, facts) {
       case "paytable":
         out.push(`<div class="ohm-grid">${renderPaytable(b.rows, tr)}</div>`);
         break;
+      case "paylines": {
+        const masks = b.lines.map((line, i) => {
+          const cells = [];
+          for (let row = 0; row < b.rows; row++) for (let reel = 0; reel < b.reels; reel++) cells.push(`<i class="${line[reel] === row ? "on" : ""}"></i>`);
+          return `<div class="ohm-line"><div class="ohm-linegrid" style="grid-template-columns:repeat(${b.reels},1fr)">${cells.join("")}</div><span>${i + 1}</span></div>`;
+        }).join("");
+        out.push(`<div class="ohm-lines">${masks}</div>`);
+        break;
+      }
       case "table": {
         const head = b.columns?.length ? `<thead><tr>${b.columns.map((c) => `<th>${esc(tr(c))}</th>`).join("")}</tr></thead>` : "";
         const body = b.rows.map((r) => `<tr>${r.map((c) => `<td>${esc(tr(c))}</td>`).join("")}</tr>`).join("");