Javascript Homework #8 JS

tic-tac-toe.js

const startGame = () => {
  let team = 'X';
  const board = [
    ['-', '-', '-'],
    ['-', '-', '-'],
    ['-', '-', '-'],
  ];
  const updateBoard = (id) => {
    switch (id) {
      case 'tl':
        board[0][0] = team;
        break;
      case 'tc':
        board[0][1] = team;
        break;
      case 'tr':
        board[0][2] = team;
        break;
      case 'ml':
        board[1][0] = team;
        break;
      case 'mc':
        board[1][1] = team;
        break;
      case 'mr':
        board[1][2] = team;
        break;
      case 'bl':
        board[2][0] = team;
        break;
      case 'bc':
        board[2][1] = team;
        break;
      case 'br':
        board[2][2] = team;
        break;
    }
    const teams = ['X', 'O'];
    for (let t of teams) {
      if (
        (board[0][0] === t && board[0][1] === t && board[0][2] === t) ||
        (board[1][0] === t && board[1][1] === t && board[1][2] === t) ||
        (board[2][0] === t && board[2][1] === t && board[2][2] === t) ||
        (board[0][0] === t && board[1][0] === t && board[2][0] === t) ||
        (board[0][1] === t && board[1][1] === t && board[2][1] === t) ||
        (board[0][2] === t && board[1][2] === t && board[2][2] === t) ||
        (board[0][0] === t && board[1][1] === t && board[2][2] === t) ||
        (board[0][2] === t && board[1][1] === t && board[2][0] === t)
      ) {
        setTimeout(() => {
          alert(t + ' has won!');
          for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 3; j++) {
              board[i][j] = '-';
            }
          }
          const squares = document.getElementsByClassName('square');
          for (let i = 0; i < squares.length; i++) {
            squares[i].innerHTML = null;
          }
          startGame();
        }, 50);
      } else {
        setTimeout(() => {
          let isFull = true;
          outer:
          for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 3; j++) {
              if (board[i][j] === '-') {
                isFull = false;
                break outer;
              }
            }
          }
          if (isFull) {
            alert('Cats game!');
            for (let i = 0; i < 3; i++) {
              for (let j = 0; j < 3; j++) {
                board[i][j] = '-';
              }
            }
            const squares = document.getElementsByClassName('square');
            for (let i = 0; i < squares.length; i++) {
              squares[i].innerHTML = null;
            }
            startGame();
          }
        }, 50);
      }
    }
    
  }
  const turn = (event) => {
    const cl = team === 'X' ? 'red' : 'black';
    event.target.innerHTML = `<span class="${cl}">${team}</span>`;
    updateBoard(event.target.id);
    team = team === 'X' ? 'O' : 'X';
    event.target.removeEventListener('click', turn);
  }
  const squares = document.getElementsByClassName('square');
  for (let i = 0; i < squares.length; i++) {
    squares[i].addEventListener('click', turn);
  }
}

window.addEventListener('load', startGame);