diff --git a/Gemfile b/Gemfile
index a79701808..50775c9a1 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 
 gem 'active_model_serializers', '0.10.6'
-
+gem 'rb-readline', '~> 0.5.3'
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 5.0'
 # Use sqlite3 as the database for Active Record
diff --git a/Gemfile.lock b/Gemfile.lock
index e9d008c3b..16668d66d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -106,7 +106,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.0.4)
+    rails-html-sanitizer (1.1.0)
       loofah (~> 2.2, >= 2.2.2)
     railties (5.0.7.2)
       actionpack (= 5.0.7.2)
@@ -114,10 +114,11 @@ GEM
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rake (12.3.2)
+    rake (12.3.3)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
+    rb-readline (0.5.5)
     rspec-core (3.8.2)
       rspec-support (~> 3.8.0)
     rspec-expectations (3.8.4)
@@ -146,7 +147,8 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    spring (2.1.0)
+    spring (2.0.2)
+      activesupport (>= 4.2)
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -183,6 +185,7 @@ DEPENDENCIES
   jquery-rails
   pry
   rails (~> 5.0)
+  rb-readline (~> 0.5.3)
   rspec-rails (~> 3.0)
   sass-rails (~> 5.0)
   spring
@@ -192,4 +195,4 @@ DEPENDENCIES
   web-console (~> 2.0)
 
 BUNDLED WITH
-   2.0.1
+   1.16.6
diff --git a/app/assets/javascripts/tictactoe.js b/app/assets/javascripts/tictactoe.js
index d4da8daca..6e397e0d4 100644
--- a/app/assets/javascripts/tictactoe.js
+++ b/app/assets/javascripts/tictactoe.js
@@ -1 +1,283 @@
 // Code your JavaScript / jQuery solution here
+
+// FRONT END //
+$(document).ready(function() {
+  attachListeners();
+});
+//create current game variable that starts at 0
+var currentGame = 0;// 0 is falsey and 1 is truthy in js
+var turn = 0;
+//debugger
+function player() {
+  if ((turn % 2) == 0) {
+     return 'X'
+   } else {
+     return 'O'
+   }
+}
+
+function updateState(td) {
+  //debugger
+var token = player();
+
+     td.innerText = token
+}
+
+function setMessage(message) {
+// debugger
+  // document.getElementById("div#message").innerHTML = message
+    $("div#message").append(message);
+}
+
+  function checkWinner() {
+    var newArray = []
+    var board = {};
+    const WIN_COMBINATIONS = [
+    [0,1,2],// Top row
+    [3,4,5],  // Middle row
+    [6,7,8],  // bottom row
+    [0,3,6], // Left column
+    [1,4,7],  // Middle column
+    [2,5,8],  // Right column
+    [2,4,6], // right diagonal
+    [0,4,8] // left diagonal
+  ]
+  $("td").text((index, square) => board[index] = square)
+   //debugger
+  // for (var i = 0; i < 9; i++) {
+  //     newArray.push($("td")[i].innerHTML);
+  //   }
+    var found = false
+  var result =  WIN_COMBINATIONS.find(function(combo) {
+      if (board[combo[0]] !== '' && board[combo[0]] === board[combo[1]] && board[combo[1]] === board[combo[2]] ) {
+      found = true
+      return found
+    } else {
+      found = false
+      return found
+    }
+    });
+    //  console.log(result)
+    if (result === undefined) {
+      return false;
+
+    } else {
+      var message = ''
+      if (board[result[0]] === 'X') {
+        message = 'Player X Won!'
+        setMessage(message);
+        return true;
+      } else if(board[result[0]] === 'O') {
+        message = 'Player O Won!'
+        setMessage(message);
+        return true;
+      }
+    }
+  }
+
+  function doTurn(elementThatWasClicked) {
+
+    updateState(elementThatWasClicked);
+    turn+=1;
+  //  debugger
+    //turn++;
+    // checkWinner();
+    if (checkWinner()) {
+      saveGame();
+      resetBoard();
+    } else if (turn === 9 ){
+      setMessage('Tie game.');
+      saveGame();
+      resetBoard();
+    } else if (isTaken()){
+         player();
+    }
+  }
+
+  function resetBoard() {
+    $("td").empty();
+    turn = 0;
+    currentGame = 0;
+  }
+
+function attachListeners(){
+  // code to be executed goes here
+  $("td").on("click", function(event){
+  //  console.log(this)
+  //  console.log(event)
+  if (!checkWinner() && !$.text(this)) {
+    doTurn(this);
+  }
+
+  });
+
+  $("#save").on("click", function(event){
+    //console.log(event)
+    saveGame();
+  //  console.log(event)
+
+  });
+
+  $("#previous").on("click", function(event){
+    //console.log(event)
+    previousGames();
+  //  console.log(event)
+
+  });
+
+  $("#clear").on("click", function(event){
+    //console.log(event)
+    clearGame();
+  //  console.log(event)
+
+  });
+
+
+}
+
+function isTaken() {
+  var aElement = player();
+  if (aElement === 'X' || aElement === 'O') {
+    var position = player();
+      return position;
+  }
+}
+
+// BACK END //
+
+
+// Attaches the appropriate event listeners to:
+// (1) the squares of the game board
+// (2) the button#save, button#previous, and button#clear elements.
+
+
+
+// SAVE - Clicking a saved game button (in the div#games element)
+// -save the current game state
+//
+// SAVE - if the current game has not yet been saved
+// - (should) saving it should save the state of the game in the database.
+// - if state is blank
+//  - save the state should be saved in the db
+//  - if we press save again the game state should be updated
+//
+// SAVE - if the current game already exists in the database
+// - (should) saving it should update that previously-saved game
+function saveGame(){
+  //debugger
+  //var board = access all of text inside td for each square
+  var aBoard = $("td").map(function( key, value ) {
+    //alert(value);
+    return value.innerText
+     console.log( value );
+  });
+  // this is just letting me know of the keys
+  // $("td").each(function(key, value) {
+  //       alert(key)
+  // });
+  var board = Array.from(aBoard)
+  var gameBoard = {state: board}
+  //debugger
+
+  // store the state of the board in a variable called gameBoard
+
+  // check if their is a current game do below
+   if (!currentGame) {//!0 = true - if not saved
+    // $() /games/new
+    $.post("/games",
+    {
+      state: board
+    },
+    function(board){
+      currentGame = board.data.id
+      // debugger
+    //  alert("board: " + board);
+    }
+    );
+  } else {
+    $.ajax(
+    {
+      state: board,
+      type: "patch",
+      url: `/games/${currentGame}`
+    },
+    function(board){
+      alert("board: 2" + board);
+    }
+    );
+  }
+
+
+  // if currentGame then do a patch request - to send the game board data
+  // - the url is the url of the current game
+  // if not do a post request - function
+  // - updating currentGame
+
+  // create a button for this game and append to our #games
+}
+
+
+// PREVIOUS - grab all of the persisted games from the database and create a button for each
+// - ( when clicked ) returns the game state to the ttt board
+// NOTE - All of the buttons should be added to the div#games element
+function previousGames() {
+  $.get("/games", function(response){
+
+        if (response.data.length) {
+          var aUl = document.createElement("ul");
+          $("#games").empty();
+        //  $("#games").append(aUl);
+          response.data.forEach(function(game) {
+          // create a new button and add it to the document
+            var btn = document.createElement("button");
+            btn.setAttribute('data-game-id', game.id);
+            btn.innerHTML= game.id;
+            gameIdentifer = btn.innerHTML
+            btn.addEventListener("click", () => { reloadGame(game.id)});//reloadGame(game.id)
+            // var allbuttonElements = $( "button" );
+            // //debugger
+            // if ($( "#games" ).find(gameIdentifer)){
+              $( "#games" ).append(btn)
+            // }else{
+            //   null
+            // }
+        });
+      }
+  });
+}
+function reloadGame(gameId){
+  $.get(`/games/${gameId}`, function(response){
+    const theState = response.data.attributes.state;
+    var i = 0;
+    for (var y=0; y < 3; y++) {
+      for (var x=0; x < 3; x++) {
+          document.querySelector(`[data-x="${x}"][data-y="${y}"]`).innerHTML = theState[i]
+        turn = theState.join("").length
+        currentGame = gameId
+          i++;
+      }
+    }
+  });
+}
+// CLEAR - clear the game board && start a completely new game
+// BEHAVOR of clear //
+// (1) button#save - game persisted to the database.
+
+// (2) button#clear - clear the game board && start a completely new game
+// (3) button#save -  ^ this game persisted to the database.
+// expected result - two games should have been persisted to the database //
+function clearGame() {
+  // alert("Hello!");
+  resetBoard();
+  // var aBoard = $("td").map(function( key, value ) {
+  //   return value.innerText
+  //    console.log( value );
+  // });
+  // var board = Array.from(aBoard)
+  // var gameBoard = {state: board}
+  //   $.post("/games", { state: board },
+  //   function(board){
+  //     currentGame = board.data.id
+  //   }
+  // );
+}
diff --git a/db/schema.rb b/db/schema.rb
index 349d9bd29..c9a8a85b7 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1,4 +1,3 @@
-# encoding: UTF-8
 # This file is auto-generated from the current state of the database. Instead
 # of editing this file, please use the migrations feature of Active Record to
 # incrementally modify your database, and then regenerate this schema definition.
diff --git a/notes/jsplayground.js b/notes/jsplayground.js
new file mode 100644
index 000000000..7832f9833
--- /dev/null
+++ b/notes/jsplayground.js
@@ -0,0 +1,4 @@
+response.data.forEach(function(game) {
+  game.addEventListener("click", myScript);
+  // console.log(element);
+});
diff --git a/notes/whats_going_on.js b/notes/whats_going_on.js
new file mode 100644
index 000000000..e152808d0
--- /dev/null
+++ b/notes/whats_going_on.js
@@ -0,0 +1,14 @@
+1. play the game
+2. save the game
+3. output jQuery.Event object
+4. press show previous games
+5. outouts buttons. NOTE: but when clicked does
+not go to the state of the game (it does not
+do anything)
+ - when i refresh the page and save the game and
+ press show previous games an extra button is prompted
+
+
+$("td")
+ The element selector returns all HTML elements with that specific tag:
+Because we have 9 td tags on our page, this selector will return an array of all six td tags.
diff --git a/package-lock.json b/package-lock.json
index 14c13e22a..935439789 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
       "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
       "dev": true,
       "requires": {
-        "acorn": "4.0.13"
+        "acorn": "^4.0.4"
       }
     },
     "ajv": {
@@ -37,8 +37,8 @@
       "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
       "dev": true,
       "requires": {
-        "co": "4.6.0",
-        "json-stable-stringify": "1.0.1"
+        "co": "^4.6.0",
+        "json-stable-stringify": "^1.0.1"
       }
     },
     "amdefine": {
@@ -103,7 +103,7 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "tweetnacl": "0.14.5"
+        "tweetnacl": "^0.14.3"
       }
     },
     "boom": {
@@ -112,7 +112,7 @@
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
       "dev": true,
       "requires": {
-        "hoek": "2.16.3"
+        "hoek": "2.x.x"
       }
     },
     "brace-expansion": {
@@ -121,7 +121,7 @@
       "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
       "dev": true,
       "requires": {
-        "balanced-match": "1.0.0",
+        "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
@@ -143,12 +143,12 @@
       "integrity": "sha1-MxoDkbVcOvh0CunDt0WLwcOAXm0=",
       "dev": true,
       "requires": {
-        "assertion-error": "1.0.2",
-        "check-error": "1.0.2",
-        "deep-eql": "2.0.2",
-        "get-func-name": "2.0.0",
-        "pathval": "1.1.0",
-        "type-detect": "4.0.3"
+        "assertion-error": "^1.0.1",
+        "check-error": "^1.0.1",
+        "deep-eql": "^2.0.1",
+        "get-func-name": "^2.0.0",
+        "pathval": "^1.0.0",
+        "type-detect": "^4.0.0"
       }
     },
     "check-error": {
@@ -169,7 +169,7 @@
       "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
       "dev": true,
       "requires": {
-        "delayed-stream": "1.0.0"
+        "delayed-stream": "~1.0.0"
       }
     },
     "commander": {
@@ -178,7 +178,7 @@
       "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
       "dev": true,
       "requires": {
-        "graceful-readlink": "1.0.1"
+        "graceful-readlink": ">= 1.0.0"
       }
     },
     "concat-map": {
@@ -199,7 +199,7 @@
       "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
       "dev": true,
       "requires": {
-        "boom": "2.10.1"
+        "boom": "2.x.x"
       }
     },
     "cssom": {
@@ -214,7 +214,7 @@
       "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
       "dev": true,
       "requires": {
-        "cssom": "0.3.2"
+        "cssom": "0.3.x"
       }
     },
     "dashdash": {
@@ -223,7 +223,7 @@
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
       "dev": true,
       "requires": {
-        "assert-plus": "1.0.0"
+        "assert-plus": "^1.0.0"
       },
       "dependencies": {
         "assert-plus": {
@@ -249,7 +249,7 @@
       "integrity": "sha1-sbrAblbwp2d3aG1Qyf63XC7XZ5o=",
       "dev": true,
       "requires": {
-        "type-detect": "3.0.0"
+        "type-detect": "^3.0.0"
       },
       "dependencies": {
         "type-detect": {
@@ -285,7 +285,7 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "jsbn": "0.1.1"
+        "jsbn": "~0.1.0"
       }
     },
     "escape-string-regexp": {
@@ -300,11 +300,11 @@
       "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=",
       "dev": true,
       "requires": {
-        "esprima": "2.7.3",
-        "estraverse": "1.9.3",
-        "esutils": "2.0.2",
-        "optionator": "0.8.2",
-        "source-map": "0.2.0"
+        "esprima": "^2.7.1",
+        "estraverse": "^1.9.1",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.2.0"
       }
     },
     "esprima": {
@@ -355,9 +355,9 @@
       "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
       "dev": true,
       "requires": {
-        "asynckit": "0.4.0",
-        "combined-stream": "1.0.5",
-        "mime-types": "2.1.15"
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.5",
+        "mime-types": "^2.1.12"
       }
     },
     "formatio": {
@@ -366,7 +366,7 @@
       "integrity": "sha1-87IWfZBoxGmKjVH092CjmlTYGOs=",
       "dev": true,
       "requires": {
-        "samsam": "1.2.1"
+        "samsam": "1.x"
       }
     },
     "fs.realpath": {
@@ -387,7 +387,7 @@
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
       "dev": true,
       "requires": {
-        "assert-plus": "1.0.0"
+        "assert-plus": "^1.0.0"
       },
       "dependencies": {
         "assert-plus": {
@@ -404,12 +404,12 @@
       "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
       "dev": true,
       "requires": {
-        "fs.realpath": "1.0.0",
-        "inflight": "1.0.6",
-        "inherits": "2.0.3",
-        "minimatch": "3.0.4",
-        "once": "1.4.0",
-        "path-is-absolute": "1.0.1"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.2",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       }
     },
     "graceful-readlink": {
@@ -436,8 +436,8 @@
       "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
       "dev": true,
       "requires": {
-        "ajv": "4.11.8",
-        "har-schema": "1.0.5"
+        "ajv": "^4.9.1",
+        "har-schema": "^1.0.5"
       }
     },
     "has-flag": {
@@ -452,10 +452,10 @@
       "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
       "dev": true,
       "requires": {
-        "boom": "2.10.1",
-        "cryptiles": "2.0.5",
-        "hoek": "2.16.3",
-        "sntp": "1.0.9"
+        "boom": "2.x.x",
+        "cryptiles": "2.x.x",
+        "hoek": "2.x.x",
+        "sntp": "1.x.x"
       }
     },
     "hoek": {
@@ -470,7 +470,7 @@
       "integrity": "sha1-eb96eF6klf5mFl5zQVPzY/9UN9o=",
       "dev": true,
       "requires": {
-        "whatwg-encoding": "1.0.1"
+        "whatwg-encoding": "^1.0.1"
       }
     },
     "http-signature": {
@@ -479,9 +479,9 @@
       "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
       "dev": true,
       "requires": {
-        "assert-plus": "0.2.0",
-        "jsprim": "1.4.0",
-        "sshpk": "1.13.1"
+        "assert-plus": "^0.2.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
       }
     },
     "iconv-lite": {
@@ -496,8 +496,8 @@
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
       "dev": true,
       "requires": {
-        "once": "1.4.0",
-        "wrappy": "1.0.2"
+        "once": "^1.3.0",
+        "wrappy": "1"
       }
     },
     "inherits": {
@@ -543,27 +543,27 @@
       "integrity": "sha512-vKKDU+Xh9O6VgzdOYf5Rmqbgp+Yz4YTBC19gaLtctXch33EmNucA395KJGGboldafPW1vv9XLuiprO4+wXfl0g==",
       "dev": true,
       "requires": {
-        "abab": "1.0.3",
-        "acorn": "4.0.13",
-        "acorn-globals": "3.1.0",
-        "array-equal": "1.0.0",
-        "content-type-parser": "1.0.1",
-        "cssom": "0.3.2",
-        "cssstyle": "0.2.37",
-        "escodegen": "1.8.1",
-        "html-encoding-sniffer": "1.0.1",
-        "nwmatcher": "1.4.1",
-        "parse5": "3.0.2",
-        "pn": "1.0.0",
-        "request": "2.81.0",
-        "request-promise-native": "1.0.4",
-        "sax": "1.2.4",
-        "symbol-tree": "3.2.2",
-        "tough-cookie": "2.3.2",
-        "webidl-conversions": "4.0.1",
-        "whatwg-encoding": "1.0.1",
-        "whatwg-url": "6.1.0",
-        "xml-name-validator": "2.0.1"
+        "abab": "^1.0.3",
+        "acorn": "^4.0.4",
+        "acorn-globals": "^3.1.0",
+        "array-equal": "^1.0.0",
+        "content-type-parser": "^1.0.1",
+        "cssom": ">= 0.3.2 < 0.4.0",
+        "cssstyle": ">= 0.2.37 < 0.3.0",
+        "escodegen": "^1.6.1",
+        "html-encoding-sniffer": "^1.0.1",
+        "nwmatcher": "^1.4.1",
+        "parse5": "^3.0.2",
+        "pn": "^1.0.0",
+        "request": "^2.79.0",
+        "request-promise-native": "^1.0.3",
+        "sax": "^1.2.1",
+        "symbol-tree": "^3.2.1",
+        "tough-cookie": "^2.3.2",
+        "webidl-conversions": "^4.0.0",
+        "whatwg-encoding": "^1.0.1",
+        "whatwg-url": "^6.1.0",
+        "xml-name-validator": "^2.0.1"
       }
     },
     "json-schema": {
@@ -578,7 +578,7 @@
       "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
       "dev": true,
       "requires": {
-        "jsonify": "0.0.0"
+        "jsonify": "~0.0.0"
       }
     },
     "json-stringify-safe": {
@@ -625,8 +625,8 @@
       "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
       "dev": true,
       "requires": {
-        "prelude-ls": "1.1.2",
-        "type-check": "0.3.2"
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
       }
     },
     "lodash": {
@@ -641,8 +641,8 @@
       "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
       "dev": true,
       "requires": {
-        "lodash._basecopy": "3.0.1",
-        "lodash.keys": "3.1.2"
+        "lodash._basecopy": "^3.0.0",
+        "lodash.keys": "^3.0.0"
       }
     },
     "lodash._basecopy": {
@@ -675,9 +675,9 @@
       "integrity": "sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=",
       "dev": true,
       "requires": {
-        "lodash._baseassign": "3.2.0",
-        "lodash._basecreate": "3.0.3",
-        "lodash._isiterateecall": "3.0.9"
+        "lodash._baseassign": "^3.0.0",
+        "lodash._basecreate": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0"
       }
     },
     "lodash.isarguments": {
@@ -698,9 +698,9 @@
       "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
       "dev": true,
       "requires": {
-        "lodash._getnative": "3.9.1",
-        "lodash.isarguments": "3.1.0",
-        "lodash.isarray": "3.0.4"
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
       }
     },
     "lodash.sortby": {
@@ -727,7 +727,7 @@
       "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
       "dev": true,
       "requires": {
-        "mime-db": "1.27.0"
+        "mime-db": "~1.27.0"
       }
     },
     "minimatch": {
@@ -736,7 +736,7 @@
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
       "dev": true,
       "requires": {
-        "brace-expansion": "1.1.8"
+        "brace-expansion": "^1.1.7"
       }
     },
     "minimist": {
@@ -779,10 +779,10 @@
       "integrity": "sha1-XNSOBNvnZX1+mXiAxMzQIar1GqU=",
       "dev": true,
       "requires": {
-        "debug": "0.7.4",
-        "is-string": "1.0.4",
-        "mkdirp": "0.5.1",
-        "object-assign": "4.1.1"
+        "debug": "~0.7.4",
+        "is-string": "^1.0.4",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1"
       },
       "dependencies": {
         "debug": {
@@ -829,7 +829,7 @@
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
       "dev": true,
       "requires": {
-        "wrappy": "1.0.2"
+        "wrappy": "1"
       }
     },
     "optionator": {
@@ -838,12 +838,12 @@
       "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
       "dev": true,
       "requires": {
-        "deep-is": "0.1.3",
-        "fast-levenshtein": "2.0.6",
-        "levn": "0.3.0",
-        "prelude-ls": "1.1.2",
-        "type-check": "0.3.2",
-        "wordwrap": "1.0.0"
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.4",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "wordwrap": "~1.0.0"
       }
     },
     "parse5": {
@@ -852,7 +852,7 @@
       "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=",
       "dev": true,
       "requires": {
-        "@types/node": "6.0.83"
+        "@types/node": "^6.0.46"
       }
     },
     "path-is-absolute": {
@@ -912,28 +912,28 @@
       "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
       "dev": true,
       "requires": {
-        "aws-sign2": "0.6.0",
-        "aws4": "1.6.0",
-        "caseless": "0.12.0",
-        "combined-stream": "1.0.5",
-        "extend": "3.0.1",
-        "forever-agent": "0.6.1",
-        "form-data": "2.1.4",
-        "har-validator": "4.2.1",
-        "hawk": "3.1.3",
-        "http-signature": "1.1.1",
-        "is-typedarray": "1.0.0",
-        "isstream": "0.1.2",
-        "json-stringify-safe": "5.0.1",
-        "mime-types": "2.1.15",
-        "oauth-sign": "0.8.2",
-        "performance-now": "0.2.0",
-        "qs": "6.4.0",
-        "safe-buffer": "5.1.1",
-        "stringstream": "0.0.5",
-        "tough-cookie": "2.3.2",
-        "tunnel-agent": "0.6.0",
-        "uuid": "3.1.0"
+        "aws-sign2": "~0.6.0",
+        "aws4": "^1.2.1",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.5",
+        "extend": "~3.0.0",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.1.1",
+        "har-validator": "~4.2.1",
+        "hawk": "~3.1.3",
+        "http-signature": "~1.1.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.7",
+        "oauth-sign": "~0.8.1",
+        "performance-now": "^0.2.0",
+        "qs": "~6.4.0",
+        "safe-buffer": "^5.0.1",
+        "stringstream": "~0.0.4",
+        "tough-cookie": "~2.3.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.0.0"
       }
     },
     "request-promise-core": {
@@ -942,7 +942,7 @@
       "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=",
       "dev": true,
       "requires": {
-        "lodash": "4.17.4"
+        "lodash": "^4.13.1"
       }
     },
     "request-promise-native": {
@@ -952,8 +952,8 @@
       "dev": true,
       "requires": {
         "request-promise-core": "1.1.1",
-        "stealthy-require": "1.1.1",
-        "tough-cookie": "2.3.2"
+        "stealthy-require": "^1.1.0",
+        "tough-cookie": ">=2.3.0"
       }
     },
     "safe-buffer": {
@@ -980,14 +980,14 @@
       "integrity": "sha1-Md4G/tj7o6Zx5XbdltClhjeW8lw=",
       "dev": true,
       "requires": {
-        "diff": "3.2.0",
+        "diff": "^3.1.0",
         "formatio": "1.2.0",
-        "lolex": "1.6.0",
-        "native-promise-only": "0.8.1",
-        "path-to-regexp": "1.7.0",
-        "samsam": "1.2.1",
+        "lolex": "^1.6.0",
+        "native-promise-only": "^0.8.1",
+        "path-to-regexp": "^1.7.0",
+        "samsam": "^1.1.3",
         "text-encoding": "0.6.4",
-        "type-detect": "4.0.3"
+        "type-detect": "^4.0.0"
       }
     },
     "sntp": {
@@ -996,7 +996,7 @@
       "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
       "dev": true,
       "requires": {
-        "hoek": "2.16.3"
+        "hoek": "2.x.x"
       }
     },
     "source-map": {
@@ -1006,7 +1006,7 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "amdefine": "1.0.1"
+        "amdefine": ">=0.0.4"
       }
     },
     "sshpk": {
@@ -1015,14 +1015,14 @@
       "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
       "dev": true,
       "requires": {
-        "asn1": "0.2.3",
-        "assert-plus": "1.0.0",
-        "bcrypt-pbkdf": "1.0.1",
-        "dashdash": "1.14.1",
-        "ecc-jsbn": "0.1.1",
-        "getpass": "0.1.7",
-        "jsbn": "0.1.1",
-        "tweetnacl": "0.14.5"
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "tweetnacl": "~0.14.0"
       },
       "dependencies": {
         "assert-plus": {
@@ -1051,7 +1051,7 @@
       "integrity": "sha1-cqJiiU2dQIuVbKBf83su2KbiotU=",
       "dev": true,
       "requires": {
-        "has-flag": "1.0.0"
+        "has-flag": "^1.0.0"
       }
     },
     "symbol-tree": {
@@ -1072,7 +1072,7 @@
       "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
       "dev": true,
       "requires": {
-        "punycode": "1.4.1"
+        "punycode": "^1.4.1"
       }
     },
     "tr46": {
@@ -1087,7 +1087,7 @@
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
       "requires": {
-        "safe-buffer": "5.1.1"
+        "safe-buffer": "^5.0.1"
       }
     },
     "tweetnacl": {
@@ -1103,7 +1103,7 @@
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
       "dev": true,
       "requires": {
-        "prelude-ls": "1.1.2"
+        "prelude-ls": "~1.1.2"
       }
     },
     "type-detect": {
@@ -1148,9 +1148,9 @@
       "integrity": "sha1-X8gnm5PXVIO5ztiyYjmFSEehhXg=",
       "dev": true,
       "requires": {
-        "lodash.sortby": "4.7.0",
-        "tr46": "0.0.3",
-        "webidl-conversions": "4.0.1"
+        "lodash.sortby": "^4.7.0",
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^4.0.1"
       }
     },
     "wordwrap": {
diff --git a/test/.DS_Store b/test/.DS_Store
new file mode 100644
index 000000000..5d7ed14f5
Binary files /dev/null and b/test/.DS_Store differ
diff --git a/test/tictactoeTest.js b/test/tictactoeTest.js
index 9c5f90b61..693a99294 100644
--- a/test/tictactoeTest.js
+++ b/test/tictactoeTest.js
@@ -114,33 +114,33 @@ describe('tictactoe.js', () => {
 
     it('returns true when a player wins horizontally', () => {
       populateBoard(['X', 'X', 'X', '', '', '', 'O', 'O', '']);
-      //  X | X | X 
+      //  X | X | X
       // -----------
-      //    |   |   
+      //    |   |
       // -----------
-      //  O | O |   
+      //  O | O |
 
       expect(window.checkWinner()).to.be.true;
     });
 
     it('returns true when a player wins diagonally', () => {
       populateBoard(['X', 'X', 'O', '', 'O', '', 'O', 'X', '']);
-      //  X | X | O 
+      //  X | X | O
       // -----------
-      //    | O |   
+      //    | O |
       // -----------
-      //  O | X |   
+      //  O | X |
 
       expect(window.checkWinner()).to.be.true;
     });
 
     it('returns true when a player wins vertically', () => {
       populateBoard(['O', '', 'X', '', 'O', 'X', 'O', '', 'X']);
-      //  O |   | X 
+      //  O |   | X
       // -----------
-      //    | O | X 
+      //    | O | X
       // -----------
-      //  O |   | X 
+      //  O |   | X
 
       expect(window.checkWinner()).to.be.true;
     });
@@ -149,11 +149,11 @@ describe('tictactoe.js', () => {
       expect(window.checkWinner()).to.equal(false);
 
       populateBoard(['X', 'O', 'X', 'X', 'O', 'X', 'O', 'X', 'O']);
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  O | X | O 
+      //  O | X | O
 
       expect(window.checkWinner()).to.equal(false);
     });
@@ -162,11 +162,11 @@ describe('tictactoe.js', () => {
       const spy = sandbox.stub(window, 'setMessage');
 
       populateBoard(['', '', '', 'X', 'X', 'X', 'O', 'O', '']);
-      //    |   |   
+      //    |   |
       // -----------
-      //  X | X | X 
+      //  X | X | X
       // -----------
-      //  O | O |   
+      //  O | O |
 
       window.checkWinner();
 
@@ -177,11 +177,11 @@ describe('tictactoe.js', () => {
       const spy = sandbox.stub(window, 'setMessage');
 
       populateBoard(['O', '', '', 'X', 'O', 'X', 'X', '', 'O']);
-      //  O |   |   
+      //  O |   |
       // -----------
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  X |   | O 
+      //  X |   | O
 
       window.checkWinner();
 
@@ -229,11 +229,11 @@ describe('tictactoe.js', () => {
       const spy = sandbox.spy(window, 'setMessage');
 
       populateBoard(['X', 'O', 'X', 'X', 'O', 'X', 'O', '', 'O']);
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  O |   | O 
+      //  O |   | O
 
       window.turn = 8;
       window.doTurn(squares[7]);
@@ -245,11 +245,11 @@ describe('tictactoe.js', () => {
       sinon.useFakeXMLHttpRequest();
 
       populateBoard(['X', 'X', 'O', 'X', 'O', 'X', '', 'O', 'O']);
-      //  X | X | O 
+      //  X | X | O
       // -----------
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //    | O | O 
+      //    | O | O
 
       window.turn = 8;
       window.doTurn(squares[6]);
@@ -313,11 +313,11 @@ describe('Gameplay', () => {
   it('Users cannot play any turns once a game is won or tied', () => {
     populateBoard(['X', 'X', 'X', '', '', '', 'O', 'O', '']);
     window.turn = 5;
-    //  X | X | X 
+    //  X | X | X
     // -----------
-    //    |   |   
+    //    |   |
     // -----------
-    //  O | O |   
+    //  O | O |
 
     squares[4].click();
 
@@ -329,11 +329,11 @@ describe('Gameplay', () => {
     sinon.useFakeXMLHttpRequest();
 
     populateBoard(['X', 'O', 'X', 'X', 'O', 'X', 'O', '', 'O']);
-    //  X | O | X 
+    //  X | O | X
     // -----------
-    //  X | O | X 
+    //  X | O | X
     // -----------
-    //  O |   | O 
+    //  O |   | O
 
     window.turn = 8;
     window.doTurn(squares[7]);
@@ -578,11 +578,11 @@ describe('AJAX interactions with the Rails API', () => {
 
     it('auto-saves tie games', () => {
       populateBoard(['X', 'O', 'X', 'X', 'O', 'X', 'O', '', 'O']);
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  X | O | X 
+      //  X | O | X
       // -----------
-      //  O |   | O 
+      //  O |   | O
 
       window.turn = 8;
       window.doTurn(squares[7]);
@@ -594,11 +594,11 @@ describe('AJAX interactions with the Rails API', () => {
     it('auto-saves won games', () => {
       populateBoard(['X', 'X', '', '', '', '', 'O', 'O', '']);
       window.turn = 4;
-      //  X | X |   
+      //  X | X |
       // -----------
-      //    |   |   
+      //    |   |
       // -----------
-      //  O | O |   
+      //  O | O |
 
       squares[2].click();
 
@@ -692,4 +692,4 @@ describe('AJAX interactions with the Rails API', () => {
       expect(requests[2].url).to.equal('/games/1');
     });
   });
-});
\ No newline at end of file
+});