tic tac pro is available to try on GitHub Pages
My approach to creating tic tac pro focused on simplicity and modularity. The application architecture leverages view states to keep the level of complexity of the game application to a minimum. The game display is be structured as four layout components that manage their own content based on which view the application is expecting. These view states are determined by the user's authentication status, the current state of game play, and any relevant user input. This structure results in simple system of components that can respond to state changes without requiring a full page load..
The project plan for tic tac pro is available at https://github.com/pjliddy/tic-tac-pro/blob/master/scope.md
These technologies were used to create tic tac pro:
- HTML5, CSS3, & JavaScript are the core technologies
- SASS is used build cascading style sheets
- A custom Bootstrap theme delivers styling and interactivity on the presentation layer
- jQuery manages DOM manipulation and controlling of custom view states
- AJAX requests are used to access user and game databased through the API library
tic tac pro uses this template structure to define its content view states to update them as views change.
The template consists of four elements:
- Header: content depends on authentication state of the user
- Content: fixed size area for showing game play and dialog boxes for user input
- Message: element for showing game messages to the player(s)
- Footer: static footer containing copyright information
While tic tac pro meets the requirements for this project, there are still several things that can be improved upon:
- A more consistent styling across the application, managed through a custom compiled Bootstrap theme (see: http://getbootstrap.com/customize)
- Creation of an basic artifical intelligence that can maximize the potential outcome of its decisions using expected value, rather than a set of conditional rules
- Implementation a true single-page application templating system to facilitate changes to view states
A complete set of user stories and corresponding wireframes can be viewed here: