ricochet/client/controls.js

//===== Constructor

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

    // this.buildGuesses();
    // this.setUi('connecting');

    document.addEventListener('L-conn-open', this.msgJoin.bind(this));

    // Message handlers: "Local message" and "Global message"
    // document.addEventListener('G-move', this.onMoveIncrement.bind(this));
    // document.addEventListener('G-win', this.onMoveIncrement.bind(this));
    // document.addEventListener('G-start', this.msgStartGame.bind(this));
    // document.addEventListener('G-stop', this.msgStartGame.bind(this));
    // document.addEventListener('G-players', this.msgStartGame.bind(this)); <--- controls.playersUpdate(data.body)
 
    // document.addEventListener('G-walls', this.msgStartGame.bind(this));
    // document.addEventListener('G-robots', this.msgStartGame.bind(this));
    // document.addEventListener('G-guess', this.msgStartGame.bind(this));  <--- controls.onReceiveGuess(data.body);

    // document.addEventListener('L-move', this.onMoveIncrement.bind(this));
    
    // document.addEventListener('L-conn-error', this.onConnectionError.bind(this));
    // document.addEventListener('L-skip-timer', this.msgStartGame.bind(this));
    // document.addEventListener('L-skip-timer', this.msgStartGame.bind(this));

    // Click handlers
    // document.getElementById('controls-moves-reset').addEventListener('click', this.onMoveReset.bind(this));
    // document.getElementById('controls-start-game').addEventListener('click', this.onStartGame.bind(this));
    // document.getElementById('controls-stop-game').addEventListener('click', this.onStopGame.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));
}

//===== UI

Controls.prototype.drawGuesses = 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', this.onClickGuess.bind(this))
        container.appendChild(guess);
    }
};

Controls.prototype.showWaiting = function() {
    document.getElementById('controls-start').parentNode.style.display = '';
    document.getElementById('controls-walls').parentNode.style.display = '';
    document.getElementById('controls-robots').parentNode.style.display = '';

    document.getElementById('controls-stop').parentNode.style.display = 'none';
    // document.getElementById('controls-moves-reset').parentNode.style.display = 'none';
    // document.getElementById('controls-timer-skip').parentNode.style.display = 'none';
    // document.getElementById('controls-guesses').parentNode.style.display = 'none';
};


//===== Message handlers

Controls.prototype.msgJoin = function() {
    this.showWaiting();
};

// 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)
//     });
// console.log(names)
//     this.names = names;

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

// Controls.prototype.onReceiveGuess = function(message) {
//     console.log(this.names[message.id] + ' has a solution')
// }

// Controls.prototype.onClickGuess = function(evt) {
//     const e = new CustomEvent('guess', { detail: { moves: evt.currentTarget.dataset.value } });
//     document.dispatchEvent(e);
// }

// 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.onStartGame = function() {
//     this.setUi('gameStarted');

//     const evt = new Event('startGame');
//     document.dispatchEvent(evt);
// }

// Controls.prototype.onStopGame = function() {
//     this.setUi('gameStopped');

//     const evt = new Event('stopGame');
//     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);
// }

// Controls.prototype.setUi = function(state) {
//     switch(state) {
//         case 'gameStarted':
//             document.getElementById('controls-start-round').parentNode.style.display = 'none';
//             document.getElementById('controls-regenerate-walls').parentNode.style.display = 'none';
//             document.getElementById('controls-reposition-robots').parentNode.style.display = 'none';

//             document.getElementById('controls-stop-round').parentNode.style.display = '';
//             document.getElementById('controls-moves-reset').parentNode.style.display = '';
//             document.getElementById('controls-timer-skip').parentNode.style.display = '';
//             document.getElementById('controls-guesses').parentNode.style.display = '';
//             break;

//         case 'gameStopped':
//             document.getElementById('controls-start-round').parentNode.style.display = '';
//             document.getElementById('controls-regenerate-walls').parentNode.style.display = '';
//             document.getElementById('controls-reposition-robots').parentNode.style.display = '';

//             document.getElementById('controls-stop-round').parentNode.style.display = 'none';
//             document.getElementById('controls-moves-reset').parentNode.style.display = 'none';
//             document.getElementById('controls-timer-skip').parentNode.style.display = 'none';
//             document.getElementById('controls-guesses').parentNode.style.display = 'none';
//             break;
//     }
// }