const Controls = function(connection) {
    this.connection = connection;
    console.log(this.connection)
}

    // guessBuild: = function() {
    //     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)
    // },

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

Controls.prototype.playerRemove = function(rawInput) {
    this.connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
};

Controls.prototype.playersUpdate = function(names) {
    const container = document.getElementById('controls-players');
    const keys = Object.keys(names);

    if (keys.length > 0) {
        const nobody = document.getElementById('controls-players-nobody');
        nobody.parentNode.removeChild(nobody);
    }
    
    keys.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);
    //     }
    // })
};