show in the UI if a player is disconnected

public/buzzer.css

@@ -23,25 +23,32 @@ ul {
   margin: 0;
   padding: 0;*/
 }
-li.me::after {
+.player.inactive {
+  color: grey;
+}
+.player.inactive::after {
+  content: " (gone)";
+  font-style: italic;
+}
+.player.me::after {
   content: " — that's you!";
   font-style: italic;
 }
-li.buzzing {
+.player.buzzing {
   color: red;
   font-weight: bold;
   font-size: 2em;
   list-style-type: none;
 }
-li.buzzing.first::before {
+.player.buzzing.first::before {
   content: "🥇 ";
 }
-li.buzzing.too-late {
+.player.buzzing.too-late {
   color: black;
   font-weight: bold;
   font-size: 1.2em;
 }
-li.buzzing.too-late::before {
+.player.buzzing.too-late::before {
   content: "🥈 ";
 }
 #info {

public/buzzer.html

@@ -15,7 +15,7 @@
         placeholder="Please put your name here ..."
     /></label>
     <h2>All Players</h2>
-    <ul>
+    <ul class="players">
       <!-- players will be inserted here -->
     </ul>
   </div>
@@ -27,7 +27,7 @@
 </body>
 
 <template id="player">
-  <li data-cid="client ID">player name</li>
+  <li class="player" data-cid="client ID">player name</li>
 </template>
 
 <script type="module" src="./buzzer.js"></script>

public/buzzer.js

@@ -22,7 +22,17 @@ const on = (event, cb) => document.addEventListener(event, cb)
 function node(type, { appendTo, cls, text, data, style, ...attrs } = {}) {
   let elem = typeof type === "string" ? document.createElement(type) : type
   if (cls) {
+    if (typeof cls === "string") {
       elem.className = cls
+    } else {
+      for (const [name, on] of Object.entries(cls)) {
+        if (on) {
+          elem.classList.add(name)
+        } else {
+          elem.classList.remove(name)
+        }
+      }
+    }
   }
   if (text) {
     elem.textContent = text
@@ -105,7 +115,10 @@ function redraw_clients(me, clients) {
       text: c.name,
       data: { cid: c.id },
       appendTo: ul,
-      cls: c.id === me.id ? "me" : "",
+      cls: {
+        me: c.id === me.id,
+        inactive: !c.active,
+      },
     })
   }
 }