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

41
js/boxes.ts
View File

@@ -5,7 +5,7 @@ type Box = {
};
(() => {
const socket = getSocket("/boxes/ws");
const socket = initSocket("/boxes/ws");
const deserializeBox = (msg: string): Box => {
msg = msg.replaceAll("b:", "");
@@ -31,8 +31,8 @@ type Box = {
}
};
socket.addEventListener("message", (event: MessageEvent<string>) => {
const instructions = event.data.split("\n");
socket.addMessageListener((data) => {
const instructions = data.split("\n");
instructions.forEach(handleInstruction);
});
@@ -46,29 +46,28 @@ type Box = {
});
});
const autoPlayEl = document.querySelector("#randomize") as CheckboxEl;
autoPlayEl?.addEventListener("click", (e) => socket.send("r:1000"));
// const autoPlayEl = document.querySelector("#randomize") as CheckboxEl;
// autoPlayEl?.addEventListener("click", (e) => socket.send("r:1000"));
var golTimer: number | undefined = undefined;
const handleGol = (el: CheckboxEl) => {
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") as CheckboxEl;
handleGol(golEl);
golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl));
// const golEl = document.querySelector("#game-of-life") as CheckboxEl;
// handleGol(golEl);
// golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl));
const container = document.querySelector('.boxes') as HTMLDivElement
const container = document.querySelector(".boxes") as HTMLDivElement;
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);
})();