❌ ⭕️ Tic Tac Toe

Overview

Tic Tac Toe is a classic children's game involving two players alternatively marking squares on a three-by-three grid. While the game play can be considered relatively simple for humans, creating the logic in code is considerably more challenging.

Learning Objectives

• can create a logic component to handle the gameplay
• can pass data and behavior from a parent component to a nested component with props
• can effectively work within a team to achieve a desired outcome

Additional Resources

• Tic Tac Toe
• Render

Process

• One person on the team accepts the group assignment from GitHub classroom
• Create a team name
• Add additional team members via their GitHub handle
• Clone the newly created repository
• cd into the repository
• Run $ yarn to install the React dependencies
• Create a new branch following the naming instructions described below
• Open the repository in a text editor
• Code!

Useful Commands

• $ yarn start
• control + c (stops the server)
• command + t (opens a new terminal tab)

Troubleshooting Tips

• Is your server running?
• Are your components exported?
• Inspect the page and look for errors in the console tab.
• Always look at the first error message in the list.

---

Tic Tac Toe

This is a web game for two players who are taking turns on one device. You will have to use the 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 as well as be an exercise in creating good user experiences.

When creating a project, it is important to think about the organization of your code. It is best practice to separate and compartmentalize all the actions in your code. The square UI will be in its own component. App.js controls all of the data in state, renders the other components, and performs the game logic.

Win Condition

The win condition is one of the most challenging aspects of coding Tic Tac Toe. Take some time with your team to discuss the different possibilities. Defining the logic by writing it out in regular English words can be helpful.

There is an interesting approach to the Tic Tac Toe win condition in React here. However, this code should NOT be used as is. It must be refactored. The tools used in this example are not current best practices in React. It is provided here as inspiration.

---

📚 User Stories

• As a user, I can see a three by three grid game board on the page.
• As a user, I can click on a square to mark it.
• As a user, my partner can click on a square after me and see their mark.
• As a user, I can't click on a square that has already been marked.
• As a user, when either my partner or I win the game (three squares in a row: horizontally, vertically, or diagonally), I can see a notice telling me which player won.
• As a user, I can't play the game after the game has been won.
• As a user, if no more squares are available, I can see a notice telling me that the game has ended.
• As a user, I can click on a restart button that will clear the game board.

🏔 Stretch Goals

• As a user, I can see pleasant stylings on the application.
• As a user, I can see a notification that informs me whether it is currently my partner or my turn.
• As a user, I can choose my marker from a predetermined list (X, O, a color, an emoji, etc...).

👩‍💻 Developer Stretch Goals

• As a developer, I have a well-commented application.
• As a developer, I have a well-written README file with instructions on accessing my repository.
• As a developer, my variables are all named semantically.
• As a developer, I have refactored and efficient code.
• As a developer, I have my application deployed as a live website.

🎙 Project Demos

Each team will give a brief (three minute) presentation of their application. Presenting your project will allow you to practice communication and coding vocabulary. Presentations are not a judgement of your work or ability as each team will have different weaknesses and strengths. Presentations allow other members of the cohort to appreciate a different approach to solving a complex problem.

• Full team: show off your application's user interface (UI)
• First team member: What was the biggest learning moment for your team?
• Second team member: What was the most challenging thing about this project?
• Third team member (if applicable): How did you manage the workflow in a group of three?