Tic Tac Toe

How it works

A game of Tic Tac Toe, where the player can choose between the first letter X, or the second letter, O. The first letter to get three in a row, vertical, horizontal, or diagonal, wins the game.

Wireframes

User Stories

As a new user, I can sign up
As a signed up user, I can log in
As a logged in user, I can press new game to start a new game
As a logged in user, I can play and either win or lose
As a logged in user, I can retrieve how many games I have played by pressing the get games button
As a logged in user, I can change my password at any time
As a logged in user, I can log out whenever I please

List of technologies used

HTML
CSS
JavaScript
jQuery
Bootstrap
Ajax

Unsolved problems

One issue that I eventually want to resolve is the ability to show the gameboard once a player presses the new game button; I ideally want it hidden to the user at first before pressing the new game button. Another slight issue that I eventually want to resolve is when a player starts a new game after winning or tieing, it still says "X/O wins!" or "It's a tie!", from the previous game, which I want to clear whenever the player presses new game. Another final issue that I eventually want to resolve is that whenever a user presses on a cell that's already taken, then I want a message to display that the cell has already been taken.

Challenges

Yes, this project looks easier than it looks, and I had a handful of difficulties I had to overcome, and was fortunate enough to have several instructors and colleagues help me out when I needed it. Some challenges including using the right jQuery methods, especially in my ui.js files, for when a user makes a specific action and a response is rendered in return. Another challenge I worked through was constantly logging different arguments and iterators to see what they would return and if they returned what I wanted for a specific function.