dhd

met18001 · Mar 2, 2020 · e4c3c47 · e4c3c47
1 parent 7751748
commit e4c3c47
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 55 deletions.
diff --git 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
@@ -20,17 +20,17 @@
 
         <div class="gameboard">
 
-            <div class="square" @click.once="changeIt(0,0)">{{ board[0][0] }}</div>
-            <div class="square" @click.once="changeIt(0,1)"> {{ board[0][1] }}</div>
-            <div class="square" @click.once="changeIt(0,2)">{{ board[0][2] }}</div>
+            <div class="square" id="1" @click.once="changeIt(0,0)">{{ board[0][0] }}</div>
+            <div class="square" id="2" @click.once="changeIt(0,1)"> {{ board[0][1] }}</div>
+            <div class="square" id="3" @click.once="changeIt(0,2)">{{ board[0][2] }}</div>
 
-            <div class="square" @click.once="changeIt(1,0)">{{ board[1][0] }}</div>
-            <div class="square" @click.once="changeIt(1,1)">{{ board[1][1] }}</div>
-            <div class="square" @click.once="changeIt(1,2)">{{ board[1][2] }}</div>
+            <div class="square" id="3" @click.once="changeIt(1,0)">{{ board[1][0] }}</div>
+            <div class="square" id="5" @click.once="changeIt(1,1)">{{ board[1][1] }}</div>
+            <div class="square" id="6" @click.once="changeIt(1,2)">{{ board[1][2] }}</div>
 
-            <div class="square" @click.once="changeIt(2,0)">{{ board[2][0] }}</div>
-            <div class="square" @click.once="changeIt(2,1)">{{ board[2][1] }}</div>
-            <div class="square" @click.once="changeIt(2,2)">{{ board[2][2] }}</div>
+            <div class="square" id="7" @click.once="changeIt(2,0)">{{ board[2][0] }}</div>
+            <div class="square" id="8" @click.once="changeIt(2,1)">{{ board[2][1] }}</div>
+            <div class="square" id="9" @click.once="changeIt(2,2)">{{ board[2][2] }}</div>
 
         </div>
 

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