From 3297cff62129351245a54f5ae52b9573549e9e62 Mon Sep 17 00:00:00 2001
From: Neeraj <neerajantil.antil26@gmail.com>
Date: Mon, 5 Feb 2024 22:51:27 +0530
Subject: [PATCH] [ISSUE - 200] Add transition for the instruction box

---
 assets/main.css  | 138 ++++++++++++++++++++++++++++-------------------
 assets/main.html |  17 +++---
 assets/main.js   |  22 +++++---
 3 files changed, 106 insertions(+), 71 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index d589c4b..7f47d0f 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -244,58 +244,93 @@ h3 {
     align-items: center;
 }
 
-#instructions,
-#instructions2,
-#instructions3 {
-    border: 0.3em solid goldenrod;
-    background-color: #eaf9d9;
-    border-radius: 0.5em;
+
+.instruction-close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px; 
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: #ff0000;
+}
+
+.instruction-heading{
+    box-shadow: inset 0 0 10px 0 #fff;
+    border-radius: .5rem;
+    margin: 0 1.5rem;
+}
+
+#instructions {
+    border-radius: 1rem;
     position: absolute;
     z-index: 9;
-    padding: 0 1rem;
-    font-family: 'Times New Roman', Times, serif;
+    padding: 2rem;
     font-weight: bold;
     display: none;
     width: 60vw;
     margin-bottom: 7rem;
     margin-top: 1.6rem;
-    height: 83vh;
+    height: 85vh;
     color: #ff1251;
     flex-direction: column;
     justify-content: center;
-    transition: all 0.5s ease-in-out;
-    animation-name: scaleMenu;
-    animation-duration: 3s;
-    animation-iteration-count: 1;
-    transform: scale(1);
     overflow-y: auto;
     overflow-x: none;
 }
 
-.instruction-heading {
-    margin-top: 2.5rem;
+.abc{
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #fff;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
 }
 
-#instructions ol,
-#instructions2 ol,
-#instructions3 ol {
-    margin-top: 0;
-    margin-bottom: 0;
+@keyframes fadeUp {
+    from {
+        opacity: 0;
+        transform: translate(-50%, 100%);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, 5%);
+    }
 }
 
-#instructions ol li,
-#instructions2 ol li,
-#instructions3 ol li {
-    text-align: left;
-    font-weight: 300;
+@keyframes fadeDown {
+    from {
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(-50%, 100%);
+    }
 }
 
-li {
-    margin-top: 10px;
+.abc.fade-up {
+    animation-name: fadeUp;
+}
+
+.abc.fade-down {
+    animation-name: fadeDown;
+}
+
+.abc ul li{
+    text-align: left;
+    margin-top: 1rem;
+    font-size: 14px;
+    list-style:decimal-leading-zero;
 }
 
 span {
-    position: absolute;
+    position: absolute; 
     width: 25%;
     height: 100%;
     background-color: var(--c);
@@ -1482,10 +1517,11 @@ h1 {
 }
 
 /* Additional styling for icons if needed */
-#instructions,
-#instructions2,
-#instructions3 {
-    background: linear-gradient(to bottom, #001325, #014588, #0073a1, #07778d);
+#instructions {
+    background: rgba(0, 0, 0, 0.8);
+    /* background: #fb2e90; */
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0 10px 0 #000;
     color: white;
 }
 
@@ -1511,17 +1547,8 @@ h1 {
     }
 }
 
-#instructions,
-#instructions2,
-#instructions3 {
-    border-width: 8px;
-    border-style: solid;
-    animation: colorfulBorder 4s infinite linear;
-    text-align: center;
-    /* height: 36em; */
-}
 
-.xy {
+/* .xy {
     border-width: 5px;
     border-style: solid;
     animation: colorfulBorder 2s infinite linear;
@@ -1577,7 +1604,7 @@ h1 {
         color: black;
         text-align: center;
     }
-}
+} */
 
 /* responsive instruction box  */
 @media screen and (max-width:1024px) {
@@ -1589,7 +1616,7 @@ h1 {
     }
 
     .instruction-heading {
-        margin-top: 10rem;
+        margin-top: 5rem;
     }
 }
 
@@ -1602,13 +1629,13 @@ h1 {
     }
 
     .instruction-heading {
-        margin-top: 10rem;
+        margin-top: 5rem;
     }
 
-    .xy {
+    /* .xy {
         margin-left: 30px;
         margin-right: 30px;
-    }
+    } */
 
     .game-container {
         margin-top: 3.4rem;
@@ -1617,7 +1644,10 @@ h1 {
 
 @media screen and (max-width: 676px) {
     .instruction-heading {
-        margin-top: 13rem;
+        margin-top: 5rem;
+    }
+    .abc ul li{
+        font-size: 12px;
     }
 }
 
@@ -1630,12 +1660,12 @@ h1 {
     }
 
     .instruction-heading {
-        margin-top: 13rem;
+        margin-top: 7rem;
     }
 
-    #instructions ol,
-    #instructions2 ol,
-    #instructions3 ol {
+    #instructions ul,
+    #instructions2 ul,
+    #instructions3 ul {
         padding: 0 6px;
     }
 }
@@ -1649,7 +1679,7 @@ h1 {
     }
 
     .instruction-heading {
-        margin-top: 18rem;
+        margin-top: 5rem;
     }
 }
 
diff --git a/assets/main.html b/assets/main.html
index 73c040c..1170ab3 100644
--- a/assets/main.html
+++ b/assets/main.html
@@ -62,15 +62,14 @@ <h2>Play with your Favourite Edible🎮</h2>
         <button class="btn" id="start-btn" onclick="starting()">
             Play Game!!<span></span><span></span><span></span><span></span>
         </button>
-
         <div id="instructions" class="abc">
+            <button class="instruction-close-btn" onclick="closeInstructions()"><i class="fas fa-times"></i></button>
             <b style="font-weight:500; text-align:center; font-size: 1.9vmax; padding-bottom: 1rem; padding-top: 0.5rem;"
-                class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
+                class="instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
             <b style=" font-size: 1.4vmax;">Get ready to unleash your inner produce-picking pro and show those edibles
                 who's boss!</b><br>
-            <b style=" font-size: 1.4vmax; ">Here's how to play:</b><br>
-
-            <ol type="1">
+            <b style=" font-size: 1.4vmax; text-align: left; ">Here's how to play:</b>
+            <ul>
                 <li>
                     Choose your sidekick -- Will it be Team Fruit, Vegetable, Sweet, Snack or Backery?
                 </li>
@@ -93,9 +92,9 @@ <h2>Play with your Favourite Edible🎮</h2>
                     Keep your eyes peeled and your fingers nimble because once the clock strikes zero or all the lives
                     ❤️ are lost, the game is over and the edibles will dance away.
                 </li>
-            </ol><br>
+            </ul><br>
 
-            <div id="info-span" style=" font-size: 1.3vmax; ">Ready to squash the competition?</div><br>
+            <div id="info-span" style=" font-size: 1.3vmax; ">Ready to squash the competition?</div>
             <div style="display:flex; align-items: center; justify-content: center; padding-top: 1rem;">
                 <button class="btn" id="instruction-btn" style="font-size: 12px;" onclick="closeInstructions()">
                     Let's get started!!<span></span><span></span><span></span><span></span>
@@ -110,7 +109,7 @@ <h2>Play with your Favourite Edible🎮</h2>
                 class="xy instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
             <b style=" font-size: 1.3vmax;">Get ready to unleash your inner produce-picking pro and show those edibles
                 who's boss!</b><br>
-            <b style=" font-size: 1.3vmax; ">Here's how to play:</b><br>
+            <b style=" font-size: 1.3vmax; ">Here's how to play:</b>
 
             <ol type="1">
                 <li>
@@ -135,7 +134,7 @@ <h2>Play with your Favourite Edible🎮</h2>
                     Keep your eyes peeled and your fingers nimble because once the clock strikes zero or all lives ❤️
                     are lost, the game is over and the edibles will dance away.
                 </li>
-            </ol><br>
+            </ol>
 
             <div id="info-span" style=" font-size: 1.3vmax; ">Ready to squash the competition?</div><br>
             <div style="display:flex; align-items: center; justify-content: center; padding-top: 1rem;">
diff --git a/assets/main.js b/assets/main.js
index 57e336d..30113ec 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -427,18 +427,24 @@ function startGame() {
 }
 
 function showInstructions() {
-    document.getElementById("instructions").style.display = "flex";
-    document.getElementById("instructions2").style.display = "flex";
-    document.getElementById("instructions3").style.display = "flex";
+    var instructionsModal = document.getElementById("instructions");
+    instructionsModal.style.display = "flex";
+    instructionsModal.classList.add("fade-up");
     pauseGame();
 }
 
 function closeInstructions() {
-    document.getElementById("instructions").style.display = "none";
-    document.getElementById("instructions2").style.display = "none";
-    document.getElementById("instructions3").style.display = "none";
-    if (isRunning == 0)
-        isRunning = 1;
+    var instructionsModal = document.getElementById("instructions");
+    instructionsModal.classList.remove("fade-up");
+    instructionsModal.classList.add("fade-down");
+
+    // Delay the display none until the fade-down animation completes
+    setTimeout(function() {
+        instructionsModal.style.display = "none";
+        if (isRunning == 0)
+            isRunning = 1;
+        instructionsModal.classList.remove("fade-down");
+    }, 500); // 500ms is the duration of the fadeDown animation
 }
 
 //Maximum in the array