Skip to content

Latest commit

 

History

History
86 lines (58 loc) · 4.02 KB

tic-tac-toe.md

File metadata and controls

86 lines (58 loc) · 4.02 KB

Tic Tac Toe Challenge

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 game play
  • 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

Process

  • One person on the team accepts the group assignment from GitHub classroom
  • Create a team name
  • Add additional team members via 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 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 of all 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. It can be helpful to define the logic by writing it out in regular English words.

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 there are no more squares 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 well written README file with instructions on how to access 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.

Back to Syllabus