From 5bcecd9733295ec3078300175deab93a6436f460 Mon Sep 17 00:00:00 2001 From: tsbugbee Date: Sun, 1 Mar 2020 13:35:18 -0500 Subject: [PATCH] Week-6 --- week-6/css/style.css | 64 ++++++++++++++++++ week-6/index.html | 43 +++++++++++++ week-6/js/tic-tac-toe.js | 136 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 243 insertions(+) create mode 100644 week-6/css/style.css create mode 100644 week-6/index.html create mode 100644 week-6/js/tic-tac-toe.js diff --git a/week-6/css/style.css b/week-6/css/style.css new file mode 100644 index 0000000..248cddb --- /dev/null +++ b/week-6/css/style.css @@ -0,0 +1,64 @@ +/* CSS files add styling rules to your content */ + +* { + box-sizing: border-box; +} + +:root { + --board-size: 200px; + --line-color: grey; + --gap: 5px; +} + +body { + font-family: Arial, Helvetica, sans-serif; + +} + +main { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + + +.gameboard { + width: calc( (3 * var(--board-size)) + (2 * var(--gap)) ); + display: grid; + grid-template-columns: repeat(3, var(--board-size) ); + grid-template-rows: repeat(3, var(--board-size) ); + place-items: stretch; + background-color: var(--line-color); + grid-gap: 5px; + +} + +.square { + display: flex; + justify-content: center; + align-items: center; + background-color: white; + color: #333; + font-size: var(--board-size); + line-height: var(--board-size); + text-transform: uppercase; + margin:0; + padding:0; + cursor: pointer; + +} + +.square:hover { + background-color: #eee; +} + + +.banner { + background-color: lightblue; + position: absolute; + top: 0px; + padding: 1em; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/week-6/index.html b/week-6/index.html new file mode 100644 index 0000000..0c948a5 --- /dev/null +++ b/week-6/index.html @@ -0,0 +1,43 @@ + + + + + + Tic Tac Toe + + + + + + + + +
+ + + +
+ +
{{ board[0][0] }}
+
{{ board[0][1] }}
+
{{ board[0][2] }}
+ +
{{ board[1][0] }}
+
{{ board[1][1] }}
+
{{ board[1][2] }}
+ +
{{ board[2][0] }}
+
{{ board[2][1] }}
+
{{ board[2][2] }}
+ +
+ + +
+ + + + + \ No newline at end of file diff --git a/week-6/js/tic-tac-toe.js b/week-6/js/tic-tac-toe.js new file mode 100644 index 0000000..66bfadb --- /dev/null +++ b/week-6/js/tic-tac-toe.js @@ -0,0 +1,136 @@ +var app = new Vue({ + el: '#vue-app', + data: { + topText: 'It\'s your turn, ', + turn: 'x', + win1: null, + win2: null, + win3: null, + board:[ + [null, null, null], + [null, null, null], + [null, null, null] + ], + gameOver: false + }, + methods:{ + checkSquareClick: function(row, column){ + if(this.board[row][column] == null){ + + this.board[row][column] = this.turn; + //could have put the content of all these conditionals into a separate function to make it less cluttered, but eh + if(this.board[0][0] == this.board[0][1] && this.board[0][0] == this.board[0][2] && this.board[0][0] != null){ + this.topText = 'The winner is: '; + this.win1 = "00"; + this.win2 = "01"; + this.win3 = "02"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[1][0] == this.board[1][1] && this.board[1][0] == this.board[1][2] && this.board[1][0] != null){ + this.topText = 'The winner is: '; + this.win1 = "10"; + this.win2 = "11"; + this.win3 = "12"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[2][0] == this.board[2][1] && this.board[2][0] == this.board[2][2] && this.board[2][0] != null){ + this.topText = 'The winner is: '; + this.win1 = "20"; + this.win2 = "21"; + this.win3 = "22"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[0][0] == this.board[1][0] && this.board[0][0] == this.board[2][0] && this.board[0][0] != null){ + this.topText = 'The winner is: '; + this.win1 = "00"; + this.win2 = "10"; + this.win3 = "20"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[0][1] == this.board[1][1] && this.board[0][1] == this.board[2][1] && this.board[0][1] != null){ + this.topText = 'The winner is: '; + this.win1 = "01"; + this.win2 = "11"; + this.win3 = "21"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[0][2] == this.board[1][2] && this.board[0][2] == this.board[2][2] && this.board[0][2] != null){ + this.topText = 'The winner is: '; + this.win1 = "02"; + this.win2 = "12"; + this.win3 = "22"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[0][0] == this.board[1][1] && this.board[0][0] == this.board[2][2] && this.board[0][0] != null){ + this.topText = 'The winner is: '; + this.win1 = "00"; + this.win2 = "11"; + this.win3 = "22"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + else if (this.board[0][2] == this.board[1][1] && this.board[0][2] == this.board[2][0] && this.board[0][2] != null){ + this.topText = 'The winner is: '; + this.win1 = "02"; + this.win2 = "11"; + this.win3 = "20"; + document.getElementById(this.win1).style.backgroundColor = "green"; + document.getElementById(this.win2).style.backgroundColor = "green"; + document.getElementById(this.win3).style.backgroundColor = "green"; + this.gameOver = true; + return; + } + if(this.turn == 'x'){ + this.turn = 'o'; + } + else{ + this.turn = 'x'; + } + } + + }, + clearBoard: function(){ + for(i = 0; i < 3; i++){ + for(j = 0; j < 3; j++){ + this.board[i][j] = null; + } + } + document.getElementById(this.win1).style.backgroundColor = "white"; + document.getElementById(this.win2).style.backgroundColor = "white"; + document.getElementById(this.win3).style.backgroundColor = "white"; + this.win1 = null; + this.win2 = null; + this.win3 = null; + this.gameOver = false; + this.topText = 'It\'s your turn, '; + this.turn = 'x'; + } + } +}); \ No newline at end of file