From aa7c4a7a303d23b40f4c61cfc9c459cd114507d3 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 11:25:27 -0700 Subject: [PATCH 01/21] basic game board grid and play button. new TicTacToe instance is created when play button is clicked --- index.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index de8d985..e97a046 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,34 @@

Tic Tac Toe

-
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
From 943fcca2bd336ebc46fcd1a07cad443fbd7ba69e Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 11:25:54 -0700 Subject: [PATCH 02/21] css styling --- index.css | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/index.css b/index.css index ae8b9a0..979c520 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,43 @@ html { - + box-sizing: border-box; } + +#tic-tac-toe { + width: 450px; + height: 450px; + margin: 0 auto; + display: none; +} + +.row { + width: 100%; + height: 33%; + margin: 1% 0; +} + +.button { + width: 142px; + height: 145px; + border: 2px solid black; + float: left; + margin-left: 2px; + margin-right: 2px; +} + +.grid { + width: 100%; + height: 100%; + font-size: 5rem; + color: transparent; +} + +.claimed { + color: initial; +} + +.play { + width: 30%; + font-size: 3rem; + margin: 0 auto; + display: block; +} \ No newline at end of file From 10b25ecae689a077459b06cd3263de6e9c0550f0 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 11:26:13 -0700 Subject: [PATCH 03/21] created a show method that shows the game board when clicked --- tic-tac-toe.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 33c03a0..9f6f399 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,7 +1,11 @@ function TicTacToe() { - + } TicTacToe.prototype = { - + show: function() { + $("#tic-tac-toe").show(); + $('.play').hide(); + } + } From 0dfaa0dea928b92d25564fd93eb2a3847dab7ab9 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 13:52:29 -0700 Subject: [PATCH 04/21] created a Player class which keeps track of player id and symbol. turns alternate when a button is clicked. the player's symbol shows on the square that they clicked. --- index.css | 7 ++++++- index.html | 27 ++++++++++++++++----------- tic-tac-toe.js | 27 +++++++++++++++++++++++++-- 3 files changed, 47 insertions(+), 14 deletions(-) diff --git a/index.css b/index.css index 979c520..3968f86 100644 --- a/index.css +++ b/index.css @@ -28,8 +28,13 @@ html { width: 100%; height: 100%; font-size: 5rem; - color: transparent; + /*color: transparent;*/ } +/* +.grid:hover { + background-color: purple; + border: purple; +}*/ .claimed { color: initial; diff --git a/index.html b/index.html index e97a046..82f3e0d 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,19 @@

Tic Tac Toe

-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
@@ -31,11 +31,16 @@

Tic Tac Toe

diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 9f6f399..7c746eb 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,11 +1,34 @@ +function Player(id, sym) { + this.id = id; + this.symbol = sym; +} + function TicTacToe() { - + this.player_one = new Player(1, '🌶'); + this.player_two = new Player(2, '🍹'); + this.turn = this.player_one; } TicTacToe.prototype = { show: function() { $("#tic-tac-toe").show(); $('.play').hide(); + }, + play: function(player, button) { + console.log(player); + var selected_button = button.data('cell'); + var sym; + player.id === 1 ? sym = '🌶' : sym = '🍹'; + button.text(sym); + console.log(button); + if (player.id === 1) { + this.turn = this.player_two; + } else { + this.turn = this.player_one; + } } - } + +$(document).on('ready', function() { + +}) From eebaec880d7d968c6499239cffef334c7b96829b Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 14:12:59 -0700 Subject: [PATCH 05/21] refactored and fixed a bug that allowed players to overwrite claimed spots --- tic-tac-toe.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 7c746eb..6081f92 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -15,12 +15,9 @@ TicTacToe.prototype = { $('.play').hide(); }, play: function(player, button) { - console.log(player); - var selected_button = button.data('cell'); - var sym; - player.id === 1 ? sym = '🌶' : sym = '🍹'; - button.text(sym); - console.log(button); + if (button.text() !== '') {return} + button.text(player.symbol); + if (player.id === 1) { this.turn = this.player_two; } else { From 6f5419741441758c8f20c1d425eaf69a338613aa Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 14:14:37 -0700 Subject: [PATCH 06/21] removed unnecessary code (data-cell in HTML and styling for .claimed class which is no longer being used --- index.css | 12 +----------- index.html | 18 +++++++++--------- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/index.css b/index.css index 3968f86..cd544b2 100644 --- a/index.css +++ b/index.css @@ -28,16 +28,6 @@ html { width: 100%; height: 100%; font-size: 5rem; - /*color: transparent;*/ -} -/* -.grid:hover { - background-color: purple; - border: purple; -}*/ - -.claimed { - color: initial; } .play { @@ -45,4 +35,4 @@ html { font-size: 3rem; margin: 0 auto; display: block; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 82f3e0d..decf87e 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,19 @@

Tic Tac Toe

-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
From 26bf0ff377d37219a10a6b4e0dad50f39bdbc3f6 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 14:18:06 -0700 Subject: [PATCH 07/21] moved js/jquery to the js file from html file --- index.html | 14 -------------- tic-tac-toe.js | 12 +++++++++++- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index decf87e..93ae76e 100644 --- a/index.html +++ b/index.html @@ -29,19 +29,5 @@

Tic Tac Toe

- diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 6081f92..cbb4b2f 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -27,5 +27,15 @@ TicTacToe.prototype = { } $(document).on('ready', function() { - + console.log('Welcome to Tic-Tac-Toe!'); + var ttt = new TicTacToe(); + $('.play').on('click', function(event) { + ttt.show(); + }) + $('.grid').on('click', function(event) { + event.preventDefault(); + var button = $(this); + ttt.play(ttt.turn, button); + }) }) + \ No newline at end of file From 5a11e4366213d5fa4393b2ebc2552e07bb47df80 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 16:10:00 -0700 Subject: [PATCH 08/21] adding winning functionality --- index.html | 18 +++++++++--------- tic-tac-toe.js | 46 ++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 53 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 93ae76e..c90d3b9 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,19 @@

Tic Tac Toe

-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
diff --git a/tic-tac-toe.js b/tic-tac-toe.js index cbb4b2f..59a00ff 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,6 +1,8 @@ function Player(id, sym) { this.id = id; this.symbol = sym; + this.numbers = {}; + this.letters = {}; } function TicTacToe() { @@ -17,12 +19,53 @@ TicTacToe.prototype = { play: function(player, button) { if (button.text() !== '') {return} button.text(player.symbol); + var letter = button.data('cell')[0]; + var num = button.data('cell')[1]; - if (player.id === 1) { + this._inc_or_create_key(player.numbers, num); + this._inc_or_create_key(player.letters, letter); + + if (this.won(player)) { + console.log('PLAYER ' + player.id + " WINS!"); + } else if (player.id === 1) { this.turn = this.player_two; } else { this.turn = this.player_one; } + }, + + won: function(player) { + // if letters are all the same, numbers are all the same, or letters & numbers different + // then the player wins (letters/numbers from data-cell attr in buttons) + var winner = false; + var num_keys = Object.keys(player.numbers); + var letter_keys = Object.keys(player.letters); + + if (num_keys.length === 3 && letter_keys.length === 3) { + return true; + } + + for (var n_key of num_keys) { + if (player.numbers[n_key] === 3) { + winner = true; + } + } + + for (var l_key of letter_keys) { + if (player.letters[l_key] === 3) { + winner = true; + } + } + + return winner; + }, + + _inc_or_create_key: function(obj, key) { + if (obj[key]) { + obj[key]++; + } else { + obj[key] = 1; + } } } @@ -38,4 +81,3 @@ $(document).on('ready', function() { ttt.play(ttt.turn, button); }) }) - \ No newline at end of file From 5cb77a903b28cb2ba9e12a0498eaf4788a70b9a3 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Thu, 30 Jun 2016 20:59:04 -0700 Subject: [PATCH 09/21] fixed a bug that was improperly checking if both diagonal squares were claimed for a win. if there's a draw, it lets the players know. added a reset button which is NOT functional yet --- index.css | 29 +++++++++++++++-- index.html | 4 ++- tic-tac-toe.js | 84 +++++++++++++++++++++++++++++++++++--------------- 3 files changed, 90 insertions(+), 27 deletions(-) diff --git a/index.css b/index.css index cd544b2..08cad07 100644 --- a/index.css +++ b/index.css @@ -2,11 +2,16 @@ html { box-sizing: border-box; } +h1 { + text-align: center; + font-variant: small-caps; +} + #tic-tac-toe { width: 450px; height: 450px; margin: 0 auto; - display: none; + /*display: none;*/ } .row { @@ -33,6 +38,26 @@ html { .play { width: 30%; font-size: 3rem; - margin: 0 auto; + margin: 20% auto; display: block; + border-radius: 12px; +} + +p { + font-size: 3rem; + color: lime; + text-align: center; + margin: 1.5rem 0; } + +p.draw { + color: orange; +} + +.reset { + width: 30%; + font-size: 2rem; + margin: 0 auto; + display: none; + border-radius: 12px; +} \ No newline at end of file diff --git a/index.html b/index.html index c90d3b9..ebf01a7 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@

Tic Tac Toe

- +
@@ -26,6 +26,8 @@

Tic Tac Toe

+

+ diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 59a00ff..4b1adbf 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -3,70 +3,106 @@ function Player(id, sym) { this.symbol = sym; this.numbers = {}; this.letters = {}; + this.center_sq = false; + this.corners = []; } function TicTacToe() { this.player_one = new Player(1, '🌶'); this.player_two = new Player(2, '🍹'); this.turn = this.player_one; + this.turn_counter = 0; } TicTacToe.prototype = { - show: function() { - $("#tic-tac-toe").show(); - $('.play').hide(); - }, + // show: function() { + // $("#tic-tac-toe").show(); + // $('.play').hide(); + // }, + play: function(player, button) { if (button.text() !== '') {return} button.text(player.symbol); - var letter = button.data('cell')[0]; - var num = button.data('cell')[1]; + 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); + } - this._inc_or_create_key(player.numbers, num); - this._inc_or_create_key(player.letters, letter); + inc_or_create_key(player.numbers, num); + inc_or_create_key(player.letters, letter); + this.turn_counter++; if (this.won(player)) { - console.log('PLAYER ' + player.id + " WINS!"); - } else if (player.id === 1) { + $('p').text('PLAYER ' + player.id + ' WINS!'); + $('.reset').css("display", "block"); + } else if (this.turn_counter === 9) { + $('p').text("IT'S A DRAW!"); + $('p').addClass('draw'); + } else { + this.switch_turns(player); + } + }, + + switch_turns: function(player) { + if (player.id === 1) { this.turn = this.player_two; } else { this.turn = this.player_one; } + }, won: function(player) { // if letters are all the same, numbers are all the same, or letters & numbers different // then the player wins (letters/numbers from data-cell attr in buttons) - var winner = false; var num_keys = Object.keys(player.numbers); var letter_keys = Object.keys(player.letters); - if (num_keys.length === 3 && letter_keys.length === 3) { - return true; - } - + // 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) { - winner = 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) { - winner = true; + return true; } } - return winner; + // if the player has all possible numbers and letters AND they claimed + // the center square + 2 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)) { + return true; + } + } + + return false; }, - _inc_or_create_key: function(obj, key) { - if (obj[key]) { - obj[key]++; - } else { - obj[key] = 1; - } +} + +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; } $(document).on('ready', function() { From e732ef850c1e40591f1cdc2e43f7f9dcb9c62476 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 10:50:20 -0700 Subject: [PATCH 10/21] removed center square tracker (not needed) --- tic-tac-toe.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 4b1adbf..49107ea 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -3,7 +3,6 @@ function Player(id, sym) { this.symbol = sym; this.numbers = {}; this.letters = {}; - this.center_sq = false; this.corners = []; } @@ -15,11 +14,6 @@ function TicTacToe() { } TicTacToe.prototype = { - // show: function() { - // $("#tic-tac-toe").show(); - // $('.play').hide(); - // }, - play: function(player, button) { if (button.text() !== '') {return} button.text(player.symbol); @@ -28,7 +22,6 @@ TicTacToe.prototype = { var num = square[1]; if (square === 'B2') { - player.center_sq = true; } else if (['A1', 'A3', 'C1', 'C3'].includes(square)) { player.corners.push(square); } @@ -58,8 +51,6 @@ TicTacToe.prototype = { }, won: function(player) { - // if letters are all the same, numbers are all the same, or letters & numbers different - // then the player wins (letters/numbers from data-cell attr in buttons) var num_keys = Object.keys(player.numbers); var letter_keys = Object.keys(player.letters); @@ -77,9 +68,9 @@ TicTacToe.prototype = { } } - // if the player has all possible numbers and letters AND they claimed - // the center square + 2 corners, they have a diagonal win - if (num_keys.length === 3 && letter_keys.length === 3 && player.center_sq === true) { + // if the player has something in all rows (letters) and columns (numbers) AND they claimed + // opposite corners, they have a diagonal win + if (num_keys.length === 3 && letter_keys.length === 3) { if (containsAll(['A1', 'C3'], player.corners) || containsAll(['A3', 'C1'], player.corners)) { return true; } From d4908e5bf573b0cdfd1c84633f9bb7f301d55337 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 10:51:29 -0700 Subject: [PATCH 11/21] removed an extra comma at the end of the prototype function list --- tic-tac-toe.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 49107ea..66ea0fc 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -77,8 +77,7 @@ TicTacToe.prototype = { } return false; - }, - + } } function inc_or_create_key(obj, key) { From 2e212864d1505993208661635ad03ca7ed04b0db Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 10:58:30 -0700 Subject: [PATCH 12/21] added back the center_sq tracking--it WAS needed after all... --- tic-tac-toe.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 66ea0fc..9ac79db 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -4,6 +4,7 @@ function Player(id, sym) { this.numbers = {}; this.letters = {}; this.corners = []; + this.center_sq = false; } function TicTacToe() { @@ -22,6 +23,7 @@ TicTacToe.prototype = { var num = square[1]; if (square === 'B2') { + player.center_sq = true; } else if (['A1', 'A3', 'C1', 'C3'].includes(square)) { player.corners.push(square); } @@ -29,16 +31,6 @@ TicTacToe.prototype = { inc_or_create_key(player.numbers, num); inc_or_create_key(player.letters, letter); this.turn_counter++; - - if (this.won(player)) { - $('p').text('PLAYER ' + player.id + ' WINS!'); - $('.reset').css("display", "block"); - } else if (this.turn_counter === 9) { - $('p').text("IT'S A DRAW!"); - $('p').addClass('draw'); - } else { - this.switch_turns(player); - } }, switch_turns: function(player) { @@ -70,13 +62,25 @@ TicTacToe.prototype = { // if the player has something in all rows (letters) and columns (numbers) AND they claimed // opposite corners, they have a diagonal win - if (num_keys.length === 3 && letter_keys.length === 3) { + if (num_keys.length === 3 && letter_keys.length === 3 && player.center_sq === true) { if (containsAll(['A1', 'C3'], player.corners) || containsAll(['A3', 'C1'], player.corners)) { return true; } } return false; + }, + + check_winner: function(player) { + if (this.won(player)) { + $('p').text('PLAYER ' + player.id + ' WINS!'); + $('.reset').css("display", "block"); + } else if (this.turn_counter === 9) { + $('p').text("IT'S A DRAW!"); + $('p').addClass('draw'); + } else { + this.switch_turns(player); + } } } @@ -105,5 +109,6 @@ $(document).on('ready', function() { event.preventDefault(); var button = $(this); ttt.play(ttt.turn, button); + ttt.check_winner(ttt.turn); }) }) From 56d543430b913df59dd26aed7ba63655aae9d11f Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 11:01:02 -0700 Subject: [PATCH 13/21] split up checking for winner and switching turns (was in the play method but now done separately when a button is clicked). --- tic-tac-toe.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 9ac79db..40ba4c7 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -78,8 +78,6 @@ TicTacToe.prototype = { } else if (this.turn_counter === 9) { $('p').text("IT'S A DRAW!"); $('p').addClass('draw'); - } else { - this.switch_turns(player); } } } @@ -110,5 +108,6 @@ $(document).on('ready', function() { var button = $(this); ttt.play(ttt.turn, button); ttt.check_winner(ttt.turn); + ttt.switch_turns(ttt.turn); }) }) From 43f5d8788081567904738fcfb186f391144f2a30 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 11:18:18 -0700 Subject: [PATCH 14/21] added reset functionality. button shows all the time --- index.css | 2 +- index.html | 1 - tic-tac-toe.js | 11 +++++++---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/index.css b/index.css index 08cad07..d4e2d61 100644 --- a/index.css +++ b/index.css @@ -58,6 +58,6 @@ p.draw { width: 30%; font-size: 2rem; margin: 0 auto; - display: none; + display: block; border-radius: 12px; } \ No newline at end of file diff --git a/index.html b/index.html index ebf01a7..1db1ab0 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,6 @@

Tic Tac Toe

-
diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 40ba4c7..5e028c0 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -74,7 +74,7 @@ TicTacToe.prototype = { check_winner: function(player) { if (this.won(player)) { $('p').text('PLAYER ' + player.id + ' WINS!'); - $('.reset').css("display", "block"); + // $('.reset').css("display", "block"); } else if (this.turn_counter === 9) { $('p').text("IT'S A DRAW!"); $('p').addClass('draw'); @@ -100,9 +100,6 @@ function containsAll(test_cases, corners){ $(document).on('ready', function() { console.log('Welcome to Tic-Tac-Toe!'); var ttt = new TicTacToe(); - $('.play').on('click', function(event) { - ttt.show(); - }) $('.grid').on('click', function(event) { event.preventDefault(); var button = $(this); @@ -110,4 +107,10 @@ $(document).on('ready', function() { ttt.check_winner(ttt.turn); ttt.switch_turns(ttt.turn); }) + $('.reset').on('click', function(event) { + event.preventDefault(); + $('.grid').text(''); + $('p').text(''); + ttt = new TicTacToe(); + }) }) From 3d6460787f6bfc097064fdd07b014b3ae7aedddd Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 11:20:00 -0700 Subject: [PATCH 15/21] changed title --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1db1ab0..ea84ce5 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ -

Tic Tac Toe

+

Tic-Tac-Tequila Sunrise

From 75aa2187d4451601346d8836eaf1b458d69f39c4 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 13:02:58 -0700 Subject: [PATCH 16/21] if the game is over, no more turns can be played until the board is reset using the reset button --- index.css | 25 ++++++++++++++++++++++--- index.html | 4 ++-- tic-tac-toe.js | 19 +++++++++++++------ 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/index.css b/index.css index d4e2d61..669d172 100644 --- a/index.css +++ b/index.css @@ -1,10 +1,21 @@ 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; + /*color: #fff;*/ } #tic-tac-toe { @@ -20,6 +31,10 @@ h1 { margin: 1% 0; } +button { + text-shadow: 2px 2px 2px black; +} + .button { width: 142px; height: 145px; @@ -33,6 +48,8 @@ h1 { width: 100%; height: 100%; font-size: 5rem; + background-color: transparent; + border: 2px solid black; } .play { @@ -47,7 +64,7 @@ p { font-size: 3rem; color: lime; text-align: center; - margin: 1.5rem 0; + margin: 1rem 0; } p.draw { @@ -55,9 +72,11 @@ p.draw { } .reset { - width: 30%; - font-size: 2rem; + width: 10%; + font-size: 1.5rem; margin: 0 auto; display: block; border-radius: 12px; + background-color: black; + color: #e60000; } \ No newline at end of file diff --git a/index.html b/index.html index ea84ce5..923d25b 100644 --- a/index.html +++ b/index.html @@ -25,8 +25,8 @@

Tic-Tac-Tequila Sunrise

-

- +

+

diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 5e028c0..d86287e 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -12,11 +12,12 @@ function TicTacToe() { 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() !== '') {return} + if (button.text() !== '' || this.game_over === true) {return false} button.text(player.symbol); var square = button.data('cell'); var letter = square[0]; @@ -31,6 +32,7 @@ TicTacToe.prototype = { inc_or_create_key(player.numbers, num); inc_or_create_key(player.letters, letter); this.turn_counter++; + return true; }, switch_turns: function(player) { @@ -49,6 +51,7 @@ TicTacToe.prototype = { // 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; } } @@ -56,6 +59,7 @@ TicTacToe.prototype = { // 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; } } @@ -64,6 +68,7 @@ TicTacToe.prototype = { // 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; } } @@ -73,10 +78,10 @@ TicTacToe.prototype = { check_winner: function(player) { if (this.won(player)) { - $('p').text('PLAYER ' + player.id + ' WINS!'); + $('.outcome').text(player.symbol + ' WINS!'); // $('.reset').css("display", "block"); } else if (this.turn_counter === 9) { - $('p').text("IT'S A DRAW!"); + $('.outcome').text("IT'S A DRAW!"); $('p').addClass('draw'); } } @@ -103,9 +108,11 @@ $(document).on('ready', function() { $('.grid').on('click', function(event) { event.preventDefault(); var button = $(this); - ttt.play(ttt.turn, button); - ttt.check_winner(ttt.turn); - ttt.switch_turns(ttt.turn); + 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(); From 1768c57e270c6662eca16102b8cb23a882b0ed48 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 13:12:51 -0700 Subject: [PATCH 17/21] fixed a bug that wasn't showing the reset button after clicking it --- index.css | 2 +- tic-tac-toe.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 669d172..821ee74 100644 --- a/index.css +++ b/index.css @@ -78,5 +78,5 @@ p.draw { display: block; border-radius: 12px; background-color: black; - color: #e60000; + color: rgb(255,201,0); } \ No newline at end of file diff --git a/tic-tac-toe.js b/tic-tac-toe.js index d86287e..a7d31a0 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -8,8 +8,8 @@ function Player(id, sym) { } function TicTacToe() { - this.player_one = new Player(1, '🌶'); - this.player_two = new Player(2, '🍹'); + 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; @@ -117,7 +117,7 @@ $(document).on('ready', function() { $('.reset').on('click', function(event) { event.preventDefault(); $('.grid').text(''); - $('p').text(''); + $('.outcome').text(''); ttt = new TicTacToe(); }) }) From cf222e232cf6d568b4916112c44ce37824f75103 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 13:40:56 -0700 Subject: [PATCH 18/21] added scores for each player and a button to reset the scores --- index.css | 57 +++++++++++++++++++++++++++++++++++++++----------- index.html | 13 +++++++++++- tic-tac-toe.js | 10 ++++++++- 3 files changed, 66 insertions(+), 14 deletions(-) diff --git a/index.css b/index.css index 821ee74..5178061 100644 --- a/index.css +++ b/index.css @@ -19,8 +19,8 @@ h1 { } #tic-tac-toe { - width: 450px; - height: 450px; + width: 390px; + height: 390px; margin: 0 auto; /*display: none;*/ } @@ -36,12 +36,10 @@ button { } .button { - width: 142px; - height: 145px; + width: 126px; + height: 130px; border: 2px solid black; float: left; - margin-left: 2px; - margin-right: 2px; } .grid { @@ -49,7 +47,11 @@ button { height: 100%; font-size: 5rem; background-color: transparent; - border: 2px solid black; + border: 4px solid black; +} + +button:focus { + outline: 0; } .play { @@ -71,12 +73,43 @@ p.draw { color: orange; } -.reset { - width: 10%; +.reset, .reset-scores { + width: 20%; font-size: 1.5rem; - margin: 0 auto; + margin: 1.5rem auto; display: block; border-radius: 12px; background-color: black; - color: rgb(255,201,0); -} \ No newline at end of file + color: #ffcc00; +} + +.reset-scores { + color: rgb(241,90,0); + margin-top: 0; +} + +h2 { + font-size: 3rem; + text-decoration: underline; +} + +.player-1-score { + float: left; + margin-left: 10%; + margin-top: 5%; +} + +.player-2-score { + float: right; + margin-right: 10%; + margin-top: 5%; +} + +.player-1-score span, .player-2-score span { + display: block; + text-align: center; + font-size: 2.5rem; +} + + + diff --git a/index.html b/index.html index 923d25b..e5f2adb 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,14 @@

Tic-Tac-Tequila Sunrise

+
+

🍹 score

+ 0 +
+
+

🌶 score

+ 0 +
@@ -25,7 +33,10 @@

Tic-Tac-Tequila Sunrise

-

+

+ + +

diff --git a/tic-tac-toe.js b/tic-tac-toe.js index a7d31a0..c241ed3 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -79,7 +79,10 @@ TicTacToe.prototype = { check_winner: function(player) { if (this.won(player)) { $('.outcome').text(player.symbol + ' WINS!'); - // $('.reset').css("display", "block"); + 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'); @@ -120,4 +123,9 @@ $(document).on('ready', function() { $('.outcome').text(''); ttt = new TicTacToe(); }) + $('.reset-scores').on('click', function(event) { + event.preventDefault(); + $('.score-1').text(0); + $('.score-2').text(0); + }) }) From f7438d8fe289a7adeb9ae22d9e0bd7a102b8d5f2 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 13:54:40 -0700 Subject: [PATCH 19/21] styling --- index.css | 14 +++++++------- index.html | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.css b/index.css index 5178061..c49f794 100644 --- a/index.css +++ b/index.css @@ -15,14 +15,12 @@ h1 { text-align: center; font-variant: small-caps; font-size: 3rem; - /*color: #fff;*/ } #tic-tac-toe { width: 390px; height: 390px; margin: 0 auto; - /*display: none;*/ } .row { @@ -64,7 +62,7 @@ button:focus { p { font-size: 3rem; - color: lime; + color: #fff; text-align: center; margin: 1rem 0; } @@ -74,9 +72,9 @@ p.draw { } .reset, .reset-scores { - width: 20%; + width: 15%; font-size: 1.5rem; - margin: 1.5rem auto; + margin: 1.5rem auto 0 auto; display: block; border-radius: 12px; background-color: black; @@ -85,7 +83,7 @@ p.draw { .reset-scores { color: rgb(241,90,0); - margin-top: 0; + margin-top: 0.8rem; } h2 { @@ -111,5 +109,7 @@ h2 { font-size: 2.5rem; } - +.outcome { + margin-top: 1.5rem; +} diff --git a/index.html b/index.html index e5f2adb..973f034 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Tic Tac Toe! + Tic-Tac-Tequila Sunrise From 03621ab9bb2f17fd18ee81e0324bc67099276e50 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 14:12:31 -0700 Subject: [PATCH 20/21] css styling and updated comments for win condition --- index.css | 7 ++++++- tic-tac-toe.js | 5 ++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index c49f794..6212f1d 100644 --- a/index.css +++ b/index.css @@ -48,6 +48,11 @@ button { border: 4px solid black; } +.grid:hover { + background-color: rgba(255,255,255,0.3); + transition: all 0.2s ease; +} + button:focus { outline: 0; } @@ -61,7 +66,7 @@ button:focus { } p { - font-size: 3rem; + font-size: 3.5rem; color: #fff; text-align: center; margin: 1rem 0; diff --git a/tic-tac-toe.js b/tic-tac-toe.js index c241ed3..37af311 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -17,7 +17,7 @@ function TicTacToe() { TicTacToe.prototype = { play: function(player, button) { - if (button.text() !== '' || this.game_over === true) {return false} + if (button.text() !== '' || this.game_over === true) {return false;} button.text(player.symbol); var square = button.data('cell'); var letter = square[0]; @@ -41,7 +41,6 @@ TicTacToe.prototype = { } else { this.turn = this.player_one; } - }, won: function(player) { @@ -65,7 +64,7 @@ TicTacToe.prototype = { } // if the player has something in all rows (letters) and columns (numbers) AND they claimed - // opposite corners, they have a diagonal win + // 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; From b55b1dd66fba6e46f32e55c42eb96408c54a3603 Mon Sep 17 00:00:00 2001 From: Lisa Rolczynski Date: Fri, 1 Jul 2016 15:38:26 -0700 Subject: [PATCH 21/21] syling changes. grid width in % instead of px, and height adjusts to match width --- index.css | 55 ++++++++++++++++++++++++++++++++++++-------------- index.html | 25 +++++++++++------------ tic-tac-toe.js | 15 +++++++++++--- 3 files changed, 64 insertions(+), 31 deletions(-) diff --git a/index.css b/index.css index 6212f1d..e75b672 100644 --- a/index.css +++ b/index.css @@ -18,8 +18,7 @@ h1 { } #tic-tac-toe { - width: 390px; - height: 390px; + width: 40%; margin: 0 auto; } @@ -33,11 +32,10 @@ button { text-shadow: 2px 2px 2px black; } -.button { - width: 126px; - height: 130px; - border: 2px solid black; +.button-div { + width: 30%; float: left; + display: inline; } .grid { @@ -45,7 +43,7 @@ button { height: 100%; font-size: 5rem; background-color: transparent; - border: 4px solid black; + border: 6px solid black; } .grid:hover { @@ -66,7 +64,7 @@ button:focus { } p { - font-size: 3.5rem; + font-size: 3rem; color: #fff; text-align: center; margin: 1rem 0; @@ -79,42 +77,69 @@ p.draw { .reset, .reset-scores { width: 15%; font-size: 1.5rem; - margin: 1.5rem auto 0 auto; 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); - margin-top: 0.8rem; + float: right; + margin-right: 3%; } h2 { - font-size: 3rem; + font-size: 2.3rem; text-decoration: underline; + font-variant: small-caps; } .player-1-score { float: left; - margin-left: 10%; + margin-left: 7%; margin-top: 5%; } .player-2-score { float: right; - margin-right: 10%; + margin-right: 7%; margin-top: 5%; } .player-1-score span, .player-2-score span { display: block; text-align: center; - font-size: 2.5rem; + font-size: 2rem; } .outcome { - margin-top: 1.5rem; + 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 973f034..27ad138 100644 --- a/index.html +++ b/index.html @@ -18,25 +18,24 @@

🌶 score

-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-

- - -

+

+ +

diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 37af311..89fa4b2 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -104,9 +104,17 @@ function containsAll(test_cases, corners){ return true; } +function reset_grid() { + $('.grid').text(''); + $('.outcome').text(''); +} + $(document).on('ready', function() { - console.log('Welcome to Tic-Tac-Toe!'); + // 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); @@ -118,13 +126,14 @@ $(document).on('ready', function() { }) $('.reset').on('click', function(event) { event.preventDefault(); - $('.grid').text(''); - $('.outcome').text(''); + 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(); }) })