Initial commit

2026-08-08 11:04:45 +02:00
commit 4137962252
10 changed files with 1322 additions and 0 deletions
@@ -0,0 +1,122 @@
+<!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>