JSFiddle - React, Tailwind, and code Playground

by Amidi

HTML

<h1>Five in a Row Test</h1>
    
    
        <div id="messages">Searching for an opponent to join you...</div>
        <div class="board">
            
            <button id="a0" onClick="add(0,0);"></button>
            <button id="a1" onClick="add(0,1);"></button>
            <button id="a2" onClick="add(0,2);"></button>
            <button id="a3" onClick="add(0,3);"></button>
            <button id="a4" onClick="add(0,4);"></button>
            <button id="a5" onClick="add(0,5);"></button>
            <button id="a6" onClick="add(0,6);"></button>
            <button id="a7" onClick="add(0,7);"></button>
            <button id="a8" onClick="add(0,8);"></button>
            <button id="a9" onClick="add(0,9);"></button>
            <button id="a10" onClick="add(0,10);"></button>
            <button id="a11" onClick="add(0,11);"></button>
            <button id="a12" onClick="add(0,12);"></button>
        
        
            <button id="b0" onClick="add(1,0);"></button>
            <button id="b1" onClick="add(1,1);"></button>
            <button id="b2" onClick="add(1,2);"></button>
            <button id="b3" onClick="add(1,3);"></button>
            <button id="b4" onClick="add(1,4);"></button>
            <button id="b5" onClick="add(1,5);"></button>
            <button id="b6" onClick="add(1,6);"></button>
            <button id="b7" onClick="add(1,7);"></button>
            <button id="b8" onClick="add(1,8);"></button>
            <button id="b9" onClick="add(1,9);"></button>
            <button id="b10" onClick="add(1,10);"></button>
            <button id="b11" onClick="add(1,11);"></button>
            <button id="b12" onClick="add(1,12);"></button>
        
        
            <button id="c0" onClick="add(2,0);"></button>
            <button id="c1" onClick="add(2,1);"></button>
            <button id="c2" onClick="add(2,2);"></button>
            <button id="c3" onClick="add(2,3);"></button>
            <button id="c4"...

CSS

body {
    text-align: center;
}
.board {
    margin: auto;
    width: 800px;
}
.board button {
    height: 50px;
    width: 50px;
    margin: 0px;
    padding: 0px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 1em;
}

JavaScript

//app.js client-side
var socket = io();



var playerOneTurn = true,
    isGameOver = false,//on gameStart player one's turn
    token; //incoming token from server
    
function add(x,y){
    var coor = {x: x, y: y, token: token};
    socket.emit("getCoor", coor);
    socket.emit("isCaptured", coor);
    
 }
    //hold all the Xs and Os on the board         
    function gameState(){
        var obj = {};
        $('.board button').each(function(){
           obj[$(this).attr('id')] = $(this).text() || ' ';
        });
        return obj;
    }
    //test this, should set isGameOver to true, then we can use that as a conditional
    //to determine if game is over. Winner should be announced an buttons should be disabled.
    socket.on('displayWin', function(result){
       isGameOver = result;
           console.log("isGameOver inside displayWin", result, isGameOver);
       
    });
    
    //if it's not player one's turn, the buttons are disabled until player two takes turn
    function takeTurn(){
        if(!playerOneTurn){
            $('#messages').text('It is now your opponent\'s turn');
            $('.board button').attr('disabled', true);      
        }
        else{
            $('#messages').text('You may now take your turn.');
            $('.board button').removeAttr('disabled');
        }        
    }
    //if it's not player one's turn immediately stop
    //if a spot already contains a token immediately stop
    //otherwise, send the move to server
    function makeAMove(e){
        e.preventDefault();
        if(!playerOneTurn){
            return;
        }
    //check for already checked squares on board
        if ($(this).text().length){
            return;
        }
    //send move to server
        socket.emit('make.move', {token: token, position: $(this).attr('id')});
        }
    
    //event for whenever move is made
    //Update on client side with token, continue taking turns until
    //game is over. If game is over, disabled...