tic tac toe

by Alexandru Gatea

HTML

<h1>Tic Tac Toe</h1>
<table id="gameBoard">
  <tr>
    <td id="0" class="cell empty" data-row="0" data-col="0"></td>
    <td id="1" class="cell empty" data-row="0" data-col="1"></td>
    <td id="2" class="cell empty" data-row="0" data-col="2"></td>
  </tr>
  <tr>
    <td id="3" class="cell empty" data-row="1" data-col="0"></td>
    <td id="4" class="cell empty" data-row="1" data-col="1"></td>
    <td id="5" class="cell empty" data-row="1" data-col="2"></td>
  </tr>
  <tr>
    <td id="6" class="cell empty" data-row="2" data-col="0"></td>
    <td id="7" class="cell empty" data-row="2" data-col="1"></td>
    <td id="8" class="cell empty" data-row="2" data-col="2"></td>
  </tr>
</table>
<div id="msg"></div>
<center><button class="restart">Restart</button></center>

SCSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
#gameBoard {
  border-collapse:collapse;
  width: 150px;
  margin: 50px auto 10px;
  table-layout:fixed;
  .cell {
    width:50px;
    height: 50px;
    border:1px solid black;
		vertical-align:middle;
		text-align:center;
		font-weight:bold;
		font-size:25px;
		font-family:sans-serif;
    cursor:pointer;
    font-family: 'Montserrat', sans-serif;
    &:hover {
      background: #d4d4d4;
    }
    &.red {
      background: #d32f2f;
      color: white;
      animation: blink 0.2s 3 ease-in-out;
      
    }
    &.green {
      background: #4CAF50;
      color: white;
      animation: blink 0.2s 3 ease-in-out;
    }
    &.grey {
      background: #ccc;
      color: #555;
      animation: blink 0.2s 3 ease-in-out;
      border-color: #fff;
    }
  }
  [value] {
    cursor: not-allowed;
  }
  tr:first-child td {
    border-top:none;
  }
  tr:last-child td {
    border-bottom:none;
  }
	tr td:first-child {
		border-left:none;	
	}
	tr td:last-child {
		border-right:none;	
	}
  &.ended {
    pointer-events: none;
    cursor: none;
    td {
      user-select: none;
    }
  }
}

h1 {
  text-align:center;
  background: #ffaa33;
  padding: 10px ;
  font-weight: bold;
  font-size: 20px;
}

.restart {
  border: 1px solid #ffaa33;
  background: transparent;
  width:100px;
  line-height:25px;
  cursor:pointer;
  font-weight:bold;
  font-size: 12px;
  letter-spacing: 1px;
  border-radius: 25px;
  padding: 0;
  outline: none;
  transition: background 0.3s ease-in-out;
   font-family: courier;
   font-weight: bold;
  &:hover {
    background: #ffaa33
  }
  &:focus, &:active {
    background: #ff7733;
  }
}

#msg {
  width:100%;
  font-size:14px;
  text-align:center;
  color: red;
  height: 20px;
  font-weight:bold;
  font-family: courier;
}

@keyframes blink {
  0% {opacity:0;}
  100% {opacity:1}
}

JavaScript

//Set player and AI characters
const hooman = "x";
const ai = "o";
var game = $('#gameBoard');
var board = [
  [0, 0, 0],
  [0, 0, 0],
  [0, 0, 0]
]

//set cells
var cell = $('#gameBoard .cell');

jQuery(document).ready(function() {
  // add player character on click then fill next empty with AI character
  $('#gameBoard .cell').on('click', function() {
    // to check empty cell we add a value attribute. Empty cells do not have value attr.
    if (!$(this).attr('value')) {
      //fill clicked cell with X
      $(this).text(hooman).attr('value', '1');
      var row = $(this).attr('data-row');
      var col = $(this).attr('data-col');
      board[row][col] = 1;
      // empty msg area, if any
      $('#msg').text('');
      if (checkWin()) {
        //call AI turn function
        aiTurn();
      }
    } else {
      //if cell is not empty, as it has value attr. show err msg
      $('#msg').text('Wrong move. Pick another cell!');
      //pe care il scot dupa cateva secunde
      setTimeout(function() {
        $('#msg').text('');
      }, 3000);
    }
  });

  $('.restart').on('click', function() {
    restart();
  });
});

//restart game
function restart() {
  cell.text('').removeAttr('value');
  $('#msg').text('');
  game.removeClass('ended');
  $('td').removeClass('red green grey');
  board = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
  ]
}

function aiTurn() {
  //select random empty cell
  var random;
  do {
    random = Math.floor(Math.random() * ($('#gameBoard td').length-1));
  } while ($("#" + random).text() != "");
  //check if selected cell has val

  $("#" + random).text(ai).attr('value', '-1');
  var row = $("#" + random).attr('data-row');
  var col = $("#" + random).attr('data-col');
  board[row][col] = -1;
  checkWin();
  //exit from each function, if a cell without val attr has been found
  return false;


}

function checkWin() {
  var rowSum = [0, 0, 0];
  var colSum = [0, 0, 0];
  var diagSum = [0, 0];
  var draw = 1;

  for (var i = 0; i <=...