Ada-C6 · nahmisa · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016
diff --git a/build/index.html b/build/index.html
@@ -1,10 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Tic-Tac-Toe</title>
-    <meta charset="utf-8">
-  </head>
-  <body>
-    <script src="/app.bundle.js" charset="utf-8"></script>
-  </body>
+<head>
+  <title>Tic-Tac-Toe</title>
+  <meta charset="utf-8">
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
+
+  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
+  <link rel="stylesheet" href="styles/index.css">
+</head>
+<body>
+
+  <div id="application">
+
+    <main>
+      <h1> Tic-Tac-Gradient  </h1>
+      <div id="current-player"></div>
+
+      <section id="ttt-board">
+        <ul id="board-squares"></ul>
+      </section>
+
+    </main>
+
+    <section id="players">
+
+    </section>
+
+    <section id="hall-of-fame">
+      <ul id="played-games"></ul>
+    </section>
+
+
+
+  </div>
+  <!-- #application end-->
+
+
+  <!-- Underscore Templates -->
+
+    <!-- Player -->
+  <script type="text/template" id="tmpl-player">
+      <h2><%- name %></h2>
+  </script>
+
+  <!-- Player -->
+  <script type="text/template" id="tmpl-results">
+      <h3><%- results %></h3>
+  </script>
+
+  <script src="/app.bundle.js" charset="utf-8"></script>
+
+</body>
 </html>
diff --git a/build/styles/index.css b/build/styles/index.css
@@ -0,0 +1,85 @@
+h1, h2, h3 {
+  font-family: 'Press Start 2P', cursive;
+  text-align: center;
+  color: grey;
+}
+
+h1 {
+  font-size: 4vw;
+  margin: 3vw;
+
+}
+
+h2, h3 {
+  font-size: 2vw;
+  margin-bottom: 0;
+}
+
+body {
+  margin: 10px 10%;
+  background-color: white;
+}
+
+#ttt-board, #played-games {
+  width: 60%;
+  margin: 0 auto;
+}
+
+li {
+  list-style: none;
+  border: .25vw solid white;
+  background-color: rgba(128, 128, 128, 0.4);
+  min-height: 11vw;
+  min-width: 11vw;
+  border-radius: .25rem;
+  padding: .25vw;
+}
+
+#players {
+  margin-bottom: 2vw;
+}
+
+#played-games > li {
+  padding: 4vw;
+  margin: 1vw;
+}
+
+#played-games > li:hover {
+  background-color: rgba(128, 128, 128, 1);
+  padding: 2vw;
+  padding-top: 3vw;
+}
+
+#played-games > li:hover h3::before {
+  font-family: FontAwesome;
+  content: '\f1f8';
+  color: white;
+  padding-left: 15vw;
+  font-size: 3vw;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/*X Gradient*/
+
+.X0 { background-color: #4A9E9D; }
+
+.X1 { background-color: #4C8E99; }
+
+.X2 { background-color: #4F8396; }
+
+.X3 { background-color: #536B90; }
+
+.X4 { background-color: #565D8E; }
+
+/*O Gradient*/
+
+.O0 { background-color: #FFC271; }
+
+.O1 { background-color: #FFB670; }
+
+.O2 { background-color: #FFA570; }
+
+.O3 { background-color: #FF936F; }
+
+.O4 { background-color: #FF8A6F; }
diff --git a/spec/board.spec.js b/spec/board.spec.js
@@ -0,0 +1,55 @@
+// Do not remove
+import Board from 'app/models/board';
+
+describe('Board', function() {
+
+  var testBoard = new Board();
+
+  describe('Board', function() {
+    it('should be defined', function() {
+      expect(testBoard).toBeDefined();
+    });
+
+    it('should have a grid', function() {
+      expect(testBoard.get('grid')).toBeDefined();
+    });
+
+  });
+
+  describe('grid', function() {
+
+    var grid = testBoard.get('grid');
+
+    it('should be an array', function() {
+      expect(Array.isArray(grid)).toBe(true);
+    });
+
+    it('should be 3 long', function() {
+      expect(grid.length).toEqual(3);
+    });
+
+    it('should be made of sub-arrays', function() {
+      grid.forEach(function(array) {
+        expect(Array.isArray(array)).toBe(true);
+      });
+    });
+
+    it('each sub-arrays should have a length of 3', function() {
+      grid.forEach(function(array) {
+        expect(array.length).toEqual(3);
+      });
+    });
+
+    it('each sub-arrays should default values of null', function() {
+      grid.forEach(function(array) {
+        array.forEach(function(element){
+          expect(element).toBeNull();
+
+        });
+      });
+    });
+
+
+
+  });
+});
diff --git a/spec/player.spec.js b/spec/player.spec.js
@@ -0,0 +1,25 @@
+// Do not remove
+import Player from 'app/models/player';
+
+describe('Player', function() {
+
+  var testPlayerX = new Player({name: "Testy", marker: "X"});
+  var testPlayerO = new Player({name: "Crabby", marker: "O"});
+
+  describe('Player', function() {
+    it('should be defined', function() {
+      expect(testPlayerX).toBeDefined();
+    });
+
+    it('should have a name', function() {
+      expect(testPlayerX.get('name')).toEqual("Testy");
+    });
+
+    it('should be assigned a marker', function() {
+      expect(testPlayerX.get('marker')).toEqual("X");
+      expect(testPlayerO.get('marker')).toEqual("O");
+    });
+
+  });
+
+});