JSFiddle - React, Tailwind, and code Playground

by Lakshay Akula

HTML

<body>
  





</body>

JavaScript

const ticTacToeModule = (function () {

  const gameboardModule = (function () {
    
    const gameboard = [];
    gameboard.push([,,,], [,,,], [,,,]);
    console.log(gameboard);
    
    const getValue = function (row, column) {
    	return gameboard[row][column];
    }
    
    const setValue = function(row, column, value) {
    	gameboard[row][column] = value;
      console.log(gameboard);
    }
    
    const clearBoard = function() {
    	gameboard.forEach(row => row.forEach(space => space = undefined));
      console.log('Start clearing ---');
      console.log(gameboard);
    }
    
    return {getValue, setValue, clearBoard};
  })();
  
/*   const playerFactory = (is_x) => {
    return {is_x};
  }
  
  const playerX = playerFactory(true);
  const playerY = playerFactory(false); */
  
  let isXTurn = true;
  
  const makeMove = function (row, column) {
  	const value = isXTurn ? 'X' : 'O';
    
    // Cannot make a move where there already
    // is a value
    if (gameboardModule.getValue(row, column)) {
    	return
    }
    
  	gameboardModule.setValue(row, column, value);
    isXTurn = !isXTurn;
  }
  
 	const resetGame = function () {
  	gameboardModule.clearBoard();
  }
  
  return {makeMove, resetGame};
})();


ticTacToeModule.makeMove(0,0);