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

5
css/boxes.css
View File

@@ -1,6 +1,9 @@
.boxes-container { .boxes-container {
max-width: 800px; max-width: 800px;
margin: 100px auto; margin: 0 auto;
border: #4a7c59 1px dotted;
border-radius: 4px;
} }
.boxes input{ .boxes input{
margin: 0; margin: 0;

35
js/boxes.js
View File

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

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 => { const deserializeBox = (msg: string): Box => {
msg = msg.replaceAll("b:", ""); msg = msg.replaceAll("b:", "");
@@ -31,8 +31,8 @@ type Box = {
} }
}; };
socket.addEventListener("message", (event: MessageEvent<string>) => { socket.addMessageListener((data) => {
const instructions = event.data.split("\n"); const instructions = data.split("\n");
instructions.forEach(handleInstruction); instructions.forEach(handleInstruction);
}); });
@@ -46,29 +46,28 @@ type Box = {
}); });
}); });
const autoPlayEl = document.querySelector("#randomize") as CheckboxEl; // const autoPlayEl = document.querySelector("#randomize") as CheckboxEl;
autoPlayEl?.addEventListener("click", (e) => socket.send("r:1000")); // autoPlayEl?.addEventListener("click", (e) => socket.send("r:1000"));
var golTimer: number | undefined = undefined; // var golTimer: number | undefined = undefined;
const handleGol = (el: CheckboxEl) => { // const handleGol = (el: CheckboxEl) => {
if (el.checked) { // if (el.checked) {
golTimer = setInterval(() => { // golTimer = setInterval(() => {
socket.send("gol"); // socket.send("gol");
}, 500); // }, 500);
} else { // } else {
clearInterval(golTimer); // clearInterval(golTimer);
} // }
}; // };
const golEl = document.querySelector("#game-of-life") as CheckboxEl; // const golEl = document.querySelector("#game-of-life") as CheckboxEl;
handleGol(golEl); // handleGol(golEl);
golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl)); // 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 resizeObserver = new ResizeObserver((entries) => {
const entry = entries.at(0); 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); resizeObserver.observe(container);
})(); })();

8
js/draw.js
View File

@@ -7,7 +7,7 @@
const emitter = mitt(); const emitter = mitt();
let drawing = false; let drawing = false;
let previous = null; let previous = null;
const socket = getSocket("/draw/ws"); const socket = initSocket("/draw/ws");
const serializeDraw = ({ from, to }) => `${from.x},${from.y},${to.x},${to.y}`; const serializeDraw = ({ from, to }) => `${from.x},${from.y},${to.x},${to.y}`;
const deserializeDraw = (message) => { const deserializeDraw = (message) => {
const parts = message.split(","); const parts = message.split(",");
@@ -69,10 +69,10 @@
}; };
emitter.on("mouseDraw", render); emitter.on("mouseDraw", render);
emitter.on("netDraw", render); emitter.on("netDraw", render);
socket.addEventListener("message", (event) => { socket.addMessageListener((data) => {
if (event.data === "ping" || event.data.startsWith("pong")) if (data === "ping" || data.startsWith("pong"))
return; return;
emitter.emit("netDraw", deserializeDraw(event.data)); emitter.emit("netDraw", deserializeDraw(data));
}); });
const resizeObserver = new ResizeObserver((entries) => { const resizeObserver = new ResizeObserver((entries) => {
const entry = entries.at(0); const entry = entries.at(0);

8
js/draw.ts
View File

@@ -24,7 +24,7 @@
let drawing = false; let drawing = false;
let previous: DrawPoint | null = null; let previous: DrawPoint | null = null;
const socket = getSocket("/draw/ws"); const socket = initSocket("/draw/ws");
const serializeDraw = ({ from, to }: DrawEvent) => const serializeDraw = ({ from, to }: DrawEvent) =>
`${from.x},${from.y},${to.x},${to.y}`; `${from.x},${from.y},${to.x},${to.y}`;
@@ -104,9 +104,9 @@
emitter.on("mouseDraw", render); emitter.on("mouseDraw", render);
emitter.on("netDraw", render); emitter.on("netDraw", render);
socket.addEventListener("message", (event) => { socket.addMessageListener( (data) => {
if (event.data === "ping" || event.data.startsWith("pong")) return; if (data === "ping" || data.startsWith("pong")) return;
emitter.emit("netDraw", deserializeDraw(event.data)); emitter.emit("netDraw", deserializeDraw(data));
}); });
const resizeObserver = new ResizeObserver((entries) => { const resizeObserver = new ResizeObserver((entries) => {

37
js/ws.js
View File

@@ -1,7 +1,34 @@
"use strict"; "use strict";
const getSocket = (url) => { const sockets = {};
let ws = new WebSocket(url); const isSocketOpen = (url) => {
ws.onclose = () => setTimeout(() => (ws = getSocket(url)), 100); return sockets[url]?._ws?.readyState === WebSocket.OPEN;
ws.onerror = () => ws.close(); };
return ws; const initSocket = (url) => {
if (sockets[url]) {
if (isSocketOpen(url)) {
return sockets[url];
}
else {
sockets[url]._ws.close();
}
}
const ws = new WebSocket(url);
const socket = {
send: (data) => {
sockets[url]._ws.send(data);
},
addMessageListener: (listener) => {
socket._listeners.push(listener);
},
_listeners: sockets[url]?._listeners ?? [],
_ws: ws,
};
ws.onerror = () => ws.close();
ws.onclose = () => initSocket(url);
ws.onmessage = (event) => {
console;
sockets[url]._listeners.forEach((listener) => listener(event.data));
};
sockets[url] = socket;
return sockets[url];
}; };

48
js/ws.ts
View File

@@ -1,8 +1,46 @@
const getSocket = (url: string): WebSocket => { const sockets: Record<string, MySocket> = {};
let ws = new WebSocket(url);
ws.onclose = () => setTimeout(() => (ws = getSocket(url)), 100); type MySocket = {
ws.onerror = () => ws.close(); send: (data: string) => void;
addMessageListener: (listener: (event: string) => void) => void;
_listeners: ((event: string) => void)[];
_ws: WebSocket;
};
return ws; const isSocketOpen = (url: string): boolean => {
return sockets[url]?._ws?.readyState === WebSocket.OPEN;
};
const initSocket = (url: string): MySocket => {
if (sockets[url]) {
if (isSocketOpen(url)) {
return sockets[url];
} else {
sockets[url]._ws.close();
}
}
const ws = new WebSocket(url);
const socket: MySocket = {
send: (data: string) => {
sockets[url]._ws.send(data);
},
addMessageListener: (listener: (event: string) => void) => {
socket._listeners.push(listener);
},
_listeners: sockets[url]?._listeners ?? [],
_ws: ws,
}; };
ws.onerror = () => ws.close();
ws.onclose = () => initSocket(url);
ws.onmessage = (event) => {
console
sockets[url]._listeners.forEach((listener) => listener(event.data));
};
sockets[url] = socket;
return sockets[url];
};