Ada-C4 · kdefliese · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016
diff --git a/index.css b/index.css
@@ -1,3 +1,60 @@
-html {
-
+body {
+  background-color: #80d4ea;
+  font-family: 'Oxygen', sans-serif;
+  color: white;
+}
+
+h1 {
+  margin: auto;
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+table, td {
+  border: 2px solid white;
+  margin: auto;
+  text-align: center;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+td {
+  width: 100px;
+  height: 100px;
+}
+
+button {
+  margin: auto;
+  display: block;
+  margin-top: 20px;
+  font-size: 22px;
+  padding: 10px;
+  border: 2px solid white;
+  background-color: #80d4ea;
+  color: white;
+}
+
+button:hover {
+  background-color: #36A0BE;
+}
+
+.player_one {
+  margin-left: 100px;
+  float: left;
+  font-size: 22px;
+}
+
+.player_two {
+  margin-right: 100px;
+  float: right;
+  font-size: 22px;
+}
+
+.draw {
+  margin: auto;
+  text-align: center;
+  font-size: 22px;
+  margin-top: 20px;
 }
diff --git a/index.html b/index.html
@@ -8,14 +8,46 @@
 
   <body>
     <h1>Tic Tac Toe</h1>
-    <div id="tic-tac-toe"></div>
+    <div id="tic-tac-toe">
+      <table>
+        <tr>
+          <td id="0"></td>
+          <td id="1"></td>
+          <td id="2"></td>
+        </tr>
+        <tr>
+          <td id="3"></td>
+          <td id="4"></td>
+          <td id="5"></td>
+        </tr>
+        <tr>
+          <td id="6"></td>
+          <td id="7"></td>
+          <td id="8"></td>
+        </tr>
+      </table>
+    </div>
+    <button id="new_game">
+      New Game
+    </button>
+    <div class="player_one"></div>
+    <div class="draw"></div>
+    <div class="player_two"></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!');
+      var game = new TicTacToe();
+      $("td").on("click", function() {
+        game.turn(this.id);
+      });
+      $("#new_game").click(function() {
+        game = game.newGame();
+        $("td").on("click", function() {
+          game.turn(this.id);
+        });
+      });
     })
   </script>
 </html>
-
diff --git a/tic-tac-toe.js b/tic-tac-toe.js
@@ -1,7 +1,124 @@
 function TicTacToe() {
-
+  this.board = ["0","1","2","3","4","5","6","7","8"];
+  this.state = "new game";
+  this.turn_count = 0;
+  this.player_one = "X";
+  this.player_two = "O";
+  this.whose_turn = this.player_one;
 }
 
-TicTacToe.prototype = {
-
-}
+TicTacToe.prototype.turn = function(cell_id) {
+  if (this.checkGameOver() === true) {
+    return;
+  }
+  else if (this.checkCellTaken(cell_id) === true) {
+    return;
+  }
+  else {
+    this.markCell(cell_id, this.whose_turn);
+    this.incrementTurn();
+    var winner = this.checkWin()[1];
+    this.checkGameOver();
+    if (this.state == "game over") {
+      this.displayWinner(winner);
+    }
+  }
+};
+
+TicTacToe.prototype.checkGameOver = function() {
+  if (this.state == "game over") {
+    return true;
+  }
+  else if (this.turn_count == 9) {
+    this.state = "game over";
+    return true;
+  }
+  else {
+    return false;
+  }
+};
+
+TicTacToe.prototype.checkCellTaken = function(cell_id) {
+  if (this.board[cell_id] == this.player_one || this.board[cell_id] == this.player_two) {
+    return true;
+  }
+  return false;
+};
+
+TicTacToe.prototype.markCell = function(cell, player) {
+  if (this.board[cell.toString()] === cell.toString()) {
+    $("#" + cell).append(player);
+    this.board[cell.toString()] = player;
+  }
+};
+
+TicTacToe.prototype.incrementTurn = function() {
+  this.turn_count += 1;
+  if (this.whose_turn == this.player_one) {
+    this.whose_turn = this.player_two;
+  }
+  else {
+    this.whose_turn = this.player_one;
+  }
+};
+
+TicTacToe.prototype.checkWin = function() {
+  var winner;
+  if (this.board[0] == this.board[1] && this.board[1] == this.board[2]) {
+    this.state = "game over";
+    winner = this.board[0];
+  }
+  else if (this.board[3] == this.board[4] && this.board[4] == this.board[5]) {
+    this.state = "game over";
+    winner = this.board[3];
+  }
+  else if (this.board[6] == this.board[7] && this.board[7] == this.board[8]) {
+    this.state = "game over";
+    winner = this.board[6];
+  }
+  else if (this.board[0] == this.board[3] && this.board[3] == this.board[6]) {
+    this.state = "game over";
+    winner = this.board[0];
+  }
+  else if (this.board[1] == this.board[4] && this.board[4] == this.board[7]) {
+    this.state = "game over";
+    winner = this.board[1];
+  }
+  else if (this.board[2] == this.board[5] && this.board[5] == this.board[8]) {
+    this.state = "game over";
+    winner = this.board[2];
+  }
+  else if (this.board[2] == this.board[4] && this.board[4] == this.board[6]) {
+    this.state = "game over";
+    winner = this.board[2];
+  }
+  else if (this.board[0] == this.board[4] && this.board[4] == this.board[8]) {
+    this.state = "game over";
+    winner = this.board[0];
+  }
+  var return_vals = [this.state, winner];
+  return return_vals;
+};
+
+TicTacToe.prototype.displayWinner = function(winner) {
+  if (winner == "X") {
+    $(".player_one").append("Player One wins!");
+  }
+  else if (winner == "O") {
+    $(".player_two").append("Player Two wins!");
+  }
+  else if (winner === undefined) {
+    $(".draw").append("Draw!");
+  }
+};
+
+TicTacToe.prototype.newGame = function() {
+  game = new TicTacToe();
+  for (var i = 0; i < 9; i++) {
+    $("#" + i.toString()).html("");
+  }
+  $(".player_one").html("");
+  $(".player_two").html("");
+  $(".draw").html("");
+  return game;
+};