add original version of old crummy monitor

public/monitor.js

@@ -0,0 +1,149 @@
+"use strict"
+
+/* global document, window */
+const location = document.location
+const performance = window.performance
+
+import {
+  clear,
+  ms_ns,
+  node,
+  q,
+  s_ns,
+  servertime_now_ns,
+  session_id,
+  session_url,
+} from "./shared.js"
+
+let socket,
+  servertime,
+  toffset_ms,
+  clients = {},
+  me
+
+function setup_url() {
+  const sid = session_id() || ""
+  location.hash = sid
+}
+
+function send(type, value) {
+  // console.debug('sending', value)
+  socket.send(JSON.stringify({ type, value }))
+}
+
+function prettynum(n) {
+  let i = Math.abs(n) | 0
+  let s = []
+  while (true) {
+    const m = i % 1000
+    i = (i / 1000) | 0
+    if (i === 0) {
+      s.unshift(String(m))
+      break
+    } else {
+      s.unshift(String(m).padStart(3, "0"))
+    }
+  }
+  return (n < 0 ? "-" : "") + s.join("'")
+}
+
+function assert(expected, got) {
+  if (expected !== got) {
+    throw Error("Assertion failed.")
+  }
+}
+
+function test_prettynum() {
+  assert("0", prettynum(0))
+  assert("1", prettynum(1))
+  assert("1'000", prettynum(1000))
+  assert("36'000", prettynum(36000))
+  assert("0", prettynum(-0))
+  assert("-1", prettynum(-1))
+  assert("-1'000", prettynum(-1000))
+  assert("-36'000", prettynum(-36000))
+  assert("-36'600", prettynum(-36600))
+}
+test_prettynum()
+
+const player_list = q("#info")
+function redraw_clients(me, clients) {
+  if (!me) {
+    return
+  }
+  clear(player_list)
+  for (const c of Object.values(clients)) {
+    if (c.id === me.id) {
+      continue
+    }
+    const player = node("div", { data: { cid: c.id }, cls: "player" })
+    node("div", { cls: "points", text: prettynum(c.points), appendTo: player })
+    node("div", { cls: "box", appendTo: player })
+    node("div", { cls: "name", text: c.name, appendTo: player })
+    player_list.appendChild(player)
+  }
+}
+
+let highlighted = false
+function highlight(client_id, until_ns) {
+  if (highlighted) {
+    return
+  }
+  const timeout_ms = (until_ns - servertime_now_ns()) / ms_ns
+  if (timeout_ms <= 10) {
+    console.warn("That highlight timeout was ridiculously low:", client_id, timeout_ms)
+    return
+  }
+  for (const li of player_list.children) {
+    if (li.dataset.cid === client_id) {
+      li.classList.add("buzzing")
+      highlighted = true
+      setTimeout(() => {
+        highlighted = false
+        li.classList.remove("buzzing")
+      }, timeout_ms)
+      return
+    }
+  }
+}
+
+function setup_ws() {
+  const sid = session_id()
+  socket = new WebSocket(session_url(sid))
+  socket.addEventListener("open", function (event) {
+    send("name", "Monitor")
+  })
+  socket.addEventListener("message", function (event) {
+    const msg = JSON.parse(event.data)
+    const { type, value } = msg
+    if (msg.type === "time") {
+      servertime = value.time
+      toffset_ms = performance.now()
+    } else if (msg.type === "id") {
+      me = value
+      redraw_clients(me, clients)
+    } else if (msg.type === "buzz") {
+      const buzztime_ns = value.time
+      const client_id = value.client
+      const duration_ns = 12 * s_ns
+      const until_ns = buzztime_ns + duration_ns
+      highlight(client_id, until_ns)
+    } else if (msg.type === "clients") {
+      clients = Object.fromEntries(value.clients.map((c) => [c.id, c]))
+      redraw_clients(me, clients)
+    } else if (msg.type === "client") {
+      const client = value.client
+      clients[client.id] = client
+      redraw_clients(me, clients)
+    } else if (type === "session_key") {
+      // ignore
+    } else if (type === "error") {
+      console.error(`Error: ${value.reason}`)
+    } else {
+      console.error(`Unknown message: ${event.data}`)
+    }
+  })
+}
+
+setup_url()
+setup_ws()