const ws = new WebSocket("ws://" + location.hostname + ":3000");

ws.addEventListener("message", (event) => {
    const { type, key } = JSON.parse(event.data);
    if (!key) return;

    const el = document.getElementById(key);
    if (!el) return;

    if (type === "keydown") {
        el.classList.add("active");
    } else if (type === "keyup") {
        el.classList.remove("active");
    }
});

ws.addEventListener("open", () => {
    fetch("/keymap.json")
        .then(r => r.json())
        .then(keymap => {
            const mapped = new Set(Object.values(keymap).map(k => k.toUpperCase()));
            document.querySelectorAll(".key").forEach(el => {
                if (!mapped.has(el.id)) {
                    el.style.visibility = "hidden";
                }
            });
        });
});