# 1114 TTT Planning Document

## Preparation

* make a simple wireframe of the TTT website
* all of the html elements that will be needed for the game
* visually draw boxes out of the page layout
* simple mockup
* review phase
* look over lessons from this week that you need to reivew
* use the gitbook
* code you wrote in lecture or deliverables or labs
* do google around concepts
* Don't Panic!
* don't forgot your towel

## html

<!-- your index.html -->
<!-- (optional) header or title for the game -->
<!-- grid of nine squares -->
    <!-- three divs each with three divs in them (inner divs should display inline or inline block) -->
    <!--   divs should be numbered -- this will correlate to the array indexes (this can be a number id) -->
<!-- some kind of display for messages to the user (whose turn it is, if someone won or its a tie game) -->
<!-- button for reset -->

## Css

/* styles.css */

/* just enough styling to setup the gameboard */

/* DO NOT DO ANY OTHER STYLING UNTIL THE GAME LOGIC IS FINISHED */

## Javascript

// we need to keep track of the gameboard in javascript
    // a way to index squares -- that correlates to the arrays
    // a way to make the x's and o's stick
    // use an array to keep track of the x's and o's on the gameboard
    // (option 1: 1d array) ['x', '', '', '', '', '', '', '', ''] 
    // (option 2: trickier 2d array):
    // [
    //     ['x', '', ''],
    //     ['o', 'x', ''],
    //     ['o', '', 'x']
    // ]
    // array[0][0] -- accessing a 2d array
// a way to alternate players
    // a varaible that tracks whose turn it currently is -- this would start off as 'x'
// a varaible that tracks if the game is running or not
    // let isRunning = true 
// event listeners --clicking on the divs and making the x's or o's appear
    // when a square is clicked, do the following:
        // first check if that spot in the array is empty and that isRunning is true, if so, do the following:
            // we make an x or o appear -- as simple as setting the inner text
            // check if a win has occured  
                // check all 8 win cases for 'x' and for 'o'
                // cats games could check if all spaces are filled (verbose) OR
                // have a varaible that increments every turn and call a cats game at 9 if no body has won
                // if the game is won or a cats game occurs -- set isRunning to false
                    // other ways to check out that might be good to end the game 
                    // if game is won -- we could remove the gameboard from the DOM 
                    // or you could fill up the array spaces
                    // delete a class to prevent listeners from firing
            // alternate players if a win did not occur by changing the varaible that tracks whose turn it currently is
            // increment the turn counter to move closer to the cats condition