const Controls = {
    guessBuild: () => {
        const container = document.getElementById('controls-guesses');
        container.querySelectorAll('.controls-guess').forEach(el => el.parentNode.removeChild(el));

        for (let i = 1; i <= 30; i++) {
            const guess = document.createElement('div');
            guess.className = 'controls-guess';
            guess.innerHTML = i;
            guess.setAttribute('data-value', i);
            guess.addEventListener('click', Controls.guessClick)
            container.appendChild(guess);
        }
    },

    guessClick: (evt) => {
        alert(evt.currentTarget.dataset.value)
    },

    playerAdd: () => {
        const rawInput = prompt("What is your name?");
        connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
    },

    playerRemove: (rawInput) => {
        connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
    },

    playersUpdate: (names) => {
        const container = document.getElementById('controls-players');
        console.log(names)
        
        Object.keys(names).forEach(connectionId => {
            const id = `player-${connectionId}`;

            if (document.getElementById(id)) {
                return;
            }

            const n = document.createElement('div');
            n.id = id;
            n.innerHTML = names[connectionId];
            n.className = 'controls-player';
            container.appendChild(n)
        });

        // container.querySelectorAll('.controls-player').forEach(el => {
        //     if (!names[el.id]) {
        //         container.removeChild(el);
        //     }
        // })
    },
};