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

Feat: flesh out

Browse Source
This commit is contained in:
Raphaël Forment
2026-03-14 14:42:40 +01:00
parent 5e7eae22e9
commit b569cfd5ad
6 changed files with 319 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
web/index.html Normal file
View File

@@ -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>