@nebularstreams/overlay-sdk 1.0.0

package/templates/games/gaming/battleship/manifest.json

@@ -0,0 +1,279 @@
+{
+  "instructions": "Place the fleet by selecting every coordinate occupied by a ship; adjoining cells form one vessel, so leave water between separate boats. Keep Fleet display hidden during play, then add every coordinate fired upon by the player. The overlay determines hits, misses and sunk vessels automatically. Reveal the fleet when the round ends. Use Reset round to clear all shots and hide the fleet again, then press Update.",
+  "meta": {
+    "content/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Title", "hint": "Enter title",
+      "default": "Fleet Command"
+    },
+    "content/player": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Player", "hint": "Enter player name",
+      "default": "John Carter"
+    },
+    "content/location": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Player location", "hint": "Enter player location",
+      "default": "New York · NY"
+    },
+    "board/fleet": {
+      "type": "multi",
+      "phase": "edit",
+      "container": "big",
+      "label": "Fleet positions", "hint": "Every coordinate occupied by the player's ships",
+      "choose": [
+        "A1",
+        "A2",
+        "A3",
+        "A4",
+        "A5",
+        "A6",
+        "A7",
+        "A8",
+        "A9",
+        "A10",
+        "B1",
+        "B2",
+        "B3",
+        "B4",
+        "B5",
+        "B6",
+        "B7",
+        "B8",
+        "B9",
+        "B10",
+        "C1",
+        "C2",
+        "C3",
+        "C4",
+        "C5",
+        "C6",
+        "C7",
+        "C8",
+        "C9",
+        "C10",
+        "D1",
+        "D2",
+        "D3",
+        "D4",
+        "D5",
+        "D6",
+        "D7",
+        "D8",
+        "D9",
+        "D10",
+        "E1",
+        "E2",
+        "E3",
+        "E4",
+        "E5",
+        "E6",
+        "E7",
+        "E8",
+        "E9",
+        "E10",
+        "F1",
+        "F2",
+        "F3",
+        "F4",
+        "F5",
+        "F6",
+        "F7",
+        "F8",
+        "F9",
+        "F10",
+        "G1",
+        "G2",
+        "G3",
+        "G4",
+        "G5",
+        "G6",
+        "G7",
+        "G8",
+        "G9",
+        "G10",
+        "H1",
+        "H2",
+        "H3",
+        "H4",
+        "H5",
+        "H6",
+        "H7",
+        "H8",
+        "H9",
+        "H10",
+        "I1",
+        "I2",
+        "I3",
+        "I4",
+        "I5",
+        "I6",
+        "I7",
+        "I8",
+        "I9",
+        "I10",
+        "J1",
+        "J2",
+        "J3",
+        "J4",
+        "J5",
+        "J6",
+        "J7",
+        "J8",
+        "J9",
+        "J10"
+      ],
+      "cols": 10,
+      "rows": 10,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": [
+        "A2", "A3", "A4", "A5",
+        "C3", "C4", "C5",
+        "F7", "F8", "F9",
+        "H2", "H3",
+        "J8", "J9"
+      ]
+    },
+    "content/playPlayer": {
+      "type": "string",
+      "phase": "play",
+      "label": "Player", "hint": "Player name displayed during the round",
+      "source": "content/player",
+      "readonly": true
+    },
+    "board/fleetVisibility": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Fleet display", "hint": "Hide the fleet during play or reveal it after the round",
+      "choose": ["hidden", "revealed"],
+      "default": "hidden"
+    },
+    "board/shots": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Player shots", "hint": "Coordinates fired upon by the player",
+      "choose": [
+        "A1",
+        "A2",
+        "A3",
+        "A4",
+        "A5",
+        "A6",
+        "A7",
+        "A8",
+        "A9",
+        "A10",
+        "B1",
+        "B2",
+        "B3",
+        "B4",
+        "B5",
+        "B6",
+        "B7",
+        "B8",
+        "B9",
+        "B10",
+        "C1",
+        "C2",
+        "C3",
+        "C4",
+        "C5",
+        "C6",
+        "C7",
+        "C8",
+        "C9",
+        "C10",
+        "D1",
+        "D2",
+        "D3",
+        "D4",
+        "D5",
+        "D6",
+        "D7",
+        "D8",
+        "D9",
+        "D10",
+        "E1",
+        "E2",
+        "E3",
+        "E4",
+        "E5",
+        "E6",
+        "E7",
+        "E8",
+        "E9",
+        "E10",
+        "F1",
+        "F2",
+        "F3",
+        "F4",
+        "F5",
+        "F6",
+        "F7",
+        "F8",
+        "F9",
+        "F10",
+        "G1",
+        "G2",
+        "G3",
+        "G4",
+        "G5",
+        "G6",
+        "G7",
+        "G8",
+        "G9",
+        "G10",
+        "H1",
+        "H2",
+        "H3",
+        "H4",
+        "H5",
+        "H6",
+        "H7",
+        "H8",
+        "H9",
+        "H10",
+        "I1",
+        "I2",
+        "I3",
+        "I4",
+        "I5",
+        "I6",
+        "I7",
+        "I8",
+        "I9",
+        "I10",
+        "J1",
+        "J2",
+        "J3",
+        "J4",
+        "J5",
+        "J6",
+        "J7",
+        "J8",
+        "J9",
+        "J10"
+      ],
+      "cols": 10,
+      "rows": 10,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": ["A3", "B8", "D4", "F8", "H9", "J8"]
+    },
+    "board/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset round", "hint": "Clear all shots and hide the fleet for a new round",
+      "values": {
+        "board/fleetVisibility": "hidden",
+        "board/shots": []
+      }
+    }
+  }
+}

package/templates/games/gaming/gta/mission/index.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>GTA Mission Panel</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent;
+        }
+
+        body {
+            color: #fff;
+            font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+            letter-spacing: .035em;
+        }
+
+        .mission {
+            position: absolute;
+            right: 5%;
+            top: 9%;
+            width: 34rem;
+            padding: 1.6rem 1.8rem;
+            background: rgba(8, 8, 8, .88);
+            border-left: .55rem solid #78d84b;
+            box-shadow: 0 1rem 3rem #0008;
+            transform: skewX(-2deg);
+        }
+
+        .eyebrow {
+            color: #78d84b;
+            font: 700 .8rem system-ui, sans-serif;
+            letter-spacing: .22em;
+            text-transform: uppercase;
+        }
+
+        h1 {
+            margin: .25rem 0 .5rem;
+            font-size: 2.6rem;
+            text-transform: uppercase;
+            text-shadow: .16rem .16rem 0 #000;
+        }
+
+        .objective {
+            margin: 0 0 1.2rem;
+            color: #ddd;
+            font: 600 1rem system-ui, sans-serif;
+            letter-spacing: normal;
+        }
+
+        .footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .progress {
+            flex: 1;
+            height: .7rem;
+            overflow: hidden;
+            background: #333;
+        }
+
+        .progress span {
+            display: block;
+            width: 65%;
+            height: 100%;
+            background: #78d84b;
+            transition: width .35s ease;
+        }
+
+        .reward {
+            color: #8fea62;
+            font-size: 1.45rem;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<body>
+<section class="mission">
+    <div class="eyebrow">Current objective</div>
+    <h1 id="mission">THE GETAWAY</h1>
+    <p class="objective" id="objective">Reach the safehouse</p>
+    <div class="footer">
+        <div class="progress"><span id="progress"></span></div>
+        <div class="reward" id="reward">$5,000</div>
+    </div>
+</section>
+<script>
+
+	// convenience to assign values
+	const $ = (name, value) => {
+		const element = document.getElementById(name);
+		if (element) {
+			if (value !== undefined) element.textContent = String(value);
+			else return element;
+		}
+	}
+
+	function setProgress(value) {
+		const percentage = Math.max(0, Math.min(100, Number(value)));
+		$("progress").style.width = `${percentage}%`;
+	}
+
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.mission?.title != null) $("mission", detail.mission.title);
+		if (detail.mission?.objective != null) $("objective", detail.mission.objective);
+		if (detail.mission?.reward != null) $("reward", detail.mission.reward);
+		if (detail.mission?.progress != null) setProgress(detail.mission.progress);
+	});
+</script>
+</body>
+</html>

package/templates/games/gaming/gta/mission/manifest.json

@@ -0,0 +1,38 @@
+{
+  "instructions": "Enter the mission title, objective and reward, then adjust progress as the mission advances. Press Update to refresh the mission panel without changing unrelated fields.",
+  "meta": {
+    "mission/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Mission title", "hint": "Enter mission title",
+      "default": "THE GETAWAY"
+    },
+    "mission/objective": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Objective", "hint": "Enter objective",
+      "default": "Reach the safehouse"
+    },
+    "mission/reward": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Reward", "hint": "Enter reward",
+      "default": "$5,000"
+    },
+    "mission/playObjective": {
+      "type": "string",
+      "phase": "play",
+      "label": "Objective", "hint": "Mission objective displayed during play",
+      "source": "mission/objective",
+      "readonly": true
+    },
+    "mission/progress": {
+      "type": "range",
+      "phase": "play",
+      "label": "Progress", "hint": "Current completion percentage for the mission",
+      "min": 0,
+      "max": 100,
+      "default": 65
+    }
+  }
+}

package/templates/games/trivia/audience-poll/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Audience Poll</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #36d1ff; color: white; font-family: Inter, Arial, sans-serif; }
+        .poll { position: absolute; left: 5%; right: 5%; bottom: 5%; padding: 24px 30px 28px; border-radius: 26px; background: rgba(7,17,27,.96); border: 2px solid #ffffff24; box-shadow: 0 24px 70px #000b; }
+        .heading { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
+        .eyebrow { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #06151d; font-size: 19px; font-weight: 950; letter-spacing: .13em; }
+        .question { font-size: 38px; line-height: 1.12; font-weight: 850; text-wrap: balance; }
+        .options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
+        .option { position: relative; min-height: 65px; overflow: hidden; border-radius: 14px; background: #ffffff0c; border: 2px solid #ffffff18; }
+        .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #132e44), color-mix(in srgb, var(--accent) 30%, transparent)); transition: width .7s cubic-bezier(.2,.8,.2,1); }
+        .row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 61px; padding: 8px 17px; font-size: 26px; font-weight: 800; }
+        .percent { display: none; margin-left: 15px; color: white; font-size: 30px; font-weight: 950; font-variant-numeric: tabular-nums; }
+        .results .percent { display: block; }
+        .question-only .bar { width: 0 !important; }
+    </style>
+</head>
+<body>
+<section class="poll question-only" id="poll">
+    <div class="heading"><div class="eyebrow" id="eyebrow">AUDIENCE POLL</div><div class="question" id="question">Which destination should we visit next?</div></div>
+    <div class="options" id="options"></div>
+</section>
+<script>
+    const state = {
+        options: [{label: "Tokyo", votes: 420}, {label: "New York", votes: 310}, {label: "Barcelona", votes: 180}, {label: "Cape Town", votes: 90}],
+        display: "question"
+    };
+    function render() {
+        const container = document.getElementById("options");
+        const visibleOptions = state.options.slice(0, 4);
+        const totalVotes = visibleOptions.reduce((total, option) => total + Math.max(0, Number(option.votes) || 0), 0);
+        container.replaceChildren(...visibleOptions.map((option) => {
+            const item = document.createElement("div"); item.className = "option";
+            const votes = Math.max(0, Number(option.votes) || 0);
+            const percent = totalVotes > 0 ? Math.round(votes * 100 / totalVotes) : 0;
+            item.innerHTML = `<div class="bar" style="width:${percent}%"></div><div class="row"><span></span><strong class="percent">${percent}%</strong></div>`;
+            item.querySelector("span").textContent = option.label ?? "Option";
+            return item;
+        }));
+        const results = state.display === "results";
+        document.getElementById("poll").classList.toggle("results", results);
+        document.getElementById("poll").classList.toggle("question-only", !results);
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        if (Array.isArray(detail.options)) state.options = detail.options;
+        if (detail.control?.display != null) state.display = detail.control.display;
+        if (detail.content?.eyebrow != null) document.getElementById("eyebrow").textContent = detail.content.eyebrow;
+        if (detail.content?.question != null) document.getElementById("question").textContent = detail.content.question;
+        if (detail.style?.accent != null) document.body.style.setProperty("--accent", detail.style.accent);
+        render();
+    });
+    render();
+</script>
+</body>
+</html>

package/templates/games/trivia/audience-poll/manifest.json

@@ -0,0 +1,26 @@
+{
+  "instructions": "Build up to four poll options and enter their raw vote counts; percentages are calculated automatically. Keep Display on question while voting, then select results and press Update to reveal the animated outcome.",
+  "meta": {
+    "content/eyebrow": {"type": "string", "phase": "edit", "label": "Label", "hint": "Enter short label", "default": "AUDIENCE POLL"},
+    "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "container": "big", "default": "Which destination should we visit next?"},
+    "options": {
+      "type": "set",
+      "label": "Poll options", "hint": "Answer choices and their current raw vote counts",
+      "max": 4,
+      "container": "big",
+      "default": [
+        {"label": "Tokyo", "votes": 420},
+        {"label": "New York", "votes": 310},
+        {"label": "Barcelona", "votes": 180},
+        {"label": "Cape Town", "votes": 90}
+      ],
+      "meta": {
+        "label": {"type": "string", "phase": "edit", "label": "Option", "hint": "Enter option text"},
+        "staticlabel": {"type": "string", "phase": "play", "label": "Option", "hint": "Answer text displayed while voting", "source": "label", "readonly":  true},
+        "votes": {"type": "number", "phase": "play", "label": "Votes", "hint": "Enter votes", "min": 0, "default": 0}
+      }
+    },
+    "control/display": {"type": "choose", "phase": "play", "label": "Display", "hint": "Choose whether viewers see the question or results", "choose": ["question", "results"], "default": "question"},
+    "style/accent": {"type": "color", "phase": "edit", "label": "Accent", "hint": "Accent colour used by the poll graphic", "default": "#36d1ff"}
+  }
+}

package/templates/games/trivia/classic-quiz/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Classic Quiz</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #ffb21c; color: #fff; font-family: Inter, Arial, sans-serif; }
+        .quiz { position: absolute; left: 4%; right: 4%; bottom: 4%; padding: 24px 28px 26px; border-radius: 24px; background: linear-gradient(135deg, rgba(13,16,29,.97), rgba(25,29,48,.95)); border: 2px solid #ffffff24; box-shadow: 0 20px 60px #0009; }
+        .top { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
+        .badge { flex: none; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #17120a; font-size: 21px; font-weight: 900; letter-spacing: .12em; }
+        .question { font-size: 39px; line-height: 1.12; font-weight: 850; text-wrap: balance; }
+        .answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+        .answer { display: flex; align-items: center; min-height: 68px; padding: 10px 18px; border: 2px solid #ffffff20; border-radius: 14px; background: #ffffff0b; font-size: 27px; font-weight: 750; transition: .35s ease; }
+        .letter { display: grid; place-items: center; width: 42px; height: 42px; margin-right: 14px; border-radius: 50%; background: #fff; color: #151827; font-size: 22px; font-weight: 950; }
+        .revealed .answer:not(.correct) { opacity: .32; }
+        .revealed .answer.correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, #151827); transform: translateY(-2px); box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 45%, transparent); }
+    </style>
+</head>
+<body>
+<section class="quiz" id="quiz">
+    <div class="top"><div class="badge" id="category">GENERAL KNOWLEDGE</div><div class="question" id="question">Which planet is known as the Red Planet?</div></div>
+    <div class="answers">
+        <div class="answer" data-answer="a"><span class="letter">A</span><span id="a">Venus</span></div>
+        <div class="answer" data-answer="b"><span class="letter">B</span><span id="b">Mars</span></div>
+        <div class="answer" data-answer="c"><span class="letter">C</span><span id="c">Jupiter</span></div>
+        <div class="answer" data-answer="d"><span class="letter">D</span><span id="d">Mercury</span></div>
+    </div>
+</section>
+<script>
+    const state = {correct: "b", display: "question"};
+    const text = (id, value) => { if (value != null) document.getElementById(id).textContent = value; };
+    function render() {
+        document.getElementById("quiz").classList.toggle("revealed", state.display === "answer");
+        document.querySelectorAll("[data-answer]").forEach(el => el.classList.toggle("correct", el.dataset.answer === state.correct));
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        text("category", detail.content?.category); text("question", detail.content?.question);
+        ["a", "b", "c", "d"].forEach(key => text(key, detail.answers?.[key]));
+        if (detail.control?.correct != null) state.correct = detail.control.correct;
+        if (detail.control?.display != null) state.display = detail.control.display;
+        if (detail.style?.accent != null) document.body.style.setProperty("--accent", detail.style.accent);
+        render();
+    });
+    render();
+</script>
+</body>
+</html>

package/templates/games/trivia/classic-quiz/manifest.json

@@ -0,0 +1,15 @@
+{
+  "instructions": "Enter the category, question and four possible answers, then select the correct answer. Publish in question mode first; switch Display to answer and press Update when it is time to reveal the result.",
+  "meta": {
+    "content/category": {"type": "string", "phase": "edit", "label": "Category", "hint": "Enter category", "default": "GENERAL KNOWLEDGE"},
+    "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "container": "big", "default": "Which planet is known as the Red Planet?"},
+    "answers/a": {"type": "string", "phase": "edit", "label": "Answer A", "hint": "Enter answer A", "default": "Venus"},
+    "answers/b": {"type": "string", "phase": "edit", "label": "Answer B", "hint": "Enter answer B", "default": "Mars"},
+    "answers/c": {"type": "string", "phase": "edit", "label": "Answer C", "hint": "Enter answer C", "default": "Jupiter"},
+    "answers/d": {"type": "string", "phase": "edit", "label": "Answer D", "hint": "Enter answer D", "default": "Mercury"},
+    "control/correct": {"type": "choose", "phase": "edit", "label": "Correct answer", "hint": "Answer revealed as correct", "choose": ["none", "a", "b", "c", "d"], "default": "b"},
+    "content/playQuestion": {"type": "string", "phase": "play", "label": "Question", "hint": "Question currently shown during play", "source": "content/question", "readonly": true},
+    "control/display": {"type": "choose", "phase": "play", "label": "Display", "hint": "Choose whether viewers see the question or the answer", "choose": ["question", "answer"], "default": "question"},
+    "style/accent": {"type": "color", "phase": "edit", "label": "Accent", "hint": "Accent colour used by the quiz graphic", "default": "#ffb21c"}
+  }
+}