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 {
max-width: 800px;
margin: 100px auto;
margin: 0 auto;
border: #4a7c59 1px dotted;
border-radius: 4px;
}
.boxes input{
margin: 0;

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);
})();

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);
})();

8
js/draw.js
View File

@@ -7,7 +7,7 @@
const emitter = mitt();
let drawing = false;
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 deserializeDraw = (message) => {
const parts = message.split(",");
@@ -69,10 +69,10 @@
};
emitter.on("mouseDraw", render);
emitter.on("netDraw", render);
socket.addEventListener("message", (event) => {
if (event.data === "ping" || event.data.startsWith("pong"))
socket.addMessageListener((data) => {
if (data === "ping" || data.startsWith("pong"))
return;
emitter.emit("netDraw", deserializeDraw(event.data));
emitter.emit("netDraw", deserializeDraw(data));
});
const resizeObserver = new ResizeObserver((entries) => {
const entry = entries.at(0);

8
js/draw.ts
View File

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

37
js/ws.js
View File

@@ -1,7 +1,34 @@
"use strict";
const getSocket = (url) => {
let ws = new WebSocket(url);
ws.onclose = () => setTimeout(() => (ws = getSocket(url)), 100);
ws.onerror = () => ws.close();
return ws;
const sockets = {};
const isSocketOpen = (url) => {
return sockets[url]?._ws?.readyState === WebSocket.OPEN;
};
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];
};

50
js/ws.ts
View File

@@ -1,8 +1,46 @@
const getSocket = (url: string): WebSocket => {
let ws = new WebSocket(url);
const sockets: Record<string, MySocket> = {};
ws.onclose = () => setTimeout(() => (ws = getSocket(url)), 100);
ws.onerror = () => ws.close();
type MySocket = {
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];
};