JSFiddle - React, Tailwind, and code Playground

by fableal

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script src='script.js'></script>
        <title></title>
    </head>
    <body>
        <h1>
            Challenge the nearer jQuery wiz!
        </h1>
        <h2>
            No multiplayer, sorry...
        </h2>
        <div class='scoreboard row'>
            <div id='player0' class='player'></div><div id='score0' class='score'></div>-<div id='score1' class='score'></div><div id='player1' class='player'></div>
        </div>
        <button id='new'>New Game</button>
        <button id='reset'>Reset Score</button>
        <div id='board'>            
            <div class='row'><div id='cell00' class='cell oddcell'></div><div id='cell01' class='cell evencell'></div><div id='cell02' class='cell oddcell'></div></div>
            <div class='row'><div id='cell10' class='cell evencell'></div><div id='cell11' class='cell oddcell'></div><div id='cell12' class='cell evencell'></div></div>
            <div class='row'><div id='cell20' class='cell oddcell'></div><div id='cell21' class='cell evencell'></div><div id='cell22' class='cell oddcell'></div></div>
        </div>
    </body>
</html>

CSS

div .row {
    float: left;
}

div .played {
    text-align:center;
    font-size:85px;
    font-family:"Arial";
    
}

div .cell {
    width:100px;
    height:100px;
}

div .oddcell {
    background-color:#FFCCCC;
}

div .evencell {
    background-color:#66CCFF;
}

JavaScript

$(document).ready(function() {
    // Store board's original html
    var originalHtml = $('#board').html();
    
    var isSameAndNotNull = function(arr) {
        for(var i = 1; i < arr.length; ++i)
        {            
            if(arr[i - 1] === null || arr[i] !== arr[i - 1]) {
                return false;
            }
        }
        return true;
    };
    
    // The Game
    var tictactoe = (function(){
        var playerOne, free_cells, board;
                
        var _newGame = function(){
            playerOne = true;
            ended = false;
            free_cells = 9;
            board = [
                [null, null, null], 
                [null, null, null], 
                [null, null, null]];
                
            var players = Array.prototype.slice.call(arguments);
            if(players[0])
            {
                $('#player0').text(players[0].name);
                $('#score0').text(players[0].score);
            }
            if(players[1])
            {
                $('#player1').text(players[1].name);
                $('#score1').text(players[1].score);
            }
            
            
            $('#board').html(originalHtml);
            $('.cell').click(function(){
                // Remove click
                $(this).unbind('click');
                
                var id = $(this).attr('id');
                var colIndex = parseInt(id.substr(5, 1));
                var rowIndex = parseInt(id.substr(4, 1));                
                board[rowIndex][colIndex] = playerOne?"X":"O";
                
                // Show play
                $(this).html(playerOne ? "<div class='played'>X</div>" : "<div class='played'>O</div>");
                
                // Move on ...
                --free_cells;                
                playerOne = !playerOne;
                
                var winner = null;
                
                if(free_cells <= 4) {
                    
     ...