Skip to content

Instantly share code, notes, and snippets.

@janephilipps

janephilipps/readme.md

Last active February 25, 2018 21:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save janephilipps/b1ef34c69ca9c3104f14b74691c7e633 to your computer and use it in GitHub Desktop.
Save janephilipps/b1ef34c69ca9c3104f14b74691c7e633 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

Tic Tac Toe

By Jane Philipps

janephilipps.github.io

Instructions

  1. Navigate to repo
  2. Clone locally using git clone git@github.com:janephilipps/tic-tac-toe.git
  3. Install dependencies using npm install
  4. Run tests using npm test
  5. Start your server using npm start
  6. Navigate to app in browser
  7. Enjoy!

Discussion

I used the following technologies: HTML, CSS, React, Jest, and Enzyme. I used create-react-app to generate the scaffolding for this app.

Requirements

Build a two player tic tac toe app where a game is played by alternating clicks until the game is won by X, O or is a tie.

I added a message that displays which player’s turn it is based on the number of turns taken. The message also displays whether a player has won or if there is a tie.

Include a reset button so that when a game ends, the board can be cleared and a new game can begin.

The reset button calls a method _resetBoard() which calls another method _getInitialState() to reset the board.

Bonuses!

Make the board fully responsive

I used the vmin unit of measure to make the width, height, and border of the squares fully responsive.

Allow for more than 1 game to be played simultaneously

I have a state within the App that keeps track of the number of boards. Because each board also has its own state, gameplay across multiple boards can happen simultaneously without interference.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment