add turn-red and turn-blue on swap. Still jerks at class removal

Bill-the-dev · Feb 14, 2022 · 87eac04 · 87eac04
1 parent db893ad
commit 87eac04
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/dist/main.css b/dist/main.css
@@ -21,7 +21,7 @@ body {
 }
 
 .turn-red {
-  animation: bg-animationBlue 5s;
+  animation: bg-animationRed 5s;
   animation-fill-mode: forwards;
 }
 
@@ -32,7 +32,7 @@ body {
 
 @keyframes bg-animationRed {
   100% {
-    background-position: left;
+    background-position: right;
   }
 }
 @keyframes bg-animationBlue {

diff --git a/dist/main.js b/dist/main.js
diff --git a/notes_bugs.md b/notes_bugs.md
@@ -12,6 +12,11 @@
 - HTML formatting not correct.  Font issue? Pojo issue?
 
 
+*Turn transition background*
+- Start button template works! Now to figure out turn tracking to call red/blue alternate
+
+*Turn transition card* 
+- Flip transluscent over to indicate blue/red turn. Above and below the onDeck.
 
 
 

diff --git a/src/scripts/game.js b/src/scripts/game.js
@@ -251,9 +251,16 @@ export default class Game {
 
   viewSwapTurn() {
     let that = this;
-
+    // debugger
     let playedCard = document.querySelector(".active-card");
     let deckCard = document.querySelector("#back3");
+    let body = document.querySelector(".body");
+    if (that.currentPlayerIdx === 0) {
+      // body.classList.remove("turn-blue")
+      body.classList.add("turn-red");
+    } else {
+      body.classList.add("turn-blue")
+    }
 
 
     // squares remove highlight

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -20,7 +20,7 @@ body {
 }
 
 .turn-red {
-  animation: bg-animationBlue 5s;
+  animation: bg-animationRed 5s;
   animation-fill-mode: forwards;
 }
 
@@ -30,21 +30,13 @@ body {
 }
 
 @keyframes bg-animationRed {
-  0% {
-
-  }
-  100% {
-    background-position: left;
-  }
+  0% { }
+  100% { background-position: right; }
 }
 
 @keyframes bg-animationBlue {
-  0% {
-
-  }
-  100% {
-    background-position: left;
-  }
+  0% {}
+  100% { background-position: left; }
 }
 
 @keyframes bg-animationNull {