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';
}
}