JSFiddle - React, Tailwind, and code Playground

by johnkpaul

HTML

<div class="game">
  <table class="board" border="1" cellpadding="10">
    <tr class="row1">
      <td></td>
      <td></td>
      <td></td>      
    </tr>
    <tr class="row2">
      <td></td>
      <td></td>
      <td></td>      
    </tr>
    <tr class="row3">
      <td></td>
      <td></td>
      <td></td>      
    </tr>
  </table>
  
  <h2 id="turnInfo">
    It's <span id="currentPlayer"></span>'s Turn
  </h2>
  
  <button>Reset Game</button>
</div>

CSS

td:empty{cursor:pointer;}

JavaScript

var gameState = {
  currentPlayer: 'X',
  winner: undefined,
  board: {
    row1:[undefined, undefined, undefined],
    row2:[undefined, undefined, undefined],
    row3:[undefined, undefined, undefined]
  }
};


redrawGame();

$('table.board').on('click', 'td', function(event){
	var $cell = $(event.target);
  var row = $cell.parent().index();
  var column = $cell.index();
  //update with the selection of the human player
  updateGameState(row, column);
  
  
  if(!gameState.winner){
    // returns list of {row:num, column:num}
    var possibleMoves = getPossibleMovesForAI();

    //randomly select from possible moves
    var randomMove = possibleMoves[getRandomInt(0, possibleMoves.length - 1)];
    updateGameState(randomMove.row, randomMove.column);
  }
  
  redrawGame();
	
});

$('button').on('click', function(event){
  alert('resetting game');
	resetGame();
});

function getPossibleMovesForAI(){
  //TODO: DRY forEach code
  var board = gameState.board;
  var possibleMoves = [];
  board.row1.forEach(function(element, index){
    if(element == undefined){
      possibleMoves.push({row: 0, column: index});
    }
  });
  
  board.row2.forEach(function(element, index){
    if(element == undefined){
      possibleMoves.push({row: 1, column: index});
    }
  });
  
  board.row3.forEach(function(element, index){
    if(element == undefined){
      possibleMoves.push({row: 2, column: index});
    }
  });
  
  return possibleMoves;
}

function updateGameState(row, column){
	var board = gameState.board;
  
  //if the cell is already selected, don't do anything
  //if game has already been won, don't do anything
  if(board['row'+(row+1)][column] || gameState.winner){
    return;
  }
  
  board['row'+(row+1)][column] = gameState.currentPlayer;
  gameState.currentPlayer = gameState.currentPlayer === 'X' ? 'O' : 'X';
  checkForWin();
}

function redrawGame(){
  var board = gameState.board;
  var $cells = $('table.board td');
  var i = 0;
  for(var row in board){
    for (var...