lint

public/buzzer.html

@@ -8,7 +8,11 @@
 
   <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>
+    <div>
+      <a href="monitor.html" onclick="this.href='monitor.html'+location.hash"
+        >Monitor</a
+      >
+    </div>
     <div>
       <label>points: <input type="number" name="points" value="0" /></label>
       <button data-onclick="named.points.valueAsNumber += 100">+ 100</button>
@@ -19,30 +23,42 @@
       <label>tokens: <input type="number" name="tokens" value="0" /></label>
     </div>
     <div>
-      <label>monitored:
+      <label
+        >monitored:
         <input type="text" name="monitored1" value="" />
         <input type="text" name="monitored2" value="" />
         <input type="text" name="monitored3" value="" />
       </label>
-      <button data-onclick="conn.send('control', {targets: [
+      <button
+        data-onclick="conn.send('control', {targets: [
                            named.monitored1.value,
                            named.monitored2.value,
                            named.monitored3.value,
-                         ], action: 'monitor'})">resubmit</button>
+                         ], action: 'monitor'})"
+      >
+        resubmit
+      </button>
     </div>
     <div>
-      <label>text overlay:
+      <label
-        <textarea name="textbox" data-onselect="
+        >text overlay:
+        <textarea
+          name="textbox"
+          data-onselect="
           const text = target.value.substring(
             target.selectionStart,
             target.selectionEnd
           ) || ''
           conn.send('control', {action: 'text', text})
-        " data-onchange="
+        "
+          data-onchange="
           if (!target.value.length) {
             conn.send('control', {action: 'text', text: ''})
           }
-        "></textarea>
+        "
+        ></textarea>
+      </label>
+    </div>
       </label>
     </div>
   </div>
@@ -56,10 +72,15 @@
         id="username"
         placeholder="Please put your name here ..."
         data-onchange="q('#set-name').disabled = false"
-    /><button id="set-name" data-onclick="
+      /><button
+        id="set-name"
+        data-onclick="
       set_name(named.username.value)
       target.disabled = true
-      ">set name</button>
+      "
+      >
+        set name
+      </button>
     </label>
   </div>
 
@@ -85,7 +106,8 @@
     <span class="name">player name</span>
     <div class="admin-only">
       (<span class="points">points</span> pts) (<span class="tokens">tokens</span> tks)
-      <button data-onclick="(!named.monitored1.value.length ? named.monitored1 :
+      <button
+        data-onclick="(!named.monitored1.value.length ? named.monitored1 :
                          (!named.monitored2.value.length ? named.monitored2 :
                          named.monitored3)).value = client.id;
                          let monitored = [
@@ -93,7 +115,8 @@
                            named.monitored2.value,
                            named.monitored3.value,
                          ];
-                         conn.send('control', {targets: monitored, action: 'monitor'})">
+                         conn.send('control', {targets: monitored, action: 'monitor'})"
+      >
         monitor
       </button>
       <button
@@ -108,9 +131,12 @@
       >
         add tokens
       </button>
-      <select name="sound" data-onchange="
+      <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>

public/index.html

@@ -1,18 +1,34 @@
 <meta charset="utf-8" />
 <style type="text/css">
-@import "shared.css";
+  @import "shared.css";
 
-h1 {
+  h1 {
     font-family: "Galada Regular";
     font-size: 28em;
     text-align: center;
     margin: 0;
-}
+  }
 
-a { font-family: inherit; color: inherit; text-decoration: inherit; }
+  a {
-a:link { color: inherit; text-decoration: inherit; }
+    font-family: inherit;
-a:visited { color: inherit; text-decoration: inherit; }
+    color: inherit;
-a:hover { color: inherit; text-decoration: inherit; }
+    text-decoration: inherit;
-a:active { color: inherit; text-decoration: inherit; }
+  }
+  a:link {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  a:visited {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  a:hover {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  a:active {
+    color: inherit;
+    text-decoration: inherit;
+  }
 </style>
 <h1>Qu<a href="buzzer.html">i</a>z</h1>

public/monitor.js

@@ -59,7 +59,7 @@ function _redraw_clients(clients, monitored) {
 
   const player_tpl = q("template#player").content.firstElementChild
   for (const cid of monitored) {
-    const c = clients[cid] ?? {id: cid, name:'', points:0, tokens:0}
+    const c = clients[cid] ?? { id: cid, name: "", points: 0, tokens: 0 }
     let player_el = q(`.player[data-cid='${c.id}']`)
     if (player_el) {
       // Ensure the element is at the correct position.
@@ -129,7 +129,7 @@ function setup_ws() {
     monitored = [],
     sounds = {}
   const sid = session_id()
-  const overlay = q('#text-overlay')
+  const overlay = q("#text-overlay")
   conn = new Connection()
   conn.on("helo", () => {
     conn.send("name", "Monitor")
@@ -154,22 +154,29 @@ function setup_ws() {
     clients[client.id] = client
     redraw_clients(clients, monitored)
   })
-  conn.on("control", ({ value: {payload: {action, ...args}} }) => {
+  conn.on(
-    if (action === 'monitor' && Array.isArray(args.targets)) {
+    "control",
+    ({
+      value: {
+        payload: { action, ...args },
+      },
+    }) => {
+      if (action === "monitor" && Array.isArray(args.targets)) {
         monitored = args.targets
         redraw_clients(clients, monitored)
-    } else if (action === 'text' && args.text !== undefined) {
+      } else if (action === "text" && args.text !== undefined) {
         if (args.text.length) {
           overlay.textContent = args.text
-        overlay.classList.remove('hidden')
+          overlay.classList.remove("hidden")
         } else {
-        overlay.classList.add('hidden')
+          overlay.classList.add("hidden")
         }
-    } else if (action === 'sound' && args.sound) {
+      } else if (action === "sound" && args.sound) {
         const { client_id, sound } = args
         sounds[client_id] = new Audio(`sounds/${sound}.mp3`)
       }
-  })
+    },
+  )
   conn.connect(session_url(sid))
 }