Ada-C6 · heatherherrington · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016
diff --git a/build/index.html b/build/index.html
@@ -3,8 +3,44 @@
   <head>
     <title>Tic-Tac-Toe</title>
     <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Walter+Turncoat" 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-Toe DeathMatch!  </h1>
+        <div id="current-player"></div>
+
+        <section id="ttt-board">
+          <ul id="board-squares"></ul>
+        </section>
+      </main>
+
+      <section id="players"></section>
+
+      <section>
+        <h3>Throwback Version: Walk away from your computer and get paper and a pen</h3>
+      </section>
+    </div>
+    <!-- #application end-->
+
+    <!-- Underscore Templates -->
+
+      <!-- Player -->
+    <script type="text/template" id="tmpl-player">
+        <h2><%- name + ": " + marker %>  </h2>
+    </script>
+
+      <!-- Square -->
+    <script type="text/template" id="tmpl-board-square">
+      <li class="board-square">
+        <h3><%- marker %></h3>
+      </li>
+    </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,30 @@
+h1, h2, h3 {
+  font-family: 'Walter Turncoat', cursive;
+  text-align: center;
+  color: white;
+}
+
+body {
+  margin: 10px 10%;
+  background-color: black;
+}
+
+#board-squares div {
+  display: inline-block;
+}
+
+li {
+  list-style: none;
+  border: 2px solid purple;
+  height: 50px;
+  text-align: center;
+}
+
+#ttt-board {
+  width: 60%;
+  margin: 0 auto;
+}
+
+.column {
+  padding: 0;
+}
diff --git a/spec/board.spec.js b/spec/board.spec.js
@@ -0,0 +1,51 @@
+// 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,23 @@
+// 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");
+    });
+  });
+});