live users

js/boxes.js

@@ -20,34 +20,28 @@
             });
             return;
         }
+        if (instruction.startsWith("u:")) {
+            const items = instruction.split(":");
+            const el = document.getElementById("counter");
+            el.innerText = items[1];
+            const el2 = document.getElementById("ips");
+            el2.innerText = items[2].replaceAll(",", "\n");
+            return;
+        }
     };
     socket.addMessageListener((data) => {
         const instructions = data.split("\n");
         instructions.forEach(handleInstruction);
     });
+    const handleBoxChange = (event) => {
+        const target = event.target;
+        const id = target?.id.split("-")[1];
+        const value = target.checked ? "+" : "-";
+        socket.send("b:" + id + ":" + value);
+    };
     document.querySelectorAll(".boxes input").forEach((input) => {
-        input.addEventListener("change", (event) => {
-            const target = event.target;
-            const id = target?.id.split("-")[1];
-            const value = target.checked ? "+" : "-";
-            socket.send("b:" + id + ":" + value);
-        });
+        input.addEventListener("change", handleBoxChange);
     });
-    // const autoPlayEl = document.querySelector("#randomize") as CheckboxEl;
-    // autoPlayEl?.addEventListener("click", (e) => socket.send("r:1000"));
-    // var golTimer: number | undefined = undefined;
-    // const handleGol = (el: CheckboxEl) => {
-    //   if (el.checked) {
-    //     golTimer = setInterval(() => {
-    //       socket.send("gol");
-    //     }, 500);
-    //   } else {
-    //     clearInterval(golTimer);
-    //   }
-    // };
-    // const golEl = document.querySelector("#game-of-life") as CheckboxEl;
-    // handleGol(golEl);
-    // golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl));
     const container = document.querySelector(".boxes");
     const resizeObserver = new ResizeObserver((entries) => {
         const entry = entries.at(0);