Responsive Tic-tac-toe made with React

Community feedback

• 

  P

  Kim Fransson•320

  @kim-fransson

  Posted about 2 months ago

  Hi!

  Nice work on completing the challenge! For tic tac toe I actually think its easier to "calculate" a winner by hard coding the "winning combinations" and then check if all values are the same for a "line".

  export function calculateWinner(squares: Squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
  
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
  
    return null;
  }
  

  Then the game is over when we have a winner or if there are not more turns.

  export function calculateTurnsLeft(squares: Squares) {
    return squares.filter((square) => !square).length;
  }
  

  Making the code a bit simpler and easier to understand, and reason with.

  But for a more complex game like four in a row, hard coding the winning lines will probably not suffice :D

  12

  Marked as helpful
• 

  Tsotne Meladze•1,120

  @tsotneforester

  Posted about 1 month ago

  generally favourable work! 👍

  00