function updatePlayerDom() {
    let list = document.querySelector("#playerList");
    list.replaceChildren();

    for (let playerId of Object.keys(players).sort()) {
        let player = players[playerId];

        let statusSpan = document.createElement("div");
        statusSpan.classList.add("status-span");
        if (gameState === WAITING) {
            if (player.ready) {
                statusSpan.textContent = "R";
                statusSpan.classList.add("ready");
            } else {
                statusSpan.textContent = "N";
                statusSpan.classList.add("not-ready");
            }
        } else {
            if (player.isPlaying) {
                statusSpan.textContent = "P";
            }
        }

        let idSpan = document.createElement("span");
        if (playerId === ID) {
            idSpan.textContent = `${playerId} (you)`;
        } else {
            idSpan.textContent = playerId;
        }

        let newDom = document.createElement("li");
        newDom.appendChild(statusSpan);
        newDom.appendChild(idSpan);
        list.appendChild(newDom);
    }
}

document.addEventListener("DOMContentLoaded", () => {
    document.querySelector("#ready-button").addEventListener("click", async (ev) => {
        let nowReady = ev.target.textContent === "Not ready";
        us.ready = nowReady;

        ev.target.classList.toggle("active");
        ev.target.textContent = nowReady ? "Ready" : "Not ready";

        socket.emit("message", Packet.createSetReady(nowReady));

        updatePlayerDom();

        if (allPlayersReady()) {
            await startPregame();
        }
    });
});