add background animation on game start, needs turn flip

Bill-the-dev · Feb 13, 2022 · db893ad · db893ad
1 parent fc781d3
commit db893ad
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 10 deletions.
diff --git a/dist/main.css b/dist/main.css
@@ -8,10 +8,43 @@
 
 body {
   background-color: #aee1f9;
-  background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%);
-  margin: 1px;
+  background-image: linear-gradient(45deg, #aee1f9 0%, #f6ebe6 74%);
+  background-size: 400%;
+  margin: 0px;
+  background-position: center;
+}
+
+/* idea: animate 5s transition on turn flip */
+.turn-blue {
+  animation: bg-animationBlue 5s;
+  animation-fill-mode: forwards;
+}
+
+.turn-red {
+  animation: bg-animationBlue 5s;
+  animation-fill-mode: forwards;
 }
 
+.turn-null {
+  animation: bg-animationNull 2s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes bg-animationRed {
+  100% {
+    background-position: left;
+  }
+}
+@keyframes bg-animationBlue {
+  100% {
+    background-position: left;
+  }
+}
+@keyframes bg-animationNull {
+  100% {
+    background-position: center;
+  }
+}
 #container {
   width: 100%;
   height: 100%;
@@ -22,7 +55,7 @@ body {
   height: 100%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: 0.25fr 1fr 2fr 1fr 0.25fr;
+  grid-template-rows: 0.1fr 1fr 2fr 1fr 0.25fr;
   /* grid-auto-rows: minmax(100px, auto);  */
   /* flex-direction: column; */
 }

diff --git a/dist/main.js b/dist/main.js
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
   rel="stylesheet">
   <title>Onitama JS</title>
 </head>
-<body>
+<body class="body">
   <div class="modal__howTo">
     <div class="modal">
       <div class="modal__fill" style="list-style: circle"></div>

diff --git a/notes_bugs.md b/notes_bugs.md
@@ -8,6 +8,9 @@
   - designed to set grid attr to the winning color on true
   - have not decided where to call, issue with place and remove methods need resolution first
 
+*How to Play modal*
+- HTML formatting not correct.  Font issue? Pojo issue?
+
 
 
 

diff --git a/src/index.js b/src/index.js
@@ -98,16 +98,27 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Start / End game dynamic
   addGlobalEventListener("click", "#start", e => {
+    let body = document.querySelector(".body");
+    let startEle = document.querySelector(".start-inactive");
+
     if (game.activeGame === false) {
       console.log("You clicked start");
       game.start();
-      let startEle = document.querySelector(".start-inactive");
+
       startEle.classList.remove("start-inactive");
       startEle.classList.add("start-active");
+      body.classList.remove("turn-null");
+      body.classList.add("turn-blue");
       startEle.innerText = "End Game";
     } else {
       console.log("You clicked end game");
-      history.go(0);
+      body.classList.add("turn-null");
+
+      setTimeout(() => {
+        body.classList.remove("turn-blue");
+        body.classList.remove("turn-red");
+        history.go(0);
+      }, 3001);
     }
 
   });

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -6,10 +6,54 @@
 
 body {
   background-color: #aee1f9;
-  background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%);
-  margin: 1px; 
+  background-image: linear-gradient(45deg, #aee1f9 0%, #f6ebe6 74%);
+  background-size: 400%;
+  margin: 0px; 
+  background-position: center;
 }
 
+/* idea: animate 5s transition on turn flip */
+
+.turn-blue {
+  animation: bg-animationBlue 5s;
+  animation-fill-mode: forwards;
+}
+
+.turn-red {
+  animation: bg-animationBlue 5s;
+  animation-fill-mode: forwards;
+}
+
+.turn-null {
+  animation: bg-animationNull 2s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes bg-animationRed {
+  0% {
+
+  }
+  100% {
+    background-position: left;
+  }
+}
+
+@keyframes bg-animationBlue {
+  0% {
+
+  }
+  100% {
+    background-position: left;
+  }
+}
+
+@keyframes bg-animationNull {
+  0% {}
+  100% { background-position: center; }
+}
+
+
+
 #container {
   width: 100%;
   height: 100%;   
@@ -21,7 +65,7 @@ body {
   height: 100%; 
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: .25fr 1fr 2fr 1fr .25fr;
+  grid-template-rows: .1fr 1fr 2fr 1fr .25fr;
   /* grid-auto-rows: minmax(100px, auto);  */
   /* flex-direction: column; */