Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Mistake]: In React Tic Tac Toe game tutorial #6966

Closed
TanmayKumar-EngStud opened this issue Jun 18, 2024 · 3 comments · May be fixed by #7111
Closed

[Mistake]: In React Tic Tac Toe game tutorial #6966

TanmayKumar-EngStud opened this issue Jun 18, 2024 · 3 comments · May be fixed by #7111
Labels
type: typos

Comments

@TanmayKumar-EngStud
Copy link

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
Copy link

nabilridhwan commented Jun 22, 2024 •
edited
Loading

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 added a commit to AkashJana18/react.dev that referenced this issue Aug 17, 2024
@AkashJana18
Fixed issue reactjs#6966 by adding draw condition
9576bc5
@AkashJana18 AkashJana18 mentioned this issue Aug 17, 2024
Open
@AkashJana18
Copy link

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: typos
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix/#6966 by adding draw condition AkashJana18/react.dev
3 participants
@nabilridhwan @TanmayKumar-EngStud @AkashJana18