For this cumulative lab, you will simply build a Tic-Tac-Toe game using React components and Vite. To get started, make your own repo using npm create vite and when you are done, submit the link to your repo.
Here are your requirements:
- Your Tic-Tac-Toe game should be designed as a two-player game. In other words, you are not responsible for creating a CPU or an AI to play against user. Your game should simply alternate between 'X's and 'O's upon clicks, allowing two players to sit next to each other and play on one computer.
- There is a form on top of the screen that allows the players to enter their names, the defaults are "Player 1" and "Player 2."
- Your game should clearly identify a winner or indicate when a "draw" has occurred.
- Once there is a winner, neither player can place anymore X's and O's on the board.
- Your game should have the ability to "restart" without refreshing the page by clearing the board.
- Do not work on styling until you have a fully-functioning Tic-Tac-Toe game
Your submission will be scored against the following criteria:
- Game Play:
- Is your game intuitive to play?
- Does your game produce a winner and/or draw state in line with the rules of tic-tac-toe?
- User Interface/Experience:
- Is your game board visually appealing?
- Does your game respond predictably to user input?
- Code Quality:
- You must not put all your logic into a single file
- Think about what components you need
- What data do you need to store as state?
- Does the form need controlled inputs or not?
- How can you automatically generate the 9 board spaces?
Once you have satisfied the requirements above, consider implementing the following feature requests as an added challenge! 💪🏽
- Add CSS style to your game
- Add a scoreboard
- Implement a single-player mode by adding a Computer player. Your computer player can be "dumb" and just place 'O's in a random available space.
- Build an AI that competes intelligently. 😳
Check out the React.Dev tutorial