auto play boxes + get rid of tailwind

css/boxes.css

@@ -0,0 +1,9 @@
+.boxes-container {
+  max-width: 800px;
+  margin: 100px auto;
+}
+.boxes-container input{
+  height: 20px;
+  width: 20px;
+  margin: 2;
+}

css/main.css

@@ -1,8 +1,34 @@
+:root {
+  --background-color: #1e1e1e;
+  --color: #dcdcdc;
+  --primary: #569cd6;
+  --secondary: #c586c0;
+  --success: #98c379;
+  --warning: #d19a66;
+  --error: #f44747;
+  --font-family: 'JetBrains Mono', monospace;
+}
+
 body {
-    display: flex;
+  background-color: var(--background-color);
-    flex-direction: column;
+  color: var(--color);
-    min-height: 100vh;
+  font-family: var(--font-family);
-  }
+  min-height: 100vh;
-  main {
+  margin: 0;
-    flex: 1;
+}
-  }
+
+body>footer{
+  bottom: 0;
+}
+
+a {
+  color: var(--primary);
+}
+
+a:hover {
+  color: var(--secondary);
+}
+
+nav li {
+  list-style: none;
+}

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)
+    }
+})

views/boxes.html

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

views/index.html

@@ -5,49 +5,38 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Home</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/css/main.css" />
-    <script src="/js/htmx.min.js"></script>
-    <script src="/js/ext/ws.js"></script>
-    <link rel="stylesheet" href="/main.css" >
-
   </head>
-  <body class="bg-gray-900 text-white font-sans">
+  <body>
-    <nav class="bg-gray-800 py-4 shadow-md">
+    <header>
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
+      <nav>
-        <!-- Logo -->
+        <ul>
-        <div class="text-2xl font-bold text-blue-500">
+          <li>
-          <a href="/">K</a> </div>
+            <h1><a href="/">K</a></h1>
+          </li>
+        </ul>
+      </nav>
+    </header>
 
-        <!-- Navigation Links -->
+    <main>
-        <div class="space-x-6">
-          <!-- <a href="/" class="text-white hover:text-blue-500">Home</a> -->
-          <!-- <a href="/projects" class="text-white hover:text-blue-500">Projects</a> -->
-          <!-- <a href="/blog" class="text-white hover:text-blue-500">Blog</a> -->
-        </div>
-      </div>
-    </nav>
-
-    <main id="main" class="max-w-3xl mx-auto p-6 rounded-lg">
       <section>
-        <div class="mt-4">{{template "boxes" .Boxes}}</div>
+        {{template "boxes" .Boxes}}
       </section>
     </main>
 
-    <footer class="bg-gray-800 text-center p-4 flex flex-row justify-around">
+    <footer>
-      <!-- link to github -->
+      <nav>
-      <div class="mt-4">
+        <ul>
-        <a href="https://github.com/JurajKubrican" class="text-blue-500"
+          <li>
-          >Github</a
+            <a href="https://github.com/JurajKubrican">Github</a>
-        >
+          </li>
-      </div>
+          <li>
-      <!-- Link to linkedin -->
+            <a href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/"
-      <div class="mt-4">
+              >LinkedIn</a
-        <a
+            >
-          href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/"
+          </li>
-          class="text-blue-500"
+        </ul>
-          >LinkedIn</a
+      </nav>
-        >
-      </div>
     </footer>
   </body>
 </html>