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/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/games/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": []
+      }
+    }
+  }
+}