81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
type CheckboxEl = HTMLInputElement & { checked: boolean; id: string };
|
|
type Box = {
|
|
id: number;
|
|
value: boolean;
|
|
};
|
|
|
|
(() => {
|
|
const socket = getSocket("/boxes/ws");
|
|
|
|
const deserializeBox = (msg: string): Box => {
|
|
msg = msg.replaceAll("b:", "");
|
|
const parts = msg.split(":");
|
|
|
|
return {
|
|
id: Number(parts[0]),
|
|
value: parts[1] === "+",
|
|
};
|
|
};
|
|
|
|
const handleInstruction = (instruction: string) => {
|
|
if (instruction.startsWith("b:")) {
|
|
const items = instruction.split(";");
|
|
items.forEach((i) => {
|
|
const box = deserializeBox(i);
|
|
|
|
const el = document.getElementById("box-" + box.id) as CheckboxEl;
|
|
el.checked = box.value;
|
|
// console.log(i,box,el)
|
|
});
|
|
return;
|
|
}
|
|
};
|
|
|
|
socket.addEventListener("message", (event: MessageEvent<string>) => {
|
|
const instructions = event.data.split("\n");
|
|
instructions.forEach(handleInstruction);
|
|
});
|
|
|
|
document.querySelectorAll(".boxes input").forEach((input) => {
|
|
input.addEventListener("change", (event) => {
|
|
const target = event.target as CheckboxEl;
|
|
|
|
const id = target?.id.split("-")[1];
|
|
const value = target.checked ? "+" : "-";
|
|
socket.send("b:" + id + ":" + value);
|
|
});
|
|
});
|
|
|
|
var autoPlayTimer: number | undefined = undefined;
|
|
const handleAutoPlay = (el: CheckboxEl) => {
|
|
if (el.checked) {
|
|
autoPlayTimer = setInterval(() => {
|
|
socket.send("random");
|
|
}, 50);
|
|
} else {
|
|
clearInterval(autoPlayTimer);
|
|
}
|
|
};
|
|
|
|
const autoPlayEl = document.querySelector("#auto-boxes") as CheckboxEl;
|
|
handleAutoPlay(autoPlayEl);
|
|
autoPlayEl?.addEventListener("change", (e) =>
|
|
handleAutoPlay(e.target as CheckboxEl)
|
|
);
|
|
|
|
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));
|
|
})();
|