Ada-C6 · LaurenSky · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016
diff --git a/build/css/app.css b/build/css/app.css
@@ -0,0 +1,122 @@
+
+body {
+  background-color: #1B2321;
+  color: black;
+  font-family: 'Shadows Into Light', cursive;
+}
+
+h1 {
+  font-size: 9vw;
+  text-align: center;
+  color: white;
+  font-family: 'Shadows Into Light', cursive;
+  margin-top: 2%;
+  margin-left: 1%;
+}
+
+h3, h2 {
+  font-family: 'Shadows Into Light', cursive;
+  color: white;
+}
+
+#gameboard-view {
+  width: 35%;
+  text-align: center;
+}
+
+#player-view {
+  border: 1px solid white;
+  width: 24vw;
+  padding: 1%;
+  border-radius: 15px;
+  margin: 1%;
+}
+
+#message-box {
+  color: black;
+  background-color: transparent;
+  border-radius: 15px;
+  padding: 4%;
+  margin-top: 4%;
+}
+
+#gameboard-view-box {
+  border: 0 3% 10% 4%;
+}
+
+#all-game-view {
+  padding: 0 3% 3% 9%;
+}
+
+table#gameboard-view {
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-style: hidden;
+}
+
+table#gameboard-view tr:nth-of-type(even) {
+  background-color: transparent !important;
+}
+
+table#gameboard-view td.value-cell {
+  border: 1px solid black;
+  font-size: 6vw;
+  width: 12vw;
+  height: 12vw;
+  padding: 0;
+  border-radius: 15px;
+}
+
+table#all-games th {
+  background-color: #1B2321;
+  font-size: 110%;
+}
+
+table#all-games td {
+  background-color: #1B2321;
+  width: 17vw;
+  padding: 0;
+}
+
+table#all-games {
+  color: white;
+  width: 17vw;
+  /*font-size: 140%;*/
+  text-align: center;
+
+}
+
+.button {
+  border-radius: 15px;
+  font-size: 150%;
+  /*font-size: 25px;*/
+}
+
+.delete-button {
+  border-radius: 15px;
+  font-size: 70%;
+  margin-right: 1%;
+}
+
+.inline {
+  display: inline;
+}
+
+.x-show {
+  display: inline;
+}
+
+.o-show {
+  display: none;
+}
+
+.start-game-button {
+  margin-left: 31%;
+  font-size: 3vw;
+}
+
+#main-area {
+  /*margin-left: 16%;*/
+  margin-left: 2%;
+  padding-top: 3%;
+}
diff --git a/build/css/foundation.css b/build/css/foundation.css
diff --git a/build/index.html b/build/index.html
@@ -3,8 +3,63 @@
   <head>
     <title>Tic-Tac-Toe</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="css/foundation.css">
+    <link rel="stylesheet" href="/css/app.css">
+    <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
   </head>
   <body>
     <script src="/app.bundle.js" charset="utf-8"></script>
+    <section id ='game-view'>
+      <div class="row">
+        <h1 class='small-11 columns'>Tic-Tac-Toe</h1>
+      </div>
+
+      <div class="row">
+          <button type="button" name="start-game-button" class='start-game-button button small-4 columns'>Start Game!</button>
+      </div>
+
+      <div class="row" id='main-area'>
+        <section id ='player-view' class='small-6 medium-1 columns'>
+          <h3 class='inline'><strong>Current Player: </strong></h3>
+          <h2 id='player1' class='x-show inline'>X</h2>
+          <h2 id='player2' class='o-show inline'>O</h2>
+          <h3 id='message-box'></h3>
+        </section>
+
+        <section id='gameboard-view-box' class='small-6 medium-4 columns'>
+          <table id='gameboard-view'>
+            <tr id ='top'>
+              <td id ='00' class='value-cell'></td>
+              <td id ='01' class='value-cell'></td>
+              <td id ='02' class='value-cell'></td>
+            </tr>
+
+            <tr id='middle'>
+              <td id ='10' class='value-cell'></td>
+              <td id ='11' class='value-cell'></td>
+              <td id ='12' class='value-cell'></td>
+            </tr>
+
+            <tr id='bottom'>
+              <td id ='20' class='value-cell'></td>
+              <td id ='21' class='value-cell'></td>
+              <td id ='22' class='value-cell'></td>
+            </tr>
+          </table>
+        </section>
+
+        <section id ='all-game-view' class='small-10 medium-4 columns'>
+          <!-- <h3><strong>Past Games:</strong></h3>
+          <table id=all-games>
+            <tr>
+              <th>Game ID</th>
+              <th>Outcome</th>
+              <th> </th>
+            </tr>
+          </table> -->
+        </section>
+      </div>
+
+    </section>
   </body>
 </html>
diff --git a/spec/game.spec.js b/spec/game.spec.js
@@ -0,0 +1,269 @@
+import Game from 'app/models/game';
+import GameBoard from 'app/models/game_board';
+
+describe('Game', function() {
+  var testGame = new Game();
+  var testBoard = new GameBoard();
+
+  it("should create a gameBoard when initialized", function() {
+    expect(testGame.board).toBeDefined();
+    // expect(testGame.board).toEqual(testBoard.board);
+    expect(testGame.board.gameBoard).toEqual(jasmine.any(Array));
+  });
+
+  it('should initialize the correct Player for player1', function() {
+    expect(testGame.get('player1').marker).toEqual("X");
+    expect(testGame.get('player1').turnId).toEqual(true);
+  });
+
+  it('should initialize the correct Player for player2', function() {
+    expect(testGame.get('player2').marker).toEqual("O");
+    expect(testGame.get('player2').turnId).toEqual(false);
+  });
+
+  describe('whichPlayer', function() {
+    var testGame2 = new Game();
+    testGame2.gameCounter = false;
+
+    it('should return Player1 for a new game because counter equals true', function(){
+      expect(testGame.whichPlayer()).toEqual(testGame.get('player1'));
+    });
+
+    it('should return Player2 if gameCounter equals false', function(){
+      expect(testGame2.whichPlayer()).toEqual(testGame.get('player2'));
+    });
+  });
+
+  describe('valid', function() {
+    var testGame3 = new Game();
+    console.log(">>>>>>");
+    console.log(testGame3.board.gameBoard[0][2]);
+    testGame3.board.gameBoard[0][2] = "X";
+    console.log(testGame3.board.gameBoard[0][2]);
+
+
+    it('should handle an invalid location entry appropriately', function() {
+      expect(testGame3.valid(4,4)).toEqual(false);
+    });
+
+    it('should return true if a location is unoccupied(still equal to null)', function() {
+      expect(testGame3.valid(0,0)).toEqual(true);
+    });
+
+    it('should return false if a location is occupied by either an X or O', function() {
+      expect(testGame3.valid(0,2)).toEqual(false);
+    });
+  });
+
+  describe('playTurn', function() {
+    var testGame4 = new Game();
+
+    it('should add a player1 marker (X) if the space is open', function() {
+      expect(testGame4.board.gameBoard[0][0]).toEqual(" ");
+      expect(testGame4.gameCounter).toEqual(true);
+      expect(testGame4.turnCounter).toEqual(0);
+
+
+      testGame4.playTurn(0,0);
+      expect(testGame4.gameCounter).toEqual(false);
+      expect(testGame4.turnCounter).toEqual(1);
+      expect(testGame4.board.gameBoard[0][0]).toEqual('X');
+    });
+
+    it('should not add a players marker if the space is taken', function() {
+      expect(testGame4.board.gameBoard[0][0]).toEqual('X');
+      expect(testGame4.gameCounter).toEqual(false);
+
+      testGame4.playTurn(0,0);
+      expect(testGame4.gameCounter).toEqual(false);
+      expect(testGame4.turnCounter).toEqual(1);
+      expect(testGame4.board.gameBoard[0][0]).toEqual('X');
+    });
+
+    it('should add player2 marker (O) if the space is open', function() {
+      expect(testGame4.board.gameBoard[2][2]).toEqual(" ");
+      expect(testGame4.gameCounter).toEqual(false);
+      // expect(testGame4.turnCounter).toEqual(1);
+      console.log(">>>>>>>>>>>>>>>>" + testGame4.turnCounter);
+
+      testGame4.playTurn(2,2);
+      console.log(">>>>>>>>>>>>>>>>" + testGame4.turnCounter);
+      expect(testGame4.gameCounter).toEqual(true);
+      expect(testGame4.turnCounter).toEqual(2);
+      expect(testGame4.board.gameBoard[2][2]).toEqual('O');
+    });
+
+    var testWinner = new Game();
+    testWinner.turnCounter = 4;
+    testWinner.board.gameBoard[0][0] = "X";
+    testWinner.board.gameBoard[0][1] = "X";
+
+    it('should return a winner if someone has won after their turn', function() {
+      // console.log("********" + testWinner.winner);
+      // console.log(testWinner.board.gameboard;
+      testWinner.playTurn(0,2);
+      expect(testWinner.winner).toEqual(testWinner.get('player1'));
+      // console.log("********" + testWinner.winner);
+    });
+
+    it('should return a Game Over if game is already won and you try to play a turn', function() {
+      expect(testWinner.playTurn(2,2)).toEqual("Game is Over " + testWinner.winner.name + " won.");
+    });
+  });
+});
+
+describe('GameBoard', function() {
+  describe('hasWon', function() {
+    //Rows
+    var testRow0 = new Game();
+    testRow0.board.gameBoard[0][0] = "X";
+    testRow0.board.gameBoard[0][1] = "X";
+    testRow0.board.gameBoard[0][2] = "X";
+
+    it('should return true if a player has won Row0', function() {
+      expect(testRow0.board.hasWon()).toEqual(true);
+    });
+
+    var testRow1 = new Game();
+    testRow1.board.gameBoard[1][0] = "X";
+    testRow1.board.gameBoard[1][1] = "X";
+    testRow1.board.gameBoard[1][2] = "X";
+
+    it('should return true if a player has won Row1', function() {
+      expect(testRow1.board.hasWon()).toEqual(true);
+    });
+
+    var testRow2 = new Game();
+    testRow2.board.gameBoard[2][0] = "X";
+    testRow2.board.gameBoard[2][1] = "X";
+    testRow2.board.gameBoard[2][2] = "X";
+
+    it('should return true if a player has won Row2', function() {
+      expect(testRow2.board.hasWon()).toEqual(true);
+    });
+
+    //Columns
+    var testColumn0 = new Game();
+    testColumn0.board.gameBoard[0][0] = "X";
+    testColumn0.board.gameBoard[1][0] = "X";
+    testColumn0.board.gameBoard[2][0] = "X";
+
+    it('should return true if a player has won Column0', function() {
+      expect(testColumn0.board.hasWon()).toEqual(true);
+    });
+
+    var testColumn1 = new Game();
+    testColumn1.board.gameBoard[0][1] = "X";
+    testColumn1.board.gameBoard[1][1] = "X";
+    testColumn1.board.gameBoard[2][1] = "X";
+
+    it('should return true if a player has won Column1', function() {
+      expect(testColumn1.board.hasWon()).toEqual(true);
+    });
+
+    var testColumn2 = new Game();
+    testColumn2.board.gameBoard[0][2] = "X";
+    testColumn2.board.gameBoard[1][2] = "X";
+    testColumn2.board.gameBoard[2][2] = "X";
+
+    it('should return true if a player has won Column2', function() {
+      expect(testColumn2.board.hasWon()).toEqual(true);
+    });
+
+    //>>>>
+    var test3Nulls = new Game();
+    test3Nulls.playTurn(1,2);
+    test3Nulls.playTurn(0,0);
+    test3Nulls.playTurn(2,0);
+    test3Nulls.playTurn(1,2);
+    test3Nulls.playTurn(0,2);
+    test3Nulls.playTurn(2,2);
+    it('should return false if a player has not won but there have been 5 rounds and there are 3 nulls in a row', function() {
+      expect(test3Nulls.winner).toEqual(null);
+      expect(test3Nulls.board.hasWon()).toEqual(false);
+    });
+
+    //Diagonals
+    var testDiag1 = new Game();
+    testDiag1.board.gameBoard[0][0] = "X";
+    testDiag1.board.gameBoard[1][1] = "X";
+    testDiag1.board.gameBoard[2][2] = "X";
+
+    it('should return true if a player has won Diag1', function() {
+      expect(testDiag1.board.hasWon()).toEqual(true);
+    });
+
+    var testDiag2 = new Game();
+    testDiag2.board.gameBoard[0][2] = "X";
+    testDiag2.board.gameBoard[1][1] = "X";
+    testDiag2.board.gameBoard[2][0] = "X";
+
+    it('should return true if a player has won Diag2', function() {
+      expect(testDiag2.board.hasWon()).toEqual(true);
+    });
+
+    //Buggy situation
+    var findBug = new Game();
+    findBug.board.gameBoard[0][0] = "O";
+    findBug.board.gameBoard[0][2] = "O";
+    findBug.board.gameBoard[2][0] = "X";
+    findBug.board.gameBoard[2][2] = "X";
+    findBug.board.gameBoard[1][2] = "X";
+
+    it('should return false when a player hasnt won', function() {
+      expect(findBug.board.hasWon()).toEqual(false);
+    });
+
+    var hasNotWonGame = new Game();
+    hasNotWonGame.board.gameBoard[0][2] = "X";
+    hasNotWonGame.board.gameBoard[1][1] = "X";
+    hasNotWonGame.board.gameBoard[2][0] = "O";
+
+    it("should return false if a player hasn't won", function() {
+      expect(hasNotWonGame.board.hasWon()).toEqual(false);
+    });
+
+    var testReturnsTie = new Game();
+    testReturnsTie.board.gameBoard[0][0] = "X";
+    testReturnsTie.board.gameBoard[0][1] = "X";
+    testReturnsTie.board.gameBoard[0][2] = "O";
+    testReturnsTie.board.gameBoard[1][0] = "O";
+    testReturnsTie.board.gameBoard[1][1] = "X";
+    testReturnsTie.board.gameBoard[1][2] = "X";
+    testReturnsTie.board.gameBoard[2][0] = "X";
+    testReturnsTie.board.gameBoard[2][1] = "O";
+    testReturnsTie.board.gameBoard[2][2] = "O";
+
+    it("should return tie if gameboard is full and no winner", function() {
+      expect(testReturnsTie.board.hasWon()).toEqual("tie");
+    });
+
+  });
+
+  describe('aTie', function() {
+    var testYesATie = new Game();
+    testYesATie.board.gameBoard[0][0] = "X";
+    testYesATie.board.gameBoard[0][1] = "X";
+    testYesATie.board.gameBoard[0][2] = "O";
+    testYesATie.board.gameBoard[1][0] = "O";
+    testYesATie.board.gameBoard[1][1] = "X";
+    testYesATie.board.gameBoard[1][2] = "X";
+    testYesATie.board.gameBoard[2][0] = "X";
+    testYesATie.board.gameBoard[2][1] = "O";
+    testYesATie.board.gameBoard[2][2] = "O";
+
+    it("should return true if no location has a value of null therefor the gameboard is full", function() {
+      expect(testYesATie.board.aTie()).toEqual(true);
+    });
+
+    var testNotATie = new Game();
+    testNotATie.board.gameBoard[0][0] = "X";
+    testNotATie.board.gameBoard[0][1] = "X";
+    testNotATie.board.gameBoard[0][2] = null;
+
+
+    it("should return true if no location has a value of null therefor the gameboard is full", function() {
+      expect(testNotATie.board.aTie()).toEqual(false);
+    });
+  });
+});
diff --git a/src/.keep b/src/.keep
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,24 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+
+import Game from 'app/models/game';
+// import AllGames from 'app/collections/all_games';
+
+import GameView from 'app/views/game_view';
+
+
+
+$(document).ready(function() {
+  var game = new Game({});
+  // var allGames = new AllGames();
+
+  var gameview = new GameView({
+    el: '#game-view',
+    // model: allGames
+    model: game,
+    // completedGames: allGames
+  });
+
+
+  gameview.render();
+});
diff --git a/src/app/collections/all_games.js b/src/app/collections/all_games.js
@@ -0,0 +1,13 @@
+// import Backbone from 'backbone';
+//
+// import Game from 'app/models/game';
+//
+// var AllGames = Backbone.Collection.extend({
+//   model: Game,
+//   url: 'http://localhost:3000/api/v1/games',
+//   parse: function(data){
+//     return data;
+//   }
+// });
+//
+// export default AllGames;
diff --git a/src/app/models/game.js b/src/app/models/game.js
@@ -0,0 +1,124 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+import GameBoard from 'app/models/game_board';
+
+const Game = Backbone.Model.extend({
+  // This model should have the attributes for
+  // a single contact: name, phone number, and email.
+  defaults: {
+    player1: {
+      marker: "X",
+      turnId: true,
+      name: "player 1"
+    },
+    player2: {
+      marker: "O",
+      turnId: false,
+      name: "player 2"
+    },
+  },
+
+  initialize: function(options) {
+    this.board = new GameBoard();
+    this.gameCounter = true;
+    this.turnCounter = 0;
+    this.winner = null;
+    this.outcome = options.outcome;
+  },
+
+  playTurn: function(row, column) {
+    if(this.winner == this.get('player1') || this.winner == this.get('player2') || this.winner === 'draw') {
+      this.trigger('gameover', this);
+      // console.log("Game is Over " + this.winner.name + " won.");
+      return "Game is Over " + this.winner.name + " won.";
+    } else {
+      var player = this.whichPlayer();
+
+      if (this.valid(row, column)) {
+        this.board.gameBoard[row][column] = player.marker;
+
+        // console.log('triggering change event');
+        this.board.trigger('change', this.board, {});
+
+        if (player == this.get('player1')) {
+          this.gameCounter = false;
+          this.turnCounter++;
+        } else {
+          this.gameCounter = true;
+          this.turnCounter++ ;
+        }
+
+        if(this.turnCounter >= 5) {
+          if(this.board.hasWon() === true) {
+            // console.log(player + " you're the Winner!!!");
+            this.winner = player;
+            this.outcome = player.marker;
+            this.trigger('winner', this.winner);
+            return player.name;
+          } else if(this.board.hasWon() === "tie") {
+            this.winner = 'draw';
+            this.outcome = 'draw';
+            this.trigger('catsgame', this, "cats game");
+            // console.log("Cat's Game, it's a tie.");
+            // return "Cat's Game.";
+          }
+        }
+      } else {
+        this.trigger('invalid', this);
+        // console.log("That position is already taken, go Again");
+      }
+
+      // console.log(this.board.gameBoard[0]);
+      // console.log(this.board.gameBoard[1]);
+      // console.log(this.board.gameBoard[2]);
+      // console.log("who's turn: " + this.gameCounter);
+      // console.log("round number: " + this.turnCounter);
+    }
+  },
+
+  whichPlayer: function() {
+    if (this.gameCounter === this.get('player1').turnId) {
+      return this.get('player1');
+    } else {
+      return this.get('player2');
+    }
+  },
+
+  valid: function(row,column) {
+    if((row > 2) || (column > 2)) {
+      // console.log(row + "," + column + " is not a valid location");
+      return false;
+    } else {
+      var locationValue = this.board.gameBoard[row][column];
+      // console.log("in valid, location value = " + locationValue);
+      if (locationValue != 'X' && locationValue != 'O') {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+
+  toJSON: function() {
+    var flattenedBoard = this.board.gameBoard.reduce(function(a, b) {
+      return a.concat(b);
+    }, []);
+
+    var player1 = this.get('player1').name;
+    var player2 = this.get('player2').name;
+    var nowDateTime = new Date();
+
+    var apiData = {
+      board: flattenedBoard,
+      players: [player1, player2],
+      outcome: this.outcome,
+      played_at: nowDateTime
+    };
+
+    console.log(apiData);
+    return apiData;
+  }
+});
+
+// DO NOT REMOVE THIS
+export default Game;
diff --git a/src/app/models/game_board.js b/src/app/models/game_board.js
@@ -0,0 +1,52 @@
+import Backbone from 'backbone';
+// import $ from 'jquery';
+
+const GameBoard = Backbone.Model.extend({
+  initialize: function() {
+    this.gameBoard = [[ " ", " ", " "], [ " ", " ", " "], [ " ", " ", " "]];
+    // this.set('gameBoard', [[ null, null, null], [ null, null, null], [ null, null, null]]);
+  },
+
+  hasWon: function() {
+    // var board = this.gameBoard;
+    var row0 = this.gameBoard[0];
+    var row1 = this.gameBoard[1];
+    var row2 = this.gameBoard[2];
+
+    if ((row0[0] == row0[1]  && row0[1] == row0[2] && row0[2] !== " ") ||
+        (row1[0] == row1[1]  && row1[1] == row1[2] && row1[2] !== " ") ||
+        (row2[0] == row2[1]  && row2[1] == row2[2] && row2[2] !== " ")) {
+      // console.log("Winner in a row");
+      return true;
+    } else if ((row0[0] == row1[0] && row1[0] == row2[0] && row2[0] !== " ") ||
+                (row0[1] == row1[1] && row1[1] == row2[1] && row2[1] !== " ") ||
+                (row0[2] == row1[2] && row1[2] == row2[2] && row2[2] !== " ")) {
+      // console.log("Winner in a column");
+      return true;
+    } else if ((row0[0] == row1[1] && row1[1] == row2[2] && row2[2] !== " ") || (row0[2] == row1[1] && row1[1] == row2[0] && row2[0] !== " ")) {
+        // console.log("Winner in a diagonal");
+        return true;
+    } else {
+      if(this.aTie()){
+        return "tie";
+      } else {
+        return false;
+      }
+    }
+  },
+
+  aTie: function() {
+    var row0 = this.gameBoard[0];
+    var row1 = this.gameBoard[1];
+    var row2 = this.gameBoard[2];
+
+    if((row0.includes(" ")) || (row1.includes(" ")) || (row2.includes(" "))) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+});
+
+// DO NOT REMOVE THIS
+export default GameBoard;
diff --git a/src/app/views/game_view.js b/src/app/views/game_view.js
@@ -0,0 +1,142 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+
+import Game from 'app/models/game';
+import GameBoard from 'app/models/game_board';
+// import AllGames from 'app/collections/all_games';
+
+import PlayerView from 'app/views/player_view';
+import GameBoardView from 'app/views/gameboard_view';
+
+const GameView = Backbone.View.extend({
+
+  initialize: function(options) {
+
+    var gameBoardView = new GameBoardView({
+      el: '#gameboard-view',
+      model: this.model.board
+    });
+
+    var playerView = new PlayerView({
+      el: '#player-view'
+    });
+
+    // console.log("options");
+    // console.log(options);
+    this.gameList = options.completedGames;
+    // console.log("all games");
+    // console.log(this.gameList);
+
+    this.listenTo(gameBoardView, 'selectSpace', this.playTurn);
+    this.listenTo(this.model, 'invalid', this.spaceTaken);
+    this.listenTo(this.model, 'gameover', this.gameOver);
+    this.listenTo(this.model, 'winner', this.stateWinner);
+    this.listenTo(this.model, 'catsgame', this.stateCatsGame);
+    // this.listenTo(this.gameList, 'update', this.updateAllGames);
+
+    gameBoardView.render();
+    playerView.render();
+  },
+
+  render: function() {
+    // this.showAllGames();
+
+    return this;
+  },
+
+  events: {
+    'click .start-game-button': 'startGame',
+    'click .delete-button': 'deleteAGame'
+  },
+
+  startGame: function() {
+    // console.log("Starting a game");
+    location.reload();
+  },
+
+  playTurn: function(event) {
+    // console.log(event);
+    // console.log(event.id);
+    $('#message-box').empty();
+    $('#message-box').css('background-color', 'transparent');
+    var locationClicked = event.id;
+    var value = $(event).html();
+
+    // console.log(value);
+    this.model.playTurn(locationClicked[0], locationClicked[1]);
+
+    if(this.model.gameCounter === true) {
+      $('.x-show').css('display', 'inline');
+      $('.o-show').css('display', 'none');
+    } else {
+      $('.x-show').css('display', 'none');
+      $('.o-show').css('display', 'inline');
+    }
+  },
+
+  spaceTaken: function() {
+    // console.log("in spaceTaken");
+    // alert("That space is taken already, Go Again.");
+    $('#message-box').append("Space's Taken, Go Again.");
+    $('#message-box').css('background-color', '#EA6E6E');
+  },
+
+  gameOver: function() {
+    // console.log("in gameOver");
+    // alert("The Game's already over");
+    $('#message-box').append("Game's Over.");
+    $('#message-box').css('background-color', '#EA6E6E');
+  },
+
+  stateWinner: function (winner) {
+    // console.log("in winner");
+    // console.log(winner);
+    // alert("There's a winner ");
+    $('#message-box').append("Winner: " + winner.name);
+    $('#message-box').css('background-color', '#88D18A');
+
+    // console.log(this.gameList);
+    this.gameList.create(this.model);
+    this.showAllGames();
+  },
+
+  stateCatsGame: function () {
+    // console.log("in winner");
+    // alert("It's a Cat's Game :(");
+    $('#message-box').append("Cat's Game :(");
+    $('#message-box').css('background-color', '#68ABBA');
+
+    this.gameList.create(this.model);
+    $('#all-games').empty();
+    this.showAllGames();
+  },
+
+  showAllGames: function() {
+    // console.log("in update all games");
+    // console.log(this.gameList);
+
+    var self = this;
+    this.gameList.fetch().done(function() {
+      $.each(self.gameList.models, function(index, game){
+        // console.log('game:');
+        // console.log(game);
+        var row = $('<tr></tr>');
+        var id = $('<td>' + game.id + '</td>');
+        // console.log(game.id);
+        var outcome = $('<td>' + game.outcome + '</td>');
+        var button =  $('<td>' + '<input type="button" value="Delete" class="button delete-button"/>' + '</td>');
+
+        row.append(id, outcome, button);
+        $('#all-games').append(row);
+
+      });
+    });
+  },
+
+  deleteAGame: function(gameId) {
+    // console.log("in delete function");
+    // this.gameList.destroy(gameId);
+  }
+});
+
+export default GameView;
diff --git a/src/app/views/gameboard_view.js b/src/app/views/gameboard_view.js
@@ -0,0 +1,55 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+
+import GameBoard from 'app/models/game_board';
+
+var GameBoardView = Backbone.View.extend({
+
+  initialize: function() {
+    this.listenTo(this.model, 'change', this.render);
+  },
+
+  events: {
+    'click td': 'spaceClick'
+  },
+
+  spaceClick: function(event) {
+    this.trigger('selectSpace', event.currentTarget);
+
+    // We return false to tell jQuery not to run any more event handlers.
+    // Otherwise, it would run the 'click' event handler on RolodexView
+    // as well.
+    return false;
+  },
+
+  render: function() {
+    // console.log('in gameBoardView.render');
+    var array = this.model.gameBoard;
+    // console.log(array);
+
+    $('#00').empty();
+    $('#00').append(array[0][0]);
+    $('#01').empty();
+    $('#01').append(array[0][1]);
+    $('#02').empty();
+    $('#02').append(array[0][2]);
+
+    $('#10').empty();
+    $('#10').append(array[1][0]);
+    $('#11').empty();
+    $('#11').append(array[1][1]);
+    $('#12').empty();
+    $('#12').append(array[1][2]);
+
+    $('#20').empty();
+    $('#20').append(array[2][0]);
+    $('#21').empty();
+    $('#21').append(array[2][1]);
+    $('#22').empty();
+    $('#22').append(array[2][2]);
+
+    return this;
+  }
+});
+
+export default GameBoardView;
diff --git a/src/app/views/player_view.js b/src/app/views/player_view.js
@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+
+import Game from 'app/models/game';
+
+var PlayerView = Backbone.View.extend({
+
+  initialize: function() {
+
+  },
+
+  render: function() {
+
+    return this;
+  }
+
+});
+
+export default PlayerView;
diff --git a/src/backup.js b/src/backup.js
@@ -0,0 +1,136 @@
+var Game = function() {
+  this.board = new GameBoard();
+  this.player1 = new Player1();
+  this.player2 = new Player2();
+  this.gameCounter = true;
+  this.turnCounter = 0;
+  this.winner = null;
+  console.log(this.board);
+  // console.log(this.player1);
+  // console.log(this.player2);
+};
+
+Game.prototype.playTurn = function(row, column) {
+  if(this.winner !== null) {
+    console.log("Game is Over " + this.winner.name + " won.");
+    return "Game is Over " + this.winner.name + " won.";
+  } else {
+    // console.log(this.whichPlayer());
+    var player = this.whichPlayer();
+    // console.log(this.valid(row, column));
+    if (this.valid(row, column)) {
+      this.board.gameBoard[row][column] = player.marker;
+
+      if (player == this.player1) {
+        this.gameCounter = false;
+        this.turnCounter++ ;
+      } else {
+        this.gameCounter = true;
+        this.turnCounter++ ;
+      }
+
+      if(this.turnCounter >= 5) {
+        if(this.board.hasWon() === true) {
+          console.log(player + " you're the Winner!!!");
+          this.winner = player;
+          return player.name;
+        } else if(this.board.hasWon() === "tie") {
+          console.log("Cat's Game, it's a tie.");
+          // return "Cat's Game.";
+        }
+      }
+
+    } else {
+      console.log("That position is already taken, go Again");
+    }
+    console.log(this.board);
+    console.log("who's turn: " + this.gameCounter);
+    console.log("round number: " + this.turnCounter);
+  }
+};
+
+Game.prototype.whichPlayer = function() {
+  if (this.gameCounter === true) {
+    return this.player1;
+  } else {
+    return this.player2;
+  }
+};
+
+Game.prototype.valid = function(row,column) {
+  if((row > 2) || (column > 2)) {
+    console.log(row + "," + column + " is not a valid location");
+    return false;
+  } else {
+    var locationValue = this.board.gameBoard[row][column];
+    console.log("in valid, location value = " + locationValue);
+    if (locationValue != 'X' && locationValue != 'O') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+};
+
+var GameBoard = function() {
+  this.gameBoard = [];
+  this.gameBoard[0] = [ null, null, null];
+  this.gameBoard[1] = [ null, null, null];
+  this.gameBoard[2] = [ null, null, null];
+};
+
+GameBoard.prototype.hasWon = function() {
+  // var board = this.gameBoard;
+  var row0 = this.gameBoard[0];
+  var row1 = this.gameBoard[1];
+  var row2 = this.gameBoard[2];
+
+  if ((row0[0] == row0[1]  && row0[1] == row0[2] && row0[2] !== null) ||
+      (row1[0] == row1[1]  && row1[1] == row1[2] && row1[2] !== null) ||
+      (row2[0] == row2[1]  && row2[1] == row2[2] && row2[2] !== null)) {
+    console.log("Winner in a row");
+    return true;
+  } else if ((row0[0] == row1[0] && row1[0] == row2[0] && row2[0] !== null) ||
+              (row0[1] == row1[1] && row1[1] == row2[1] && row2[1] !== null) ||
+              (row0[2] == row1[2] && row1[2] == row2[2] && row2[2] !== null)) {
+    console.log("Winner in a column");
+    return true;
+  } else if ((row0[0] == row1[1] && row1[1] == row2[2] && row2[2] !== null) || (row0[2] == row1[1] && row1[1] == row2[0] && row2[0] !== null)) {
+      console.log("Winner in a diagonal");
+      return true;
+  } else {
+    if(this.aTie()){
+      return "tie";
+    } else {
+      return false;
+    }
+  }
+};
+
+GameBoard.prototype.aTie = function() {
+  var row0 = this.gameBoard[0];
+  var row1 = this.gameBoard[1];
+  var row2 = this.gameBoard[2];
+
+  if((row0.includes(null)) || (row1.includes(null)) || (row2.includes(null))) {
+    return false;
+  } else {
+    return true;
+  }
+};
+
+var Player1 = function() {
+  this.marker = "X";
+  this.turnCounter = true;
+  this.name = "player1";
+};
+
+var Player2 = function() {
+  this.marker = "O";
+  this.turnCounter = false;
+  this.name = "player2";
+};
+
+
+// DO NOT REMOVE THIS
+export default Game;