malcar91 / tictaktoe-firstproject

Tic tac toe first project

TICtacTOE - First Game Project

This is a client-side game app. Its an interactive tic tac toe game that can track wins, loses and games played.

Important Links

• [Project Repo] https://malcar91.github.io/TICtakTOE-firstProject/
• [Deployed Site] https://malcar91.github.io/TICtakTOE-firstProject/

Planning Story

I first started with designing my wireframe so I know what I want the layout of my page to look like. After that then I started all my auths such as sign up, sign in, change passwords and logging out. Once all of those were working then I started on building the game board in my html and some basic css so my site looked more like my wireframe. Next was to schedule and plan out my following days on getting more of the game functionality working to then add more styling to make it user friendly. So this involved making sure all my game auths were working with the API.

User Stories

• A user will open the page and be presented with input forms.
• A user coming back to the site will see the tab box to sign in.
• A new user then will see the second tab to sign up. Once signed in then the user will be told to log in.
• Once logged there will be a welcome message and the view changes to a log out and change password button under the header. IF user wants to change the password they will click the button and the change password form will appear. Once password is changed succesfully the form will dissapear.
• Underneath there will be a button to start the game, once clicked the gameboard and game stats boxes will appear along with a message telling player X to play.
• Once clicked the user will be able to click on the gameboard and try to beat whomever they are playing.
• Once a user wins there will be a display message saying which player has won.
• Once the user is done playing however many games he wants then he can log out.
• Once logged out a farewell message will appear and the gameboard, buttons and forms will dissapear except for logging back in.

Technologies Used

• HTML/CSS
• jQuery
• JavaScript
• bootstrap
• flexbox

Unsolved Problems

• The change password form will only dissapear when succesfully changing the password. If you hit the button and do not change your password and then log out, the form will still be there.
• Placing it differently in my ui.js with .show() and .hide() will not allow it to show back up again when logging back into the page with out refresh.
• Would like to eventually have site with above features working. More of a fun background, animation when clicking and displaying winners and losers such as higlighting the winnning squares. Also tracking which player wins the most within the session.
• to be able to play online with a friend would also be very cool feature to add.

Wireframes