The goal of this project was to build a functional attractive game of tic tac toe from the ground up. We were provided a very basic layout to match, but otherwise given free reign in the design of the game. The game needed to be playable, to detect wins and draws, and to keep track of each player's wins so that they persist when the page is refreshed. I chose to implement an extra layer of game structure, so that the users are competing in a tournament. The first player to win three rounds wins the tournament, and then they are presented with a button to reload the page for a new tournament.

August Reid

• Javascript
• HTML
• CSS
• Atom

Instructions and rubric for this project can be found HERE

I really enjoyed this challenge. The process of making a functional data model before connecting it to the DOM was very helpful. I actually finished with a fully functional game a day early, which gave me time to dome refactoring. I also decided to use that extra time to implement a tournament style game, which included additional win tracking and a refresh button.

My code got very messy and ham-fisted. Definitely not fully SRP and DRY. And I did end up with a few global variables. After meeting with my mentor, I had a list of things to work on and ideas for how to refactor for much cleaner code. I chose to implement some of those suggestions, but there were some that would require a serious overhaul of my data model and approach. I would love to start over from scratch with the knowledge I have now.

When the page loads, you will see a blank tic tac toe board, with side panels containing win data for Player 1 and Player 2. Each player has an emoji token -- a honeybee or sunflower. The header above the board displays who's turn it is.

To take a turn, click on your chosen square, and it will be filled with your emoji token.

If a player gets three tokens in a row horizontally, vertically, or diagonally, they win! The board header will declare the winner before clearing the board for the next round. If the board is filled without either player achieving three in a row, a draw is declared.

The rounds counter for each player keeps track of wins.

When one player wins three rounds, they are declared tournament champion, and their wins data will be updated. A button will appear, which the user clicks to start a new tournament. Clicking this button will reload the page, clearing the rounds win data for each player back to zero. However, the tournament wins count will persist on refresh.