auto play boxes + get rid of tailwind

views/boxes.html

@@ -1,60 +1,21 @@
 {{block "boxes" .}}
-{{range $index, $value := .}}
-    <input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}} >
-{{end}}
+<link rel="stylesheet" href="/css/boxes.css" />
+<div class="boxes-container">
+  <label>
+    Auto play boxes
+    <input type="checkbox" id="auto-boxes"/>
+  </label>
+  <div class="boxes">
+    {{range $index, $value := .}}<label
+      ><input
+        type="checkbox"
+        id="box-{{$index}}"
+        name="checked"
+        {{if
+        $value}}checked{{end}} /></label
+    >{{end}}
+  </div>
+</div>
 
-<script>
-    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("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);
-      });
-    });
-  </script>
-{{end}}
+<script src="js/boxes.js"></script>
+{{end}}