Tic-Tac-Toe

by Malcolm Groves

HTML

<body>
  <div class="container">
  </div>
</body>

SCSS

.container {
  font-size: 60px;
  margin: 50px 0 0 50px;
}

.square {
  width: 100px;
  height: 100px;
  float: left;
  border-right: 1px grey solid; 
  border-bottom: 1px grey solid;
  text-align: center;
  border-width: 2px;
}

.row {
  clear: both;
}

.container {
  clear: both;
  position: relative;
}

.win {
  position: absolute;
  left: 150px;
  top: 150px;
  background-color: red;
  transform: translate(-50%, -50%); 
  padding: 25px;
  text-align: center;
  color: white;
  opacity: 0.8;
}

button {
  margin: auto;
  padding: 10px;
  background-color: white;
  border: none;
}

JavaScript

const game = (() => {
	let grid, turn;
  const $container = $('.container');
  
  
  
  const render = () => {
  	console.log('rendering');
  	$container.children().remove('.row');
    for(let r = 0; r < 3; ++r) {
      let $row = $container.append('<div class="row"></div>').children().last();
      for(let c = 0; c < 3; ++c) {
      	let square = `<div class="square" id="${r}${c}">${grid[r][c]}</div>`;
        let $square = $row.append(square).children().last();
        if(c === 2) $square.css( { 'border-right-width': 0 } );
        if(r === 2) $square.css( { 'border-bottom-width': 0 } );
      }
    }
  };
  
  const switchTurn = () => {
  	if(turn === 'X') {
    	turn = 'O';
    }
    else {
    	turn = 'X';
    }
  };
  
  const checkWin= () => {
  	
  	let leftDiagonalMark = grid[0][0];
  	let leftDiagonalWin = (leftDiagonalMark !== '');
    let rightDiagonalMark = grid[0][2];
    let rightDiagonalWin = (rightDiagonalMark !== '');
    let straightWin = false;
    
  	for(let i = 0; i < 3; ++i) {
      if(grid[i][i] !== leftDiagonalMark) {
      	leftDiagonalWin = false;
      }
      if(grid[i][2 - i] !== rightDiagonalMark) {
      	rightDiagonalWin = false;
      }
      let colMark = grid[0][i];
      let colWin = colMark !== '';
      let rowMark = grid[i][0];
      let rowWin = rowMark !== '';
   
      for(let j = 1; j < 3; ++j) {
      	if(grid[j][i] !== colMark) {
        	console.log(grid[j][i]);
          console.log(colMark);
          console.log('here');
        	colWin = false;
        }
        if(grid[i][j] !== rowMark) {
        	rowWin = false;
        }
      }
      if(colWin || rowWin) {
      	straightWin = true;
      }
    }
    if(leftDiagonalWin || rightDiagonalWin || straightWin) {
    	$container.off();
      let button = '<button>Play Again?</button>';
      $container.append(`<div class="win">${turn} wins${button}</div>`);
     	$('button').on('click', function() {
      	
      	$container.children().remove();
       ...