147 lines
3.9 KiB
HTML
147 lines
3.9 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>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
background: #0a0a0a;
|
|
color: #888;
|
|
padding: 2rem;
|
|
max-width: 540px;
|
|
}
|
|
a { color: #888; }
|
|
a:hover { color: #ccc; }
|
|
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;
|
|
}
|
|
footer {
|
|
border-top: 1px solid #1a1a1a;
|
|
padding-top: 1rem;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>sova-jam <span>/ live session</span></h1>
|
|
|
|
<div class="section">
|
|
<div class="row">
|
|
<span class="label">server</span>
|
|
<span id="server-status" class="val dim">...</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">tempo</span>
|
|
<span id="tempo" class="val tempo">--</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">playback</span>
|
|
<span id="playback" class="val dim">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="row">
|
|
<span class="label">peers</span>
|
|
<span id="peer-count" class="val dim">0</span>
|
|
</div>
|
|
<ul id="peers">
|
|
<li class="empty">none</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="row"><span class="label">join</span></div>
|
|
<ol>
|
|
<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 · <a href="https://github.com/sova-org/Sova">src</a></footer>
|
|
|
|
<script>
|
|
const $ = (id) => document.getElementById(id);
|
|
const ws = new WebSocket(`${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}`);
|
|
|
|
ws.onmessage = (e) => {
|
|
const s = JSON.parse(e.data);
|
|
|
|
const st = $("server-status");
|
|
st.textContent = s.connected ? "connected" : "disconnected";
|
|
st.className = "val " + (s.connected ? "on" : "off");
|
|
|
|
$("tempo").textContent = s.tempo.toFixed(1);
|
|
|
|
const pb = $("playback");
|
|
pb.textContent = s.isPlaying ? "playing" : "stopped";
|
|
pb.className = "val " + (s.isPlaying ? "on" : "dim");
|
|
|
|
$("peer-count").textContent = s.peers.length;
|
|
const peersEl = $("peers");
|
|
if (s.peers.length === 0) {
|
|
peersEl.innerHTML = '<li class="empty">none</li>';
|
|
} else {
|
|
peersEl.innerHTML = s.peers.map(p => `<li>${esc(p)}</li>`).join("");
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
const st = $("server-status");
|
|
st.textContent = "disconnected";
|
|
st.className = "val off";
|
|
setTimeout(() => location.reload(), 5000);
|
|
};
|
|
|
|
function esc(s) {
|
|
const d = document.createElement("div");
|
|
d.textContent = s;
|
|
return d.innerHTML;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|