Cedar - Kit/Laurel#59
Conversation
alope107
left a comment
alope107
left a comment
There was a problem hiding this comment.
Nice job! You've got some great logic here. There are some bugs that can arise after the game has been won, but the overall functionality is good! This is a nice showcase of your knowledge of React!
| const [squares, setSquares] = useState(generateSquares()); | ||
| const[winner, setWinner] = useState(null); | ||
| const [currentPlayer, setCurrentPlayer] = useState(PLAYER_1); |
| let i = 0; | ||
| while (i < 3) { |
There was a problem hiding this comment.
Consider using a for loop here instead.
| let newBoard = squares.map((square)=>{ | ||
| for (let property of square){ | ||
| if (property.id === id && property.value === ''){ | ||
| if (currentPlayer === PLAYER_1){ | ||
| property.value = PLAYER_1; | ||
|
|
||
| } else if (currentPlayer === PLAYER_2){ | ||
| property.value = PLAYER_2; | ||
| } | ||
| } | ||
| } | ||
| return square; | ||
| }); |
| header = <h2>Winner is {winner}</h2>; | ||
| } else { | ||
| header = <h2>The Current Player is {currentPlayer}</h2>; | ||
| boardCallback = onClickCallback; |
There was a problem hiding this comment.
Because this callback is only set if there's not a winner weird bugs can arise. For example, if someone wins the game, and then a square is clicked again, your whole React app will crash (not even the reset button will work anymore). Consider ways you can resolve this by always passing a callback but having it do different things if the game is won or not.
| <h1>React Tic Tac Toe</h1> | ||
| <h2>The winner is ... -- Fill in for wave 3 </h2> | ||
| <button>Reset Game</button> | ||
| {header} |
| <Square value={square.value} | ||
| id={square.id} | ||
| onClickCallback={onClickCallback} | ||
| key={square.id} |
|
|
||
| } | ||
|
|
||
| const singleSquares = [].concat(...squares); |
There was a problem hiding this comment.
This can be done slightly simpler with const singleSquares = [...squares];
| // Component to alert a parent | ||
| // component when it's clicked on. | ||
|
|
||
| const hardestButtonToButton = () => { |
3 participants
tic-tac-toe submission