replace user buzzer with big red button

public/buzzer.css

@@ -73,8 +73,20 @@ ul {
   align-items: center;
   width: 100%;
   height: 90%;
+  flex-direction: column;
+  text-align: center;
 }
-#active {
-  color: red;
+#buzzbutton {
+  width: 200px;
+  height: 200px;
+  background-color: red;
+  border-radius: 100%;
+  font-size: 1em;
+}
+#buzzbutton .active {
   display: none;
 }
+.inactive {
+  color: #c00;
+  font-size: 2em;
+}

public/buzzer.html

@@ -5,6 +5,7 @@
     Error:
     <code></code>
   </div>
+
   <div id="points-admin" class="admin-only">
     <h2>Admin</h2>
     <div><a href="monitor.html" onclick="this.href='monitor.html'+location.hash">Monitor</a></div>
@@ -45,24 +46,37 @@
       </label>
     </div>
   </div>
-  <div id="info">
-    <label class="myname player-only"
+
+  <div id="userinfo" class="player-only">
+    <label
       >You:
       <input
         type="text"
         name="username"
         id="username"
         placeholder="Please put your name here ..."
-    /></label>
+        data-onchange="q('#set-name').disabled = false"
+    /><button id="set-name" data-onclick="
+      set_name(named.username.value)
+      target.disabled = true
+      ">set name</button>
+    </label>
+  </div>
+
+  <div id="info" class="admin-only">
     <h2>All Players</h2>
     <ul class="players">
       <!-- players (see template#player) will be inserted here -->
     </ul>
   </div>
+
   <div id="buzzbox" class="player-only">
-    <p id="active">BZZZZZ!</p>
-    <p id="ready">Press <strong id="bkey">{key.name}</strong> to activate buzzer.</p>
-    <p id="inactive">Please focus the window to allow the buzzer to work.</p>
+    <button id="buzzbutton">
+      <div class="ready">Press the big red button</div>
+      <div class="active">BZZZZZ!</div>
+    </button>
+    <p>or press <strong id="bkey">{key.name}</strong> to activate buzzer.</p>
+    <p class="inactive">Please focus the window to allow the buzzer to work.</p>
   </div>
 </body>
 

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