CrazyTim / tic-tac-toe

Learning React while adding fun features

Tic Tac Toe

Learning React. View the live build.

Features

I completed the React tutorial, and then added the following features:

• Its a web app (so go install it on your phone 🤷‍♂️).
• You can switch between several themes 😎.
• The board is automatically reset once the game is over.
• The winning squares are highlighted green when the game is over.
• A message is shown when the game is tied.
• A new win algorithm that allows for a dynamic number of rows, columns, and the number of symbols that you need to get in a line to win. Anything other than 3x3 makes the game unfair, but its still fun to see it work! 😄
• Settings are saved to Web Storage.
• Each player's score is shown above the board.
• The multiple undo buttons for each turn have been replaced with a single undo button.
• Components and styles have been separated into their own files.
• The Square component was removed (unnecessary, replaced with a styled Button).

Getting Started

Install Node.js, clone this repo, then run:

npm install
npm start

Deploy to GitHub Pages

The first time you will need to generate a personal access token and then run:

git remote set-url origin https://crazytim:<token>@github.com/crazytim/tic-tac-toe

To deploy:

npm run deploy

Refer here for information about deploying a Create React App to GitHub Pages.

Acknowledgements

• Some icons adapted from Octicons, MIT license.