seanaujong / react-tic-tac-toe Goto Github PK

Currently the logic in Square is coupled with the idea of "winning". This is not very reusable. Instead, we could let Square take in class modifications from its parent components. The function header might look like:

function Square({ value, onSquareClick, squareClass })

Then we let Board handle what the Square should look like by passing in squareClass.

There are some unintuitive data structures lying around in App.js, particularly history and calculateWinner. These data structures should be documented to not confused readers.

Returning an object would better communicate how calculateWinner is trying to return two things: who the winner is, and what squares the winning line consists of.

return {winner: squares[a], line: lines[i]}

Right now the game is hardcoded to handle a 3x3 game state. The code should be refactored to handle any NxN game state.