BuboBubo/sova-jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: BuboBubo:b569cfd5ad32cc14aadc9174bc67e3a0e2e7c83c
Branches Tags
BuboBubo:main
...
compare: BuboBubo:f3a5483270aa3dc6edb36fbde3d62e350d8e0a6a
Branches Tags
BuboBubo:main

3 Commits
b569cfd5ad ... f3a5483270

Author SHA1 Message Date
Raphaël Forment
f3a5483270 Simplify 2026-03-21 09:30:15 +00:00
Raphaël Forment
04892a7eef Simplify 2026-03-21 09:28:22 +00:00
Raphaël Forment
6a4193a3ed Update 2026-03-21 09:26:42 +00:00
4 changed files with 143 additions and 74 deletions
Expand all files Collapse all files

5
.gitignore vendored
View File

@@ -1,2 +1,7 @@
.env .env
.env.*
!.env.example
node_modules/ node_modules/
docker-compose.override.yml
target/
*.log

4
docker-compose.yml
View File

@@ -27,14 +27,14 @@ services:
context: ./web context: ./web
container_name: sova-web container_name: sova-web
restart: unless-stopped restart: unless-stopped
ports:
- "3000:3000"
environment: environment:
- SOVA_HOST=sova-server - SOVA_HOST=sova-server
- SOVA_PORT=8080 - SOVA_PORT=8080
- SOVA_PASSWORD=${SOVA_PASSWORD} - SOVA_PASSWORD=${SOVA_PASSWORD}
depends_on: depends_on:
- sova-server - sova-server
ports:
- "3000:3000"
deploy: deploy:
resources: resources:
limits: limits:

187
web/index.html
View File

@@ -3,100 +3,145 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sova Jam</title> <title>sova-jam</title>
<script src="https://cdn.tailwindcss.com"></script> <style>
<script> * { margin: 0; padding: 0; box-sizing: border-box; }
tailwindcss.config = { body {
theme: { font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
extend: { font-size: 13px;
fontFamily: { mono: ['"JetBrains Mono"', 'monospace'] }, line-height: 1.6;
} background: #0a0a0a;
} color: #888;
padding: 2rem;
max-width: 540px;
} }
</script> a { color: #888; }
<link rel="preconnect" href="https://fonts.googleapis.com"> a:hover { color: #ccc; }
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> code {
color: #ccc;
background: #141414;
padding: 1px 5px;
}
h1 {
font-size: 13px;
font-weight: normal;
color: #ccc;
margin-bottom: 2rem;
}
h1 span { color: #555; }
.section {
border-top: 1px solid #1a1a1a;
padding: 1rem 0;
}
.row {
display: flex;
justify-content: space-between;
padding: 2px 0;
}
.label { color: #555; }
.val { color: #ccc; }
.val.dim { color: #555; }
.val.on { color: #6a9; }
.val.off { color: #a55; }
.val.tempo { font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; }
#peers { list-style: none; }
#peers li { color: #aaa; }
#peers li::before { content: "~ "; color: #444; }
#peers .empty { color: #333; font-style: italic; }
#peers .empty::before { content: ""; }
ol { list-style: none; counter-reset: step; }
ol li { counter-increment: step; }
ol li::before {
content: counter(step) ". ";
color: #444;
}
.desc {
color: #555;
margin-bottom: 1.5rem;
max-width: 44ch;
}
footer {
border-top: 1px solid #1a1a1a;
padding-top: 1rem;
color: #333;
}
</style>
</head> </head>
<body class="bg-neutral-950 text-neutral-200 font-mono min-h-screen flex flex-col items-center justify-center p-6"> <body>
<main class="w-full max-w-lg space-y-8"> <h1>sova-jam <span>/ live session</span></h1>
<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"> <p class="desc">Open multiplayer session for <a href="https://sova.livecoding.fr">Sova</a>,
<div class="flex items-center justify-between"> a polyglot live coding sequencer. Connect with the desktop app to
<span class="text-neutral-500 text-xs uppercase tracking-widest">Server</span> write code and make music together in real time.</p>
<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="section">
<div class="flex items-center justify-between"> <div class="row">
<span class="text-neutral-500 text-xs uppercase tracking-widest">Musicians</span> <span class="label">server</span>
<span id="peer-count" class="text-xs text-neutral-600">0</span> <span id="server-status" class="val dim">...</span>
</div> </div>
<ul id="peers" class="space-y-1"> <div class="row">
<li class="text-neutral-600 text-sm italic">No musicians connected</li> <span class="label">tempo</span>
</ul> <span id="tempo" class="val tempo">--</span>
</section> </div>
<div class="row">
<span class="label">playback</span>
<span id="playback" class="val dim">--</span>
</div>
</div>
<section class="border border-neutral-800 p-6 space-y-3"> <div class="section">
<h2 class="text-neutral-500 text-xs uppercase tracking-widest">How to join</h2> <div class="row">
<ol class="text-sm text-neutral-400 space-y-2 list-decimal list-inside"> <span class="label">peers</span>
<li>Download <a href="https://github.com/sova-org/Sova" class="text-blue-400 hover:text-blue-300 underline">Sova</a></li> <span id="peer-count" class="val dim">0</span>
<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> </div>
<li>Enter the session password</li> <ul id="peers">
<li>Start coding music</li> <li class="empty">none</li>
</ol> </ul>
</section> </div>
<footer class="text-center text-neutral-700 text-xs"> <div class="section">
powered by <a href="https://github.com/sova-org/Sova" class="hover:text-neutral-500">sova</a> <div class="row"><span class="label">join</span></div>
</footer> <ol>
</main> <li>get <a href="https://github.com/sova-org/Sova">sova</a></li>
<li>connect to <code>host</code> port <code>8080</code></li>
<li>enter session password</li>
<li>start coding</li>
</ol>
</div>
<footer>sova-jam &middot; <a href="https://github.com/sova-org/Sova">src</a></footer>
<script> <script>
const $ = (id) => document.getElementById(id); const $ = (id) => document.getElementById(id);
const ws = new WebSocket(`ws://${location.host}`); const ws = new WebSocket(`${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}`);
ws.onmessage = (e) => { ws.onmessage = (e) => {
const s = JSON.parse(e.data); const s = JSON.parse(e.data);
$("server-status").textContent = s.connected ? "connected" : "disconnected"; const st = $("server-status");
$("server-status").className = s.connected st.textContent = s.connected ? "connected" : "disconnected";
? "text-xs px-2 py-0.5 border border-green-800 text-green-400" st.className = "val " + (s.connected ? "on" : "off");
: "text-xs px-2 py-0.5 border border-red-900 text-red-400";
$("tempo").textContent = s.tempo.toFixed(1) + " bpm"; $("tempo").textContent = s.tempo.toFixed(1);
$("playback").textContent = s.isPlaying ? "playing" : "stopped";
$("playback").className = s.isPlaying const pb = $("playback");
? "text-sm text-green-400" pb.textContent = s.isPlaying ? "playing" : "stopped";
: "text-sm text-neutral-500"; pb.className = "val " + (s.isPlaying ? "on" : "dim");
const peersEl = $("peers");
$("peer-count").textContent = s.peers.length; $("peer-count").textContent = s.peers.length;
const peersEl = $("peers");
if (s.peers.length === 0) { if (s.peers.length === 0) {
peersEl.innerHTML = '<li class="text-neutral-600 text-sm italic">No musicians connected</li>'; peersEl.innerHTML = '<li class="empty">none</li>';
} else { } else {
peersEl.innerHTML = s.peers peersEl.innerHTML = s.peers.map(p => `<li>${esc(p)}</li>`).join("");
.map(p => `<li class="text-sm text-neutral-300 border-l-2 border-neutral-700 pl-3">${esc(p)}</li>`)
.join("");
} }
}; };
ws.onclose = () => { ws.onclose = () => {
$("server-status").textContent = "disconnected"; const st = $("server-status");
$("server-status").className = "text-xs px-2 py-0.5 border border-red-900 text-red-400"; st.textContent = "disconnected";
st.className = "val off";
setTimeout(() => location.reload(), 5000); setTimeout(() => location.reload(), 5000);
}; };

21
web/server.js
View File

@@ -20,6 +20,21 @@ let state = {
connected: false, connected: false,
}; };
// --- Helpers ---
/** Recursively convert Map objects (from useMap decode) to plain objects */
function mapToObj(val) {
if (val instanceof Map) {
const obj = {};
for (const [k, v] of val) {
if (typeof k === "string" || typeof k === "number") obj[k] = mapToObj(v);
}
return obj;
}
if (Array.isArray(val)) return val.map(mapToObj);
return val;
}
// --- Wire protocol --- // --- Wire protocol ---
function buildFrame(msg) { function buildFrame(msg) {
@@ -60,7 +75,11 @@ function parseFrames(buffer) {
try { try {
messages.push(decode(payload)); messages.push(decode(payload));
} catch { } catch {
// skip malformed msgpack try {
messages.push(mapToObj(decode(payload, { useMap: true })));
} catch {
// skip truly malformed msgpack
}
} }
offset += 8 + len; offset += 8 + len;
} }