Pine: Kayla H. & Mac P. #58
Conversation
… to all squares and not just the first column
… to all squares and not just the first column
…e is an empty string
There was a problem hiding this comment.
Nice job! State is managed well and callbacks are nicely passed through components. One small thing is that the game allows you to keep on playing even once someone has won and the winner can possibly change. You don't need to implement it, but you might consider what changes your code would need to prevent this. Great work and great display of your knowledge of React!
| const boardCopy = squares.map((row) => { | ||
| row.forEach((column) => { | ||
| if (column.id === id) { | ||
| if (column.value === '') { | ||
| if (player === PLAYER_1) { | ||
| column.value = PLAYER_1; | ||
| } else { | ||
| column.value = PLAYER_2; | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| return row; |
| setSquares(boardCopy); | ||
| if (player === PLAYER_1) { | ||
| setPlayer(PLAYER_2); | ||
| } else { | ||
| setPlayer(PLAYER_1); | ||
| } |
| if ( | ||
| squares[r][c + 2].value === squares[r + 1][c + 1].value && | ||
| squares[r + 1][c + 1].value === squares[r + 2][c].value && | ||
| squares[r][c].value != '' |
There was a problem hiding this comment.
Make sure to use strict inequality !== instead of normal inequality !=.
| // all three squares have the same value. | ||
| let r = 0; | ||
| let c = 0; | ||
| let winner = '...'; |
There was a problem hiding this comment.
Consider having this be a top-level const like PLAYER_1 or PLAYER_2.
| setWinner(winner); | ||
| return winner; |
There was a problem hiding this comment.
Unclear why some winning lines return the winner and others do not.
| </header> | ||
| <main> | ||
| <Board squares={squares} /> | ||
| <Board squares={squares} onClickCallback={onSquareClickCallback} /> |
| } | ||
|
|
||
| checkForWinner(); | ||
| }; | ||
|
|
||
| const checkForWinner = () => { |
There was a problem hiding this comment.
Consider additional logic that prevents the game from continuing once someone has won.
|
|
||
| } | ||
| console.log('genereate square components func', squares); | ||
| const squareComponents = [].concat(...squares); |
There was a problem hiding this comment.
One slightly simpler way to do this is const squareComponents = [...squares];
| <Square | ||
| value={square.value} | ||
| id={square.id} | ||
| onClickCallback={onClickCallback} |
There was a problem hiding this comment.
Nice job continuing to pass state down.
| value={square.value} | ||
| id={square.id} | ||
| onClickCallback={onClickCallback} | ||
| key={square.id} |
No description provided.