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

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Side Chat</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
+        }
+        .chat {
+            position: absolute;
+            right: 3%;
+            top: 8%;
+            width: 40rem;
+            max-height: 84%;
+            padding: 1.5rem;
+            background: #080c14e8;
+            border: 1px solid #ffffff29;
+            border-radius: 1rem;
+            box-shadow: 0 1.2rem 3rem #0006;
+            overflow: hidden
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            padding: .2rem .25rem .85rem;
+            border-bottom: 1px solid #ffffff1f;
+            font-size: 1.7rem;
+            font-weight: 900
+        }
+        .live {
+            color: #52e39c;
+            font-size: 1.2rem;
+            font-weight: 900;
+            letter-spacing: .12em
+        }
+        .messages {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding-top: 1.2rem
+        }
+        .message {
+            padding: 1.15rem 1.3rem;
+            background: #ffffff13;
+            border-radius: .8rem;
+            border-left: .22rem solid #ff9d18;
+            animation: enter .35s ease both
+        }
+        .author {
+            color: #ffb449;
+            font-size: 1.45rem;
+            font-weight: 900;
+            margin-bottom: .35rem
+        }
+        .text {
+            font-size: 1.75rem;
+            line-height: 1.35;
+            overflow-wrap: anywhere
+        }
+        @keyframes enter {
+            from {
+                opacity: 0;
+                transform: translateX(2rem)
+            }
+        }
+    </style>
+</head>
+<body>
+<aside class="chat">
+    <div class="header"><span id="title">LIVE CHAT</span><span class="live">● LIVE</span></div>
+    <div class="messages" id="messages"></div>
+</aside>
+<script>
+	const $ = id => document.getElementById(id);
+	let lastMessage = "", limit = 5;
+	function addMessage(author, text) {
+		const signature = `${author}\u0000${text}`;
+		if (!text || signature === lastMessage) return;
+		lastMessage = signature;
+		const item = document.createElement("div"), name = document.createElement("div"), body = document.createElement("div");
+		item.className = "message";
+		name.className = "author";
+		body.className = "text";
+		name.textContent = author || "Viewer";
+		body.textContent = text;
+		item.append(name, body);
+		$("messages").append(item);
+		while ($("messages").children.length > limit) $("messages").firstElementChild.remove()
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.chat?.title != null) $("title").textContent = detail.chat.title;
+		if (detail.chat?.maxMessages != null) limit = Math.max(1, Math.min(8, Number(detail.chat.maxMessages) || 5));
+		if (detail.message?.text != null) addMessage(detail.message.author, detail.message.text)
+	});
+</script>
+</body>
+</html>

package/templates/all/engagement/chat/manifest.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "instructions": "Enter an author and message, then press Update to append it to the live chat. Set the maximum message count to control how many recent messages remain visible in the side panel.",
+  "meta": {
+    "chat/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Panel title", "hint": "Enter panel title",
+      "default": "LIVE CHAT"
+    },
+    "chat/maxMessages": {
+      "type": "number",
+      "phase": "edit",
+      "label": "Messages shown", "hint": "Enter maximum",
+      "min": 1,
+      "max": 8,
+      "default": 5
+    },
+    "message/author": {
+      "type": "string",
+      "phase": "play",
+      "label": "Author", "hint": "Enter author name",
+      "default": "Nebular viewer"
+    },
+    "message/text": {
+      "type": "string",
+      "phase": "play",
+      "label": "New message", "hint": "Enter message",
+      "default": "",
+      "clear": true
+    }
+  }
+}

package/templates/all/engagement/post/index.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Social Post</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            color: #16202a;
+            font-family: Inter, system-ui, sans-serif
+        }
+        .post {
+            position: absolute;
+            left: 50%;
+            bottom: 8%;
+            width: 64rem;
+            padding: 2rem 2.4rem;
+            border-radius: 1.1rem;
+            background: #fffffff7;
+            border: 1px solid #d9e1e8;
+            box-shadow: 0 1.4rem 4rem #00000047;
+            opacity: 0;
+            transform: translate(-50%, 2rem) scale(.97);
+            transition: opacity .35s ease, transform .35s ease
+        }
+        .post.visible {
+            opacity: 1;
+            transform: translate(-50%, 0) scale(1)
+        }
+        .top {
+            display: flex;
+            align-items: center;
+            gap: 1.3rem
+        }
+        .avatar {
+            width: 5.5rem;
+            height: 5.5rem;
+            border-radius: 50%;
+            display: grid;
+            place-items: center;
+            background: linear-gradient(135deg, #ff9d18, #ff4b55);
+            color: #fff;
+            font-size: 1.8rem;
+            font-weight: 900
+        }
+        .identity {
+            flex: 1
+        }
+        .name {
+            font-size: 2rem;
+            font-weight: 850
+        }
+        .handle {
+            color: #657786;
+            font-size: 1.5rem
+        }
+        .mark {
+            color: #1d9bf0;
+            font-size: 2.6rem;
+            font-weight: 900
+        }
+        .message {
+            margin-top: 1.4rem;
+            font-size: 2.35rem;
+            line-height: 1.45;
+            overflow-wrap: anywhere
+        }
+    </style>
+</head>
+<body>
+<article class="post" id="post">
+    <div class="top">
+        <div class="avatar" id="avatar">NS</div>
+        <div class="identity">
+            <div class="name" id="name">Nebular Streams</div>
+            <div class="handle" id="handle">@nebularstreams</div>
+        </div>
+        <div class="mark">✦</div>
+    </div>
+    <div class="message" id="message">Broadcast graphics, beautifully simple.</div>
+</article>
+<script>
+	let timer, lastMessage = "";
+	const
+		$ = id => document.getElementById(id),
+		initials = name => String(name || "NS").trim().split(/\s+/).slice(0, 2).map(word => word[0]).join("").toUpperCase();
+	function show(duration) {
+		clearTimeout(timer);
+		$("post").classList.remove("visible");
+		requestAnimationFrame(() => requestAnimationFrame(() => $("post").classList.add("visible")));
+		timer = setTimeout(() => $("post").classList.remove("visible"), Math.max(1, duration) * 1000)
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.author?.name != null) {
+			$("name").textContent = detail.author.name;
+			$("avatar").textContent = initials(detail.author.name)
+		}
+		if (detail.author?.handle != null) $("handle").textContent = detail.author.handle;
+		if (detail.post?.message != null) $("message").textContent = detail.post.message;
+		const signature = `${detail.author?.handle || ""}\u0000${detail.post?.message || ""}`;
+		if (detail.post?.message != null && signature !== lastMessage) {
+			lastMessage = signature;
+			show(Number(detail.post?.duration) || 8)
+		}
+	});
+</script>
+</body>
+</html>

package/templates/all/engagement/post/manifest.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "instructions": "Enter the author, handle and post text, choose how long it should remain visible, then press Update. Each update presents the post and hides it automatically after the selected duration.",
+  "meta": {
+    "author/name": {
+      "type": "string",
+      "phase": "play",
+      "label": "Display name", "hint": "Enter display name",
+      "default": "Nebular Streams"
+    },
+    "author/handle": {
+      "type": "string",
+      "phase": "play",
+      "label": "Handle", "hint": "e.g. @channel",
+      "default": "@nebularstreams"
+    },
+    "post/message": {
+      "type": "string",
+      "phase": "play",
+      "label": "Post", "hint": "Enter post text",
+      "default": "Broadcast graphics, beautifully simple."
+    },
+    "post/duration": {
+      "type": "number",
+      "phase": "edit",
+      "label": "Visible seconds", "hint": "Enter seconds",
+      "min": 1,
+      "max": 60,
+      "default": 8
+    }
+  }
+}

package/templates/all/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/all/gambling/bingo/manifest.json ADDED Viewed

@@ -0,0 +1,144 @@
+{
+  "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": []
+      }
+    }
+  }
+}