admin: split monitor list in 3, add sending text selection to monitor

public/buzzer.html

@@ -10,16 +10,39 @@
     <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>
-      <button data-eval="named.points.valueAsNumber -= 100">- 100</button>
-      <button data-eval="named.points.valueAsNumber *= -1">+/-</button>
+      <button data-onclick="named.points.valueAsNumber += 100">+ 100</button>
+      <button data-onclick="named.points.valueAsNumber -= 100">- 100</button>
+      <button data-onclick="named.points.valueAsNumber *= -1">+/-</button>
     </div>
     <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>
+      <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: [
+                           named.monitored1.value,
+                           named.monitored2.value,
+                           named.monitored3.value,
+                         ], action: 'monitor'})">resubmit</button>
+    </div>
+    <div>
+      <label>text overlay:
+        <textarea name="textbox" data-onselect="
+          const text = target.value.substring(
+            target.selectionStart,
+            target.selectionEnd
+          ) || ''
+          conn.send('control', {action: 'text', text})
+        " data-onchange="
+          if (!target.value.length) {
+            conn.send('control', {action: 'text', text: ''})
+          }
+        "></textarea>
+      </label>
     </div>
   </div>
   <div id="info">
@@ -48,19 +71,25 @@
     <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="let monitored = JSON.parse(named.monitored.value).concat(client.id);
-                         named.monitored.value = JSON.stringify(monitored);
+      <button data-onclick="(!named.monitored1.value.length ? named.monitored1 :
+                         (!named.monitored2.value.length ? named.monitored2 :
+                         named.monitored3)).value = client.id;
+                         let monitored = [
+                           named.monitored1.value,
+                           named.monitored2.value,
+                           named.monitored3.value,
+                         ];
                          conn.send('control', {targets: monitored, action: 'monitor'})">
         monitor
       </button>
       <button
-        data-eval="client.points += named.points.valueAsNumber;
+        data-onclick="client.points += named.points.valueAsNumber;
                    conn.send('points', {id: client.id, points: client.points})"
       >
         add points
       </button>
       <button
-        data-eval="client.tokens += named.tokens.valueAsNumber;
+        data-onclick="client.tokens += named.tokens.valueAsNumber;
                    conn.send('tokens', {id: client.id, tokens: client.tokens})"
       >
         add tokens

public/buzzer.js

@@ -182,13 +182,34 @@ function enable_admin_ui() {
   on(
     "click",
     ({ target }) => {
-      if (!target.dataset.eval) {
+      if (!target.dataset.onclick) {
         return
       }
-      eval(`;{${target.dataset.eval}};`)
+      eval(`;{${target.dataset.onclick}};`)
     },
     { target: q("#points-admin") },
   )
+  on(
+    "select",
+    ({ target }) => {
+      if (!target.dataset.onselect) {
+        return
+      }
+      eval(`;{${target.dataset.onselect}};`)
+    },
+    { target: q("#points-admin") },
+  )
+  on(
+    "change",
+    ({ target }) => {
+      if (!target.dataset.onchange) {
+        return
+      }
+      eval(`;{${target.dataset.onchange}};`)
+    },
+    { target: q("#points-admin") },
+  )
+
   on(
     "click",
     ({ target }) => {
@@ -196,14 +217,14 @@ function enable_admin_ui() {
       while (!node.dataset.cid && node.parentElement) {
         node = node.parentElement
       }
-      if (!target.dataset.eval) {
+      if (!target.dataset.onclick) {
         return
       }
       const client = find_client(node.dataset.cid)
       if (!client) {
         return
       }
-      eval(`;{${target.dataset.eval}};`)
+      eval(`;{${target.dataset.onclick}};`)
     },
     { target: q("#info .players") },
   )

public/monitor.css

@@ -4,6 +4,9 @@ body {
   margin: 0px auto;
   overflow: hidden;
 }
+.hidden {
+  visibility: hidden;
+}
 .container {
   display: flex;
   width: 1280px;
@@ -68,5 +71,17 @@ iframe {
   height: 21px; /* 1 line height */
   overflow: hidden;
 }
+#text-overlay {
+  width: 720px;
+  background-color: var(--main-bg-color);
+  outline: 0.7em solid var(--main-fg-color);
+  -moz-outline-radius: 1em;
+  position: absolute;
+  top: 310;
+  left: 280px;
+  padding: 1em;
+  font-size: 1.5em;
+  text-align: center;
+}
 /*1280 x 720*/
 /*1920 x 1080*/

public/monitor.html

@@ -7,6 +7,7 @@
       <!-- players (see template#player) will be inserted here -->
     </div>
     <iframe src="matrix.html"></iframe>
+    <div id="text-overlay" class="hidden"></div>
   </div>
 </body>
 

public/monitor.js

@@ -128,6 +128,7 @@ function setup_ws() {
     me,
     monitored = []
   const sid = session_id()
+  const overlay = q('#text-overlay')
   conn = new Connection()
   conn.on("helo", () => {
     conn.send("name", "Monitor")
@@ -149,10 +150,17 @@ function setup_ws() {
     clients[client.id] = client
     redraw_clients(clients, monitored)
   })
-  conn.on("control", ({ value: {payload: {action, targets}} }) => {
-    if (action === 'monitor' && Array.isArray(targets)) {
-      monitored = targets
+  conn.on("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) {
+      if (args.text.length) {
+        overlay.textContent = args.text
+        overlay.classList.remove('hidden')
+      } else {
+        overlay.classList.add('hidden')
+      }
     }
   })
   conn.connect(session_url(sid))