add original version of old crummy monitor

public/buzzer.js

@@ -10,89 +10,27 @@ const storage = window.sessionStorage
 // - measure/report latency
 // - use server reported time to find winner
 
-import config from "./config.js"
+import {
+  clear,
+  isEmpty,
+  isString,
+  ms_ns,
+  node,
+  off,
+  on,
+  q,
+  s_ns,
+  servertime_now_ns,
+  session_id,
+  session_id_from_url,
+  session_url,
+} from "./shared.js"
 
 const buzzer_key = {
   code: 0x20,
   name: "space bar",
 }
 
-function isString(x) {
-  return typeof x === "string"
-}
-
-function isEmpty(x) {
-  return (Array.isArray(x) ? x : Object.keys(x)).length === 0
-}
-
-const q = (selector, root = document) => root.querySelector(selector)
-
-const _evlisteners = {}
-/**
- * @param {String}   event   [description]
- * @param {Function} cb      [description]
- * @param {?{once: bool, target: Element = document}} options
- */
-function on(event, cb, options = {}) {
-  const target = options.target || document
-  if ((_evlisteners[target] ?? {})[event]) {
-    console.warn(`Replacing previous event listener for '${event}' on target:`, target)
-    off(event, target)
-  }
-  target.addEventListener(event, cb, { once: !!options.once })
-  if (!_evlisteners[target]) {
-    _evlisteners[target] = {}
-  }
-  _evlisteners[target][event] = cb
-}
-
-function off(event, target = document) {
-  if (!_evlisteners[target] || !_evlisteners[target][event]) {
-    return
-  }
-  target.removeEventListener(event, _evlisteners[target][event])
-  delete _evlisteners[target][event]
-  if (isEmpty(_evlisteners[target])) {
-    delete _evlisteners[target]
-  }
-}
-
-function node(type, { appendTo, cls, text, data, style, ...attrs } = {}) {
-  let elem = isString(type) ? document.createElement(type) : type
-  if (cls) {
-    if (isString(cls)) {
-      elem.className = cls
-    } else {
-      for (const [name, on] of Object.entries(cls)) {
-        if (on) {
-          elem.classList.add(name)
-        } else {
-          elem.classList.remove(name)
-        }
-      }
-    }
-  }
-  if (text) {
-    elem.textContent = text
-  }
-  Object.assign(elem.dataset, data ?? {})
-  Object.assign(elem.style, style ?? {})
-  for (const name in attrs) {
-    elem.setAttribute(name, attrs[name])
-  }
-  if (appendTo) {
-    elem = appendTo.appendChild(elem)
-  }
-  return elem
-}
-
-/**
- * Some duration conversion constants.
- */
-const ms_ns = 1_000_000 // nanoseconds in a millisecond
-const s_ms = 1_000 // milliseconds in a second
-const s_ns = 1_000_000_000 // nanoseconds in a second
-
 let socket,
   servertime,
   toffset_ms,
@@ -114,11 +52,6 @@ function find_client(client_id) {
   return clients.find((c) => c.id === client_id)
 }
 
-function session_id() {
-  const match = /^#?(.+)/.exec(document.location.hash)
-  return match ? match[1] : null
-}
-
 function new_session_id() {
   if (!crypto) {
     return Math.random().toString(36).substr(2)
@@ -130,7 +63,7 @@ function new_session_id() {
 
 function setup_url() {
   const sid = session_id() || new_session_id()
-  document.location.hash = sid
+  location.hash = sid
 }
 
 function send(type, value) {
@@ -138,13 +71,6 @@ function send(type, value) {
   socket.send(JSON.stringify({ type, value }))
 }
 
-function clear(container) {
-  while (container.children.length > 0) {
-    const child = container.children[0]
-    child.remove()
-  }
-}
-
 const player_list = q("#info ul")
 function redraw_clients(me, clients) {
   if (!me) {
@@ -196,15 +122,6 @@ function highlight(client_id, until_ns) {
   }
 }
 
-/**
- * Guess the exact current server time.
- */
-function servertime_now_ns() {
-  const now_ms = performance.now()
-  const delta_ns = ms_ns * (now_ms - toffset_ms)
-  return servertime + delta_ns
-}
-
 function setup_ui() {
   on("focus", (event) => {
     hide("active")
@@ -306,20 +223,10 @@ function set_name(name) {
   send("name", name)
 }
 
-function session_url(sid) {
-  return `${config.wsurl}/${sid}`
-}
-
-function session_id_from_url(url) {
-  const wsurl = new URL(config.wsurl)
-  const match = RegExp(`${wsurl.pathname}/([^/]+)$`).exec(url)
-  return !match ? null : match[1]
-}
-
 function setup_ws() {
   const sid = session_id()
   const credentials = { id: storage["my_uid"], key: storage["my_key"] }
-  socket = new WebSocket(`${session_url(sid)}`)
+  socket = new WebSocket(session_url(sid))
   socket.addEventListener("open", function (event) {
     if (sid === storage["my_sid"]) {
       send("login", credentials)
@@ -362,6 +269,8 @@ function setup_ws() {
         clients.push(client)
       }
       redraw_clients(me, clients)
+    } else if (type === "control") {
+      // ignore
     } else if (type === "error") {
       console.error(`Error: ${value.reason}`)
       const errorbox = q("#error")