Alex's Tic-Tac-Toe Game https://squirtlesquad1988.github.io/tic-tac-toe/
Technologies Used: AJAX, JavaScript, jQuery, HTML, CSS, Bootstrap, SCSS, Google fonts
The planning phase of this project consisted of following the suggested schedule as suggested by instructor Jeff Horn. The first item on the list was to model the engine and get it running in node.js. To accomplish this I mapped out what I believed would be the step by step process that occurs as a game of Tic-Tac-Toe takes place. Doing this two or three times was very helpful as I was able to figure out, in detail, how a game of Tic-Tac-Toe works and how to translate that into basic JavaScript. Once the basic game engine was running my next step was to translate that into the browser. This was much more difficult than the initial engine modeling but I was able to accomplish it by going over some jQuery and I was able to get the app running in the browser. The next step in the process was to transfer what was occuring in the browser to the server using AJAX. This was much more difficult than the previous two stages of the project but - again - after taking a module on AJAX on CodeSchool.com and reading the game-project-api documentation I was able to figure it out.
If I were to start the project over again I would do many things differently. The first and most important thing I would do over again would be to map how I am going to organize my code in my files. On the tail-end of the project I had to do a major overhaul of my code organization in order to get some functions to work properly. This could have been avoided if I had organized my code properly from the very beginning. Second, I would look on the repo on solution branches to make sure the code I copied in class was accurate what was intended in class. Toward the end of my project there were a few errors that were typos from mis-copied code from class. In addition, if I were to know what I know about AJAX when I started the project it would be a lot easier as I would be more efficient about event delegation. Overall I am happy with my progress that I made on the project. I feel like having to create a SPA truely made me internalize the majority of the material covered in Unit One.
In future generations I want to style the SPA a little more using Bootstrap and CSS, possibly add some animations using jQuery. I would also want give it a theme.
I only finished the project Sunday night so I wasn't really able to fully consider styling and layout after the initial requirements were complete. As a result, only one wireframe was created:
11-Feb-2017: Improved up the UX by disabling the sign out feature while the user is not signed in. Also separated authorization functions into separate modals that fade away when each action is successfully performed. Finally added some stying of the game board itself.
Wireframe: http://imgur.com/a/XyZtJ
User Stories: As a user I want to be able to create account so I can track my stats. As a user I want to be able to start a new game after I finish one. As a user I want to be able to play cooperatively with a friend. As a user I want to be able to change my password. As a user I want to be abe to see the winner of a game.
Created by Alexander Robles