Ada-C6 · wordkarin · 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,28 @@
+#game, #game-list {
+  max-width: 600px;
+}
+
+h1 {
+  text-align: center;
+}
+
+#board-display {
+  width: 50%;
+  list-style: none;
+}
+
+.board-square {
+  height: 100px;
+  width: 100px;
+  background-color: pink;
+  padding: 5px;
+  border: 1px solid white;
+  line-height: 100px;
+  text-align: center;
+  font-size: 4em;
+  color: white;
+}
+
+.end-of-game {
+  display: none;
+}
diff --git a/build/index.html b/build/index.html
@@ -3,8 +3,53 @@
   <head>
     <title>Tic-Tac-Toe</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
+    <link rel="stylesheet" href="css/app.css">
   </head>
+
   <body>
     <script src="/app.bundle.js" charset="utf-8"></script>
+    <article id="game">
+
+      <header>
+        <h1>Tic Tac Toe with Backbone</h1>
+      </header>
+
+      <section class="end-of-game" class="row small-centered">
+        <div class="small-8 columns">
+          <p id="win-banner"></p>
+        </div>
+        <div class="small-4 columns">
+          <button class="button" type="button" id="play-again" onClick="window.location.reload()">Play Again</button>
+        </div>
+      </section>
+
+      <section class="board">
+        <ul class="row small-up-3 small-centered" id="board-display">
+          <li class="column board-square" id="0"></li>
+          <li class="column board-square" id="1"></li>
+          <li class="column board-square" id="2"></li>
+          <li class="column board-square" id="3"></li>
+          <li class="column board-square" id="4"></li>
+          <li class="column board-square" id="5"></li>
+          <li class="column board-square" id="6"></li>
+          <li class="column board-square" id="7"></li>
+          <li class="column board-square" id="8"></li>
+        </ul>
+      </section>
+
+    </article>
+    <article id="game-list">
+      <section class="row">
+        <div class="small-3 small-centered columns">
+          <button class="button" type="button" id="show-all-games">Show games</button></div>
+      </section>
+      <section class="row">
+        <div class="small-10 small-centered columns">
+          <table id="prev-games">
+          </table>
+        </div>
+      </section>
+    </article>
   </body>
 </html>
diff --git a/spec/board.spec.js b/spec/board.spec.js
@@ -0,0 +1,58 @@
+import Board from 'app/models/board';
+
+describe('Board', function(){
+  describe('constructor', function(){
+    it('should make a positions array of length 9', function(){
+      var board1 = new Board();
+      expect(board1.positions instanceof Array).toBeTruthy();
+
+      expect(board1.positions[0]).toEqual(" ");
+
+      expect(board1.positions.length).toEqual(9);
+    });
+  });
+
+  describe('validPlay', function(){
+    var board2 = new Board();
+    it('should return true if position is available', function() {
+      expect(board2.validPlay(1)).toBeTruthy();
+
+      expect(board2.validPlay(0)).toBeTruthy();
+
+      expect(board2.validPlay(8)).toBeTruthy();
+    });
+
+    it('should return false if position is unavailable', function(){
+      expect(board2.validPlay(2)).toBeTruthy();
+
+      board2.markPlay('X', 2);
+
+      expect(board2.validPlay(2)).toBeFalsy();
+    });
+
+    it('should throw an error if position is not an integer', function(){
+      expect(function() {
+        board2.validPlay("cat");
+      }).toThrow(new Error('Input must be an integer between 0 and 8'));
+    });
+
+    it('will return false if position is not in the positions array', function(){
+      expect(board2.validPlay(9)).toBeFalsy();
+    });
+  });
+
+  describe('markPlay', function() {
+    var board2 = new Board();
+    it('should mark the board with the play for that player', function(){
+      expect(board2.markPlay('X', 1)).toEqual(1);
+
+      expect(board2.positions[1]).toEqual('X');
+    });
+
+    it('should throw an error if 2 arguments are not passed to it', function(){
+      expect(function() {
+        board2.markPlay(2);
+      }).toThrow(new Error('Wrong number of arguments'));
+    });
+  });
+});
diff --git a/spec/game.spec.js b/spec/game.spec.js
@@ -0,0 +1,179 @@
+import Game from 'app/models/game';
+import Board from 'app/models/board';
+
+describe('Game', function(){
+  describe('constructor', function() {
+    it('should make a new game', function(){
+      var game1 = new Game();
+      expect(game1 instanceof Game).toBeTruthy();
+
+      expect(game1.get("player1")).toEqual("X");
+
+      expect(game1.get("player2")).toEqual("O");
+
+      expect(game1.board instanceof Board).toBeTruthy();
+
+      expect(game1.turn).toEqual(game1.get("player1"));
+    });
+  });
+
+  describe('toggleTurn', function() {
+    var game2 = new Game();
+    it('should switch to player2 after player1', function() {
+      expect(game2.toggleTurn()).toEqual(game2.get("player2"));
+    });
+  });
+
+  describe('gameOver', function(){
+    var game3 = new Game();
+    game3.board.positions = ["O","X","X","X","X","O","O","O","X"];
+    it('should return true if all positions are filled', function(){
+      expect(game3.board.positions.length).toEqual(9);
+
+      expect(game3.gameOver()).toBeTruthy();
+    });
+
+    it('should return false if any positions are empty string', function(){
+      game3.board.positions[1] = " ";
+
+      expect(game3.gameOver()).toBeFalsy();
+    });
+  });
+
+  describe('winHorizontal', function(){
+    var game4 = new Game();
+    it('should return false if matches are empty strings', function(){
+      expect(game4.winHorizontal()).toBeFalsy();
+    });
+
+    it('should return true if there is a horizontal win in the first row', function(){
+      game4.board.positions = ["X","X","X","O"," ","O","O","O","X"];
+      expect(game4.winHorizontal()).toBeTruthy();
+      expect(game4.get('winner')).toEqual(game4.get("player1"));
+    });
+
+    it('should return true if there is a horizontal win in the second row', function(){
+      game4.board.positions = ["X","X"," ","O","O","O","X"," ","X"];
+      game4.turn = game4.get("player2");
+      expect(game4.winHorizontal()).toBeTruthy();
+      expect(game4.get('winner')).toEqual(game4.get("player2"));
+    });
+
+    it('should return true if there is a horizontal win in the third row', function(){
+      game4.board.positions = ["X","X","O","O"," ","O","X","X","X"];
+      game4.turn = game4.get("player1");
+      expect(game4.winHorizontal()).toBeTruthy();
+      expect(game4.get('winner')).toEqual(game4.get("player1"));
+    });
+
+    it('should return false if there is no horizontal win yet', function (){
+      game4.board.positions = ["X"," "," ","O"," "," "," "," "," "];
+      expect(game4.winHorizontal()).toBeFalsy();
+    });
+  });
+
+  describe('winVertical', function() {
+    var game5 = new Game();
+    it('should return false if matches are empty strings', function(){
+      expect(game5.winVertical()).toBeFalsy();
+    });
+
+    it('should return true if there is a vertical win in the first column', function(){
+      game5.board.positions = ["X"," ","X","X"," ","O","X","O","X"];
+      game5.turn = game5.get("player1");
+      expect(game5.winVertical()).toBeTruthy();
+      expect(game5.get('winner')).toEqual(game5.get("player1"));
+    });
+
+    it('should return true if there is a vertical win in the second column', function(){
+      game5.board.positions = [" ","X"," ","O","X","O","O","X"," "];
+      game5.turn = game5.get("player1");
+      expect(game5.winVertical()).toBeTruthy();
+      expect(game5.get('winner')).toEqual(game5.get("player1"));
+    });
+
+    it('should return true if there is a vertical win in the third column', function(){
+      game5.board.positions = [" "," ","X","O"," ","X","O","O","X"];
+      game5.turn = game5.get("player1");
+      expect(game5.winVertical()).toBeTruthy();
+      expect(game5.get('winner')).toEqual(game5.get("player1"));
+    });
+
+    it('should return false if there is no vertical win yet', function (){
+      game5.board.positions = ["X"," "," ","O"," "," "," "," "," "];
+      expect(game5.winVertical()).toBeFalsy();
+    });
+  });
+
+  describe('winDiagonal', function(){
+    var game5 = new Game();
+    it('should return false if matches are empty strings', function(){
+      expect(game5.winDiagonal()).toBeFalsy();
+    });
+
+    it('should return true if there is a diagonal win left to right', function(){
+      game5.board.positions = ["X"," ","O","X","X","O","X","O","X"];
+      game5.turn = game5.get("player1");
+      expect(game5.winDiagonal()).toBeTruthy();
+      expect(game5.get('winner')).toEqual(game5.get("player1"));
+    });
+
+    it('should return true if there is a diagonal win right to left', function(){
+      game5.board.positions = [" ","X","O","O","O","X","O","X"," "];
+      game5.turn = game5.get("player2");
+      expect(game5.winDiagonal()).toBeTruthy();
+      expect(game5.get('winner')).toEqual(game5.get("player2"));
+    });
+
+    it('should return false if there is no diagonal win yet', function (){
+      game5.board.positions = ["X"," "," ","O"," "," "," "," "," "];
+      expect(game5.winDiagonal()).toBeFalsy();
+    });
+  });
+
+  describe('gameWin', function(){
+    var game6 = new Game();
+    it('should return false at game start', function(){
+      expect(game6.gameWin()).toBeFalsy();
+    });
+
+    it('should return true if a win in any direction', function(){
+      game6.board.positions = ["X","X","O","O"," ","O","X","X","X"];
+      expect(game6.gameWin()).toBeTruthy();
+
+      game6.board.positions = [" "," ","X","O"," ","X","O","O","X"];
+      expect(game6.gameWin()).toBeTruthy();
+
+      game6.board.positions = [" ","X","O","O","O","X","O","X"," "];
+      expect(game6.gameWin()).toBeTruthy();
+    });
+  });
+
+  describe('takeTurn', function(){
+    var game = new Game();
+
+    it('should throw an error if the position is not valid', function(){
+      game.board.positions[0] = "X";
+      expect(function(){
+        game.takeTurn(0);}).toThrow(new Error('that position is already taken'));
+    });
+
+    it('should return the winner if someone won', function(){
+      game.board.positions = [" "," "," ","O"," ","X","O","O","X"];
+      expect(game.takeTurn(2)).toEqual(game.get("player1"));
+    });
+
+    it('should return gameOver if no one wins', function(){
+      game.board.positions = ["O","X","X","X","X","O","O","O"," "];
+      expect(game.takeTurn(8)).toEqual("gameOver");
+    });
+
+    it('should toggle the turn if nobody won and game is not over', function(){
+      game.board.positions = ["X"," "," ","O"," "," "," "," "," "];
+      expect(game.turn).toEqual(game.get("player1"));
+      game.takeTurn(2);
+      expect(game.board.positions).toEqual(["X"," ","X","O"," "," "," "," "," "]);
+      expect(game.turn).toEqual(game.get("player2"));
+    });
+  });
+});
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+import Game from 'app/models/game';
+import Games from 'app/collections/games';
+import GamesView from 'app/views/games_view';
+// import Board from 'app/models/board';
+// import BoardView from 'app/views/board_view';
+import GameView from 'app/views/game_view';
+
+$(document).ready(function(){
+
+  var games = new Games();
+  var gameListView = new GamesView({
+    el: $('body'), //this will be something else later.
+    model: games
+  });
+
+  games.fetch();
+  console.log(games);
+
+});
diff --git a/src/app/collections/games.js b/src/app/collections/games.js
@@ -0,0 +1,14 @@
+//this is the collection of games, specifically for interacting with the API
+import Backbone from 'backbone';
+import Game from 'app/models/game';
+
+var Games = Backbone.Collection.extend({
+  model: Game,
+  url: 'http://localhost:3000/api/v1/games',
+  parse: function(data) {
+    return data;
+  }
+
+});
+
+export default Games;
diff --git a/src/app/models/board.js b/src/app/models/board.js
@@ -0,0 +1,34 @@
+import Backbone from 'backbone';
+
+const Board = Backbone.Model.extend({
+  initialize: function(){
+    this.positions = [];
+    for(var i = 0; i < 9; i++){
+      this.positions.push(" ");
+    }
+  },
+
+  validPlay: function (position) {
+    if (!(Number.isInteger(position))) {
+      throw new Error('Input must be an integer between 0 and 8');
+    } else if (this.positions[position] == " ") {
+      return true;
+    } else {
+      return false;
+    }
+  },
+
+  markPlay: function (mark, position) {
+    if(position === undefined) {
+      throw new Error('Wrong number of arguments');
+    } else if(this.validPlay(position)) {
+      this.positions[position] = mark;
+      return position;
+    } else {
+      throw new Error('that position is already taken');
+    }
+  }
+
+});
+
+export default Board;