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/lottery/index.html ADDED Viewed

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Lottery Draw</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
+        }
+        .draw {
+            position: absolute;
+            left: 6%;
+            right: 6%;
+            bottom: 9%;
+            padding: 1.5rem 1.8rem 1.8rem;
+            background: linear-gradient(135deg, #281451f2, #0c1838f2);
+            border: 1px solid #ffffff38;
+            border-radius: 1.4rem;
+            box-shadow: 0 1.5rem 4rem #0006
+        }
+        .head {
+            display: flex;
+            justify-content: space-between;
+            align-items: end
+        }
+        .eyebrow {
+            color: #8ce8ff;
+            font-size: 1.2rem;
+            font-weight: 850;
+            letter-spacing: .18em
+        }
+        .title {
+            margin-top: .25rem;
+            font-size: 2.6rem;
+            font-weight: 950
+        }
+        .status {
+            color: #c8c6dd;
+            font-size: 1.3rem;
+            font-weight: 750
+        }
+        .balls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1.1rem;
+            min-height: 12rem;
+            margin-top: 1.2rem;
+            padding: 1.2rem;
+            border-radius: 1rem;
+            background: #ffffff0c
+        }
+        .empty {
+            color: #ffffff66;
+            font-size: 1.6rem;
+            font-weight: 750
+        }
+        .ball {
+            width: 8rem;
+            height: 8rem;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: radial-gradient(circle at 32% 25%, #fff 0 7%, #70e2ff 29%, #385ddb 72%);
+            border: .45rem solid #ffffffc7;
+            color: #10173c;
+            font-size: 3rem;
+            font-weight: 950;
+            box-shadow: inset -.7rem -.8rem 1.2rem #14217666, 0 .8rem 1.6rem #0006
+        }
+        .ball.latest {
+            width: 9.5rem;
+            height: 9.5rem;
+            background: radial-gradient(circle at 32% 25%, #fff 0 7%, #ffe66d 29%, #ff8d21 72%);
+            animation: drop .45s cubic-bezier(.2, .9, .35, 1.25)
+        }
+        .order {
+            margin-top: .65rem;
+            text-align: center;
+            color: #aaa9c3;
+            font-size: 1.15rem;
+            font-weight: 800;
+            letter-spacing: .1em
+        }
+        @keyframes drop {
+            from {
+                opacity: 0;
+                transform: translateY(-4rem) rotate(-20deg) scale(.6)
+            }
+        }
+    </style>
+</head>
+<body>
+<section class="draw">
+    <div class="head">
+        <div>
+            <div class="eyebrow" id="eyebrow">OFFICIAL DRAW</div>
+            <div class="title" id="title">Lucky 49</div>
+        </div>
+        <div class="status" id="status">6 numbers drawn</div>
+    </div>
+    <div class="balls" id="balls"></div>
+    <div class="order">NUMBERS ARE DISPLAYED IN DRAW ORDER</div>
+</section>
+<script>
+	const ALL = Array.from({length: 49}, (_, i) => i + 1);
+	const $ = id => document.getElementById(id);
+	function render(numbers) {
+		const values = (Array.isArray(numbers) ? numbers : []).map(Number).filter(n => n >= 1 && n <= 49), holder = $("balls");
+		holder.replaceChildren();
+		if (!values.length) {
+			const empty = document.createElement("div");
+			empty.className = "empty";
+			empty.textContent = "Waiting for the first number…";
+			holder.append(empty)
+		} else values.forEach((number, index) => {
+			const ball = document.createElement("div");
+			ball.className = `ball ${index === values.length - 1 ? "latest" : ""}`;
+			ball.textContent = number;
+			holder.append(ball)
+		});
+		$("status").textContent = `${values.length} ${values.length === 1 ? "number" : "numbers"} drawn`
+	}
+	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.draw?.numbers != null) render(detail.draw.numbers)
+	});
+</script>
+</body>
+</html>

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

@@ -0,0 +1,95 @@
+{
+  "instructions": "Select the official drawn numbers, edit the lottery title and draw label if needed, then press Update to publish the result strip. Use Reset draw to clear the numbers, then press Update to publish the reset.",
+  "meta": {
+    "content/eyebrow": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Draw label", "hint": "Enter short label",
+      "default": "OFFICIAL DRAW"
+    },
+    "content/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Lottery title", "hint": "Enter lottery title",
+      "default": "Lucky 49"
+    },
+    "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
+      ],
+      "cols": 7,
+      "rows": 7,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": [
+        7,
+        14,
+        22,
+        31,
+        38,
+        46
+      ]
+    },
+    "draw/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset draw", "hint": "Clear every number from the current draw",
+      "values": {
+        "draw/numbers": []
+      }
+    }
+  }
+}

package/templates/games/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/games/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"
+      }
+    }
+  }
+}