This game will be for two users, playing on one device, taking turns. You will have to use component state to keep track of whose turn it is and which squares have been marked by each player.
This project will challenge your knowledge of React but should also be an exercise in creating good user experiences. Your view should be styled to look good as well as function flawlessly.
- As a user, I should start off seeing a 3x3 grid on the main page.
- As a user, I should be able to click on a square to mark it.
- As a user, my partner should be able to click on a square after me and see their mark.
- As a user, I shouldn't be able to click on a square that has already been selected.
- As a user, when someone has won the game (3 squares in a row: horizontally, vertically, or diagonally) I should see a notice telling me who won.
- As a user, I should not be able to continue playing the game after the game has been won.
- As a user, if there are no more squares available, I should see a notice telling me that the game has ended.
- As a user, I should see a restart button that when clicked will clear the gameboard.
- As a user, I can see a notification that informs me whether it is currently player one's or player two's turn.
- As a user, I can choose my marker (X, O, a color, an emoji, etc...).