@open-slot-ui/core 0.12.1 → 0.13.1

package/dist/index.cjs

@@ -1279,6 +1279,7 @@ var BLOCK_KINDS = [
   "steps",
   "table",
   "paytable",
+  "paylines",
   "image",
   "media",
   "cards",
@@ -1440,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");
         }
@@ -2921,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("");