From 482b872c5ea00e0617c235cef10c654223af8fff Mon Sep 17 00:00:00 2001 From: JurajKubrican Date: Tue, 11 Feb 2025 21:40:50 +0100 Subject: [PATCH] auto play boxes + get rid of tailwind --- css/boxes.css | 9 ++++++ css/main.css | 40 ++++++++++++++++++++----- js/boxes.js | 65 ++++++++++++++++++++++++++++++++++++++++ views/boxes.html | 77 ++++++++++++------------------------------------ views/index.html | 63 ++++++++++++++++----------------------- 5 files changed, 152 insertions(+), 102 deletions(-) create mode 100644 css/boxes.css create mode 100644 js/boxes.js diff --git a/css/boxes.css b/css/boxes.css new file mode 100644 index 0000000..9ab8f1b --- /dev/null +++ b/css/boxes.css @@ -0,0 +1,9 @@ +.boxes-container { + max-width: 800px; + margin: 100px auto; +} +.boxes-container input{ + height: 20px; + width: 20px; + margin: 2; +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 6a2c33f..13bb379 100644 --- a/css/main.css +++ b/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; - flex-direction: column; - min-height: 100vh; - } - main { - flex: 1; - } \ No newline at end of file + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + min-height: 100vh; + margin: 0; +} + +body>footer{ + bottom: 0; +} + +a { + color: var(--primary); +} + +a:hover { + color: var(--secondary); +} + +nav li { + list-style: none; +} \ No newline at end of file diff --git a/js/boxes.js b/js/boxes.js new file mode 100644 index 0000000..84d252a --- /dev/null +++ b/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) + } +}) diff --git a/views/boxes.html b/views/boxes.html index c59e5a0..c652561 100644 --- a/views/boxes.html +++ b/views/boxes.html @@ -1,60 +1,21 @@ {{block "boxes" .}} -{{range $index, $value := .}} - -{{end}} + +
+ +
+ {{range $index, $value := .}}{{end}} +
+
- -{{end}} \ No newline at end of file + +{{end}} diff --git a/views/index.html b/views/index.html index 4ba4d36..3e6dd40 100644 --- a/views/index.html +++ b/views/index.html @@ -5,49 +5,38 @@ Home - - - - - + - - - -
+
-
{{template "boxes" .Boxes}}
+ {{template "boxes" .Boxes}}
-