npm - @nebularstreams/overlay-sdk - Versions diffs - 1.0.0 - Mend

@nebularstreams/overlay-sdk 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/templates/games/gambling/bingo/index.html ADDED Viewed

@@ -0,0 +1,227 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Bingo Caller Board</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent;
+        }
+        body {
+            color: #fff;
+            font-family: Inter, system-ui, sans-serif;
+        }
+        .bingo {
+            position: absolute;
+            inset: auto 5% 9% 5%;
+            display: grid;
+            grid-template-columns: 22rem minmax(0, 1fr);
+            gap: 1rem;
+            filter: drop-shadow(0 1.4rem 3rem rgba(0, 0, 0, .34));
+        }
+        .caller,
+        .board {
+            background: rgba(8, 13, 22, .94);
+            border: 1px solid rgba(255, 255, 255, .16);
+            border-radius: 1.2rem;
+        }
+        .caller {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 38rem;
+            padding: 1.5rem;
+            text-align: center;
+        }
+        .eyebrow {
+            color: #ffb33f;
+            font-size: 1.2rem;
+            font-weight: 850;
+            letter-spacing: .18em;
+            text-transform: uppercase;
+        }
+        .ball {
+            width: 12rem;
+            height: 12rem;
+            margin: 1.4rem 0;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: radial-gradient(circle at 34% 28%, #fff8b3 0 8%, #ffc848 34%, #f18b12 72%);
+            border: .55rem solid rgba(255, 255, 255, .85);
+            box-shadow: inset -.8rem -1rem 1.5rem rgba(132, 51, 0, .3), 0 1rem 2.5rem rgba(255, 151, 21, .25);
+            color: #172033;
+            font-size: 5.2rem;
+            font-weight: 950;
+            animation: called .45s cubic-bezier(.18, .89, .32, 1.28);
+        }
+        .title {
+            font-size: 2rem;
+            font-weight: 900;
+        }
+        .subtitle {
+            margin-top: .35rem;
+            color: #aeb8c8;
+            font-size: 1.3rem;
+            line-height: 1.3;
+        }
+        .count {
+            margin-top: 1.4rem;
+            color: #ffbd53;
+            font-size: 1.2rem;
+            font-weight: 800;
+            letter-spacing: .08em;
+            text-transform: uppercase;
+        }
+        .board {
+            min-height: 38rem;
+            padding: 1rem;
+        }
+        .board-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: .15rem .25rem .9rem;
+        }
+        .board-header strong {
+            font-size: 1.4rem;
+            letter-spacing: .08em;
+        }
+        .legend {
+            color: #aeb8c8;
+            font-size: 1.05rem;
+            font-weight: 750;
+        }
+        .numbers {
+            display: grid;
+            grid-template-columns: repeat(10, minmax(0, 1fr));
+            gap: .45rem;
+        }
+        .number {
+            display: grid;
+            place-items: center;
+            border-radius: .55rem;
+            background: rgba(255, 255, 255, .06);
+            border: 1px solid rgba(255, 255, 255, .1);
+            color: rgba(255, 255, 255, .4);
+            font-size: 2rem;
+            font-weight: 850;
+            transition: background .25s ease, color .25s ease, transform .25s ease;
+            aspect-ratio: 1.9;
+        }
+        .number.called {
+            background: #fff;
+            border-color: #fff;
+            color: #172033;
+        }
+        .number.current {
+            z-index: 1;
+            background: #ff9d18;
+            border-color: #ffd486;
+            color: #111827;
+            transform: scale(1.14);
+            box-shadow: 0 0 0 .22rem rgba(255, 157, 24, .25), 0 .6rem 1.4rem rgba(0, 0, 0, .35);
+        }
+        @keyframes called {
+            from {
+                opacity: 0;
+                transform: scale(.55) rotate(-12deg);
+            }
+        }
+    </style>
+</head>
+<body>
+<main class="bingo">
+    <section class="caller">
+        <div class="eyebrow" id="eyebrow">Just called</div>
+        <div class="ball" id="ball">73</div>
+        <div class="title" id="title">Friday Night Bingo</div>
+        <div class="subtitle" id="subtitle">Eyes down — good luck!</div>
+        <div class="count" id="count">8 numbers called</div>
+    </section>
+    <section class="board">
+        <div class="board-header">
+            <strong>CALLED NUMBERS</strong>
+            <span class="legend">WHITE · CALLED&nbsp;&nbsp;&nbsp; ORANGE · CURRENT</span>
+        </div>
+        <div class="numbers" id="numbers"></div>
+    </section>
+</main>
+<script>
+	const
+		MAX_NUMBER = 90,
+		$ = (id) => document.getElementById(id),
+		cells = new Map();
+	let called = [];
+	for (let number = 1; number <= MAX_NUMBER; number++) {
+		const cell = document.createElement("div");
+		cell.className = "number";
+		cell.textContent = number;
+		$("numbers").append(cell);
+		cells.set(number, cell);
+	}
+	function updateBoard() {
+		const
+			values = (Array.isArray(called) ? called : []).map(Number).filter(number => number >= 1 && number <= MAX_NUMBER),
+			currentNumber = values.at(-1),
+			calledNumbers = new Set(values);
+		cells.forEach((cell, number) => {
+			cell.classList.toggle("called", calledNumbers.has(number));
+			cell.classList.toggle("current", number === currentNumber);
+		});
+		const ballValue = currentNumber ?? "—";
+		if ($("ball").textContent !== String(ballValue)) {
+			const replacement = $("ball").cloneNode(false);
+			replacement.textContent = ballValue;
+			$("ball").replaceWith(replacement);
+		}
+		$("count").textContent = `${calledNumbers.size} ${calledNumbers.size === 1 ? "number" : "numbers"} called`;
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.content?.eyebrow != null) $("eyebrow").textContent = detail.content.eyebrow;
+		if (detail.content?.title != null) $("title").textContent = detail.content.title;
+		if (detail.content?.subtitle != null) $("subtitle").textContent = detail.content.subtitle;
+		if (detail.game?.called != null) called = detail.game.called;
+		if (detail.game?.called != null) updateBoard();
+	})
+</script>
+</body>
+</html>

package/templates/games/gambling/bingo/manifest.json ADDED Viewed

@@ -0,0 +1,56 @@
+{
+  "instructions": "Select each number as it is called, then press Update. The most recently selected number is highlighted and displayed automatically. Use Reset balls to clear the selection, then press Update to publish the reset. Update the event copy before play if desired.",
+  "meta": {
+    "content/eyebrow": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Current number label", "hint": "Enter short label",
+      "default": "JUST CALLED"
+    },
+    "content/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Event title", "hint": "Enter event title",
+      "default": "Friday Night Bingo"
+    },
+    "content/subtitle": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Subtitle", "hint": "Enter subtitle",
+      "default": "Eyes down — good luck!"
+    },
+    "game/called": {
+      "type": "multi",
+      "phase": "play",
+      "label": "Called numbers", "hint": "Numbers called so far; the latest selection is highlighted",
+      "container": "big",
+      "choose": [
+        1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
+        11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+        21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+        31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
+        41, 42, 43, 44, 45, 46, 47, 48, 49, 50,
+        51, 52, 53, 54, 55, 56, 57, 58, 59, 60,
+        61, 62, 63, 64, 65, 66, 67, 68, 69, 70,
+        71, 72, 73, 74, 75, 76, 77, 78, 79, 80,
+        81, 82, 83, 84, 85, 86, 87, 88, 89, 90
+      ],
+      "cols": 10,
+      "rows": 9,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": [
+        3, 8, 17, 24, 31, 42, 56, 73
+      ]
+    },
+    "game/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset balls", "hint": "Clear every called number",
+      "values": {
+        "game/called": []
+      }
+    }
+  }
+}

package/templates/games/gambling/keno/index.html ADDED Viewed

@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Keno Live Board</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            font-family: Inter, system-ui, sans-serif;
+            color: #fff
+        }
+        .keno {
+            position: absolute;
+            inset: auto 5% 9% 5%;
+            display: grid;
+            grid-template-columns: 19rem 1fr;
+            gap: .9rem;
+        }
+        .side, .board {
+            background: #081b2df2;
+            border: 1px solid #ffffff29;
+            border-radius: 1rem;
+            box-shadow: 0 1.3rem 3.5rem #0006
+        }
+        .side {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1.3rem;
+            background: radial-gradient(circle at 50% 30%, #174a67, #071725 70%);
+            text-align: center
+        }
+        .logo {
+            color: #61ddff;
+            font-size: 1.15rem;
+            font-weight: 900;
+            letter-spacing: .2em
+        }
+        .latest {
+            width: 10.5rem;
+            height: 10.5rem;
+            margin: 1.2rem;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: radial-gradient(circle at 32% 25%, #fff 0 6%, #73f2ff 28%, #1689c5 72%);
+            border: .5rem solid #d8faff;
+            color: #062239;
+            font-size: 4.5rem;
+            font-weight: 950;
+            animation: pop .4s ease
+        }
+        .title {
+            font-size: 1.9rem;
+            font-weight: 900
+        }
+        .subtitle {
+            margin-top: .4rem;
+            color: #9eb9c9;
+            font-size: 1.25rem;
+            line-height: 1.3
+        }
+        .count {
+            margin-top: 1.2rem;
+            color: #61ddff;
+            font-size: 1.15rem;
+            font-weight: 850
+        }
+        .board {
+            padding: 1rem
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: .75rem
+        }
+        .header strong {
+            font-size: 1.3rem;
+            letter-spacing: .1em
+        }
+        .header span {
+            color: #91aebf;
+            font-size: 1rem;
+            font-weight: 750
+        }
+        .numbers {
+            display: grid;
+            grid-template-columns:repeat(10, minmax(0, 1fr));
+            gap: .36rem
+        }
+        .number {
+            height: 3.6rem;
+            display: grid;
+            place-items: center;
+            border-radius: .45rem;
+            background: #ffffff0a;
+            border: 1px solid #ffffff14;
+            color: #ffffff54;
+            font-size: 1.2rem;
+            font-weight: 800
+        }
+        .number.hit {
+            background: #eefcff;
+            color: #08233a;
+            border-color: #fff
+        }
+        .number.latest {
+            width: auto;
+            height: 3.6rem;
+            margin: 0;
+            border: .15rem solid #bbf7ff;
+            background: #25c5ee;
+            color: #062239;
+            font-size: 1.35rem;
+            transform: scale(1.12);
+            box-shadow: 0 .6rem 1.3rem #0008;
+            z-index: 2
+        }
+        @keyframes pop {
+            from {
+                opacity: 0;
+                transform: scale(.45) rotate(18deg)
+            }
+        }
+    </style>
+</head>
+<body>
+<main class="keno">
+    <aside class="side">
+        <div class="logo">KENO LIVE</div>
+        <div class="latest" id="latest">63</div>
+        <div class="title" id="title">Evening Draw</div>
+        <div class="subtitle" id="subtitle">Watch your numbers light up</div>
+        <div class="count" id="count">9 numbers drawn</div>
+    </aside>
+    <section class="board">
+        <div class="header"><strong>DRAW BOARD</strong><span>1–80 · LATEST NUMBER IN BLUE</span></div>
+        <div class="numbers" id="numbers"></div>
+    </section>
+</main>
+<script>
+	const
+		ALL = Array.from({length: 80}, (_, i) => i + 1);
+	const $ = id => document.getElementById(id), cells = new Map();
+	ALL.forEach(n => {
+		const cell = document.createElement("div");
+		cell.className = "number";
+		cell.textContent = n;
+		$("numbers").append(cell);
+		cells.set(n, cell)
+	});
+	function render(numbers) {
+		const values = (Array.isArray(numbers) ? numbers : []).map(Number).filter(n => n >= 1 && n <= 80), hits = new Set(values), latest = values.at(-1);
+		cells.forEach((cell, n) => {
+			cell.classList.toggle("hit", hits.has(n));
+			cell.classList.toggle("latest", n === latest)
+		});
+		$("latest").textContent = latest ?? "—";
+		$("count").textContent = `${hits.size} ${hits.size === 1 ? "number" : "numbers"} drawn`
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.content?.title != null) $("title").textContent = detail.content.title;
+		if (detail.content?.subtitle != null) $("subtitle").textContent = detail.content.subtitle;
+		if (detail.draw?.numbers != null) render(detail.draw.numbers)
+	});
+</script>
+</body>
+</html>

package/templates/games/gambling/keno/manifest.json ADDED Viewed

@@ -0,0 +1,129 @@
+{
+  "instructions": "Select all numbers drawn in the current game and edit the draw title or subtitle as needed. Press Update after each draw to refresh the board. Use Reset draw to clear the numbers, then press Update to publish the reset.",
+  "meta": {
+    "content/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Draw title", "hint": "Enter draw title",
+      "default": "Evening Draw"
+    },
+    "content/subtitle": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Subtitle", "hint": "Enter subtitle",
+      "default": "Watch your numbers light up"
+    },
+    "draw/numbers": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Drawn numbers", "hint": "Numbers selected in the current draw",
+      "choose": [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        25,
+        26,
+        27,
+        28,
+        29,
+        30,
+        31,
+        32,
+        33,
+        34,
+        35,
+        36,
+        37,
+        38,
+        39,
+        40,
+        41,
+        42,
+        43,
+        44,
+        45,
+        46,
+        47,
+        48,
+        49,
+        50,
+        51,
+        52,
+        53,
+        54,
+        55,
+        56,
+        57,
+        58,
+        59,
+        60,
+        61,
+        62,
+        63,
+        64,
+        65,
+        66,
+        67,
+        68,
+        69,
+        70,
+        71,
+        72,
+        73,
+        74,
+        75,
+        76,
+        77,
+        78,
+        79,
+        80
+      ],
+      "cols": 10,
+      "rows": 8,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": [
+        4,
+        11,
+        23,
+        37,
+        44,
+        52,
+        58,
+        71,
+        63
+      ]
+    },
+    "draw/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset draw", "hint": "Clear every number from the current draw",
+      "values": {
+        "draw/numbers": []
+      }
+    }
+  }
+}