[Mistake]: In React Tic Tac Toe game tutorial

[TanmayKumar-EngStud]

trafficstars

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?

[AkashJana18]

Hi @TanmayKumar-EngStud @henrik , I wanted to follow up on this pull request and see if there's anything else you need from me or any additional changes you'd like to see. Please let me know if you have any feedback or if there's a timeline for review. Thanks for your time and consideration!

[TanmayKumar-EngStud]

Thanks @AkashJana18 , only the draw part for that game example was missing in the documentation which i wanted to highlight. we can close this issue