111 lines
4.4 KiB
HTML
111 lines
4.4 KiB
HTML
<!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>
|