Ada-C5 · JBoshart · Jun 30, 2016 · Jun 30, 2016 · Jul 1, 2016 · Jul 1, 2016
diff --git a/images/cat.jpeg b/images/cat.jpeg
diff --git a/images/pup1.jpeg b/images/pup1.jpeg
diff --git a/images/pup2.jpeg b/images/pup2.jpeg
diff --git a/images/space.jpeg b/images/space.jpeg
diff --git a/index.css b/index.css
@@ -1,3 +1,49 @@
 html {
-
+  background-image: url(images/space.jpeg);
+  margin: auto;
+  width: 60%;
+  padding: 10px;
+  text-align: center;
+  color: white;
+}
+
+button {
+  height: 100px;
+  width: 100px;
+  padding: 10px;
+  border-style: hidden;
+  opacity: .5;
+}
+
+.middle {
+  margin: .2em;
+}
+
+button:hover {
+  opacity: 0;
+}
+
+.X {
+  transition: .5s;
+  background-size: 100px 100px;
+  background-image: url(images/pup1.jpeg);
+  opacity: 1;
+}
+
+.O {
+  transition: .5s;
+  background-size: 100px 100px;
+  background-image: url(images/pup2.jpeg);
+  opacity: 1;
+}
+
+.C {
+  transition: .5s;
+  background-size: 100px 100px;
+  background-image: url(images/cat.jpeg);
+  opacity: 1;
+}
+
+.X:hover, .O:hover, .C:hover {
+  opacity: 1;
 }
diff --git a/index.html b/index.html
@@ -9,13 +9,28 @@
   <body>
     <h1>Tic Tac Toe</h1>
     <div id="tic-tac-toe"></div>
+      <div class="game-control">
+        <!-- <button class="new-game">New Game!</button> -->
+      </div>
+      <div class="gameboard">
+        <div class="top">
+          <button class="play" data-grid="1"></button>
+          <button class="play" data-grid="2"></button>
+          <button class="play" data-grid="3"></button>
+        </div>
+        <div class="middle">
+          <button class="play" data-grid="4"></button>
+          <button class="play" data-grid="5"></button>
+          <button class="play" data-grid="6"></button>
+        </div>
+        <div class="bottom">
+          <button class="play" data-grid="7"></button>
+          <button class="play" data-grid="8"></button>
+          <button class="play" data-grid="9"></button>
+        </div>
+      </div>
   </body>
   <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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!');
-    })
-  </script>
 </html>
-
diff --git a/tic-tac-toe.js b/tic-tac-toe.js
@@ -1,7 +1,89 @@
-function TicTacToe() {
+function TicTacToe(callback) {
+  this._player_X = 'X'
+  this._player_O = 'O'
+  this._plays = 0
+  this._current_player = this._player_X
+  this._gameboard = {
+    1: 'a',
+    2: 'b',
+    3: 'c',
+    4: 'd',
+    5: 'e',
+    6: 'f',
+    7: 'g',
+    8: 'h',
+    9: 'i'
+  }
+}
+
+TicTacToe.prototype.makePlay = function(spot) {
+  this._plays++
+
+  if ((this._gameboard[spot] !== 'X') && (this._gameboard[spot] !== 'O')) {
+    this._gameboard[spot] = this._current_player
+  } else {
+    return alert("This space has already been played!")
+  }
+
+  var result = this.hasWon()
+
+  if (result === true) {
+    var winner = this._current_player
+    this.turnSwitch()
+    var loser = this._current_player
+
+    $('.' + loser).switchClass(loser, winner)
+    $('.play').switchClass('play', winner)
+
+  } else if ((result === false) && (this._plays === 9)) {
+    $('.X').switchClass('X', 'C')
+    $('.O').switchClass('O', 'C')
+  } else {
+    this.turnSwitch()
+  }
+}
+
+TicTacToe.prototype.hasWon = function() {
+  var board = this._gameboard
 
+  if ((board[1] === board[2]) && (board[1] === board[3])) {
+    return true
+  } else if ((board[4] === board[5]) && (board[4] === board[6])) {
+    return true
+  } else if ((board[7] === board[8]) && (board[7] === board[9])) {
+    return true
+  } else if ((board[1] === board[4]) && (board[1] === board[7])) {
+    return true
+  } else if ((board[2] === board[5]) && (board[2] === board[8])) {
+    return true
+  } else if ((board[3] === board[6]) && (board[3] === board[9])) {
+    return true
+  } else if ((board[1] === board[5]) && (board[1] === board[9])) {
+    return true
+  } else if ((board[3] === board[5]) && (board[3] === board[7])) {
+      return true
+  } else {
+    return false
+  }
 }
 
-TicTacToe.prototype = {
-
+TicTacToe.prototype.turnSwitch = function () {
+  if (this._current_player === this._player_X) {
+    this._current_player = this._player_O
+  } else {
+    this._current_player = this._player_X
+  }
 }
+
+$(document).ready(function() {
+
+  var ttt = new TicTacToe
+
+  $('.play').mousedown(function(event) {
+    var button = $(this).data('grid')
+    $(this).switchClass('play', ttt._current_player)
+
+    ttt.makePlay(button, ttt._current_player)
+
+  })
+})