Feat: flesh out

2026-03-14 14:42:40 +01:00
parent 5e7eae22e9
commit b569cfd5ad
6 changed files with 319 additions and 0 deletions
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -0,0 +1,7 @@
+FROM node:22-slim
+WORKDIR /app
+COPY package.json .
+RUN npm install --production
+COPY server.js index.html .
+EXPOSE 3000
+CMD ["node", "server.js"]
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sova Jam</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwindcss.config = {
+      theme: {
+        extend: {
+          fontFamily: { mono: ['"JetBrains Mono"', 'monospace'] },
+        }
+      }
+    }
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-neutral-950 text-neutral-200 font-mono min-h-screen flex flex-col items-center justify-center p-6">
+
+  <main class="w-full max-w-lg space-y-8">
+    <header class="text-center space-y-2">
+      <h1 class="text-4xl font-bold text-white tracking-tight">Sova Jam</h1>
+      <p class="text-neutral-500 text-sm">live coding session</p>
+    </header>
+
+    <section id="status" class="border border-neutral-800 p-6 space-y-4">
+      <div class="flex items-center justify-between">
+        <span class="text-neutral-500 text-xs uppercase tracking-widest">Server</span>
+        <span id="server-status" class="text-xs px-2 py-0.5 border border-neutral-700 text-neutral-400">connecting...</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-neutral-500 text-xs uppercase tracking-widest">Tempo</span>
+        <span id="tempo" class="text-2xl font-bold text-white tabular-nums">--</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-neutral-500 text-xs uppercase tracking-widest">Playback</span>
+        <span id="playback" class="text-sm text-neutral-400">--</span>
+      </div>
+    </section>
+
+    <section class="border border-neutral-800 p-6 space-y-3">
+      <div class="flex items-center justify-between">
+        <span class="text-neutral-500 text-xs uppercase tracking-widest">Musicians</span>
+        <span id="peer-count" class="text-xs text-neutral-600">0</span>
+      </div>
+      <ul id="peers" class="space-y-1">
+        <li class="text-neutral-600 text-sm italic">No musicians connected</li>
+      </ul>
+    </section>
+
+    <section class="border border-neutral-800 p-6 space-y-3">
+      <h2 class="text-neutral-500 text-xs uppercase tracking-widest">How to join</h2>
+      <ol class="text-sm text-neutral-400 space-y-2 list-decimal list-inside">
+        <li>Download <a href="https://github.com/sova-org/Sova" class="text-blue-400 hover:text-blue-300 underline">Sova</a></li>
+        <li>Connect to <code class="text-white bg-neutral-900 px-1.5 py-0.5">this server's address</code> on port <code class="text-white bg-neutral-900 px-1.5 py-0.5">8080</code></li>
+        <li>Enter the session password</li>
+        <li>Start coding music</li>
+      </ol>
+    </section>
+
+    <footer class="text-center text-neutral-700 text-xs">
+      powered by <a href="https://github.com/sova-org/Sova" class="hover:text-neutral-500">sova</a>
+    </footer>
+  </main>
+
+  <script>
+    const $ = (id) => document.getElementById(id);
+    const ws = new WebSocket(`ws://${location.host}`);
+
+    ws.onmessage = (e) => {
+      const s = JSON.parse(e.data);
+
+      $("server-status").textContent = s.connected ? "connected" : "disconnected";
+      $("server-status").className = s.connected
+        ? "text-xs px-2 py-0.5 border border-green-800 text-green-400"
+        : "text-xs px-2 py-0.5 border border-red-900 text-red-400";
+
+      $("tempo").textContent = s.tempo.toFixed(1) + " bpm";
+      $("playback").textContent = s.isPlaying ? "playing" : "stopped";
+      $("playback").className = s.isPlaying
+        ? "text-sm text-green-400"
+        : "text-sm text-neutral-500";
+
+      const peersEl = $("peers");
+      $("peer-count").textContent = s.peers.length;
+      if (s.peers.length === 0) {
+        peersEl.innerHTML = '<li class="text-neutral-600 text-sm italic">No musicians connected</li>';
+      } else {
+        peersEl.innerHTML = s.peers
+          .map(p => `<li class="text-sm text-neutral-300 border-l-2 border-neutral-700 pl-3">${esc(p)}</li>`)
+          .join("");
+      }
+    };
+
+    ws.onclose = () => {
+      $("server-status").textContent = "disconnected";
+      $("server-status").className = "text-xs px-2 py-0.5 border border-red-900 text-red-400";
+      setTimeout(() => location.reload(), 5000);
+    };
+
+    function esc(s) {
+      const d = document.createElement("div");
+      d.textContent = s;
+      return d.innerHTML;
+    }
+  </script>
+</body>
+</html>
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "sova-web",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@msgpack/msgpack": "^3.0.0",
+    "crc-32": "^1.2.2",
+    "ws": "^8.18.0"
+  }
+}
--- a/web/server.js
+++ b/web/server.js
@@ -0,0 +1,168 @@
+import { createServer } from "node:http";
+import { readFileSync } from "node:fs";
+import { Socket } from "node:net";
+import { encode, decode } from "@msgpack/msgpack";
+import CRC32 from "crc-32";
+import { WebSocketServer } from "ws";
+
+const SOVA_HOST = process.env.SOVA_HOST || "localhost";
+const SOVA_PORT = parseInt(process.env.SOVA_PORT || "8080");
+const SOVA_PASSWORD = process.env.SOVA_PASSWORD || null;
+const WEB_PORT = parseInt(process.env.WEB_PORT || "3000");
+const PROTOCOL_VERSION = 0x02;
+
+const indexHtml = readFileSync(new URL("./index.html", import.meta.url));
+
+let state = {
+  peers: [],
+  tempo: 120,
+  isPlaying: false,
+  connected: false,
+};
+
+// --- Wire protocol ---
+
+function buildFrame(msg) {
+  const payload = encode(msg);
+  const crc = CRC32.buf(payload) >>> 0;
+  const len = payload.length;
+  const frame = Buffer.alloc(8 + len);
+  frame[0] = PROTOCOL_VERSION;
+  frame[1] = (len >> 16) & 0xff;
+  frame[2] = (len >> 8) & 0xff;
+  frame[3] = len & 0xff;
+  frame.writeUInt32BE(crc, 4);
+  Buffer.from(payload).copy(frame, 8);
+  return frame;
+}
+
+function parseFrames(buffer) {
+  const messages = [];
+  let offset = 0;
+  while (offset + 8 <= buffer.length) {
+    if (buffer[offset] !== PROTOCOL_VERSION) {
+      offset++;
+      continue;
+    }
+    const len = (buffer[offset + 1] << 16) | (buffer[offset + 2] << 8) | buffer[offset + 3];
+    if (len > 10 * 1024 * 1024) {
+      offset++;
+      continue;
+    }
+    if (offset + 8 + len > buffer.length) break;
+    const payload = buffer.subarray(offset + 8, offset + 8 + len);
+    const expectedCrc = buffer.readUInt32BE(offset + 4);
+    const actualCrc = CRC32.buf(payload) >>> 0;
+    if (expectedCrc !== actualCrc) {
+      offset++;
+      continue;
+    }
+    try {
+      messages.push(decode(payload));
+    } catch {
+      // skip malformed msgpack
+    }
+    offset += 8 + len;
+  }
+  return { messages, remaining: buffer.subarray(offset) };
+}
+
+// --- TCP client to sova-server ---
+
+let tcp = null;
+let reconnectTimer = null;
+
+function connectToSova() {
+  if (tcp) return;
+  console.log(`Connecting to sova-server at ${SOVA_HOST}:${SOVA_PORT}`);
+  const sock = new Socket();
+  let recvBuf = Buffer.alloc(0);
+
+  sock.connect(SOVA_PORT, SOVA_HOST, () => {
+    console.log("Connected to sova-server");
+    const handshake = { SetName: { name: "Web Monitor", password: SOVA_PASSWORD } };
+    sock.write(buildFrame(handshake));
+  });
+
+  sock.on("data", (chunk) => {
+    recvBuf = Buffer.concat([recvBuf, chunk]);
+    const { messages, remaining } = parseFrames(recvBuf);
+    recvBuf = remaining;
+    for (const msg of messages) handleMessage(msg);
+  });
+
+  sock.on("close", () => {
+    console.log("Disconnected from sova-server");
+    tcp = null;
+    state.connected = false;
+    broadcast();
+    scheduleReconnect();
+  });
+
+  sock.on("error", (err) => {
+    console.error("TCP error:", err.message);
+    sock.destroy();
+  });
+
+  tcp = sock;
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) return;
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connectToSova();
+  }, 3000);
+}
+
+function handleMessage(msg) {
+  if (msg.Hello) {
+    state.connected = true;
+    state.peers = msg.Hello.peers || [];
+    state.isPlaying = msg.Hello.is_playing || false;
+    if (msg.Hello.link_state) state.tempo = msg.Hello.link_state[0];
+    broadcast();
+  } else if (msg.PeersUpdated) {
+    state.peers = msg.PeersUpdated;
+    broadcast();
+  } else if (msg.PlaybackStateChanged != null) {
+    state.isPlaying = !!msg.PlaybackStateChanged;
+    broadcast();
+  } else if (msg.ClockState) {
+    state.tempo = msg.ClockState[0];
+    broadcast();
+  } else if (msg.ConnectionRefused) {
+    console.error("Connection refused:", msg.ConnectionRefused);
+  }
+}
+
+// --- HTTP + WebSocket ---
+
+const server = createServer((req, res) => {
+  if (req.url === "/" || req.url === "/index.html") {
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(indexHtml);
+  } else {
+    res.writeHead(404);
+    res.end();
+  }
+});
+
+const wss = new WebSocketServer({ server });
+const clients = new Set();
+
+wss.on("connection", (ws) => {
+  clients.add(ws);
+  ws.send(JSON.stringify(state));
+  ws.on("close", () => clients.delete(ws));
+});
+
+function broadcast() {
+  const data = JSON.stringify(state);
+  for (const ws of clients) ws.send(data);
+}
+
+server.listen(WEB_PORT, () => {
+  console.log(`Web server listening on port ${WEB_PORT}`);
+  connectToSova();
+});