add buzz sounds

public/buzzer.html

@@ -94,6 +94,17 @@
       >
         add tokens
       </button>
+      <select name="sound" data-onchange="
+        conn.send('control', {action: 'sound', client_id: client.id, sound: target.value})
+      ">
+        <option value="">-</option>
+        <option value="bark">bark</option>
+        <option value="chirp">chirp</option>
+        <option value="meow">meow</option>
+        <option value="moo">moo</option>
+        <option value="quack">quack</option>
+        <option value="ribbit">ribbit</option>
+      </select>
     </div>
   </li>
 </template>

public/buzzer.js

@@ -210,24 +210,36 @@ function enable_admin_ui() {
     { target: q("#points-admin") },
   )
 
+  const client_for_target = (target) => {
+    let node = target
+    while (!node.dataset.cid && node.parentElement) {
+      node = node.parentElement
+    }
+    return find_client(node.dataset.cid)
+  }
+
   on(
     "click",
     ({ target }) => {
-      let node = target
-      while (!node.dataset.cid && node.parentElement) {
-        node = node.parentElement
-      }
-      if (!target.dataset.onclick) {
-        return
-      }
-      const client = find_client(node.dataset.cid)
-      if (!client) {
+      const client = client_for_target(target)
+      if (!client || !target.dataset.onclick) {
         return
       }
       eval(`;{${target.dataset.onclick}};`)
     },
     { target: q("#info .players") },
   )
+  on(
+    "change",
+    ({ target }) => {
+      const client = client_for_target(target)
+      if (!client || !target.dataset.onchange) {
+        return
+      }
+      eval(`;{${target.dataset.onchange}};`)
+    },
+    { target: q("#info .players") },
+  )
 }
 
 function set_name(name) {

public/monitor.js

@@ -103,12 +103,12 @@ const redraw_clients = debounce(_redraw_clients, 200)
 let highlighted = false
 function highlight(client_id, until_ns) {
   if (highlighted) {
-    return
+    return false
   }
   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
+    return false
   }
   for (const li of player_list.children) {
     if (li.dataset.cid === client_id) {
@@ -118,7 +118,7 @@ function highlight(client_id, until_ns) {
         highlighted = false
         li.classList.remove("buzzing")
       }, timeout_ms)
-      return
+      return true
     }
   }
 }
@@ -126,7 +126,8 @@ function highlight(client_id, until_ns) {
 function setup_ws() {
   let clients = {},
     me,
-    monitored = []
+    monitored = [],
+    sounds = {}
   const sid = session_id()
   const overlay = q('#text-overlay')
   conn = new Connection()
@@ -140,7 +141,10 @@ function setup_ws() {
     const { time: buzztime_ns, client: client_id } = value
     const duration_ns = 12 * s_ns
     const until_ns = buzztime_ns + duration_ns
-    highlight(client_id, until_ns)
+    const is_new_buzz = highlight(client_id, until_ns)
+    if (is_new_buzz && sounds[client_id]) {
+      sounds[client_id].play()
+    }
   })
   conn.on("clients", ({ value }) => {
     clients = Object.fromEntries(value.clients.map((c) => [c.id, c]))
@@ -161,6 +165,9 @@ function setup_ws() {
       } else {
         overlay.classList.add('hidden')
       }
+    } else if (action === 'sound' && args.sound) {
+      const { client_id, sound } = args
+      sounds[client_id] = new Audio(`sounds/${sound}.mp3`)
     }
   })
   conn.connect(session_url(sid))