Tic Tac Toe Web

Tic Tac Toe (aka "Noughts and Crosses") is a simple game played between two players on a 3x3 grid.

tic tac toe completed

In this project you will implement the game rules in a web-based UI.

We recommend that before you start this project, you complete the Tic Tac Toe (CLI) project (at least up to the "Artificial Stupidity" story). This will help you keep the game rules separate from the user interface, both in your mind and in your code. You may even be able to reuse many of the functions you wrote earlier.

Template repository: https://github.com/BurlingtonCodeAcademy/tic-tac-toe-www -- either clone this directly, or use your own GitHub Classroom repo.

Wireframes

Tic Tac Toe

   |   |  
--- --- ---
   |   |  
--- --- ---
   |   |  

[Start Game]

Tic Tac Toe

   |   |  
--- --- ---
   |   |  
--- --- ---
   |   |  

Player X's turn

Tic Tac Toe

   | X |  
--- --- ---
   |   |  
--- --- ---
   |   |  

Player O's turn

Backlog

The backlog is an ordered list of user stories (aka features). Make sure to implement them in order, and don't move on to the next one until you're confident that your current story meets all the requirements. Some features already have acceptance tests written in Cypress; make sure these work and also feel free to add your own tests in the cypress/integration directory.

Start Game

Given an empty board

When the user clicks 'Start Game'

Then the 'Start Game' button is disabled ("grayed out")

And the status area contains "Player X's turn"

No Rules

Given an empty board, and

Given the current player is X

When the user selects a cell

Then the board redraws

And an X appears in that cell

And the turn ends

And the current player changes from X to O

Given the player is O

When the user selects a cell

Then an O appears in that cell

And the turn ends, and the current player changes from O to X

Rules

When the user selects a cell that is not empty

Then the game says "Please select an empty cell." and does not put an X or O in the cell

And the current player does not change

Win Condition

Given the turn has just ended

When if there are three Xs in a row, column, or diagonal

Then the system draws a line through the winning three cells

And the app says "Congratulations! Player X wins!"

And the game ends

(and likewise for Player O)

Names

When starting a game, allow the user(s) to choose the names of the players (not just X and O).

Game Time

After starting a game, a game clock timer is present in the lower region of the web page.

The timer should show the time in the format: - Time Elapsed 32 seconds

(See example below)

Every second during game play, until a player has won, the clock should proceed by one second.

Example: - 32 seconds - 33 seconds - 34 seconds

Tic Tac Toe

   | X | O
--- --- ---
   | O |  
--- --- ---
   | X |  

Player O's turn

Time Elapsed 32 seconds

Artificial Stupidity

When starting a new game, choose "Player vs Player" or "Player vs Computer"
If "Player vs Computer" is chosen, then do not ask for a name
The computer player always picks an empty cell at random
The human is always X and the computer is always O

New Game UI

design a clean "New Game" UI allowing choice of human or computer, name, and symbol
consider using a modal dialog box
consider button placement and visibility

Game Time Formatted (OPTIONAL)

After starting a game, a game clock timer is present in the lower region of the web page.

The timer should show the time in the format: - Hours : Minutes : Seconds - HH:MM:SS