control via admin what players to show in monitor

public/buzzer.html

@@ -7,7 +7,7 @@
   </div>
   <div id="points-admin" class="admin-only">
     <h2>Admin</h2>
-    <div><a href="monitor.html">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-eval="named.points.valueAsNumber += 100">+ 100</button>
@@ -17,6 +17,10 @@
     <div>
       <label>tokens: <input type="number" name="tokens" value="0" /></label>
     </div>
+    <div>
+      <label>monitored: <input type="text" name="monitored" value="[]" /></label>
+      <button data-eval="conn.send('control', {targets: JSON.parse(named.monitored.value), action: 'monitor'})">resubmit</button>
+    </div>
   </div>
   <div id="info">
     <label class="myname player-only"
@@ -44,7 +48,9 @@
     <span class="name">player name</span>
     <div class="admin-only">
       (<span class="points">points</span> pts) (<span class="tokens">tokens</span> tks)
-      <button data-eval="conn.send('control', {target: client.id, action: 'monitor'})">
+      <button data-eval="let monitored = JSON.parse(named.monitored.value).concat(client.id);
+                         named.monitored.value = JSON.stringify(monitored);
+                         conn.send('control', {targets: monitored, action: 'monitor'})">
         monitor
       </button>
       <button

public/buzzer.js

@@ -185,7 +185,7 @@ function enable_admin_ui() {
       if (!target.dataset.eval) {
         return
       }
-      eval(target.dataset.eval)
+      eval(`;{${target.dataset.eval}};`)
     },
     { target: q("#points-admin") },
   )
@@ -203,7 +203,7 @@ function enable_admin_ui() {
       if (!client) {
         return
       }
-      eval(target.dataset.eval)
+      eval(`;{${target.dataset.eval}};`)
     },
     { target: q("#info .players") },
   )
@@ -257,6 +257,7 @@ function setup_ws() {
     storage["session_key"] = session_key.key
     disable_player_ui()
     enable_admin_ui()
+    set_name('Admin')
   })
   conn.on("control", ({ value }) => {
     // ignore

public/monitor.js

@@ -4,15 +4,7 @@
 const location = document.location
 const performance = window.performance
 
-import {
-  Connection,
-  ms_ns,
-  node,
-  q,
-  s_ns,
-  session_id,
-  session_url,
-} from "./shared.js"
+import { Connection, ms_ns, node, q, s_ns, session_id, session_url } from "./shared.js"
 
 let conn
 
@@ -57,31 +49,28 @@ function test_prettynum() {
 test_prettynum()
 
 const player_list = q("#players")
-function _redraw_clients(me, clients) {
-  if (!me) {
-    return
-  }
-
+function _redraw_clients(clients, monitored) {
   // Remove all gone players.
-  const client_ids = clients.map((c) => "" + c.id)
   for (const el of player_list.querySelectorAll(".player")) {
-    if (!client_ids.includes(el.dataset.cid)) {
+    if (!monitored.includes(el.dataset.cid)) {
       el.remove()
     }
   }
 
   const player_tpl = q("template#player").content.firstElementChild
-  for (const c of clients) {
-    if (c.id === me.id) {
-      continue
-    }
+  for (const cid of monitored) {
+    const c = clients[cid] ?? {id: cid, name:'', points:0, tokens:0}
     let player_el = q(`.player[data-cid='${c.id}']`)
-    if (!player_el) {
+    if (player_el) {
+      // Ensure the element is at the correct position.
+      player_list.appendChild(player_el)
+    } else {
       player_el = node(player_tpl.cloneNode(true), {
         data: { cid: c.id },
         appendTo: player_list,
       })
-    } else if (q(".points", player_el).textContent !== prettynum(c.points)) {
+    }
+    if (q(".points", player_el).textContent !== prettynum(c.points)) {
       q(".points.fg", player_el).classList.add("big")
       q(".points.bg", player_el).classList.add("big")
       setTimeout(() => {
@@ -135,8 +124,9 @@ function highlight(client_id, until_ns) {
 }
 
 function setup_ws() {
-  let clients = [],
-    me
+  let clients = {},
+    me,
+    monitored = []
   const sid = session_id()
   conn = new Connection()
   conn.on("helo", () => {
@@ -144,7 +134,6 @@ function setup_ws() {
   })
   conn.on("id", ({ value }) => {
     me = value
-    redraw_clients(me, clients)
   })
   conn.on("buzz", ({ value }) => {
     const { time: buzztime_ns, client: client_id } = value
@@ -153,20 +142,18 @@ function setup_ws() {
     highlight(client_id, until_ns)
   })
   conn.on("clients", ({ value }) => {
-    clients = value.clients
-    redraw_clients(me, clients)
+    clients = Object.fromEntries(value.clients.map((c) => [c.id, c]))
+    redraw_clients(clients, monitored)
   })
   conn.on("client", ({ value: { client } }) => {
-    const idx = clients.findIndex((c) => c.id === client.id)
-    if (idx >= 0) {
-      clients[idx] = client
-    } else {
-      clients.push(client)
-    }
-    redraw_clients(me, clients)
+    clients[client.id] = client
+    redraw_clients(clients, monitored)
   })
-  conn.on("control", ({ value }) => {
-    // ...
+  conn.on("control", ({ value: {payload: {action, targets}} }) => {
+    if (action === 'monitor' && Array.isArray(targets)) {
+      monitored = targets
+      redraw_clients(clients, monitored)
+    }
   })
   conn.connect(session_url(sid))
 }