jurajk/knet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicer boxes

Browse Source
This commit is contained in:
JurajKubrican
2025-08-04 19:39:13 +02:00
parent c57b4504e5
commit 70b0b70f65
7 changed files with 125 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
js/boxes.js
View File

@@ -1,6 +1,6 @@
"use strict";
(() => {
const socket = getSocket("/boxes/ws");
const socket = initSocket("/boxes/ws");
const deserializeBox = (msg) => {
msg = msg.replaceAll("b:", "");
const parts = msg.split(":");
@@ -21,8 +21,8 @@
return;
}
};
socket.addEventListener("message", (event) => {
const instructions = event.data.split("\n");
socket.addMessageListener((data) => {
const instructions = data.split("\n");
instructions.forEach(handleInstruction);
});
document.querySelectorAll(".boxes input").forEach((input) => {
@@ -33,26 +33,25 @@
socket.send("b:" + id + ":" + value);
});
});
// const autoPlayEl = document.querySelector("#randomize");
// const autoPlayEl = document.querySelector("#randomize") as CheckboxEl;
// autoPlayEl?.addEventListener("click", (e) => socket.send("r:1000"));
// var golTimer = undefined;
// const handleGol = (el) => {
// if (el.checked) {
// golTimer = setInterval(() => {
// socket.send("gol");
// }, 500);
// }
// else {
// clearInterval(golTimer);
// }
// var golTimer: number | undefined = undefined;
// const handleGol = (el: CheckboxEl) => {
// if (el.checked) {
// golTimer = setInterval(() => {
// socket.send("gol");
// }, 500);
// } else {
// clearInterval(golTimer);
// }
// };
// const golEl = document.querySelector("#game-of-life");
// const golEl = document.querySelector("#game-of-life") as CheckboxEl;
// handleGol(golEl);
// golEl.addEventListener("change", (e) => handleGol(e.target));
const container = document.querySelector('.boxes');
// golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl));
const container = document.querySelector(".boxes");
const resizeObserver = new ResizeObserver((entries) => {
const entry = entries.at(0);
container.style.height = String(entry?.contentRect.width ?? 500) + 'px';
container.style.height = String(entry?.contentRect.width ?? 500) + "px";
});
resizeObserver.observe(container);
})();