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

    let newDom = document.createElement("li");
    newDom.textContent = ID + " (you)";
    newDom.style.color = "grey";
    list.appendChild(newDom);

    for (let playerId of Object.keys(players)) {
        if (playerId !== ID) {
            let newDom = document.createElement("li");
            newDom.textContent = playerId;
            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", {
            type: "SYNC",
            author: ID,
            ready: nowReady,
            name: "",
        });

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