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

@@ -0,0 +1,578 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Battleship Tactical Board</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
+        }
+        .tactical {
+            position: absolute;
+            inset: auto 5% 9% auto;
+            width: 66rem;
+            display: grid;
+            grid-template-columns: 1fr 18rem;
+            gap: 1rem;
+        }
+        .radar, .intel {
+            background: #061822ed;
+            border: 1px solid #61e7ff4d;
+            border-radius: 1rem;
+            box-shadow: 0 1.4rem 4rem #0008
+        }
+        .radar {
+            padding: 1rem
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: .8rem
+        }
+        .header strong {
+            color: #75edff;
+            letter-spacing: .13em
+        }
+        .header span {
+            color: #77aab4;
+            font-size: .72rem
+        }
+        .grid {
+            display: grid;
+            grid-template-columns:repeat(10, minmax(0, 1fr));
+            gap: .3rem;
+            background-image: linear-gradient(#55d9ef0b 1px, transparent 1px), linear-gradient(90deg, #55d9ef0b 1px, transparent 1px);
+            background-size: 1.2rem 1.2rem
+        }
+        .cell {
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 1px solid #62dff02e;
+            border-radius: .25rem;
+            background: #0d2b386b;
+            color: #8bc8d2;
+            font-size: 1rem;
+            font-weight: 900;
+            letter-spacing: .015em;
+            text-shadow: 0 .08rem .18rem #000, 0 0 .45rem #41dff044;
+            position: relative
+        }
+        .cell.shot:after {
+            content: "";
+            width: .65rem;
+            height: .65rem;
+            border: .16rem solid #78eaff;
+            border-radius: 50%
+        }
+        .cell.fleet {
+            background: #145064c9;
+            border-color: #70dff0a8;
+            color: #c6f8ff
+        }
+        .cell.hit {
+            background: #641f2bd6;
+            border-color: #ff657c
+        }
+        .cell.hit:after {
+            content: "×";
+            width: auto;
+            height: auto;
+            border: 0;
+            color: #ff8799;
+            font-size: 2rem;
+            font-weight: 950
+        }
+        .cell.latest {
+            box-shadow: inset 0 0 0 .2rem #ffe466, 0 0 1.2rem #ffe46677;
+            transform: scale(1.08);
+            z-index: 2
+        }
+        .cell.hit-impact {
+            z-index: 5;
+            animation: direct-hit .9s cubic-bezier(.2, .85, .25, 1)
+        }
+        .radar.hit-impact {
+            animation: radar-hit .8s ease-out
+        }
+        .intel {
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 1.15rem;
+            text-align: center;
+            background: radial-gradient(circle at 50% 16%, #164b5a, #071923 50%, #041119 100%)
+        }
+        .intel:before {
+            content: "";
+            position: absolute;
+            width: 18rem;
+            height: 18rem;
+            top: -8.5rem;
+            border: 1px solid #64eaff1f;
+            border-radius: 50%;
+            box-shadow: 0 0 0 2.8rem #64eaff09, 0 0 0 5.6rem #64eaff08;
+            pointer-events: none
+        }
+        .command-head {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            z-index: 1
+        }
+        .mission-title {
+            color: #d9faff;
+            font-size: 1rem;
+            font-weight: 900;
+            letter-spacing: .09em;
+            text-transform: uppercase
+        }
+        .live {
+            display: flex;
+            align-items: center;
+            gap: .35rem;
+            color: #68eaff;
+            font-size: .72rem;
+            font-weight: 900;
+            letter-spacing: .12em
+        }
+        .live:before {
+            content: "";
+            width: .42rem;
+            height: .42rem;
+            border-radius: 50%;
+            background: #42f5cf;
+            box-shadow: 0 0 .7rem #42f5cf
+        }
+        .status {
+            margin-top: 1.4rem;
+            color: #6feaff;
+            font-size: .82rem;
+            font-weight: 850;
+            letter-spacing: .16em
+        }
+        .coordinate {
+            margin: .3rem 0;
+            font-size: 4rem;
+            font-weight: 950;
+            color: #fff
+        }
+        .result {
+            padding: .38rem .9rem;
+            border-radius: 2rem;
+            background: #194450;
+            color: #91efff;
+            font-size: 1rem;
+            font-weight: 900
+        }
+        .result.hit {
+            background: #9e2638;
+            color: #fff
+        }
+        .player-card {
+            width: 100%;
+            display: grid;
+            grid-template-columns: 3rem 1fr;
+            grid-template-rows: auto auto auto;
+            column-gap: .7rem;
+            margin-top: 1rem;
+            padding: .75rem;
+            text-align: left;
+            border: 1px solid #5ce6fb24;
+            border-radius: .65rem;
+            background: linear-gradient(135deg, #123542b8, #0a202b99)
+        }
+        .player-mark {
+            grid-row: 1 / 4;
+            display: grid;
+            place-items: center;
+            width: 3rem;
+            height: 3rem;
+            border-radius: 50%;
+            color: #061822;
+            background: #69eaff;
+            font-weight: 950;
+            box-shadow: 0 0 1.2rem #69eaff4d
+        }
+        .player-card span, .fleet-head span {
+            color: #61dff3;
+            font-size: .72rem;
+            font-weight: 900;
+            letter-spacing: .14em
+        }
+        .player-card strong {
+            overflow: hidden;
+            color: #fff;
+            font-size: 1.25rem;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+        .player-card small {
+            overflow: hidden;
+            color: #82aab3;
+            font-size: .85rem;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+        .metrics {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            margin: .75rem 0;
+            border-block: 1px solid #62dff01f
+        }
+        .metric {
+            padding: .8rem .15rem
+        }
+        .metric + .metric {
+            border-left: 1px solid #62dff01f
+        }
+        .metric strong {
+            display: block;
+            color: #e9fcff;
+            font-size: 2.2rem;
+            font-weight: 950;
+            line-height: 1
+        }
+        .metric span {
+            color: #7199a2;
+            display: block;
+            margin-top: .4rem;
+            font-size: .72rem;
+            font-weight: 900;
+            letter-spacing: .08em
+        }
+        .fleet-status {
+            width: 100%;
+            text-align: left
+        }
+        .fleet-head {
+            display: flex;
+            align-items: baseline;
+            justify-content: space-between;
+            margin-bottom: .5rem
+        }
+        .fleet-head strong {
+            color: #fff;
+            font-size: 1.15rem;
+            font-weight: 950
+        }
+        .fleet-roster {
+            display: flex;
+            flex-direction: column;
+            gap: .52rem
+        }
+        .ship-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 1.2rem;
+            transition: opacity .25s ease
+        }
+        .ship {
+            display: flex;
+            gap: .14rem
+        }
+        .ship i {
+            display: block;
+            width: 1.3rem;
+            height: .68rem;
+            border: 1px solid #7cecff99;
+            border-radius: .12rem;
+            background: linear-gradient(#5de6fa, #16758a);
+            box-shadow: 0 0 .45rem #53e8ff45
+        }
+        .ship-row em {
+            color: #6d98a1;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 900;
+            letter-spacing: .08em
+        }
+        .ship-row.sunk {
+            opacity: .35
+        }
+        .ship-row.sunk .ship i {
+            border-color: #ff657c88;
+            background: #762535;
+            box-shadow: none
+        }
+        .ship-row.sunk em {
+            color: #ff8295
+        }
+        .intel.hit-impact {
+            animation: intel-hit .85s cubic-bezier(.2, .85, .25, 1)
+        }
+        .intel.hit-impact .coordinate,
+        .intel.hit-impact .result {
+            animation: result-hit .85s cubic-bezier(.2, .85, .25, 1)
+        }
+        @keyframes direct-hit {
+            0% {
+                transform: scale(1.08);
+                box-shadow: inset 0 0 0 .2rem #fff, 0 0 0 0 #ff526fdd
+            }
+            35% {
+                transform: scale(1.42) rotate(4deg);
+                box-shadow: inset 0 0 0 .2rem #fff, 0 0 0 1.4rem #ff526f00, 0 0 2.5rem #ff284fe8
+            }
+            100% {
+                transform: scale(1.08);
+                box-shadow: inset 0 0 0 .2rem #ffe466, 0 0 1.2rem #ffe46677
+            }
+        }
+        @keyframes radar-hit {
+            0%, 100% { border-color: #61e7ff4d }
+            24% { border-color: #ff6d84; box-shadow: 0 0 3rem #ff294c99, inset 0 0 2.5rem #ff294c22 }
+        }
+        @keyframes intel-hit {
+            0%, 100% { transform: translateX(0) }
+            18% { transform: translateX(.55rem); box-shadow: 0 0 3rem #ff294c99 }
+            34% { transform: translateX(-.35rem) }
+            50% { transform: translateX(.18rem) }
+        }
+        @keyframes result-hit {
+            0% { transform: scale(.82); filter: brightness(2.2) }
+            38% { transform: scale(1.22); filter: brightness(1.5) }
+            100% { transform: scale(1); filter: brightness(1) }
+        }
+        @media (prefers-reduced-motion: reduce) {
+            .cell.hit-impact, .radar.hit-impact, .intel.hit-impact,
+            .intel.hit-impact .coordinate, .intel.hit-impact .result {
+                animation: none
+            }
+        }
+    </style>
+</head>
+<body>
+<main class="tactical">
+    <section class="radar" id="radar">
+        <div class="header"><strong>TACTICAL GRID</strong><span>BLUE · FLEET&nbsp;&nbsp; ○ MISS&nbsp;&nbsp; × HIT&nbsp;&nbsp; GOLD · LATEST</span></div>
+        <div class="grid" id="grid"></div>
+    </section>
+    <aside class="intel" id="intel">
+        <div class="command-head">
+            <div class="mission-title" id="title">Fleet Command</div>
+            <div class="live">TACTICAL LIVE</div>
+        </div>
+        <div class="status">LATEST SHOT</div>
+        <div class="coordinate" id="coordinate">J8</div>
+        <div class="result hit" id="result">HIT</div>
+        <div class="player-card">
+            <div class="player-mark">P1</div>
+            <span>NOW PLAYING</span>
+            <strong id="player">John Carter</strong>
+            <small id="location">New York · NY</small>
+        </div>
+        <div class="metrics">
+            <div class="metric"><strong id="shotCount">6</strong><span>SHOTS</span></div>
+            <div class="metric"><strong id="hitCount">3</strong><span>HITS</span></div>
+            <div class="metric"><strong id="accuracy">50%</strong><span>ACCURACY</span></div>
+        </div>
+        <section class="fleet-status">
+            <div class="fleet-head"><span>ENEMY FLEET</span><strong id="remaining">5 ACTIVE</strong></div>
+            <div class="fleet-roster" id="fleetRoster"></div>
+        </section>
+    </aside>
+</main>
+<script>
+	const ROWS = "ABCDEFGHIJ".split("");
+	const ALL = ROWS.flatMap(row => Array.from({length: 10}, (_, i) => `${row}${i + 1}`));
+	const cells = new Map();
+	const dom = {
+		grid: document.getElementById("grid"),
+		radar: document.getElementById("radar"),
+		intel: document.getElementById("intel"),
+		coordinate: document.getElementById("coordinate"),
+		result: document.getElementById("result"),
+		title: document.getElementById("title"),
+		player: document.getElementById("player"),
+		location: document.getElementById("location"),
+		shotCount: document.getElementById("shotCount"),
+		hitCount: document.getElementById("hitCount"),
+		accuracy: document.getElementById("accuracy"),
+		remaining: document.getElementById("remaining"),
+		fleetRoster: document.getElementById("fleetRoster")
+	};
+	let fleet = ["A2", "A3", "A4", "A5", "C3", "C4", "C5", "F7", "F8", "F9", "H2", "H3", "J8", "J9"];
+	let shots = ["A3", "B8", "D4", "F8", "H9", "J8"];
+	let fleetVisible = false;
+	let latest = shots.at(-1);
+	ALL.forEach(id => {
+		const cell = document.createElement("div");
+		cell.className = "cell";
+		cell.textContent = id;
+		dom.grid.append(cell);
+		cells.set(id, cell)
+	});
+	function findShips(fleetSet) {
+		const unvisited = new Set(fleetSet);
+		const ships = [];
+		while (unvisited.size) {
+			const ship = [];
+			const pending = [unvisited.values().next().value];
+			while (pending.length) {
+				const id = pending.pop();
+				if (!unvisited.delete(id)) continue;
+				ship.push(id);
+				const row = ROWS.indexOf(id[0]);
+				const column = Number(id.slice(1));
+				[[row - 1, column], [row + 1, column], [row, column - 1], [row, column + 1]]
+					.map(([r, c]) => `${ROWS[r] ?? ""}${c}`)
+					.filter(next => rValid(next) && unvisited.has(next))
+					.forEach(next => pending.push(next))
+			}
+			ships.push(ship)
+		}
+		return ships.sort((a, b) => b.length - a.length)
+	}
+	function rValid(id) {
+		return ALL.includes(id)
+	}
+	function renderFleetRoster(fleetSet, shotSet) {
+		const ships = findShips(fleetSet);
+		const active = ships.filter(ship => !ship.every(id => shotSet.has(id))).length;
+		dom.remaining.textContent = `${active} ACTIVE`;
+		dom.fleetRoster.replaceChildren(...ships.slice(0, 7).map((ship) => {
+			const sunk = ship.every(id => shotSet.has(id));
+			const row = document.createElement("div");
+			row.className = `ship-row${sunk ? " sunk" : ""}`;
+			const hull = document.createElement("div");
+			hull.className = "ship";
+			hull.replaceChildren(...ship.map(() => document.createElement("i")));
+			const status = document.createElement("em");
+			status.textContent = sunk ? "SUNK" : "ACTIVE";
+			row.append(hull, status);
+			return row
+		}))
+	}
+	function render() {
+		const fleetSet = new Set(fleet);
+		const shotSet = new Set(shots);
+		const hitSet = new Set(shots.filter(id => fleetSet.has(id)));
+		cells.forEach((cell, id) => {
+			cell.classList.toggle("fleet", fleetVisible && fleetSet.has(id));
+			cell.classList.toggle("shot", shotSet.has(id));
+			cell.classList.toggle("hit", hitSet.has(id));
+			cell.classList.toggle("latest", id === latest)
+		});
+		dom.coordinate.textContent = latest ?? "—";
+		const isHit = latest != null && hitSet.has(latest);
+		dom.result.textContent = latest == null ? "AWAITING" : isHit ? "HIT" : "MISS";
+		dom.result.classList.toggle("hit", isHit);
+		dom.shotCount.textContent = shotSet.size;
+		dom.hitCount.textContent = hitSet.size;
+		dom.accuracy.textContent = `${shotSet.size ? Math.round(hitSet.size / shotSet.size * 100) : 0}%`;
+		renderFleetRoster(fleetSet, shotSet)
+	}
+	function celebrateHit(id) {
+		const animated = [cells.get(id), dom.radar, dom.intel].filter(Boolean);
+		animated.forEach(element => element.classList.remove("hit-impact"));
+		void dom.radar.offsetWidth;
+		animated.forEach(element => element.classList.add("hit-impact"));
+		setTimeout(() => animated.forEach(element => element.classList.remove("hit-impact")), 950)
+	}
+	window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+		let newHit;
+		if (detail.content?.title != null) dom.title.textContent = detail.content.title;
+		if (detail.content?.player != null) dom.player.textContent = detail.content.player;
+		if (detail.content?.location != null) dom.location.textContent = detail.content.location;
+		if (Array.isArray(detail.board?.fleet)) fleet = detail.board.fleet.map(String);
+		if (detail.board?.fleetVisibility != null) fleetVisible = detail.board.fleetVisibility === "revealed";
+		if (Array.isArray(detail.board?.shots)) {
+			const nextShots = detail.board.shots.map(String);
+			const previousShots = new Set(shots);
+			const added = nextShots.filter(id => !previousShots.has(id));
+			latest = added.at(-1) ?? (nextShots.includes(latest) ? latest : nextShots.at(-1));
+			if (added.length && fleet.includes(latest)) newHit = latest;
+			shots = nextShots;
+		}
+		if (detail.board?.fleet != null || detail.board?.fleetVisibility != null || detail.board?.shots != null) render();
+		if (newHit) celebrateHit(newHit)
+	});
+	render();
+</script>
+</body>
+</html>