Ada-C4 · Dreedle · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016
diff --git a/index.css b/index.css
@@ -1,3 +1,41 @@
 html {
-
+}
+
+body {
+  background-image: url("stars.jpg");
+}
+
+h1 {
+  text-align: center;
+  color: white;
+}
+
+h2 {
+  text-align: center;
+  color: white;
+}
+
+.hide {
+  display: none;
+}
+
+table {
+  background-color: white;
+  border: 3px solid black;
+  margin: 0 auto;
+}
+
+table tbody tr td {
+  width: 100px;
+  height: 100px;
+  background-size: cover;
+  background-position: center;
+}
+
+.trooper {
+  background-image: url("stormtrooper.jpg");
+}
+
+.vader {
+  background-image: url("vader.jpg");
 }
diff --git a/index.html b/index.html
@@ -7,15 +7,51 @@
   </head>
 
   <body>
-    <h1>Tic Tac Toe</h1>
-    <div id="tic-tac-toe"></div>
+    <h1>Dark Side Tic Tac Toe</h1>
+    <div id="tic-tac-toe">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+            </td>
+            <td>
+            </td>
+            <td>
+            </td>
+          </tr>
+          <tr>
+            <td>
+            </td>
+            <td>
+            </td>
+            <td>
+            </td>
+          </tr>
+          <tr>
+            <td>
+            </td>
+            <td>
+            </td>
+            <td>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    <h2 class="gameover hide">
+      <p class="vader-win hide">VADER WINS!</p>
+      <p class="trooper-win hide">TROOPER WINS!</p>
+      <p class="tie hide">NO ONE WINS!</p>
+    </h2>
+    </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!');
+      tictac = new TicTacToe();
+      tictac.begin();
     })
   </script>
-</html>
 
+
+</html>
diff --git a/stars.jpg b/stars.jpg
diff --git a/stormtrooper.jpg b/stormtrooper.jpg
diff --git a/tic-tac-toe.js b/tic-tac-toe.js
@@ -1,7 +1,157 @@
-function TicTacToe() {
+//click handler
+//if a game has just ended, there will be a winner. Will start a new game.
+//if a game is in progress, check to see that square is empty
+//if I do apply more styling to tds, would need to change this logic
+$("td").click(function () {
+  if (tictac.currentWinner != false) {
+    tictac.begin();
+  } else if (this.classList.length == 0) {
+    tictac.takeTurn(this);
+  }
+});
 
+
+////////////////////////////////
+
+//game logic
+function TicTacToe () {
+};
+
+
+
+//start game
+//if previous games have been played, this will erase all images
+TicTacToe.prototype.begin = function(){
+  this.updateBoard([[0,0,0], [0,0,0],[0,0,0]]);
+  this.updatePlayer("trooper");
+  this.updateWinner(false);
+  $(".gameover").addClass("hide");
+  $(".gameover").children("p").addClass("hide");
+  $("td").removeClass("vader trooper");
+};
+
+
+//logic for a single turn
+TicTacToe.prototype.takeTurn = function(clickedSquare){
+  var coords = this.getCoords(clickedSquare);
+  var nextBoard = this.markArray(coords);
+  this.updateBoard(nextBoard);
+  this.markSquare(clickedSquare);
+  this.checkGame(); //checks to see if game is won
+  if (this.currentWinner !== false){
+    this.endGame(this.currentWinner);
+  } else {
+    this.changePlayer();
+  }
+};
+
+
+//defines who the current player is
+TicTacToe.prototype.updatePlayer = function(nextPlayer){
+  this.currentPlayer = nextPlayer;
+};
+
+//defines who the current winner is
+TicTacToe.prototype.updateWinner = function(nextWinner){
+  this.currentWinner = nextWinner;
 }
 
-TicTacToe.prototype = {
-
+//defines what the current board is
+TicTacToe.prototype.updateBoard = function(nextBoard) {
+  this.currentBoard = nextBoard;
 }
+
+//gets the coordinates from which square was clicked
+TicTacToe.prototype.getCoords = function(square) {
+  var rowInd = (square.parentNode).rowIndex;
+  var colInd = square.cellIndex;
+  var coordinates = {row: rowInd, col: colInd};
+  return coordinates
+};
+
+//checks to see if game is finished
+TicTacToe.prototype.checkGame = function () {
+  var board = this.currentBoard;
+  var win = false;
+
+  //identify combos that need to be checked
+  //situation is simply enough that we don't really need to iterate
+  var row1 = board[0];
+  var row2 = board[1];
+  var row3 = board[2];
+  var col1 = [row1[0], row2[0], row3[0]];
+  var col2 = [row1[1], row2[1], row3[1]];
+  var col3 = [row1[2], row2[2], row3[2]];
+  var diag1 = [row1[0], row2[1], row3[2]];
+  var diag2 = [row1[2], row2[1], row3[0]];
+
+  //initialize an array that will store combos to be checked
+  var combos = [row1, row2, row3, col1, col2, col3, diag1, diag2]
+
+  //get rid of any combo that has a zero in it
+  var nonzeroCombos = new Array;
+  combos.forEach(function(combo) {
+    if (combo[0] != 0 && combo[1] != 0 && combo[2] != 0) {
+      nonzeroCombos.push(combo);
+    }
+    return nonzeroCombos;
+  });
+
+  //check to see if any combos contain all the same value
+  nonzeroCombos.forEach(function(combo) {
+      if (combo[0] === combo[1] && combo[1] === combo[2]) {
+        win = true;
+      }
+    return win;
+   });
+
+ if (win == true) {
+   this.updateWinner(this.currentPlayer);
+ }
+
+ //if there are no combos with zero, and no winner, the board must be full
+ if (nonzeroCombos.length == 8 && this.currentWinner == false) {
+  this.updateWinner("tie");
+ }
+};
+
+//changes display when the game is over
+//new game isn't started until the next click on a box
+TicTacToe.prototype.endGame = function (winner) {
+  if (this.currentWinner == "vader") {
+    $(".vader-win").removeClass("hide");
+  } else if (this.currentWinner == "trooper") {
+    $(".trooper-win").removeClass("hide");
+  } else {
+    $(".tie").removeClass("hide");
+  };
+  $(".gameover").removeClass("hide");
+};
+
+//checks to see if that spot is occupied
+//changes the array contents based on square that was clicked
+//returns array that can be used to update the board
+//board is marked with player name
+TicTacToe.prototype.markArray = function(coords) {
+  var board = this.currentBoard;
+  var row = coords["row"];
+  var col = coords["col"];
+  if (board[row][col] == 0) {
+    board[row][col] = this.currentPlayer;
+  }
+  return board;
+};
+
+//alternates player
+TicTacToe.prototype.changePlayer = function() {
+  if (this.currentPlayer == "trooper") {
+    this.updatePlayer("vader");
+  } else if (this.currentPlayer == "vader") {
+    this.updatePlayer("trooper");
+  }
+};
+
+//actually marks the square in the browser
+TicTacToe.prototype.markSquare = function(square) {
+    square.setAttribute("class", this.currentPlayer);
+};
diff --git a/vader.jpg b/vader.jpg