Merge pull request #45 from bj-jiwrajka/timer

ADD: Animation on timer
SnowScriptWinterOfCode · Jan 15, 2024 · 37c5acd · 37c5acd
2 parents e63e609 + 4c7c85a
commit 37c5acd
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 6 deletions.
diff --git a/Dark/game.css b/Dark/game.css
@@ -59,6 +59,10 @@
   font-weight: 900;
 }
 
+.alert {
+  animation: bounceTimer 1.2s infinite ease-in-out;
+}
+
 .hud-prefix {
   text-align: center;
   font-size: 2rem;
@@ -92,14 +96,37 @@
   animation: spin 2s linear infinite;
 }
 
+
+@keyframes bounceTimer {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.5);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  75% {
+    transform: scale(1.5);
+  }
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 #question {
   margin-bottom: 0px;
   position: relative;
@@ -110,46 +137,53 @@
   .container {
     padding: 20px;
   }
+
   #hud {
     position: relative;
     bottom: 6em;
   }
+
   #question {
     position: relative;
     bottom: 1em;
   }
+
   .choice-container {
     position: relative;
     top: 1em;
   }
 }
+
 @media screen and (max-width: 1024px) {
   .container {
     padding: 40px;
   }
+
   #hud {
     position: relative;
     bottom: 6em;
   }
+
   #question {
     position: relative;
     bottom: 1em;
   }
+
   .choice-container {
     position: relative;
     top: 0.5em;
   }
 }
 
-footer{
+footer {
   position: relative;
   display: flex;
   width: 100%;
   justify-content: center;
   align-items: center;
 }
 
-.next_btn{
+.next_btn {
   background-color: #56a5eb;
   height: 4rem;
   border: none;
@@ -158,6 +192,7 @@ footer{
   position: relative;
   color: white;
 }
+
 .next_btn:hover {
   cursor: pointer;
   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);

diff --git a/Dark/game.html b/Dark/game.html
@@ -24,7 +24,7 @@
           <div id="hud-item" class="time">
             <div class="timer">
               <div class="time_left_txt">Time Left</div>
-              <div class="timer_sec">15</div>
+              <div class="timer_sec" id="timer">15</div>
           </div>
           <div class="time_line"></div>  
           </div>

diff --git a/Dark/game.js b/Dark/game.js
@@ -174,6 +174,13 @@ function startTimer(time) {
                 choices.children[i].classList.add("disabled"); 
             }
         }
+        if(time <5)
+        {
+            document.getElementById("timer").classList.add("alert");
+        }
+        else{
+            document.getElementById("timer").classList.remove("alert");
+        }
     }
 }
 

diff --git a/Light/game.css b/Light/game.css
@@ -93,6 +93,30 @@
   animation: spin 2s linear infinite;
 }
 
+.alert {
+  animation: bounceTimer 1.2s infinite ease-in-out;
+}
+
+@keyframes bounceTimer {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.5);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  75% {
+    transform: scale(1.5);
+  }
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -151,15 +175,15 @@
   }
 }
 
-footer{
+footer {
   position: relative;
   display: flex;
   width: 100%;
   justify-content: center;
   align-items: center;
 }
 
-.next_btn{
+.next_btn {
   background-color: #56a5eb;
   height: 4rem;
   border: none;

diff --git a/Light/game.html b/Light/game.html
@@ -24,7 +24,7 @@
           <div id="hud-item" class="time">
             <div class="timer">
               <div class="time_left_txt">Time Left</div>
-              <div class="timer_sec">15</div>
+              <div class="timer_sec" id="timer">15</div>
           </div>
           <div class="time_line"></div>  
           </div>

diff --git a/Light/game.js b/Light/game.js
@@ -174,6 +174,13 @@ function startTimer(time) {
                 choices.children[i].classList.add("disabled"); 
             }
         }
+        if(time <5)
+        {
+            document.getElementById("timer").classList.add("alert");
+        }
+        else{
+            document.getElementById("timer").classList.remove("alert");
+        }
     }
 }