Ada-C4 · noglows · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016 · Jan 28, 2016
diff --git a/index.css b/index.css
@@ -1,3 +1,70 @@
 html {
-
+  font-family: 'Poiret One', cursive;
+}
+
+h1 {
+  text-align: center;
+  font-size: 80px;
+  margin: 0;
+}
+
+#tictactoe {
+  width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.box {
+  width: 32%;
+  height: 100%;
+  display:inline-block;
+  background-color: blue;
+}
+
+#row1, #row2, #row3 {
+  margin-top: 5px;
+  width: 100%;
+  height: 200px;
+}
+
+.c1 {
+  margin-left: 10px;
+}
+
+#player-1-score, #player-2-score {
+  display: inline-block;
+  text-align: center;
+}
+
+#player-1-score {
+  margin-right: 40px;
+}
+
+#player-2-score {
+  margin-left: 40px;
+}
+
+#player-scores {
+  width: 600px;
+  margin: auto;
+  text-align: center;
+  font-size: 30px;
+}
+
+#reset-button {
+  font-family: 'Poiret One', cursive;
+  font-size: 30px;
+  width: 200px;
+  height:50px;
+  text-align: center;
+  margin:0 auto;
+  padding: 10px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+
+#button-holder {
+  text-align: center;
+  margin-bottom: 30px;
 }
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <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=Poiret+One' rel='stylesheet' type='text/css'>
   </head>
 
   <body>
@@ -14,8 +15,47 @@ <h1>Tic Tac Toe</h1>
   <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();
     })
   </script>
-</html>
 
+  <div id="player-scores">
+    <div id="player-1-score">
+      <h3>Player 1</h3>
+      <p id="player-1-wins"></p>
+    </div>
+
+    <div id="player-2-score">
+      <h3>Player 2</h3>
+      <p id="player-2-wins"></p>
+    </div>
+  </div>
+  <div id="button-holder">
+    <button type="button" id="reset-button">Reset Game</button>
+  </div>
+
+
+  <div id="tictactoe">
+    <div id="row1">
+      <div class='box c1 r1c1'></div>
+      <div class='box r1c2'></div>
+      <div class='box r1c3'></div>
+    </div>
+
+    <div id="row2">
+      <div class='box c1 r2c1'></div>
+      <div class='box r2c2'></div>
+      <div class='box r2c3'></div>
+    </div>
+
+    <div id="row3">
+      <div class='box c1 r3c1'></div>
+      <div class='box r3c2'></div>
+      <div class='box r3c3'></div>
+    </div>
+
+  </div>
+
+
+
+</html>
diff --git a/tic-tac-toe.js b/tic-tac-toe.js
@@ -1,7 +1,114 @@
-function TicTacToe() {
 
+function TicTacToe() {
+  this.pickSpaces();
+  this.resetButton();
 }
 
 TicTacToe.prototype = {
-
-}
+  board_spaces: ["r1c1", "r1c2", "r1c3", "r2c1", "r2c2", "r2c3", "r3c1", "r3c2", "r3c3"],
+  player_1_score: [ 0, 0, 0, 0, 0, 0, 0, 0 ],
+  player_2_score: [ 0, 0, 0, 0, 0, 0, 0, 0 ],
+  player_1_wins: 0,
+  player_2_wins: 0,
+  moves: 0,
+  player: 1,
+
+  pickSpaces: function(){
+    var self = this;
+    $("#player-1-wins").html(this.player_1_wins);
+    $("#player-2-wins").html(this.player_2_wins);
+    self.board_spaces.forEach(function(box) {
+      $("." + box).click(function() {
+        if ($("." + box).css('background-color') == 'rgb(0, 0, 255)') {
+          self.markSpaces(self.player, box);
+        }
+        if (self.moves == 9) {
+          alert("It's a tie!");
+          self.resetBoard();
+        }
+      });
+    });
+  },
+
+  markSpaces: function(player, box) {
+    var color = (player == 1 ? 'red' : 'yellow');
+    $("." + box).css('background-color', color);
+    this.moves++;
+    this.updateScore(box, player);
+    this.player = (player == 1 ? 2 : 1);
+  },
+
+  resetBoard: function(){
+    this.board_spaces.forEach(function(box) {
+      $("." + box).css('background-color', 'blue');
+      $("." + box).off('click');
+    });
+    this.pickSpaces();
+    this.player_1_score = [ 0, 0, 0, 0, 0, 0, 0, 0 ];
+    this.player_2_score = [ 0, 0, 0, 0, 0, 0, 0, 0 ];
+    this.moves = 0;
+  },
+
+  resetButton: function(){
+    var self = this;
+    $('#reset-button').click(function() {
+      self.resetBoard();
+    });
+  },
+
+  incrementScore: function(index, player) {
+    var self = this;
+    if (player == 1) {
+      self.player_1_score[index]++;
+      if (self.player_1_score[index] == 3) {
+        self.playerWin(1);
+      }
+    } else {
+      self.player_2_score[index]++;
+      if (self.player_2_score[index] == 3) {
+        self.playerWin(2);
+      }
+    }
+  },
+
+  playerWin: function(player) {
+    alert("Player " + player + " wins!");
+    this.resetBoard();
+    this.trackWins(player);
+  },
+
+  updateScore: function(space, player) {
+    var track_space = space.toString();
+    var self = this;
+    if(track_space.substring(0,2) == "r1") {
+      self.incrementScore(0, player);
+    } else if (track_space.substring(0,2) == "r2") {
+      self.incrementScore(1, player);
+    } else if (track_space.substring(0,2) == "r3") {
+      self.incrementScore(2, player);
+    }
+    if (track_space.substring(2,4) == "c1") {
+      self.incrementScore(3, player);
+    } else if (track_space.substring(2,4) == "c2") {
+      self.incrementScore(4, player);
+    } else if (track_space.substring(2,4) == "c3") {
+      self.incrementScore(5, player);
+    }
+    if (["r1c1", "r2c2", "r3c3"].includes(track_space)) {
+      self.incrementScore(6, player);
+    }
+    if (["r1c3", "r2c2", "r3c1"].includes(track_space)) {
+      self.incrementScore(7, player);
+    }
+  },
+
+  trackWins: function(player) {
+    if (player == 1) {
+      this.player_1_wins++;
+      $("#player-1-wins").html(this.player_1_wins);
+    } else {
+      this.player_2_wins++;
+      $("#player-2-wins").html(this.player_2_wins);
+    }
+  },
+};