[Mistake]: In React Tic Tac Toe game tutorial

[TanmayKumar-EngStud]

Summary

In the given game tutorial, the draw condition is not covered up. So once all tiles are filled, then it shows the turn of 'O' to play. It doesn't over the game.

Page

https://react.dev/learn/tutorial-tic-tac-toe

Details

This can by quickly fixed, by adding a count variable in calculateWinner function.

function calculateWinner(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],
  ];
  let count =0;
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if(squares[i]){
      count++;
    }
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  if (count === squares.length){
    return 'No one won'
  }
  return null;
}

[nabilridhwan]

Hypothetically if someone were to work on this, does this mean we have to change majority of the page 1st being the "What are you building?" section and anything after "Declaring a Winner" section? – since calculateWinner function is declared here and after.

There's multiple ways approach to this; Another approach is adding a section specifically for said issue and how to rectify it. Aptly named: "Edge case: there's no winner"

What do you people think?