diff --git a/index.css b/index.css index ae8b9a0..e75b672 100644 --- 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 index de8d985..27ad138 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,44 @@ - Tic Tac Toe! + Tic-Tac-Tequila Sunrise -

Tic Tac Toe

-
+

Tic-Tac-Tequila Sunrise

+
+

🍹 score

+ 0 +
+
+

🌶 score

+ 0 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ + +

- diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 33c03a0..89fa4b2 100644 --- 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(); + }) +})