game Of Life

js/boxes.js

@@ -1,68 +1,64 @@
-const socketUrl =
-  (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
-  window.location.host +
-  "/ws";
-
-let socket = new WebSocket(socketUrl);
-
-socket.addEventListener("message", function (event) {
-  if (event.data.startsWith("u:")) {
-    const items = event.data.split(";");
-    items.forEach((i) => {
-      const parts = event.data.split(":");
-      document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
-      console.log("box-" + parts[1]);
+"use strict";
+(() => {
+    const socket = getSocket("/boxes/ws");
+    const deserializeBox = (msg) => {
+        msg = msg.replaceAll("b:", "");
+        const parts = msg.split(":");
+        return {
+            id: Number(parts[0]),
+            value: parts[1] === "+",
+        };
+    };
+    const handleInstruction = (instruction) => {
+        if (instruction.startsWith("b:")) {
+            const items = instruction.split(";");
+            items.forEach((i) => {
+                const box = deserializeBox(i);
+                const el = document.getElementById("box-" + box.id);
+                el.checked = box.value;
+                // console.log(i,box,el)
+            });
+            return;
+        }
+    };
+    socket.addEventListener("message", (event) => {
+        const instructions = event.data.split("\n");
+        instructions.forEach(handleInstruction);
     });
-    return;
-  }
-
-  if (event.data.startsWith("i:")) {
-    const str = event.data.split("i:")[1];
-    const items = str.split(";");
-    if (items.length === 0) {
-      return;
-    }
-    document.querySelectorAll("input").forEach((input) => {
-      input.checked = false;
+    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);
+        });
     });
-    items.forEach((i) => {
-      if (!i) {
-        return;
-      }
-      console.log(i, document.getElementById("box-" + i));
-      document.getElementById("box-" + i).checked = true;
-    });
-    return;
-  }
-});
-
-setInterval(() => {
-  socket.send("ping");
-}, 10000);
-
-document.querySelectorAll(".boxes input").forEach((input) => {
-  input.addEventListener("change", (event) => {
-    if (socket.readyState !== socket.OPEN) {
-      socket = new WebSocket(socketUrl);
-    }
-    const id = event.target.id.split("-")[1];
-    const value = event.target.checked ? "+" : "-";
-    socket.send("u:" + id + ":" + value);
-  });
-});
-
-var timer = null
-document.querySelector("#auto-boxes").addEventListener("change",(e)=>{
-    if (e.target.checked){
-        timer = setInterval(()=>{
-            var id = Math.round(Math.random() * 1000)
-            const value = document.querySelector('#box-'+id).checked ? "-" : "+";
-            if (socket.readyState !== socket.OPEN) {
-                socket = new WebSocket(socketUrl);
-              }
-            socket.send("u:" + id + ":" + value);
-        },500)
-    }else{
-        clearInterval(timer)
-    }
-})
+    var autoPlayTimer = undefined;
+    const handleAutoPlay = (el) => {
+        if (el.checked) {
+            autoPlayTimer = setInterval(() => {
+                socket.send("random");
+            }, 50);
+        }
+        else {
+            clearInterval(autoPlayTimer);
+        }
+    };
+    const autoPlayEl = document.querySelector("#auto-boxes");
+    handleAutoPlay(autoPlayEl);
+    autoPlayEl?.addEventListener("change", (e) => handleAutoPlay(e.target));
+    var golTimer = undefined;
+    const handleGol = (el) => {
+        if (el.checked) {
+            golTimer = setInterval(() => {
+                socket.send("gol");
+            }, 500);
+        }
+        else {
+            clearInterval(golTimer);
+        }
+    };
+    const golEl = document.querySelector("#game-of-life");
+    handleGol(golEl);
+    golEl.addEventListener("change", (e) => handleGol(e.target));
+})();