JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

HTML

tic tac toe
<div id="gameboard">
    
</div>

CSS

ol {
    background: #eee;
    width:153px;
    padding:0;
    border-right:1px solid #000;
    height:51px;
    margin:0px;
}
ol:first-child {
    border-top:1px solid #000;
}
ol li {
    display: inline-block;
    float: left;
    background: #eee;
    height: 50px;
    width: 50px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    cursor:pointer;
}

ol li.playerTurn {
     background:blue;   
}

ol li.computerTurn {
    background:yellow;
}

JavaScript

$.fn.tictactoe = function tictactoe(){
    //tic-tac-toe game written as a jQuery plugin
    //derek anderson @ cox media group 2014
    //
    //pc plays first open spot 1-1 or 0-0
    //first player is rand
    //pc blocks player on diags/rows/cols
    //
    var canPlayerClick = false;
    var props = {
        $domBoard: $(this),
        board:[
            [0,0,0],
            [0,0,0],
            [0,0,0],
        ],
        turns: {
            "0":"empty",
            "1":"playerTurn",
            "2":"computerTurn"
        },
        currentTurn: -1,
    };
    function clearBoard() {
        //no need to remove events below this
        props.$domBoard.html(""); 
    };
    function renderBoard() {
    //renders props.board into an array of 3 ordered lists for each row
        var out = $.map(props.board, function(oRow, iRow){
            var out = $.map(oRow, function(oColumn, iColumn){
                return $("<li/>", {
                            "class": props.turns[oColumn],
                            "data-column": iColumn,
                    });           
            });
            return $("<ol/>", {
                "data-row" : iRow,
            }).append(out);
        });
        return out;
    };
    function isSquareAvailable($square){
        //checks the prop board to see if spot was claimed
        var row = $square.parent().attr("data-row");
        var column = $square.attr("data-column")
        return (props.board[row][column] == 0)
    };
    function playerBoardSelection(e){
        if(canPlayerClick){
                //if the player is allowed to click, then they can do this
                var $square = $(e.target);
                var row = $square.parent().attr("data-row");
                var column = $square.attr("data-column")
                if(isSquareAvailable($square)){
                    //set the board to the current players turn number
                    props.board[row][column] = props.currentTurn;
            ...