Skip to content

Commit

Permalink
[ISSUE - 200] Add transition for the instruction box
Browse files Browse the repository at this point in the history
  • Loading branch information
@antilneeraj
antilneeraj committed Feb 5, 2024
1 parent f49daa4 commit 3297cff
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 71 deletions.
138 changes: 84 additions & 54 deletions assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
Expand Down Expand Up @@ -1577,7 +1604,7 @@ h1 {
color: black;
text-align: center;
}
}
} */

/* responsive instruction box */
@media screen and (max-width:1024px) {
Expand All @@ -1589,7 +1616,7 @@ h1 {
}

.instruction-heading {
margin-top: 10rem;
margin-top: 5rem;
}
}

Expand All @@ -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;
Expand All @@ -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;
}
}

Expand All @@ -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;
}
}
Expand All @@ -1649,7 +1679,7 @@ h1 {
}

.instruction-heading {
margin-top: 18rem;
margin-top: 5rem;
}
}

Expand Down
17 changes: 8 additions & 9 deletions assets/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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;">
Expand Down
22 changes: 14 additions & 8 deletions assets/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 3297cff

Please sign in to comment.