replace user buzzer with big red button

public/buzzer.js

@@ -35,12 +35,12 @@ let conn,
   clients = []
 
 function hide(e) {
-  e = isString(e) ? q(`#${e}`) : e
+  e = isString(e) ? q(e) : e
   e.style.display = "none"
 }
 
 function show(e) {
-  e = isString(e) ? q(`#${e}`) : e
+  e = isString(e) ? q(e) : e
   e.style.display = "block"
 }
 
@@ -114,50 +114,101 @@ function highlight(client_id, until_ns) {
 }
 
 function setup_ui() {
+  const buzzbutton = q("#buzzbutton")
+  const username = q("#username")
+
   on("focus", (event) => {
-    hide("active")
-    hide("inactive")
-    show("ready")
+    hide(".inactive")
   })
   on("blur", (event) => {
-    hide("active")
-    show("inactive")
-    hide("ready")
+    show(".inactive")
   })
   if (document.hasFocus()) {
-    hide("inactive")
-  } else {
-    hide("ready")
+    hide(".inactive")
+  }
+
+  let buzzing = false
+
+  function buzz() {
+    if (!buzzing) {
+      buzzing = true
+      conn.send("buzz", conn.servertime_now_ns())
+      show(".active")
+      hide(".ready")
+    }
+  }
+
+  function unbuzz() {
+    buzzing = false
+    hide(".active")
+    show(".ready")
   }
 
   q("#bkey").textContent = buzzer_key.name
-  let buzzing = false
   on("keydown", (event) => {
-    if (!buzzing && event.keyCode === buzzer_key.code) {
-      buzzing = true
-      conn.send("buzz", conn.servertime_now_ns())
-      show("active")
-      hide("ready")
+    if (event.target === username) {
+      return
+    }
+    if (event.keyCode === buzzer_key.code) {
+      buzz()
     }
   })
   on("keyup", (event) => {
+    if (event.target === username) {
+      return
+    }
     if (event.keyCode === buzzer_key.code) {
-      buzzing = false
-      hide("active")
-      show("ready")
+      unbuzz()
     }
   })
 
-  const username_el = q("#username")
+  on(
+    "mousedown",
+    (event) => {
+      buzz()
+    },
+    { target: buzzbutton },
+  )
+  on(
+    "mouseup",
+    (event) => {
+      unbuzz()
+    },
+    { target: buzzbutton },
+  )
+  on(
+    "mouseleave",
+    (event) => {
+      unbuzz()
+    },
+    { target: buzzbutton },
+  )
+
+  const named = Object.fromEntries(
+    Array.from(document.querySelectorAll("[name]")).map((el) => [el.name, el]),
+  )
   if (storage["my_name"]) {
-    username_el.value = storage["my_name"]
+    username.value = storage["my_name"]
   }
   on(
     "change",
-    (event) => {
-      set_name(event.target.value)
+    ({ target }) => {
+      if (!target.dataset.onchange) {
+        return
+      }
+      eval(`;{${target.dataset.onchange}};`)
     },
-    { target: username_el },
+    { target: q("#userinfo") },
+  )
+  on(
+    "click",
+    ({ target }) => {
+      if (!target.dataset.onclick) {
+        return
+      }
+      eval(`;{${target.dataset.onclick}};`)
+    },
+    { target: q("#userinfo") },
   )
 }
 
@@ -290,7 +341,7 @@ function setup_ws() {
     storage["session_key"] = session_key.key
     disable_player_ui()
     enable_admin_ui()
-    set_name('Admin')
+    set_name("Admin")
   })
   conn.on("control", ({ value }) => {
     // ignore