123 lines
4.3 KiB
HTML
123 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>billboard</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
body { background:#111; color:#eee; font:14px monospace; display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; margin:0 }
|
|
canvas { image-rendering:pixelated; cursor:crosshair; border:1px solid #444; max-width:96vw }
|
|
#pal { display:flex; gap:4px }
|
|
#pal div { width:24px; height:24px; cursor:pointer; border:2px solid transparent }
|
|
#pal div.sel { border-color:#fff }
|
|
#msgs { width:min(96vw,640px); height:120px; overflow-y:auto; background:#000; padding:6px; border:1px solid #333 }
|
|
#msgs div { white-space:pre-wrap; word-break:break-word }
|
|
#msgs .t { color:#666 }
|
|
input { background:#000; color:#eee; border:1px solid #333; font:inherit; padding:6px; width:min(96vw,560px) }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="cv"></canvas>
|
|
<div id="pal"></div>
|
|
<div id="msgs"></div>
|
|
<input id="msg" maxlength="140" placeholder="say something + enter">
|
|
<script>
|
|
const COLORS = ["#000000","#800000","#008000","#808000","#000080","#800080","#008080","#c0c0c0",
|
|
"#808080","#ff0000","#00ff00","#ffff00","#0000ff","#ff00ff","#00ffff","#ffffff"];
|
|
const CELL = 12;
|
|
let W, H, px = [], sel = 9, drawing = false;
|
|
const cv = document.getElementById("cv"), ctx = cv.getContext("2d");
|
|
const pal = document.getElementById("pal"), msgs = document.getElementById("msgs");
|
|
|
|
COLORS.forEach((c, i) => {
|
|
const d = document.createElement("div");
|
|
d.style.background = c;
|
|
if (i === sel) d.className = "sel";
|
|
d.onclick = () => { sel = i; [...pal.children].forEach((e, j) => e.className = j === i ? "sel" : ""); };
|
|
pal.appendChild(d);
|
|
});
|
|
|
|
function draw() {
|
|
for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
|
|
ctx.fillStyle = COLORS[px[y][x]];
|
|
ctx.fillRect(x * CELL, y * CELL, CELL, CELL);
|
|
}
|
|
}
|
|
|
|
async function load() {
|
|
const s = await (await fetch("/api/state")).json();
|
|
W = s.width; H = s.height; px = s.pixels;
|
|
cv.width = W * CELL; cv.height = H * CELL;
|
|
draw();
|
|
pending.forEach(p => {
|
|
px[p.y][p.x] = p.color;
|
|
ctx.fillStyle = COLORS[p.color];
|
|
ctx.fillRect(p.x * CELL, p.y * CELL, CELL, CELL);
|
|
});
|
|
msgs.innerHTML = "";
|
|
s.messages.forEach(addMsg);
|
|
msgs.scrollTop = msgs.scrollHeight;
|
|
}
|
|
|
|
function addMsg(m) {
|
|
const d = document.createElement("div");
|
|
const t = document.createElement("span");
|
|
t.className = "t";
|
|
t.textContent = new Date(m.at).toLocaleTimeString() + " ";
|
|
d.append(t, m.text);
|
|
msgs.appendChild(d);
|
|
msgs.scrollTop = msgs.scrollHeight;
|
|
}
|
|
|
|
const pending = new Map();
|
|
async function flush() {
|
|
if (!pending.size) return;
|
|
const batch = [...pending.values()];
|
|
pending.clear();
|
|
try {
|
|
const r = await fetch("/api/pixels", { method:"POST", headers:{"Content-Type":"application/json"},
|
|
body: JSON.stringify({pixels: batch}) });
|
|
if (!r.ok) throw new Error(r.status);
|
|
} catch (e) {
|
|
batch.forEach(p => { if (!pending.has(p.x+","+p.y)) pending.set(p.x+","+p.y, p); });
|
|
}
|
|
}
|
|
setInterval(flush, 200);
|
|
|
|
function place(e) {
|
|
const r = cv.getBoundingClientRect();
|
|
const x = Math.floor((e.clientX - r.left) * W / r.width);
|
|
const y = Math.floor((e.clientY - r.top) * H / r.height);
|
|
if (x < 0 || x >= W || y < 0 || y >= H) return;
|
|
px[y][x] = sel;
|
|
ctx.fillStyle = COLORS[sel];
|
|
ctx.fillRect(x * CELL, y * CELL, CELL, CELL);
|
|
pending.set(x+","+y, {x, y, color: sel});
|
|
}
|
|
cv.addEventListener("mousedown", e => { drawing = true; place(e); });
|
|
cv.addEventListener("mousemove", e => drawing && place(e));
|
|
addEventListener("mouseup", () => { drawing = false; flush(); });
|
|
|
|
const msgInput = document.getElementById("msg");
|
|
msgInput.addEventListener("keydown", async e => {
|
|
if (e.key !== "Enter" || !e.target.value.trim()) return;
|
|
const text = e.target.value.trim();
|
|
try {
|
|
const r = await fetch("/api/message", { method:"POST", headers:{"Content-Type":"application/json"},
|
|
body: JSON.stringify({text}) });
|
|
if (!r.ok) throw new Error(r.status);
|
|
e.target.value = "";
|
|
e.target.placeholder = "say something + enter";
|
|
} catch (err) {
|
|
e.target.placeholder = "not sent (rate limited?) — try again";
|
|
}
|
|
});
|
|
|
|
load().then(() => {
|
|
const es = new EventSource("/api/events");
|
|
["pixel", "image", "message"].forEach(ev => es.addEventListener(ev, load));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|