fix connection time syncing handling

Share the time syncing code, and while we're at it wrap the whole
connection thing in a class.  Makes it easier to pass the connection
around & later on add more advanced handler registration if we want to.

public/buzzer.js

@@ -12,6 +12,7 @@ const storage = window.sessionStorage
 
 import {
   clear,
+  Connection,
   isEmpty,
   isString,
   ms_ns,
@@ -20,7 +21,6 @@ import {
   on,
   q,
   s_ns,
-  servertime_now_ns,
   session_id,
   session_id_from_url,
   session_url,
@@ -32,8 +32,7 @@ const buzzer_key = {
 }
 
 let socket,
-  servertime,
-  toffset_ms,
+  conn,
   clients = [],
   me,
   session_key
@@ -66,11 +65,6 @@ function setup_url() {
   location.hash = sid
 }
 
-function send(type, value) {
-  // console.debug('sending', value)
-  socket.send(JSON.stringify({ type, value }))
-}
-
 const player_list = q("#info ul")
 function redraw_clients(me, clients) {
   if (!me) {
@@ -98,7 +92,7 @@ function highlight(client_id, until_ns) {
   if (highlights[client_id]) {
     return
   }
-  const timeout_ms = (until_ns - servertime_now_ns()) / ms_ns
+  const timeout_ms = (until_ns - conn.servertime_now_ns()) / ms_ns
   if (timeout_ms <= 10) {
     console.warn("That highlight timeout was ridiculously low:", client_id, timeout_ms)
     return
@@ -144,7 +138,7 @@ function setup_ui() {
   on("keydown", (event) => {
     if (!buzzing && event.keyCode === buzzer_key.code) {
       buzzing = true
-      send("buzz", servertime_now_ns())
+      conn.send("buzz", conn.servertime_now_ns())
       show("active")
       hide("ready")
     }
@@ -220,66 +214,62 @@ function enable_admin_ui() {
 
 function set_name(name) {
   storage["my_name"] = name
-  send("name", name)
+  conn.send("name", name)
 }
 
 function setup_ws() {
   const sid = session_id()
   const credentials = { id: storage["my_uid"], key: storage["my_key"] }
-  socket = new WebSocket(session_url(sid))
-  socket.addEventListener("open", function (event) {
+  conn = new Connection()
+  conn.on("helo", () => {
     if (sid === storage["my_sid"]) {
-      send("login", credentials)
+      conn.send("login", credentials)
     }
     set_name(q("#username").value)
   })
-  socket.addEventListener("message", function (event) {
-    const msg = JSON.parse(event.data)
-    const { type, value } = msg
-    if (type === "time") {
-      servertime = value.time
-      toffset_ms = performance.now()
-    } else if (type === "id") {
-      me = value
-      storage["my_uid"] = me.id
-      storage["my_key"] = me.key
-      storage["my_sid"] = session_id_from_url(me.path)
-      redraw_clients(me, clients)
-    } else if (type === "session_key") {
-      session_key = value
-      storage["session_path"] = session_key.path
-      storage["session_key"] = session_key.key
-      disable_player_ui()
-      enable_admin_ui()
-    } else if (type === "buzz") {
-      const buzztime_ns = value.time
-      const client_id = value.client
-      const duration_ns = 3 * s_ns
-      const until_ns = buzztime_ns + duration_ns
-      highlight(client_id, until_ns)
-    } else if (type === "clients") {
-      clients = value.clients
-      redraw_clients(me, clients)
-    } else if (type === "client") {
-      const client = value.client
-      const idx = clients.findIndex((c) => c.id === client.id)
-      if (idx >= 0) {
-        clients[idx] = client
-      } else {
-        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")
-      q("code", errorbox).textContent = JSON.stringify(msg, null, 2)
-      q("body").classList.add("error")
-    } else {
-      console.error(`Unknown message: ${event.data}`)
-    }
+  conn.on("id", ({ value }) => {
+    me = value
+    storage["my_uid"] = me.id
+    storage["my_key"] = me.key
+    storage["my_sid"] = session_id_from_url(me.path)
+    redraw_clients(me, clients)
   })
+  conn.on("buzz", ({ value }) => {
+    const { time: buzztime_ns, client: client_id } = value
+    const duration_ns = 3 * s_ns
+    const until_ns = buzztime_ns + duration_ns
+    highlight(client_id, until_ns)
+  })
+  conn.on("clients", ({ value }) => {
+    clients = value.clients
+    redraw_clients(me, clients)
+  })
+  conn.on("client", ({ value: { client } }) => {
+    const idx = clients.findIndex((c) => c.id === client.id)
+    if (idx >= 0) {
+      clients[idx] = client
+    } else {
+      clients.push(client)
+    }
+    redraw_clients(me, clients)
+  })
+  conn.on("session_key", ({ value }) => {
+    session_key = value
+    storage["session_path"] = session_key.path
+    storage["session_key"] = session_key.key
+    disable_player_ui()
+    enable_admin_ui()
+  })
+  conn.on("control", ({ value }) => {
+    // ignore
+  })
+  conn.on("error", (msg) => {
+    console.error(`Error: ${msg.value.reason}`)
+    const errorbox = q("#error")
+    q("code", errorbox).textContent = JSON.stringify(msg, null, 2)
+    q("body").classList.add("error")
+  })
+  conn.connect(session_url(sid))
 }
 
 setup_url()