sg/public/js/index.js

let socket;
let ourId;
let enemyId;

let startGame = id => socket.emit('startGame', {id})

connect.onchange = () => ({
    true(){
        socket = io() //connect
        socket.on('hi',({id}) => ourId = id) //our id from serverside 
        socket.emit('conn', {nick: nick.value}) //our nick to  serverside

        socket.on('gamers', gamers => nicksDiv.innerHTML =  //show gamers
            gamers.reduce((str, {nick, newGame, id, inGameWith}) => str + 
               `<div style="${inGameWith ? "color:#BBB" : ''}">${nick}
                    ${newGame && ourId !== id && !inGameWith ? 
                        `<button onclick="startGame('${id}')">
                                    Start Game
                                 </button>
                    `: ''}
                </div>`,"")
        )

        socket.on('startGame', ({inGameWith, turn}) => { //when someone else accept our game
            enemyId = inGameWith
            gameDiv.style.display = 'block';
            //time to init board
            send.disabled = true;
        })

        socket.on('turn', data => { //our turn
            send.disabled = false;
            enemyData.innerHTML = data ? data.data : 'your turn';
        })
    },
    false(){
        socket.disconnect()
        nicksDiv.innerHTML = ''
        gameDiv.style.display = 'none';
    }
})[nick.disabled = connect.checked]()

nick.oninput = () => connect.disabled = !nick.value

newGame.onchange = () => socket.emit('newGame', {newGame: newGame.checked})
gameDiv.style.display = 'none';

send.onclick = () => {
    socket.emit('turn', {data: data.value})
    enemyData.innerHTML = 'enemy turn';
    send.disabled = true;
}