Ada-C5 · Lisa-Sano · Jun 30, 2016 · Jun 30, 2016 · Jun 30, 2016 · Jun 30, 2016
diff --git a/index.css b/index.css
@@ -1,3 +1,145 @@
 html {
-
+  box-sizing: border-box;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  background: linear-gradient(#ffcc00, #e60000);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  text-shadow: 2px 2px 2px black;
+}
+
+h1 {
+  text-align: center;
+  font-variant: small-caps;
+  font-size: 3rem;
+}
+
+#tic-tac-toe {
+  width: 40%;
+  margin: 0 auto;
+}
+
+.row {
+  width: 100%;
+  height: 33%;
+  margin: 1% 0;
+}
+
+button {
+  text-shadow: 2px 2px 2px black;
+}
+
+.button-div {
+  width: 30%;
+  float: left;
+  display: inline;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  font-size: 5rem;
+  background-color: transparent;
+  border: 6px solid black;
+}
+
+.grid:hover {
+  background-color: rgba(255,255,255,0.3);
+  transition: all 0.2s ease;
+}
+
+button:focus {
+  outline: 0;
+}
+
+.play {
+  width: 30%;
+  font-size: 3rem;
+  margin: 20% auto;
+  display: block;
+  border-radius: 12px;
+}
+
+p {
+  font-size: 3rem;
+  color: #fff;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+p.draw {
+  color: orange;
+}
+
+.reset, .reset-scores {
+  width: 15%;
+  font-size: 1.5rem;
+  display: block;
+  border-radius: 12px;
+  background-color: black;
+  color: #ffcc00;
+  bottom: 0;
+}
+
+.reset {
+  float: left;
+  margin-left: 3%;
+}
+
+.reset-scores {
+  color: rgb(241,90,0);
+  float: right;
+  margin-right: 3%;
+}
+
+h2 {
+  font-size: 2.3rem;
+  text-decoration: underline;
+  font-variant: small-caps;
+}
+
+.player-1-score {
+  float: left;
+  margin-left: 7%;
+  margin-top: 5%;
+}
+
+.player-2-score {
+  float: right;
+  margin-right: 7%;
+  margin-top: 5%;
+}
+
+.player-1-score span, .player-2-score span {
+  display: block;
+  text-align: center;
+  font-size: 2rem;
+}
+
+.outcome {
+  margin-top: 2rem;
+  color: white;
+}
+
+.top {
+  border-top: none;
+}
+
+.left {
+  border-left: none;
+}
+
+.right {
+  border-right: none;
+}
+
+.bottom {
+  border-bottom: none;
+}
+
+.the-line {
+  clear: both;
 }
diff --git a/index.html b/index.html
@@ -1,21 +1,44 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Tic Tac Toe!</title>
+    <title>Tic-Tac-Tequila Sunrise</title>
     <meta charset="utf-8">
     <link href="index.css" media="screen" rel="stylesheet" type="text/css">
   </head>
 
   <body>
-    <h1>Tic Tac Toe</h1>
-    <div id="tic-tac-toe"></div>
+    <h1>Tic-Tac-Tequila Sunrise</h1>
+    <div class="player-1-score">
+      <h2>🍹 score</h2>
+      <span class="score-1">0</span>
+    </div>
+    <div class="player-2-score">
+      <h2>🌶 score</h2>
+      <span class="score-2">0</span>
+    </div>
+    <div id="tic-tac-toe">
+      <div class="row">
+        <div class="button-div"><button class="grid top left" data-cell="A1"></button></div>
+        <div class="button-div"><button class="grid top" data-cell="A2"></button></div>
+        <div class="button-div"><button class="grid top right" data-cell="A3"></button></div>
+      </div>
+      <div class="row">
+        <div class="button-div"><button class="grid left" data-cell="B1"></button></div>
+        <div class="button-div"><button class="grid" data-cell="B2"></button></div>
+        <div class="button-div"><button class="grid right" data-cell="B3"></button></div>
+      </div>
+      <div class="row">
+        <div class="button-div"><button class="grid bottom left" data-cell="C1"></button></div>
+        <div class="button-div"><button class="grid bottom" data-cell="C2"></button></div>
+        <div class="button-div"><button class="grid bottom right" data-cell="C3"></button></div>
+      </div>
+    </div>
+    <p class="the-line"></p>
+    <button class='reset'>New game!</button>
+    <button class='reset-scores'>Reset scores!</button>
+    <p class="outcome"></p>
   </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!');
-    })
-  </script>
 </html>
 
diff --git a/tic-tac-toe.js b/tic-tac-toe.js
@@ -1,7 +1,139 @@
-function TicTacToe() {
+function Player(id, sym) {
+  this.id = id;
+  this.symbol = sym;
+  this.numbers = {};
+  this.letters = {};
+  this.corners = [];
+  this.center_sq = false;
+}
 
+function TicTacToe() {
+  this.player_one = new Player(1, '🍹');
+  this.player_two = new Player(2, '🌶');
+  this.turn = this.player_one;
+  this.turn_counter = 0;
+  this.game_over = false;
 }
 
 TicTacToe.prototype = {
-
+  play: function(player, button) {
+    if (button.text() !== '' || this.game_over === true) {return false;}
+    button.text(player.symbol);
+    var square = button.data('cell');
+    var letter = square[0];
+    var num = square[1];
+
+    if (square === 'B2') {
+      player.center_sq = true;
+    } else if (['A1', 'A3', 'C1', 'C3'].includes(square)) {
+      player.corners.push(square);
+    }
+
+    inc_or_create_key(player.numbers, num);
+    inc_or_create_key(player.letters, letter);
+    this.turn_counter++;
+    return true;
+  },
+
+  switch_turns: function(player) {
+    if (player.id === 1) {
+      this.turn = this.player_two;
+    } else {
+      this.turn = this.player_one;
+    }
+  },
+
+  won: function(player) {
+    var num_keys = Object.keys(player.numbers);
+    var letter_keys = Object.keys(player.letters);
+
+    // if any of the number counts is 3, they have a vertical win
+    for (var n_key of num_keys) {
+      if (player.numbers[n_key] === 3) {
+        this.game_over = true;
+        return true;
+      } 
+    }
+
+    // if any of the letter counts is 3, they have a horizontal win
+    for (var l_key of letter_keys) {
+      if (player.letters[l_key] === 3) {
+        this.game_over = true;
+        return true;
+      }
+    }
+
+    // if the player has something in all rows (letters) and columns (numbers) AND they claimed 
+    // the center square & opposite corners, they have a diagonal win
+    if (num_keys.length === 3 && letter_keys.length === 3 && player.center_sq === true) {
+      if (containsAll(['A1', 'C3'], player.corners) || containsAll(['A3', 'C1'], player.corners)) {
+        this.game_over = true;
+        return true;
+      }
+    }
+
+    return false;
+  },
+
+  check_winner: function(player) {
+    if (this.won(player)) {
+      $('.outcome').text(player.symbol + ' WINS!');
+      var player_class = ".score-" + player.id;
+      var curr_score = $(player_class).text();
+      curr_score++;
+      $(player_class).text(curr_score);
+    } else if (this.turn_counter === 9) {
+      $('.outcome').text("IT'S A DRAW!");
+      $('p').addClass('draw');
+    }
+  }
+}
+
+function inc_or_create_key(obj, key) {
+  if (obj[key]) {
+    obj[key]++;
+  } else {
+    obj[key] = 1;
+  }
+}
+
+function containsAll(test_cases, corners){ 
+  for(var i = 0 , len = test_cases.length; i < len; i++){
+     if($.inArray(test_cases[i], corners) == -1) return false;
+  }
+  return true;
+}
+
+function reset_grid() {
+  $('.grid').text('');
+  $('.outcome').text('');
 }
+
+$(document).on('ready', function() {
+  // adjust height of board so width is 40% and height matches
+  var ttt = new TicTacToe();
+  var cw = $('.button-div').width();
+  $('.button-div').css({'height':cw+'px'});
+
+  $('.grid').on('click', function(event) {
+    event.preventDefault();
+    var button = $(this);
+    var played = ttt.play(ttt.turn, button);
+    if (played) {
+      ttt.check_winner(ttt.turn);
+      ttt.switch_turns(ttt.turn);
+    }
+  })
+  $('.reset').on('click', function(event) {
+    event.preventDefault();
+    reset_grid();
+    ttt = new TicTacToe();
+  })
+  $('.reset-scores').on('click', function(event) {
+    event.preventDefault();
+    $('.score-1').text(0);
+    $('.score-2').text(0);
+    reset_grid();
+    ttt = new TicTacToe();
+  })
+})