diff --git a/week-6/css/style.css b/week-6/css/style.css index 248cddb..53a50b5 100644 --- a/week-6/css/style.css +++ b/week-6/css/style.css @@ -16,9 +16,12 @@ body { } main { + display: -webkit-box; display: flex; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; min-height: 100vh; } @@ -35,9 +38,12 @@ main { } .square { + display: -webkit-box; display: flex; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; background-color: white; color: #333; font-size: var(--board-size); diff --git a/week-6/index.html b/week-6/index.html index e6ddd46..fbea97b 100644 --- a/week-6/index.html +++ b/week-6/index.html @@ -20,17 +20,17 @@
-
{{ board[0][0] }}
-
{{ board[0][1] }}
-
{{ board[0][2] }}
+
{{ board[0][0] }}
+
{{ board[0][1] }}
+
{{ board[0][2] }}
-
{{ board[1][0] }}
-
{{ board[1][1] }}
-
{{ board[1][2] }}
+
{{ board[1][0] }}
+
{{ board[1][1] }}
+
{{ board[1][2] }}
-
{{ board[2][0] }}
-
{{ board[2][1] }}
-
{{ board[2][2] }}
+
{{ board[2][0] }}
+
{{ board[2][1] }}
+
{{ board[2][2] }}
diff --git a/week-6/js/tic-tac-toe.js b/week-6/js/tic-tac-toe.js index 0a863b7..e6a584d 100644 --- a/week-6/js/tic-tac-toe.js +++ b/week-6/js/tic-tac-toe.js @@ -13,51 +13,82 @@ var app = new Vue({ this.board[row][column] = this.turn - let winnerx = "Player 'X', you are a winner!"; - let winnero = "Player 'O', you are a winner!"; + let winner = "Player" + this.turn + " you are a winner!"; + - if (this.board[0,0] == this.turn && this.board[0,1] == this.turn && this.board[0,2] == this.turn) { - this.board[0] ="Winner!"; - alert(winnerx); - }else if(this.board[0,0] == 'o' && this.board[0,1] == 'o' && this.board[0,2] =='o') { - this.board[0] ="Winner!"; - alert(winnero); - }else if(this.board[1,1] == 'x' && this.board[1,0] == 'x' && this.board[1,2] =='x') { - this.board[1] ="Winner!"; - alert(winnerx); - }else if(this.board[1,1] == 'o' && this.board[1,0] == 'o' && this.board[1,2] =='o') { - this.board[1] ="Winner!"; - alert(winnero); - }else if(this.board[2,1] == 'x' && this.board[2,0] == 'x' && this.board[2,2] =='x') { - this.board[2] ="Winner!"; - alert(winnerx); - }else if(this.board[2,1] == 'o' && this.board[2,0] == 'o' && this.board[2,2] =='o') { - this.board[2] ="Winner!"; - alert(winnero); + if (this.board[0,0] == this.turn && this.board[0,1] == this.turn && this.board[0,2] == this.turn){ + document.getElementById("1").style.backgroundcolor = "green"; + document.getElementById("2").style.backgroundcolor = "green"; + document.getElementById("3").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + + }else if (this.board[0,0] == this.turn && this.board[1,0] == this.turn && this.board[2,0] == this.turn){ + document.getElementById("1").style.backgroundcolor = "green"; + document.getElementById("4").style.backgroundcolor = "green"; + document.getElementById("7").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + }else if (this.board[1,0] == this.turn && this.board[1,1] == this.turn && this.board[1,2] == this.turn) { + document.getElementById("4").style.backgroundcolor = "green"; + document.getElementById("5").style.backgroundcolor = "green"; + document.getElementById("6").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); - }else if(this.board[0][0] == 'x' && this.board[1][0] == 'x' && this.board[2][0] == 'x'){ - this.board[0][0] = "W"; - this.board[1][0] = "I"; - this.board[2][0] = "N"; - alert(winnerx); - }else if(this.board[0][0] == 'o' && this.board[1][0] == 'o' && this.board[2][0] == 'o'){ - this.board[0][0] = "W"; - this.board[1][0] = "I"; - this.board[2][0] = "N"; - alert(winnero); - }else if(this.board[1][1] == 'o' && this.board[1][0] == 'o' && this.board[1][2] == 'o'){ - this.board[0][0] = "W"; - this.board[1][0] = "I"; - this.board[2][0] = "N"; - alert(winnero); -}else if(this.board[1][1] == 'x' && this.board[1][0] == 'x' && this.board[1][2] == 'x'){ - this.board[0][0] = "W"; - this.board[1][0] = "I"; - this.board[2][0] = "N"; - alert(winnerx); -} - //correctly identifies when someone has won + }else if (this.board[2,0] == this.turn && this.board[2,1] == this.turn && this.board[2,2] == this.turn) { + document.getElementById("7").style.backgroundcolor = "green"; + document.getElementById("8").style.backgroundcolor = "green"; + document.getElementById("9").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + + }else if (this.board[0,1] == this.turn && this.board[1,1] == this.turn && this.board[2,1] == this.turn) { + document.getElementById("2").style.backgroundcolor = "green"; + document.getElementById("5").style.backgroundcolor = "green"; + document.getElementById("8").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + + }else if (this.board[0,2] == this.turn && this.board[1,2] == this.turn && this.board[2,2] == this.turn) { + document.getElementById("3").style.backgroundcolor = "green"; + document.getElementById("6").style.backgroundcolor = "green"; + document.getElementById("9").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + + }else if (this.board[0,0] == this.turn && this.board[1,1] == this.turn && this.board[2,2] == this.turn) { + document.getElementById("1").style.backgroundcolor = "green"; + document.getElementById("5").style.backgroundcolor = "green"; + document.getElementById("9").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + + }else if (this.board [2,0] == this.turn && this.board [1,1] == this.turn && this.board [0,2] == this.turn){ + document.getElementById("3").style.backgroundcolor = "green"; + document.getElementById("5").style.backgroundcolor = "green"; + document.getElementById("6").style.backgroundcolor = "green"; + alert(winner); + setTimeout(function(){ + if(!alert('Play Again?')){window.location.reload();} + }, 0500); + } + this.turn = (this.turn == 'x') ? 'o' : 'x'; } }