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

@@ -0,0 +1,249 @@
+<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent;
+            font-family: Inter, Arial, sans-serif
+        }
+        body {
+            color: #fff
+        }
+        .game {
+            position: relative;
+            width: 100%;
+            height: 100%
+        }
+        .letters {
+            position: absolute;
+            inset: 0;
+            aspect-ratio: 1 / 1;
+            height: 900px;
+            left: calc(50% - 450px);
+            top: calc(50% - 450px);
+        }
+        .letter {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            display: grid;
+            place-items: center;
+            width: 4.25rem;
+            height: 4.25rem;
+            border: .22rem solid #8cddff;
+            border-radius: 50%;
+            color: #fff;
+            background: linear-gradient(145deg, #198ee8, #0758b4);
+            box-shadow: 0 .55rem 1.2rem #0008, inset 0 .14rem .4rem #ffffff4a, 0 0 1rem #159cff55;
+            font-size: 1.75rem;
+            font-weight: 950;
+            transform: translate(-50%, -50%);
+            transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease
+        }
+        .letter.correct {
+            border-color: #a9ffd1;
+            background: linear-gradient(145deg, #24cf75, #087b42);
+            box-shadow: 0 .55rem 1.2rem #0008, inset 0 .14rem .4rem #ffffff52, 0 0 1.4rem #20e77d99
+        }
+        .letter.failed {
+            border-color: #ffc1c6;
+            background: linear-gradient(145deg, #f34657, #a80e23);
+            box-shadow: 0 .55rem 1.2rem #0008, inset 0 .14rem .4rem #ffffff45, 0 0 1.4rem #ff334d88
+        }
+        .answers-label {
+            color: #8bcce9;
+            font-size: .86rem;
+            font-weight: 850;
+            letter-spacing: .32em
+        }
+        .clock, .answers-holder {
+            --progress: 1;
+            position: absolute;
+            display: grid;
+            place-items: center;
+            width: 10rem;
+            height: 10rem;
+            margin: 1.35rem auto 1rem;
+            border-radius: 50%;
+            background: conic-gradient(white, calc(var(--progress) * 1turn), #132b45 0);
+            filter: drop-shadow(0 0 1.5rem #159cff55);
+            bottom: 0;
+            left: 2rem;
+        }
+        .clock::before {
+            content: "";
+            position: absolute;
+            inset: .8rem;
+            border-radius: inherit;
+            background: radial-gradient(circle at 50% 35%, orange, #ff4400 72%);
+            border: .1rem solid #a5e7ff55;
+        }
+        .seconds {
+            position: relative;
+            font-size: 5rem;
+            font-weight: 950;
+            font-variant-numeric: tabular-nums;
+            line-height: 1
+        }
+        .clock-status {
+            min-height: 1.3rem;
+            color: #62d2ff;
+            font-size: .9rem;
+            font-weight: 850;
+            letter-spacing: .28em;
+            margin: 1rem;
+            position: absolute;
+        }
+        .divider {
+            height: .1rem;
+            margin: 2rem 0;
+            background: linear-gradient(90deg, transparent, #7cdcff66, transparent)
+        }
+        #answers {
+            background: #00aa00;
+            width: 5rem;
+            height: 5rem;
+            border-radius: 10000px;
+            line-height: 5rem;
+            text-align: center;
+            font-weight: bold;
+        }
+        .answers-holder {
+            left: 11rem;
+            width: 6rem;
+            height: 6rem;
+            color: white;
+            font-size: 2.5rem;
+            bottom: 1.5rem;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body>
+<main class="game">
+    <section class="halo">
+        <div class="letters" id="letters"></div>
+    </section>
+    <div class="clock" id="clock">
+        <div class="seconds" id="seconds">60</div>
+    </div>
+    <div class="answers-holder">
+        <div class="answers" id="answers">0</div>
+    </div>
+    <div class="clock-status" id="clock-status">PAUSA</div>
+</main>
+<script>
+	const
+		LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
+		$ = id => document.getElementById(id),
+		cells = new Map();
+	let
+		correct = new Set(),
+		failed = new Set(),
+		remaining = Number($("seconds").textContent),
+		total = remaining,
+		running = false,
+		startedAt = 0,
+		startedWith = remaining,
+		animationGeneration = 0;
+	LETTERS.forEach((letter, index) => {
+		const
+			angle = (index / LETTERS.length) * Math.PI * 2 - Math.PI / 2,
+			cell = document.createElement("div");
+		cell.className = "letter";
+		cell.textContent = letter;
+		cell.style.left = `${50 + Math.cos(angle) * 43}%`;
+		cell.style.top = `${50 + Math.sin(angle) * 43}%`;
+		$("letters").append(cell);
+		cells.set(letter, cell)
+	});
+	function renderLetters() {
+		cells.forEach((cell, letter) => {
+			cell.classList.toggle("correct", correct.has(letter));
+			cell.classList.toggle("failed", !correct.has(letter) && failed.has(letter));
+		});
+		$("answers").textContent = correct.size
+	}
+	function renderClock() {
+		$("seconds").textContent = Math.max(0, Math.ceil(remaining));
+		$("clock").style.setProperty("--progress", total > 0 ? Math.max(0, remaining / total) : 0);
+		$("clock-status").textContent = remaining <= 0 ? "FIN" : running ? "EN MARCHA" : "PAUSA"
+	}
+	function readElapsed(now = performance.now()) {
+		if (running) remaining = Math.max(0, startedWith - (now - startedAt) / 1000);
+		return remaining
+	}
+	function animateClock(generation) {
+		if (!running || generation !== animationGeneration) return;
+		readElapsed();
+		if (remaining <= 0) running = false;
+		renderClock();
+		if (running) requestAnimationFrame(() => animateClock(generation))
+	}
+	function setSeconds(value) {
+		remaining = Math.max(0, Number(value) || 0);
+		total = Math.max(remaining, 1);
+		startedWith = remaining;
+		startedAt = performance.now();
+		renderClock()
+	}
+	function setClockStatus(status) {
+		const shouldRun = status === "running" && remaining > 0;
+		readElapsed();
+		running = shouldRun;
+		animationGeneration++;
+		if (running) {
+			startedWith = remaining;
+			startedAt = performance.now();
+			requestAnimationFrame(() => animateClock(animationGeneration))
+		} else renderClock()
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (Array.isArray(detail.game?.correct)) correct = new Set(detail.game.correct.map(String));
+		if (Array.isArray(detail.game?.failed)) failed = new Set(detail.game.failed.map(String));
+		if (Array.isArray(detail.game?.correct) || Array.isArray(detail.game?.failed)) renderLetters();
+		if (detail.timer?.seconds != null) setSeconds(detail.timer.seconds);
+		if (detail.timer?.status != null) setClockStatus(detail.timer.status)
+	});
+</script>
+</body>
+</html>

package/templates/all/trivia/pasapalabra/manifest.json ADDED Viewed

@@ -0,0 +1,68 @@
+{
+  "instructions": "Set the available time, mark letters as correct or failed as answers are given, and use the clock control to run or pause the countdown. Press Update after each game-state change. Use Reset game to clear all answers, restore 60 seconds and pause the clock, then press Update.",
+  "meta": {
+    "timer/seconds": {
+      "type": "number",
+      "phase": "edit",
+      "label": "Time", "hint": "Enter seconds",
+      "container": "small",
+      "min": 0,
+      "max": 600,
+      "default": 60
+    },
+    "timer/status": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Clock", "hint": "Start or pause the game clock",
+      "choose": [
+        "running",
+        "paused"
+      ],
+      "default": "paused"
+    },
+    "game/correct": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Correct answers", "hint": "Letters answered correctly",
+      "choose": [
+        "A", "B", "C", "D", "E", "F", "G", "H", "I",
+        "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q",
+        "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
+      ],
+      "cols": 9,
+      "rows": 3,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": []
+    },
+    "game/failed": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Failed answers", "hint": "Letters answered incorrectly",
+      "choose": [
+        "A", "B", "C", "D", "E", "F", "G", "H", "I",
+        "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q",
+        "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
+      ],
+      "cols": 9,
+      "rows": 3,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": []
+    },
+    "game/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset game", "hint": "Clear all answers and return the clock to its initial state",
+      "values": {
+        "timer/seconds": 60,
+        "timer/status": "paused",
+        "game/correct": [],
+        "game/failed": []
+      }
+    }
+  }
+}

package/templates/all/trivia/quiz-deck/index.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Quiz Deck</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #7c5cff; color: white; font-family: Inter, Arial, sans-serif; }
+        .deck { position: absolute; left: 5%; right: 5%; bottom: 5%; display: grid; grid-template-columns: 230px 1fr; min-height: 235px; border-radius: 25px; overflow: hidden; background: rgba(12,13,25,.96); border: 2px solid #ffffff22; box-shadow: 0 22px 65px #000a; }
+        .rail { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #080918)); text-align: center; }
+        .count { font-size: 67px; line-height: 1; font-weight: 950; }
+        .total { margin-top: 8px; font-size: 18px; font-weight: 800; letter-spacing: .12em; opacity: .82; }
+        .title { margin-top: 20px; font-size: 18px; font-weight: 950; letter-spacing: .1em; }
+        .card { display: flex; flex-direction: column; justify-content: center; padding: 28px 42px; }
+        .eyebrow { margin-bottom: 12px; color: var(--accent); font-size: 20px; font-weight: 900; letter-spacing: .18em; }
+        .copy { font-size: 44px; line-height: 1.14; font-weight: 850; text-wrap: balance; transition: opacity .18s ease, transform .18s ease; }
+        .answer .eyebrow::after { content: "ANSWER"; }
+        .question .eyebrow::after { content: "QUESTION"; }
+        .answer .copy { color: color-mix(in srgb, var(--accent) 70%, white); }
+    </style>
+</head>
+<body>
+<section class="deck" id="deck">
+    <aside class="rail"><div class="count" id="current">1</div><div class="total" id="total">OF 3</div><div class="title" id="title">THE BIG QUIZ</div></aside>
+    <main class="card question" id="card"><div class="eyebrow"></div><div class="copy" id="copy">What is the largest ocean on Earth?</div></main>
+</section>
+<script>
+    const state = {
+        questions: [
+            {question: "What is the largest ocean on Earth?", answer: "The Pacific Ocean"},
+            {question: "How many sides does a dodecagon have?", answer: "12"},
+            {question: "Which element has the symbol Au?", answer: "Gold"}
+        ],
+        current: 1, display: "question"
+    };
+    function render() {
+        const count = state.questions.length;
+        const index = Math.max(0, Math.min(count - 1, Number(state.current || 1) - 1));
+        const item = state.questions[index] || {question: "Ready for the next question?", answer: ""};
+        const answer = state.display === "answer";
+        document.getElementById("current").textContent = count ? index + 1 : 0;
+        document.getElementById("total").textContent = `OF ${count}`;
+        document.getElementById("copy").textContent = answer ? item.answer : item.question;
+        document.getElementById("card").className = `card ${answer ? "answer" : "question"}`;
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        if (Array.isArray(detail.questions)) state.questions = detail.questions;
+        if (detail.control?.current != null) state.current = detail.control.current;
+        if (detail.control?.display != null) state.display = detail.control.display;
+        if (detail.content?.title != null) document.getElementById("title").textContent = detail.content.title;
+        if (detail.style?.accent != null) document.body.style.setProperty("--accent", detail.style.accent);
+        render();
+    });
+    render();
+</script>
+</body>
+</html>

package/templates/all/trivia/quiz-deck/manifest.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "instructions": "Build the question-and-answer deck, select the current question number and publish it in question mode. Switch Display to answer and press Update when the answer should be revealed.",
+  "meta": {
+    "content/title": {"type": "string", "phase": "edit", "label": "Quiz title", "hint": "Enter quiz title", "default": "THE BIG QUIZ"},
+    "questions": {
+      "type": "set",
+      "phase": "edit",
+      "label": "Question deck", "hint": "Ordered collection of questions and possible answers",
+      "max": 20,
+      "container": "big",
+      "default": [
+        {"question": "What is the largest ocean on Earth?", "answer": "The Pacific Ocean"},
+        {"question": "How many sides does a dodecagon have?", "answer": "12"},
+        {"question": "Which element has the symbol Au?", "answer": "Gold"}
+      ],
+      "meta": {
+        "question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question"},
+        "answer": {"type": "string", "phase": "edit", "label": "Answer", "hint": "Enter answer"}
+      }
+    },
+    "control/current": {"label": "Current question", "phase": "play", "type": "selector", "set": "questions"},
+    "control/display": {"type": "choose", "phase": "play", "label": "Display", "hint": "Choose which part of the current card viewers see", "choose": ["question", "answer"], "default": "question"},
+    "style/accent": {"type": "color", "phase": "edit", "label": "Accent", "hint": "Accent colour used by the quiz graphic", "default": "#7c5cff"}
+  }
+}

package/templates/all/trivia/true-or-false/index.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>True or False</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #19d3ae; color: #fff; font-family: Inter, Arial, sans-serif; }
+        .panel { position: absolute; left: 5%; right: 5%; bottom: 5%; padding: 25px 30px 28px; border-radius: 26px; background: rgba(7,17,22,.96); border: 2px solid #ffffff24; box-shadow: 0 24px 64px #000a; transition: opacity .35s ease, transform .35s ease; }
+        .panel.hidden { opacity: 0; transform: translateY(35px); }
+        .header { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
+        .category { padding: 9px 16px; border-radius: 999px; color: #071613; background: var(--accent); font-size: 20px; font-weight: 950; letter-spacing: .12em; }
+        .statement { font-size: 39px; line-height: 1.14; font-weight: 850; text-wrap: balance; }
+        .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+        .choice { display: grid; place-items: center; height: 82px; border: 2px solid #ffffff22; border-radius: 17px; background: #ffffff0a; font-size: 34px; font-weight: 950; letter-spacing: .08em; transition: .35s ease; }
+        .revealed .choice:not(.correct) { opacity: .25; }
+        .revealed .choice.correct { color: #071613; background: var(--accent); border-color: white; box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 50%, transparent); }
+        .explanation { display: none; margin-top: 15px; color: #d9fff7; font-size: 25px; font-weight: 650; }
+        .revealed .explanation { display: block; }
+    </style>
+</head>
+<body>
+<section class="panel" id="panel">
+    <div class="header"><span class="category" id="category">SCIENCE</span><div class="statement" id="statement">Lightning never strikes the same place twice.</div></div>
+    <div class="choices"><div class="choice" data-choice="true">TRUE</div><div class="choice" data-choice="false">FALSE</div></div>
+    <div class="explanation" id="explanation">Lightning can strike the same place repeatedly.</div>
+</section>
+<script>
+    const state = {
+        questions: [
+            {category: "SCIENCE", statement: "Lightning never strikes the same place twice.", correct: "false", explanation: "Lightning can strike the same place repeatedly."},
+            {category: "GEOGRAPHY", statement: "The Great Wall of China is visible from the Moon with the naked eye.", correct: "false", explanation: "It is far too narrow to be distinguished from the Moon."},
+            {category: "NATURE", statement: "Octopuses have three hearts.", correct: "true", explanation: "Two pump blood to the gills and one pumps it around the body."}
+        ],
+        current: 1,
+        timing: {questionSeconds: 8, answerSeconds: 4},
+        timers: []
+    };
+    const dom = {
+        body: document.body,
+        panel: document.getElementById("panel"),
+        category: document.getElementById("category"),
+        statement: document.getElementById("statement"),
+        explanation: document.getElementById("explanation"),
+        choices: [...document.querySelectorAll("[data-choice]")]
+    };
+    const seconds = (value, fallback) => Math.max(.25, Number(value) || fallback);
+    function clearSequence() {
+        state.timers.forEach(clearTimeout);
+        state.timers = [];
+    }
+    function startCurrentQuestion() {
+        clearSequence();
+        const index = Math.max(0, Math.min(state.questions.length - 1, Number(state.current || 1) - 1));
+        const question = state.questions[index];
+        if (!question) { dom.panel.classList.add("hidden"); return; }
+        dom.category.textContent = question.category ?? "TRUE OR FALSE";
+        dom.statement.textContent = question.statement ?? "";
+        dom.explanation.textContent = question.explanation ?? "";
+        dom.choices.forEach(el => el.classList.toggle("correct", el.dataset.choice === question.correct));
+        dom.panel.classList.remove("revealed", "hidden");
+        state.timers.push(setTimeout(() => {
+            dom.panel.classList.add("revealed");
+            state.timers.push(setTimeout(() => dom.panel.classList.add("hidden"), seconds(state.timing.answerSeconds, 4) * 1000));
+        }, seconds(state.timing.questionSeconds, 8) * 1000));
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        let shouldStart = false;
+        if (Array.isArray(detail.questions)) { state.questions = detail.questions; shouldStart = true; }
+        if (detail.control?.current != null) { state.current = detail.control.current; shouldStart = true; }
+        if (detail.timing?.questionSeconds != null) state.timing.questionSeconds = detail.timing.questionSeconds;
+        if (detail.timing?.answerSeconds != null) state.timing.answerSeconds = detail.timing.answerSeconds;
+        if (detail.style?.accent != null) dom.body.style.setProperty("--accent", detail.style.accent);
+        if (shouldStart) startCurrentQuestion();
+    });
+</script>
+</body>
+</html>

package/templates/all/trivia/true-or-false/manifest.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "instructions": "Build the question set, then select a question number and press Update. The statement appears, its answer is revealed automatically, and the overlay then hides until another question is selected.",
+  "meta": {
+    "questions": {
+      "type": "set",
+      "phase": "edit",
+      "label": "Questions", "hint": "Statements and their true-or-false answers",
+      "max": 30,
+      "container": "big",
+      "default": [
+        {"category": "SCIENCE", "statement": "Lightning never strikes the same place twice.", "correct": "false", "explanation": "Lightning can strike the same place repeatedly."},
+        {"category": "GEOGRAPHY", "statement": "The Great Wall of China is visible from the Moon with the naked eye.", "correct": "false", "explanation": "It is far too narrow to be distinguished from the Moon."},
+        {"category": "NATURE", "statement": "Octopuses have three hearts.", "correct": "true", "explanation": "Two pump blood to the gills and one pumps it around the body."}
+      ],
+      "meta": {
+        "category": {"type": "string", "phase": "edit", "label": "Category", "hint": "Enter category"},
+        "statement": {"type": "string", "phase": "edit", "label": "Statement", "hint": "Enter statement"},
+        "correct": {"type": "choose", "phase": "edit", "label": "Correct answer", "hint": "Whether the statement is true or false", "choose": ["true", "false"], "default": "true"},
+        "explanation": {"type": "string", "phase": "edit", "label": "Explanation", "hint": "Enter explanation"}
+      }
+    },
+    "control/current": {"type": "selector", "phase": "play", "label": "Question to show", "set": "questions", "default": 1},
+    "timing/questionSeconds": {"type": "number", "phase": "edit", "label": "Question time", "hint": "Enter seconds", "min": 1, "max": 300, "default": 10},
+    "timing/answerSeconds": {"type": "number", "phase": "edit", "label": "Answer time", "hint": "Enter seconds", "min": 1, "max": 60, "default": 10},
+    "style/accent": {"type": "color", "phase": "edit", "label": "Accent", "hint": "Accent colour used by the game graphic", "default": "#19d3ae"}
+  }
+}

package/templates/basic/broadcast/empty/index.html ADDED Viewed

@@ -0,0 +1,46 @@
+<html>
+<head>
+    <style>
+        body {
+            font-family: sans-serif;
+            margin: 1.5rem;
+            color: white;
+        }
+        h1 {
+            font-weight: bold;
+        }
+        #logo {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+            display: none;
+            width: 10rem;
+        }
+        #logo.on {
+            display: block;
+        }
+    </style>
+    <script>
+		window.addEventListener("nebular-overlay:update", ({detail}) => {
+			const
+				programElement = document.getElementById("program"),
+				logoElement = document.getElementById("logo");
+			if (typeof detail.program === "string") programElement.textContent = detail.program;
+			if (detail.logo) logoElement.classList.toggle("on", detail.logo === "on");
+		});
+    </script>
+</head>
+<body>
+<h1 id="program"></h1>
+<img id="logo" src="nebular.medallion.transparent.png">
+</body>
+</html>

package/templates/basic/broadcast/empty/manifest.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "instructions": "Empty overlay with the program name",
+  "meta": {
+    "program": {"type": "string", "default": "", "hint": "Type the program name", "label": "Program Name"},
+    "logo": {"type": "choose", "default": "off", "hint": "Logo ON/OFF", "label": "Logo Visibility", "choose": ["on", "off"]}
+  }
+}

package/templates/basic/broadcast/empty/nebular.medallion.transparent.png ADDED Viewed

Binary file