Ada-C6 · BJHunnicutt · Dec 12, 2016 · Dec 13, 2016 · Dec 13, 2016 · Dec 13, 2016
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+/build/app.bundle.js*
+
 # From https://github.com/github/gitignore/blob/master/Node.gitignore
 # Logs
 logs

diff --git a/build/assets/aged_boards.jpg b/build/assets/aged_boards.jpg
diff --git a/build/assets/aged_boards2.jpg b/build/assets/aged_boards2.jpg
diff --git a/build/assets/blue-whale.svg b/build/assets/blue-whale.svg
diff --git a/build/assets/boards_leaf.jpeg b/build/assets/boards_leaf.jpeg
diff --git a/build/assets/colorspots.png b/build/assets/colorspots.png
diff --git a/build/assets/earth.svg b/build/assets/earth.svg
diff --git a/build/assets/jupiter.svg b/build/assets/jupiter.svg
diff --git a/build/assets/mercury.png b/build/assets/mercury.png
diff --git a/build/assets/narwhal.gif b/build/assets/narwhal.gif
diff --git a/build/assets/old-wood-board-texture.jpg b/build/assets/old-wood-board-texture.jpg
diff --git a/build/assets/planed_wood.jpeg b/build/assets/planed_wood.jpeg
diff --git a/build/assets/rocket.svg b/build/assets/rocket.svg
diff --git a/build/assets/rocket2.svg b/build/assets/rocket2.svg
diff --git a/build/assets/turtle.jpeg b/build/assets/turtle.jpeg
diff --git a/build/assets/yellowspots.png b/build/assets/yellowspots.png
diff --git a/build/assets/yellowspots2.png b/build/assets/yellowspots2.png
diff --git a/build/index.html b/build/index.html
@@ -3,8 +3,127 @@
   <head>
     <title>Tic-Tac-Toe</title>
     <meta charset="utf-8">
+    <!-- Foundation Mobile responsive tags -->
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Foundation Mobile responsive tags -->
+
+    <link rel="stylesheet" href="./styles/foundation.css">
+    <link rel="stylesheet" href="./styles/app.css">
+    <!-- <link rel="stylesheet" href="/styles/stars.css"> -->
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Walter+Turncoat">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600">
   </head>
   <body>
-    <script src="/app.bundle.js" charset="utf-8"></script>
+    <!-- <canvas id="canvas"> -->
+    <section id="bg-overlay"></section>
+    <section id="bg-image"></section>
+    <!-- <div class="stars"></div>
+    <div class="twinkling"></div>
+    <div class="clouds"></div> -->
+
+    <header>
+      <h1> T <br> I <br> C <br> - <br> T <br> A <br> C <br> - <br> T <br> O <br> E <br> </h1>
+    </header>
+
+    <main>
+      <div class="row">
+        <div id="game" class="large-8 medium-12 small-12 columns">
+
+          <div class="row">
+            <ul id="symbol-cards" class="row align-center">
+                <!-- insert "tmpl-symbol-card" template here -->
+            </ul>
+          </div>
+          <div id="scores" class="row">
+              <div id="player1-details" class="player-details large-4 medium-4 small-4 columns">
+                <!-- <h3> Jeannie </h3><h3> 2 </h3> -->
+              </div>
+              <div id="tie-details" class="large-4 medium-4 small-4 columns">
+                <!-- <h3> Tie </h3><h3> 1 </h3> -->
+              </div>
+              <div id="player2-details" class="large-4 medium-4 small-4 columns">
+                <!-- <h3> Lauren </h3><h3> 3 </h3> -->
+              </div>
+          </div>
+          <section id="contact-details"></section>
+        </div>
+
+        <div class=" large-4 medium-12 small-12 columns ">
+          <section class="row new-game-form">
+            <h4> New Matchup! </h4>
+            <div class="columns">
+              <label>
+                <h5>Player 1</h5>
+                <input type="text" name="player1">
+              </label>
+              <label>
+                <h5>Player 2</h5>
+                <input type="text" name="player2">
+              </label>
+              <h3 class="button btn-newgame"> New Matchup </h3>
+              <h3 class="button btn-cancel"> Start Over </h3>
+              <!-- <h4 class="button btn-continue"> Play Another game with same players </h4> -->
+            </div>
+          </section>
+        </div>
+
+        <!-- <div id="play-history" class="large-4 medium-12 small-12 columns ">
+          <h4 class="large-12 columns"> Top Players </h4>
+          <section class="row align-center">
+
+            <div id="game-history" class="columns">
+              <div class='player-hist-card button large-3 medium-3 small-4 columns'>
+              </div>
+            </div>
+
+          </section>
+        </div> -->
+
+      </div>
+
+    </div>
+
+
+      <h2 class="button" id="background-toggle"> :( </h2>
+
+      <div id="background-cover">
+        <section id="game-over-modal"></section>
+      </div>
+    </main>
+
+    <!-- Underscore Templates -->
+    <script type="text/template" id="tmpl-symbol-card">
+      <!-- Moved the tag and class specification for this template to the squareView.js with tagName and className -->
+      <!-- <li class="symbol-card large-4 medium-4 small-4 columns"> -->
+        <h4><%- contents %></h4>
+      <!-- </li> -->
+    </script>
+
+    <script type="text/template" id="tmpl-player-hist-card">
+      <h4><%- name %></h4>
+    </script>
+
+    <script type="text/template" id="tmpl-player-details">
+      <h4><%- name %> <%- symbol %></h4>
+      <h2><%- wins %></h2>
+    </script>
+
+    <script type="text/template" id="tmpl-end-game">
+      <h3><%- message %></h3>
+      <h2 class="button btn-continue"> Play Again! </h2>
+    </script>
+    <!-- Underscore Templates -->
+
+
+    <!-- Entire JS project built by Webpack -->
+    <script src="app.bundle.js" charset="utf-8"></script>
+
+    <!-- Loading the p5 library and the background interactive -->
+    <script src="./scripts/p5-source/p5.min.js"></script>
+    <script type='text/javascript' src='./scripts/p5-source/p5.dom.min.js'></script>
+    <script src="./scripts/background.js"></script>
+  <!-- </canvas> -->
   </body>
 </html>
diff --git a/build/scripts/background.js b/build/scripts/background.js
@@ -0,0 +1,55 @@
+
+// $(document).ready(function() {
+
+
+  function setup() {
+    var canvas = createCanvas(windowWidth, windowHeight);
+    canvas.parent('bg-image');
+    canvas.id("spots");
+
+    // this resets the canvas if someone changes the window size, or else it stays a weird box
+    // **** You lose all old spots ****
+    window.onresize = function() {
+      canvas.size(window.innerWidth, window.innerHeight);
+    };
+
+    // if (canvas.style("visibility", "visible")) {
+    //   canvas.id("spots");
+    // }
+
+    // if (canvas.style("visibility", "visible")) {
+    //   canvas.size(window.innerWidth, window.innerHeight);
+    // }
+  }
+
+  var x;
+  var r = 255;
+  var g = 215;
+  var b = 0;
+  var timer;
+
+  function draw() {
+    // fill(255, 10); // semi-transparent white rectange for fade! https://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/
+    // rect(0, 0, width, height);
+
+    fill(r, g, b);
+    strokeWeight(0);
+    ellipse(mouseX, mouseY, 80, 80);
+    this.lifespan--;
+    // triangle(mouseX+200, mouseY+150, mouseX+250, mouseY+25, mouseX+310, mouseY+150);
+  }
+  function mouseMoved() {
+    r = random(200, 255);
+    g = random(175, 255);
+    b = random(0, 0);
+    // draw();
+    // fill(r, g, b);
+  }
+
+  function mousePressed() {
+
+    var toggle1 = select("#background-toggle");
+    toggle1.mousePressed(setup);
+  }
+
+// }); // closing $(document).ready
diff --git a/build/scripts/bubbles.js b/build/scripts/bubbles.js
@@ -0,0 +1,60 @@
+
+jQuery(document).ready(function($){
+
+var windowXArray = [],
+    windowYArray = [];
+
+for (var i = 0; i < $(window).innerWidth(); i++) {
+    windowXArray.push(i);
+}
+
+for (var i = 0; i < $(window).innerHeight(); i++) {
+    windowYArray.push(i);
+}
+
+function randomPlacement(array) {
+    var placement = array[Math.floor(Math.random()*array.length)];
+    return placement;
+}
+
+
+var canvas = oCanvas.create({
+   canvas: '#canvas',
+   background: '#2c3e50',
+   fps: 60
+});
+
+setInterval(function(){
+
+var rectangle = canvas.display.ellipse({
+   x: randomPlacement(windowXArray),
+   y: randomPlacement(windowYArray),
+   origin: { x: 'center', y: 'center' },
+   radius: 0,
+   fill: '#27ae60',
+   opacity: 1
+});
+
+canvas.addChild(rectangle);
+
+rectangle.animate({
+  radius: 10,
+  opacity: 0
+}, {
+  duration: '1000',
+  easing: 'linear',
+  callback: function () {
+			this.remove();
+		}
+});
+
+}, 100);
+
+$(window).resize(function(){
+canvas.width = $(window).innerWidth();
+canvas.height = $(window).innerHeight();
+});
+
+$(window).resize();
+
+});
diff --git a/build/scripts/p5-source/p5.dom.min.js b/build/scripts/p5-source/p5.dom.min.js
diff --git a/build/scripts/p5-source/p5.min.js b/build/scripts/p5-source/p5.min.js