Ada-C6 · jchung722 · Dec 12, 2016 · Dec 12, 2016 · Dec 13, 2016 · Dec 13, 2016
diff --git a/build/css/app.css b/build/css/app.css
@@ -0,0 +1,84 @@
+body {
+  font-family: 'Mallanna', sans-serif;
+}
+main div {
+  background-color: #0abab5;
+  height: 140px;
+  width: 140px;
+  margin: 1% 1% 1% 1%;
+  padding: 1% 1% 1% 1%;
+  font-size: 75px;
+  display: inline-block;
+  vertical-align: top;
+  transition-duration: 0.4s;
+}
+
+main div:hover {
+  opacity: 0.5;
+}
+
+#game, #score, td, h1, main div {
+  text-align: center;
+}
+
+#score {
+  width: 100%;
+}
+
+#score div{
+  font-size: 15px;
+  display: inline-block;
+  margin: 0 30px 0 30px;
+}
+
+#board, h1, h3 {
+  margin: auto;
+}
+
+#board {
+  height: 500px;
+  width: 500px;
+}
+
+h1 {
+  font-size: 75px;
+}
+
+h3 {
+  font-size: 25px;
+}
+
+th, td {
+  font-size: 20px;
+}
+
+button {
+  background-color: white;
+  font-family: 'Mallanna', sans-serif;
+  font-size: 20px;
+  border: 3px solid black;
+  margin: 0 5px 10px 5px;
+  transition-duration: 0.4s;
+  width: 125px;
+}
+
+button:hover {
+  background-color: black;
+  color: white;
+}
+
+#clear {
+  border: 3px solid #99ffcd;
+}
+
+#clear:hover {
+  background-color: #99ffcd;
+}
+
+.win {
+  color: green;
+}
+
+.lose {
+  color: red;
+}
diff --git a/build/index.html b/build/index.html
@@ -3,8 +3,37 @@
   <head>
     <title>Tic-Tac-Toe</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="css/app.css">
+    <link href="https://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
   </head>
   <body>
+    <h1>Tic-Tac-Toe</h1>
+    <section id="game">
+      <div id="score"></div>
+      <button type="button" id="rules">Rules</button>
+      <button type="button" id="clear">New Round</button>
+      <button type="button" id="save">Save Game</button>
+      <main id="board"></main>
+    </section>
+
+    <script type="text/template" id="tmpl-player-details">
+      <h3><%- name %> : <%- letter %></h3>
+      <!-- <button class="edit button">Edit</button> -->
+      <table>
+        <tr>
+          <th>Win</th>
+          <th>Lose</th>
+          <th>Draw</th>
+        </tr>
+        <tr>
+          <td class="win"><%- scorecard.win %></td>
+          <td class="lose"><%- scorecard.lose %></td>
+          <td><%- scorecard.draw %></td>
+        </tr>
+      </table>
+    </script>
+
     <script src="/app.bundle.js" charset="utf-8"></script>
+
   </body>
 </html>
diff --git a/spec/game.spec.js b/spec/game.spec.js
@@ -0,0 +1,149 @@
+import Game from "app/models/game";
+
+describe('Game', function() {
+
+  var testGame;
+  beforeEach(function() {
+    testGame = new Game("elle", "jessica");
+  });
+
+
+  describe('Game', function() {
+    it('should return player name', function() {
+      expect(testGame.player1.get("name")).toEqual("ELLE");
+      expect(testGame.player2.get("name")).toEqual("JESSICA");
+    });
+
+    it('should assign letter X to player 1 and letter O to player 2', function() {
+      expect(testGame.player1.get("letter")).toEqual("X");
+      expect(testGame.player2.get("letter")).toEqual("O");
+      expect(testGame.player1.get("letter")).not.toEqual("O");
+      expect(testGame.player2.get("letter")).not.toEqual("X");
+    });
+
+  });
+
+
+  describe('winCheck', function() {
+    it('should return true if there is a winner', function() {
+      expect(testGame.winCheck(["X", "X", "X", " ", " ", " ", " ", " ", " "])).toEqual(true);
+    });
+
+    it('should return false with an empty board', function() {
+      expect(testGame.winCheck([" ", " ", " ", " ", " ", " ", " ", " ", " "])).toEqual(false);
+    });
+
+    it('should return false if there is not a winner yet', function() {
+      expect(testGame.winCheck(["X", "X", " ", "O", "O", " ", " ", " ", " "])).toEqual(false);
+    });
+
+    it('should return false when the game ends in draw', function() {
+      expect(testGame.winCheck(["X", "X", "O", "O", "O", "X", "X", "O", "X"])).toEqual(false);
+    });
+  }); // describe winCheck end
+
+
+  describe('play', function() {
+    it('should return move in board', function() {
+      expect(testGame.play(2)).toEqual([" ", " ", "X", " ", " ", " ", " ", " ", " "]);
+      expect(testGame.play(1)).toEqual([" ", "O", "X", " ", " ", " ", " ", " ", " "]);
+    });
+
+    it('should throw an error if move made in spot that is taken', function() {
+      expect(testGame.play(2)).toEqual([" ", " ", "X", " ", " ", " ", " ", " ", " "]);
+      expect(function() { testGame.play(2)}).toThrow(TypeError("Please choose a valid move."));
+    });
+
+    it('should throw an error if move outside 0-8 are used', function() {
+      expect(function() { testGame.play(10)}).toThrow(TypeError("Please choose a valid move."));
+    });
+
+    it('should throw an error if move is a string', function() {
+      expect(function() { testGame.play("a")}).toThrow(TypeError("Please choose a valid move."));
+    });
+
+    it('should return the board after a win', function() {
+      testGame.play(6);
+      testGame.play(4);
+      testGame.play(7);
+      testGame.play(5);
+      expect(testGame.play(8)).toEqual([" ", " ", " ", " ", "O", "O", "X", "X", "X"])
+    });
+
+    it('should return the board after a draw', function() {
+      testGame.play(0);
+      testGame.play(2);
+      testGame.play(1);
+      testGame.play(3);
+      testGame.play(5);
+      testGame.play(4);
+      testGame.play(6);
+      testGame.play(7);
+      expect(testGame.play(8)).toEqual(["X", "X", "O", "O", "O", "X", "X", "O", "X"]);
+    });
+  }); //describe play end
+
+
+  describe('turnHandler', function() {
+    it('should increment turnCounter', function() {
+      expect(testGame.turnHandler()).toEqual(1);
+      expect(testGame.turnHandler()).toEqual(2);
+    });
+
+    it('should swap activePlayer', function() {
+      expect(testGame.activePlayer.get("name")).toEqual("ELLE");
+      expect(testGame.turnHandler()).toEqual(1);
+      expect(testGame.activePlayer.get("name")).toEqual("JESSICA");
+      expect(testGame.turnHandler()).toEqual(2);
+      expect(testGame.turnHandler()).toEqual(3);
+    });
+  });
+
+
+  describe('scoreKeeper', function() {
+    it('should increment scorecard when a player wins/player loses', function() {
+      // currentBoard = [" ", " ", " ", " ", "O", "O", "X", "X", "X"];
+      testGame.play(6);
+      testGame.play(4);
+      testGame.play(7);
+      testGame.play(5);
+      testGame.play(8);
+      expect(testGame.player1.get("scorecard").win).toEqual(1);
+      expect(testGame.player1.get("scorecard").lose).toEqual(0);
+      expect(testGame.player2.get("scorecard").lose).toEqual(1);
+      expect(testGame.player2.get("scorecard").win).toEqual(0);
+    });
+
+    it('should increment scorecards when game ends in draw', function() {
+      // currentBoard = ["X", "X", "O", "O", "O", "X", "X", "O", "X"]
+      testGame.play(0);
+      testGame.play(2);
+      testGame.play(1);
+      testGame.play(3);
+      testGame.play(5);
+      testGame.play(4);
+      testGame.play(6);
+      testGame.play(7);
+      testGame.play(8);
+      expect(testGame.player1.get("scorecard").draw).toEqual(1);
+      expect(testGame.player2.get("scorecard").draw).toEqual(1);
+      expect(testGame.player1.get("scorecard").draw).not.toEqual(0);
+      expect(testGame.player2.get("scorecard").draw).not.toEqual(0);
+    });
+  });
+
+
+  describe('newGame', function() {
+    it('should restart a new game with a clean board', function() {
+      testGame.play(6);
+      testGame.play(4);
+      testGame.play(7);
+      testGame.play(5);
+      expect(testGame.play(8)).toEqual([" ", " ", " ", " ", "O", "O", "X", "X", "X"]);
+      testGame.newGame();
+      expect(testGame.play(1)).toEqual([" ", "X", " ", " ", " ", " ", " ", " ", " "]);
+      expect(testGame.turnHandler()).toEqual(2);
+    });
+  });
+
+});
diff --git a/spec/player.spec.js b/spec/player.spec.js
@@ -0,0 +1,28 @@
+import Player from "app/models/player";
+
+describe('Player', function() {
+  var player1;
+  var player2;
+  beforeEach(function() {
+    player1 = new Player("elle", "X");
+    player2 = new Player("jessica", "O");
+  });
+
+  describe('get name assigned to player', function() {
+    it('should return the name of the player', function() {
+      expect(player1.get("name")).toEqual("ELLE");
+      expect(player1.get("letter")).toEqual("X");
+      expect(player2.get("name")).toEqual("JESSICA");
+      expect(player2.get("letter")).toEqual("O");
+    });
+  });
+
+  describe('get scorecard assigned to player with defaults of 0', function() {
+    it('should return the player scorecard', function() {
+      expect(player1.get("scorecard")).toEqual({ win:0, lose: 0, draw: 0});
+      expect(player1.get("scorecard").win).toEqual(0);
+    });
+  });
+
+
+});
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,17 @@
+import $ from 'jquery';
+import Game from 'app/models/game';
+import GameView from 'app/views/game_view';
+
+$(document).ready(function() {
+
+var game = new Game("player 1", "player 2");
+game.fetch();
+
+var gameView = new GameView({
+  el: '#game',
+  model: game
+});
+
+gameView.render();
+
+});
diff --git a/src/app/collections/board.js b/src/app/collections/board.js