Ada-C4 · jennaplusplus · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016 · Jan 29, 2016
diff --git a/AntiqueOlive.ttf b/AntiqueOlive.ttf
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/ann.png b/images/ann.png
diff --git a/images/banana.png b/images/banana.png
diff --git a/images/buster.jpg b/images/buster.jpg
diff --git a/images/georgemichael.png b/images/georgemichael.png
diff --git a/images/georgesr.jpg b/images/georgesr.jpg
diff --git a/images/gob.jpg b/images/gob.jpg
diff --git a/images/lindsay.jpg b/images/lindsay.jpg
diff --git a/images/lucille.png b/images/lucille.png
diff --git a/images/maeby.png b/images/maeby.png
diff --git a/images/michael.jpg b/images/michael.jpg
diff --git a/images/tobias.jpg b/images/tobias.jpg
diff --git a/index.css b/index.css
@@ -1,3 +1,71 @@
+@font-face {
+  font-family: antiqueOlive;
+  src: url("AntiqueOlive.ttf");
+}
+
 html {
-
+
+}
+
+body {
+  background-color: #F98F1B;
+  text-align: center;
+}
+
+h1 {
+  font-family: 'antiqueOlive', cursive;
+  letter-spacing: -3px;
+  text-align: center;
+  color: black;
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+button {
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+.arrested-development {
+  font-family: 'antiqueOlive', cursive;
+}
+
+h2 {
+  font-family: 'antiqueOlive', cursive;
+  text-align: center;
+  color: black;
+  font-size: 36px;
+  letter-spacing: -3px;
+}
+
+div.row {
+  text-align: center;
+}
+
+div.square {
+  border: 5px solid black;
+  background-color: white;
+  height: 150px;
+  width: 150px;
+  margin: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+img {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  height: auto;
+}
+
+.banana {
+  opacity: 0.3;
+  left: 25px;
+  margin-left: auto;
+  margin-right: auto;
+  height: 75%;
+  width: auto;
 }
diff --git a/index.html b/index.html
@@ -4,18 +4,68 @@
     <title>Tic Tac Toe!</title>
     <meta charset="utf-8">
     <link href="index.css" media="screen" rel="stylesheet" type="text/css">
+    <link href='https://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>
+    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
   </head>
 
   <body>
-    <h1>Tic Tac Toe</h1>
-    <div id="tic-tac-toe"></div>
+    <h1>Tic-TAc-G.O.B.</h1>
+    <button class="reset">🍌 <span class="arrested-development">start a new game</span></button>
+    <div id="tic-tac-toe">
+      <div class="row">
+        <div class="square" id="top-left">
+          <img class="banana" src="images/banana.png">
+        </div>
+        <div class="square" id="top-mid">
+          <img class="banana" src="images/banana.png">
+        </div>
+        <div class="square" id="top-right">
+          <img class="banana" src="images/banana.png">
+        </div>
+      </div>
+      <div class="row">
+        <div class="square" id="mid-left">
+          <img class="banana" src="images/banana.png">
+        </div>
+        <div class="square" id="mid-mid">
+          <img class="banana" src="images/banana.png">
+        </div>
+        <div class="square" id="mid-right">
+          <img class="banana" src="images/banana.png">
+        </div>
+      </div>
+      <div class="row">
+        <div class="square" id="bottom-left">
+          <img class="banana" src="images/banana.png">
+        </div>
+        <div class="square" id="bottom-mid">
+          <img class="banana" src="images/banana.png">
+        </div>
+        <div class="square" id="bottom-right">
+          <img class="banana" src="images/banana.png">
+        </div>
+      </div>
+    </div>
   </body>
+
+
   <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
   <script src="tic-tac-toe.js"></script>
   <script type="text/javascript">
     $(document).on('ready', function() {
-      console.log('create and begin the game here!');
+      $(".reset").click(function () {
+        location.reload();
+      });
+      var game = new TicTacToe();
+      $(".square").one("click", function () {
+        if (game.over === false) {
+          $(this).html("<img src=" + game.currentPlayer.pictureURL + ">");
+          game.updateBoard(this);
+          game.turns += 1;
+          game.play();
+        }
+      });
     })
   </script>
 </html>
-
diff --git a/tic-tac-toe.js b/tic-tac-toe.js
@@ -1,7 +1,178 @@
-function TicTacToe() {
+var possiblePlayersOne = [
+  {
+    name: "Ann",
+    pictureURL: "images/ann.png"
+  },
+  {
+    name: "Lucille",
+    pictureURL: "images/lucille.png"
+  },
+  {
+    name: "G.O.B.",
+    pictureURL: "images/gob.jpg"
+  },
+  {
+    name: "Buster",
+    pictureURL: "images/buster.jpg"
+  },
+  {
+    name: "Tobias",
+    pictureURL: "images/tobias.jpg"
+  },
+];
 
-}
+var possiblePlayersTwo = [
+  {
+    name: "George Michael",
+    pictureURL: "images/georgemichael.png"
+  },
+  {
+    name: "George Sr.",
+    pictureURL: "images/georgesr.jpg"
+  },
+  {
+    name: "Lindsay",
+    pictureURL: "images/lindsay.jpg"
+  },
+  {
+    name: "Michael",
+    pictureURL: "images/michael.jpg"
+  },
+  {
+    name: "Maeby",
+    pictureURL: "images/maeby.png"
+  },
+];
 
-TicTacToe.prototype = {
-
+function TicTacToe() {
+  this.board = [[0,0,0], [0,0,0], [0,0,0]];
+  this.playerOne = possiblePlayersOne[Math.floor(Math.random() * possiblePlayersOne.length)]; // random from group 1
+  this.playerTwo = possiblePlayersTwo[Math.floor(Math.random() * possiblePlayersTwo.length)]; // random from group 2
+  this.currentPlayer = this.playerOne;
+  this.turns = 0;
+  this.over = false;
 }
+
+TicTacToe.prototype.updateBoard = function(square) {
+  switch ($(square).attr('id')) {
+    case "top-left":
+      this.board[0][0] = this.currentPlayer;
+      break;
+    case "top-mid":
+      this.board[0][1] = this.currentPlayer;
+      break;
+    case "top-right":
+      this.board[0][2] = this.currentPlayer;
+      break;
+    case "mid-left":
+      this.board[1][0] = this.currentPlayer;
+      break;
+    case "mid-mid":
+      this.board[1][1] = this.currentPlayer;
+      break;
+    case "mid-right":
+      this.board[1][2] = this.currentPlayer;
+      break;
+    case "bottom-left":
+      this.board[2][0] = this.currentPlayer;
+      break;
+    case "bottom-mid":
+      this.board[2][1] = this.currentPlayer;
+      break;
+    case "bottom-right":
+      this.board[2][2] = this.currentPlayer;
+      break;
+  }
+};
+
+TicTacToe.prototype.play = function() {
+  if (this.gameOver() === false) {
+    this.switchPlayer();
+  } else if (this.gameOver() === true) {
+    this.over = true;
+    $("body").append("<h2>It's a draw... I guess you could say you're tie-curious...</h2>");
+  } else if (this.gameOver().name === "Ann") {
+    this.over = true;
+    $("body").append("<h2>Her?</h2>");
+  } else {
+    this.over = true;
+    $("body").append("<h2>fAmily LOVe " + this.gameOver().name +  "!</h2>");
+  }
+};
+
+TicTacToe.prototype.gameOver = function() {
+  var b = this.board;
+  var one = this.playerOne;
+  var two = this.playerTwo;
+
+  // variables for the board
+  var topLeft = b[0][0], topMid = b[0][1], topRight = b[0][2]; // top
+  var midLeft = b[1][0], midMid = b[1][1], midRight = b[1][2]; // middle
+  var bottomLeft = b[2][0], bottomMid = b[2][1], bottomRight = b[2][2]; // bottom
+
+
+  // player one wins vertically
+  if (topLeft === one && midLeft === one && bottomLeft === one) {
+    return one;
+  } else if (topMid === one && midMid === one && bottomMid === one) {
+    return one;
+  } else if (topRight === one && midRight === one && bottomRight === one) {
+    return one;
+  }
+
+  // player two wins vertically
+  if (topLeft === two && midLeft === two && bottomLeft === two) {
+    return two;
+  } else if (topMid === two && midMid === two && bottomMid === two) {
+    return two;
+  } else if (topRight === two && midRight === two && bottomRight === two) {
+    return two;
+  }
+
+  // player one wins horizontally
+  if (topLeft === one && topMid === one && topRight === one) {
+    return one;
+  } else if (midLeft === one && midMid === one && midRight === one) {
+    return one;
+  } else if (bottomLeft === one && bottomMid === one && bottomRight === one) {
+    return one;
+  }
+
+  // player two wins horizontally
+  if (topLeft === two && topMid === two && topRight === two) {
+    return two;
+  } else if (midLeft === two && midMid === two && midRight === two) {
+    return two;
+  } else if (bottomLeft === two && bottomMid === two && bottomRight === two) {
+    return two;
+  }
+
+  // player one wins diagonally
+  if (topLeft === one && midMid === one && bottomRight === one) {
+    return one;
+  } else if (topRight === one && midMid === one && bottomLeft === one) {
+    return one;
+  }
+
+  // player two wins diagonally
+  if (topLeft === two && midMid === two && bottomRight === two) {
+    return two;
+  } else if (topRight === two && midMid === two && bottomLeft === two) {
+    return two;
+  }
+
+  // there's a draw if no one has won after 9 turns
+  if (this.turns > 8) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+TicTacToe.prototype.switchPlayer = function () {
+  if (this.currentPlayer === this.playerOne) {
+    this.currentPlayer = this.playerTwo;
+  } else {
+    this.currentPlayer = this.playerOne;
+  }
+};