auto play boxes + get rid of tailwind

js/boxes.js

@@ -0,0 +1,65 @@
+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]);
+    });
+    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;
+    });
+    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 ? "-" : "+";
+            socket.send("u:" + id + ":" + value);
+        },500)
+    }else{
+        clearInterval(timer)
+    }
+})