Tic Tac Toe: a single-page-application of this popular game with an unbeatable AI opponent

Executive Summary

• Browser-based single page application of the famous tic-tac-toe game
• CRUDing user and game state resources on an API that was provided
• User can control turn order, player symbol, and opponent settings, including difficulty
• Unbeatable AI opponent based on minimax recursive algorithm (no alpha/beta pruning)

Summary

This application allows the user to play the popular game Tic Tac Toe by themselves, against other human players, or against a computer opponent.

This Single Page Application (SPA) of the game is entirely CRUD based, in that all user account details, including email address, password, as well as all game related and meta-data are stored decentralised on a server.

The game itself is a one-to-one representation of the popular game, whereby two players are each allocated a game symbol of X and O respectively. Both players take turns in placing their respective symbol into one of 9 cells that make up the game-board's 3 x 3 matrix. Players must only stake their symbol to a cell that is as yet unencumbered. Whichever player positions three of his symbols in a horizontal, vertical, or diagonal straight first, has won the game. If the game board has no more empty cells for players to stake a move on and neither player has achieved to position three of their symbols in a straight line, the game results in a draw.

Players can choose which symbol to play, X or O, which turn to take, first or second, and whether their opponent is human or a computer. If the latter option is selected, one can also choose the AI difficulty level. The most difficult level is in essence unbeatable with the best game outcome being a draw. This result has been achieved using the game theory derived minimax algorithm. Due to the limited size of the game board alpha/beta pruning, as a way to improve time and space complexity, has been omitted.

Besides offering the above game play adjustments, players can also choose from a list of all their unfinished games, select one from a carousel-type selection pane, and bring to a conclusion.

Local Development

1. Run git clone git@github.com:sven-gerlach/tic-tac-toe-client.git
2. Run nvm run to ensure the correct node and npm versions are used (Note: this app does not run on newer versions)
3. Run npm i
4. To start the local dev server run grunt s

Deployment

This app is deployed on Render. The accompanying API is also hosted on Render.

Technologies Used

• HTML
• CSS
• SCSS
• Javascript
• jQuery
• Bootstrap
• Shell

Important URLs

• Deployed Client
• Deployed API

Planning Story

Before this project was developed in code the below planning and workstream management list was used to organise the key milestones and structure them in a way that makes most sense from a development perspective.

1. Review
2. User Stories
3. Review
4. Wire Frames
5. Draft detailed flow-chart and key objects needed

Set Up

1. Download Browser Template
2. Create a Github Repository

---

Draft HTML

1. Convert wireframe into basic unformatted HTML, focusing on application requirements for now (add in stretch goals if time)

Authentication

1. Review
2. Sign Up (curl then web app)
3. Sign In (curl then web app)
4. Change Password (curl then web app)
5. Sign Out (curl then web page)
6. All API calls have success or failure messages
7. Deploy to Github Pages

Create New Game

1. Display New Game button when a user signs in
2. When New Game button is clicked display game board, start player as X, and make POST games API call to create game
3. Save the API response so you have access to the game ID and cells
4. Deploy to Github Pages

Game UI Round 1

1. Design a basic game board with HTML/CSS
2. Add a click handler for when a space on the game board is clicked
3. When the user clicks on a space, first check that the space is empty
4. If they choose a valid space, add their token to the HTML/CSS board and the game cells array
5. Add messaging for the user when the user clicks on an invalid space
6. Deploy to Github Pages

Game UI Round 2

1. Rotate player between X and O
2. Add messaging for the user when the turn changes
3. Check for winner
4. Deploy to Github Pages

Update Game

1. Make PATCH games API call to update game
2. Add messaging for the user when the game is over (win or draw)
3. Do not allow users to add an X or O to any spaces after the game is over
4. Deploy to Github Pages

Play Game Again

1. Update New Game button functionality so it also works to play another game
2. Deploy to Github Pages

View Games

1. Add Games played button
2. When Add Games button is clicked make GET games API call and display the number of games returned
3. Deploy to Github Pages

Debug

1. test edge cases
2. test corner cases

Documentation Requirements

1. Draft

Final Submission Checklist

1. Debug, test edge and corner cases
2. Basic requirements
   1. Deployment requirements
   2. Version control requirements
   3. Documentation Requirements
   4. Application requirements
   5. API requirements
   6. Professional requirements
3. Stretch goals
   1. View previous games in carousel
   2. Allow users finish playing unfinished games
   3. Build an AI bot of different difficulty levels
   4. Game statistics
   5. Automatic sign-in immediately after sign-up
   6. Responsive design features
   7. Usage of advanced UX design, such as carousels, alerts, styled buttons, animations, etc

User Experience Flow Chart

Modules

• app: attach event listeners to objects
• events: handle events
• api: ajax requests
• ui: modulate html to achieve SPA user-interface
• game-board: gameBoard object with its properties and methods
• player: player object with its properties and methods
• store: store API response user variable and game variable

Objects

1. gameBoard

2. properties: gameBoard, gameState, id, owner, nextPlayer

3. methods: setGameBoard (needed for option to continue old games), isValidMove, updateGameBoard, evaluateGameBoard

4. player

5. properties: id, email

6. methods: getNextMove (needed for AI)

7. gameStats:

8. properties:

9. methods: getAllGames, evaluateGames, setTable

User Stories

• As a new user, I want to be able to create an account so that I can complete games at a later point and review my win/loss rate.
• As a user with an account, I want to be able to change my password.
• As a new user who just created an account, I want to be able to go straight to the game app without having to sign in.
• As a new user who doesn't know the game, I want to read some instructions so that I can play the game.

Unsolved Problems

• Option for users to switch to full screen on their mobile devices inside their browsers
• Use a holding page with a spinner during loading
• On occasion, logging into the server can take a few seconds. Showing a spinner would enhance the user experience.
• Alert windows can be clicked away. Another, perhaps better option, would be to force the user to click on one of the buttons presented on those alert windows.
• Using responsive design, style the 3x3 game matrix in such a way that the 9 squares make up one bigger square, all staying proportional and squared as and when the screen gets resized
• When a win occurs, draw a line through the 3 symbols

Images

Wireframe: