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/all/gambling/prize-wall/index.html ADDED Viewed

@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Prize Wall</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
+        }
+        .wall {
+            position: absolute;
+            inset: auto 5% 9% 5%;
+            display: grid;
+            grid-template-columns:1fr 21rem;
+            gap: 1rem
+        }
+        .board, .reveal {
+            background: #16121ff2;
+            border: 1px solid #ffffff2b;
+            border-radius: 1.2rem;
+            box-shadow: 0 1.5rem 4rem #0006
+        }
+        .board {
+            padding: 1.2rem
+        }
+        .head {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem
+        }
+        .head strong {
+            font-size: 1.7rem;
+            letter-spacing: .1em
+        }
+        .head span {
+            color: #baadc8;
+            font-size: 1.1rem;
+            font-weight: 750
+        }
+        .doors {
+            display: grid;
+            grid-template-columns:repeat(6, minmax(0, 1fr));
+            gap: .65rem
+        }
+        .door {
+            height: 6rem;
+            display: grid;
+            place-items: center;
+            border-radius: .6rem;
+            background: linear-gradient(145deg, #57306e, #27152f);
+            border: 2px solid #ce9cff44;
+            color: #e7d3ff;
+            font-size: 1.9rem;
+            font-weight: 950;
+            box-shadow: inset 0 0 0 .25rem #ffffff08
+        }
+        .door-icon {
+            display: none;
+            font-size: 2.65rem;
+            line-height: 1;
+            filter: grayscale(.2)
+        }
+        .door.open {
+            background: #141119;
+            color: #fff;
+            border-color: #ffffff18
+        }
+        .door.open .door-number,
+        .door.revealed .door-number {
+            display: none
+        }
+        .door.open .door-icon,
+        .door.revealed .door-icon {
+            display: block
+        }
+        .door.revealed {
+            background: #211929;
+            border-color: #8d729f55;
+            color: #cdbed7;
+            opacity: .78
+        }
+        .door.latest {
+            background: linear-gradient(145deg, #ffd95d, #e98914);
+            border-color: #fff0a6;
+            color: #2a1820;
+            transform: scale(1.08);
+            box-shadow: 0 .8rem 1.8rem #0008;
+            animation: open .45s ease
+        }
+        .reveal {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1.5rem;
+            text-align: center;
+            background: radial-gradient(circle at 50% 25%, #56336a, #17121f 68%)
+        }
+        .eyebrow {
+            color: #ffcf55;
+            font-size: 1.15rem;
+            font-weight: 850;
+            letter-spacing: .16em
+        }
+        .prize-number {
+            font-size: 5.5rem;
+            font-weight: 950;
+            line-height: 1;
+            margin: 1.1rem
+        }
+        .prize {
+            font-size: 2.2rem;
+            font-weight: 900
+        }
+        .reveal-icon {
+            margin-top: .5rem;
+            font-size: 3.2rem;
+            line-height: 1
+        }
+        .count {
+            margin-top: 1.5rem;
+            color: #ffc958;
+            font-size: 1.2rem;
+            font-weight: 800
+        }
+        @keyframes open {
+            0% {
+                transform: perspective(20rem) rotateY(85deg)
+            }
+            100% {
+                transform: scale(1.08)
+            }
+        }
+    </style>
+</head>
+<body>
+<main class="wall">
+    <section class="board">
+        <div class="head"><strong id="title">THE PRIZE WALL</strong><span>SELECT A DOOR TO REVEAL IT</span></div>
+        <div class="doors" id="doors"></div>
+    </section>
+    <aside class="reveal">
+        <div class="eyebrow">LATEST REVEAL</div>
+        <div class="prize-number" id="number">—</div>
+        <div class="prize" id="prize">No Prize</div>
+        <div class="reveal-icon" id="revealIcon">🕸️</div>
+        <div class="count" id="count">0 of 30 opened</div>
+    </aside>
+</main>
+<script>
+	const
+		ALL = Array.from({length: 30}, (_, i) => i + 1),
+		ICONS = {
+			none: "🕸️",
+			gift: "🎁",
+			car: "🚘",
+			plane: "✈️",
+			money: "💰",
+			gem: "💎",
+			tv: "📺",
+			phone: "📱",
+			ticket: "🎟️",
+			suitcase: "🧳",
+			star: "⭐"
+		},
+		$ = id => document.getElementById(id),
+		doors = new Map(),
+		state = {prizes: [], opened: [], reveal: "hidden"};
+	ALL.forEach(number => {
+		const
+			door = document.createElement("div"),
+			doorNumber = document.createElement("span"),
+			doorIcon = document.createElement("span");
+		door.className = "door";
+		doorNumber.className = "door-number";
+		doorNumber.textContent = number;
+		doorIcon.className = "door-icon";
+		door.append(doorNumber, doorIcon);
+		$("doors").append(door);
+		doors.set(number, {door, icon: doorIcon})
+	});
+	function render() {
+		const
+			opened = (Array.isArray(state.opened) ? state.opened : []).map(Number).filter(n => n >= 1 && n <= 30),
+			openedSet = new Set(opened),
+			revealAll = state.reveal === "revealed",
+			latest = opened.at(-1),
+			prizes = new Map((Array.isArray(state.prizes) ? state.prizes : [])
+				.map(prize => [Number(prize?.position), prize])
+				.filter(([position]) => position >= 1 && position <= 30)),
+			latestPrize = prizes.get(latest),
+			latestWon = latestPrize?.icon !== "none" && Boolean(latestPrize?.prize?.trim());
+		doors.forEach(({door, icon}, position) => {
+			const
+				prize = prizes.get(position),
+				won = prize?.icon !== "none" && Boolean(prize?.prize?.trim());
+			door.classList.toggle("open", openedSet.has(position));
+			door.classList.toggle("revealed", revealAll && !openedSet.has(position));
+			door.classList.toggle("latest", position === latest);
+			icon.textContent = won ? (ICONS[prize.icon] || ICONS.gift) : ICONS.none;
+			door.title = won ? prize.prize : "No Prize"
+		});
+		$("number").textContent = latest ?? "—";
+		$("prize").textContent = latestWon ? latestPrize.prize : "No Prize";
+		$("revealIcon").textContent = latestWon ? (ICONS[latestPrize.icon] || ICONS.gift) : ICONS.none;
+		$("count").textContent = `${openedSet.size} of 30 opened`
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.content?.title != null) $("title").textContent = detail.content.title;
+		if (detail.game?.prizes != null) state.prizes = detail.game.prizes;
+		if (detail.game?.opened != null) state.opened = detail.game.opened;
+		if (detail.game?.reveal != null) state.reveal = detail.game.reveal;
+		if (detail.game?.prizes != null || detail.game?.opened != null || detail.game?.reveal != null) render()
+	});
+</script>
+</body>
+</html>

package/templates/all/gambling/prize-wall/manifest.json ADDED Viewed

@@ -0,0 +1,108 @@
+{
+  "instructions": "Configure each prize with its wall position, name and icon before play. During the game, select every opened door and press Update; the latest selected door displays its assigned prize automatically. When the game ends, reveal the remaining doors to show where every prize was hidden. Use Reset wall to close every door and hide the remaining prizes, then press Update.",
+  "meta": {
+    "content/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Wall title", "hint": "Enter wall title",
+      "default": "THE PRIZE WALL"
+    },
+    "game/prizes": {
+      "type": "set",
+      "phase": "edit",
+      "label": "Prizes", "hint": "Assign prizes to positions on the wall",
+      "container": "big",
+      "max": 30,
+      "default": [
+        {"position": 2, "prize": "Buick Limousine", "icon": "car"},
+        {"position": 7, "prize": "Tropical Holiday", "icon": "plane"},
+        {"position": 12, "prize": "$10,000 Cash", "icon": "money"},
+        {"position": 19, "prize": "Diamond Necklace", "icon": "gem"},
+        {"position": 25, "prize": "Home Cinema", "icon": "tv"}
+      ],
+      "meta": {
+        "position": {"size": 2, "type": "number", "label": "Position", "hint": "1–30", "min": 1, "max": 30},
+        "prize": {"size": 6, "type": "string", "label": "Prize", "hint": "Enter prize name"},
+        "icon": {
+          "size": 3,
+          "type": "select",
+          "label": "Icon", "hint": "Symbol displayed inside the opened door",
+          "choose": [
+            {"value": "none", "caption": "No prize"},
+            {"value": "gift", "caption": "Gift"},
+            {"value": "car", "caption": "Car"},
+            {"value": "plane", "caption": "Holiday"},
+            {"value": "money", "caption": "Cash"},
+            {"value": "gem", "caption": "Jewellery"},
+            {"value": "tv", "caption": "Television"},
+            {"value": "phone", "caption": "Phone"},
+            {"value": "ticket", "caption": "Tickets"},
+            {"value": "suitcase", "caption": "Luggage"},
+            {"value": "star", "caption": "Special prize"}
+          ],
+          "default": "none"
+        }
+      }
+    },
+    "game/opened": {
+      "type": "multi",
+      "phase": "play",
+      "label": "Opened doors", "hint": "Doors that have already been opened",
+      "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
+      ],
+      "cols": 6,
+      "rows": 5,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": []
+    },
+    "game/reveal": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Remaining prizes", "hint": "Reveal every unopened position when the game ends",
+      "choose": ["hidden", "revealed"],
+      "default": "hidden"
+    },
+    "game/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset wall", "hint": "Close every door and reset the wall",
+      "values": {
+        "game/opened": [],
+        "game/reveal": "hidden"
+      }
+    }
+  }
+}

package/templates/all/gambling/roulette/index.html ADDED Viewed

@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Roulette Hit Map</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
+        }
+        .panel {
+            position: absolute;
+            left: 5%;
+            right: 5%;
+            bottom: 7%;
+            display: grid;
+            grid-template-columns:16rem 1fr;
+            background: #071713f2;
+            border: 1px solid #ffffff2b;
+            border-radius: 1.2rem;
+            overflow: hidden;
+            box-shadow: 0 1.5rem 4rem #0007
+        }
+        .hero {
+            display: grid;
+            place-items: center;
+            align-content: center;
+            padding: 1.5rem;
+            background: radial-gradient(circle at 50% 35%, #194d3b, #06130f 68%);
+            border-right: 1px solid #ffffff1c
+        }
+        .eyebrow {
+            color: #d9b95f;
+            font-size: .76rem;
+            font-weight: 850;
+            letter-spacing: .18em
+        }
+        .ball {
+            width: 9rem;
+            height: 9rem;
+            margin: 1.2rem;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: #16191d;
+            border: .6rem solid #e7d08a;
+            font-size: 4rem;
+            font-weight: 950;
+            box-shadow: 0 1rem 2.5rem #0008
+        }
+        .ball.red {
+            background: #bd2733
+        }
+        .ball.black {
+            background: #17191d
+        }
+        .ball.green {
+            background: #087b4e
+        }
+        .title {
+            font-size: 1.2rem;
+            font-weight: 900
+        }
+        .count {
+            margin-top: .35rem;
+            color: #b4beb9;
+            font-size: .8rem
+        }
+        .table {
+            padding: 1rem
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: .8rem
+        }
+        .header strong {
+            letter-spacing: .12em
+        }
+        .legend {
+            color: #aab6b0;
+            font-size: .72rem
+        }
+        .numbers {
+            display: grid;
+            grid-template-columns:repeat(13, minmax(0, 1fr));
+            gap: .42rem
+        }
+        .number {
+            height: 3.7rem;
+            display: grid;
+            place-items: center;
+            border-radius: .42rem;
+            background: #17191d;
+            border: 1px solid #ffffff20;
+            color: #ffffff69;
+            font-weight: 850
+        }
+        .number.zero {
+            grid-row: 1/span 3;
+            height: auto;
+            background: #087b4e
+        }
+        .number.hit {
+            color: #fff;
+            border-color: #e5cb78;
+            box-shadow: inset 0 0 0 .12rem #e5cb7855
+        }
+        .number.red.hit {
+            background: #8d202a
+        }
+        .number.black.hit {
+            background: #090b0e
+        }
+        .number.latest {
+            color: #172019;
+            background: #e7cf80 !important;
+            transform: scale(1.08);
+            box-shadow: 0 .6rem 1.3rem #0008;
+            z-index: 2
+        }
+    </style>
+</head>
+<body>
+<main class="panel">
+    <section class="hero">
+        <div class="eyebrow">LATEST HIT</div>
+        <div class="ball" id="ball">17</div>
+        <div class="title" id="title">Roulette Heat Map</div>
+        <div class="count" id="count">8 unique numbers</div>
+    </section>
+    <section class="table">
+        <div class="header"><strong>TABLE HISTORY</strong><span class="legend">GOLD · LATEST&nbsp;&nbsp; COLOURED · PREVIOUS</span></div>
+        <div class="numbers" id="numbers"></div>
+    </section>
+</main>
+<script>
+	const RED = new Set([1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36]), ALL = Array.from({length: 37}, (_, i) => i);
+	const $ = id => document.getElementById(id), cells = new Map();
+	ALL.forEach(number => {
+		const cell = document.createElement("div");
+		cell.className = `number ${number === 0 ? "zero green" : RED.has(number) ? "red" : "black"}`;
+		cell.textContent = number;
+		$("numbers").append(cell);
+		cells.set(number, cell)
+	});
+	function update(history) {
+		const values = (Array.isArray(history) ? history : []).map(Number).filter(n => n >= 0 && n <= 36), hits = new Set(values), latest = values.at(-1) ?? 0;
+		cells.forEach((cell, n) => {
+			cell.classList.toggle("hit", hits.has(n));
+			cell.classList.toggle("latest", n === latest)
+		});
+		const ball = $("ball");
+		ball.textContent = latest;
+		ball.className = `ball ${latest === 0 ? "green" : RED.has(latest) ? "red" : "black"}`;
+		$("count").textContent = `${hits.size} unique ${hits.size === 1 ? "number" : "numbers"}`
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.content?.title != null) $("title").textContent = detail.content.title;
+		if (detail.game?.history != null) update(detail.game.history)
+	});
+</script>
+</body>
+</html>

package/templates/all/gambling/roulette/manifest.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "instructions": "Select the roulette numbers represented in the current table history and edit the title if desired. Press Update after the latest result to refresh the heat-map display. Use Reset table to clear the history, then press Update to publish the reset.",
+  "meta": {
+    "content/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Title", "hint": "Enter title",
+      "default": "Roulette Heat Map"
+    },
+    "game/history": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Numbers hit", "hint": "Winning numbers in the order they were called",
+      "choose": [
+        0,
+        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
+      ],
+      "cols": 12,
+      "rows": 4,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": [
+        32,
+        15,
+        0,
+        19,
+        4,
+        21,
+        17
+      ]
+    },
+    "game/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset table", "hint": "Clear the winning-number history",
+      "values": {
+        "game/history": []
+      }
+    }
+  }
+}