ricochet/client/controls.js

const Controls = function() {
    this.moves = 0;

    document.addEventListener('move-increment', this.onMoveIncrement.bind(this));

    document.getElementById('controls-moves-reset').addEventListener('click', this.onMoveReset.bind(this));
    document.getElementById('controls-next-round').addEventListener('click', this.onStartNextGame.bind(this));
    document.getElementById('controls-regenerate-walls').addEventListener('click', this.onRegenWalls.bind(this));
    document.getElementById('controls-reposition-robots').addEventListener('click', this.onRepositionRobots.bind(this));
    // document.getElementById('controls-timer-skip').addEventListener('click', this.onSkipTimer.bind(this));
}

    // 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 names = ["Biff", "Morty", "Herb", "Chester", "Lyle", "Cap", "Dale", "Ned", "Mindy"]
    const r = Math.floor(Math.random() * names.length);

    const rawInput = names[r] //prompt("What is your name?");

    const evt = new CustomEvent('playerAdd', { detail: rawInput });
    document.dispatchEvent(evt);
};

Controls.prototype.playerRemove = function(rawInput) {
    alert('nope')
};

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);
    //     }
    // })
};

Controls.prototype.onMoveIncrement = function() {
    this.moves++;
    document.getElementById('controls-moves').innerHTML = this.moves;
};

Controls.prototype.onMoveReset = function() {
    this.moves = 0;
    document.getElementById('controls-moves').innerHTML = this.moves;

    const event = new Event('board-reset');
    document.dispatchEvent(event);
};

Controls.prototype.onStartNextGame = function() {
    const evt = new Event('board-reset');
    document.dispatchEvent(evt);
}

Controls.prototype.onRegenWalls = function() {
    const evt = new Event('regenerateWalls');
    document.dispatchEvent(evt);
}

Controls.prototype.onRepositionRobots = function() {
    const evt = new Event('repositionRobots');
    document.dispatchEvent(evt);
}