Merge branch 'main' into main

SnowScriptWinterOfCode · Jan 15, 2024 · 8e194a9 · 8e194a9
2 parents e92f2ea + 37c5acd
commit 8e194a9
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 5 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;
@@ -105,14 +109,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;
@@ -123,46 +150,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;
@@ -171,6 +205,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
@@ -181,6 +181,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
@@ -99,6 +99,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);
@@ -157,15 +181,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
@@ -22,7 +22,18 @@
               <div id="progressBarFull"></div>
             </div>
           </div>
+
           <div id="hud-item">
+
+          <div id="hud-item" class="time">
+            <div class="timer">
+              <div class="time_left_txt">Time Left</div>
+              <div class="timer_sec" id="timer">15</div>
+          </div>
+          <div class="time_line"></div>  
+          </div>
+            <div id="hud-item">
+
             <p class="hud-prefix">
               Score
             </p>

diff --git a/Light/game.js b/Light/game.js
@@ -179,6 +179,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");
+        }
     }
 }