live users

css/boxes.css

@@ -10,8 +10,6 @@
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  width: 20px;
-  height: 20px;
   background: transparent;
   border: none;
   position: relative;
@@ -50,4 +48,8 @@
   display: grid;
   grid-template-columns: repeat(32, 1fr); /* 32 equal columns */
   grid-template-rows: repeat(32, 1fr); /* 32 equal rows */
+}
+
+.counter-label {
+  color: #4a7c59;
 }

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) => {
+        input.addEventListener("change", handleBoxChange);
-            const target = event.target;
-            const id = target?.id.split("-")[1];
-            const value = target.checked ? "+" : "-";
-            socket.send("b:" + id + ":" + value);
-        });
     });
-    // 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);

js/boxes.ts

@@ -29,6 +29,16 @@ type Box = {
       });
       return;
     }
+    if (instruction.startsWith("u:")) {
+      const items = instruction.split(":");
+  
+      const el = document.getElementById("counter") as CheckboxEl;
+      el.innerText = items[1];
+      const el2 = document.getElementById("ips") as CheckboxEl;
+      el2.innerText = items[2].replaceAll(",", "<br/>");
+
+      return;
+    }
   };
 
   socket.addMessageListener((data) => {
@@ -36,34 +46,17 @@ type Box = {
     instructions.forEach(handleInstruction);
   });
 
+  const handleBoxChange = (event: Event) => {
+    const target = event.target as CheckboxEl;
+    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) => {
+    input.addEventListener("change", handleBoxChange);
-      const target = event.target as CheckboxEl;
-
-      const id = target?.id.split("-")[1];
-      const value = target.checked ? "+" : "-";
-      socket.send("b:" + id + ":" + value);
-    });
   });
 
-  // 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") as HTMLDivElement;
   const resizeObserver = new ResizeObserver((entries) => {
     const entry = entries.at(0);

src/boxes/boxes.go

@@ -12,7 +12,7 @@ import (
 )
 
 var (
-	wsConnections = make(map[*websocket.Conn]bool)
+	wsConnections = make(map[*websocket.Conn]string)
 	wsMutex       sync.Mutex
 )
 
@@ -161,11 +161,16 @@ func handleMessage(msg string, ws *websocket.Conn) error {
 func InitWs(c echo.Context) error {
 	websocket.Handler(func(ws *websocket.Conn) {
 		wsMutex.Lock()
-		wsConnections[ws] = true
+		wsConnections[ws] = c.RealIP()
 		wsMutex.Unlock()
 
 		boxes := GetBoxes()
-		msg := ""
+		msg := "u:" + strconv.Itoa(len(wsConnections)) + ":"
+		for _, addr := range wsConnections {
+			msg += addr + ","
+		}
+		msg += "\n"
+
 		for _, box := range boxes {
 			msg += box.serialize()
 		}

views/boxes.html

@@ -1,5 +1,10 @@
 {{block "boxes" .}}
 <link rel="stylesheet" href="/css/boxes.css?v={{.BuildNumber}}" />
+
+
+<span class="counter-label">Currently Online: <span id="counter"></span></span>
+<div id="ips" class="ips-container"></div>  
+
 <div class="boxes-container">
   <div class="boxes">
     {{range .Boxes}}<input