Skip to content

Commit

Permalink
Added transition for the instruction box
Browse files Browse the repository at this point in the history
  • Loading branch information
@antilneeraj
antilneeraj committed Feb 6, 2024
1 parent 3297cff commit d2826b1
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 100 deletions.
127 changes: 55 additions & 72 deletions assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,6 @@ h3 {
align-items: center;
}


.instruction-close-btn {
position: absolute;
top: 10px;
Expand All @@ -255,82 +254,61 @@ h3 {
color: #ff0000;
}

.instruction-heading{
box-shadow: inset 0 0 10px 0 #fff;
border-radius: .5rem;
margin: 0 1.5rem;
#instructions.show{
opacity: 1;
transform: translateY(0);
}

#instructions {
border-radius: 1rem;
#instructions,
#instructions2,
#instructions3 {
border: 0.3em solid goldenrod;
background-color: #eaf9d9;
border-radius: 0.5em;
position: absolute;
z-index: 9;
padding: 2rem;
padding: 0 1rem;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
display: none;
width: 60vw;
margin-bottom: 7rem;
margin-top: 1.6rem;
height: 85vh;
height: 83vh;
color: #ff1251;
flex-direction: column;
justify-content: center;
transition: opacity 0.5s, transform 0.5s;
opacity: 0;
transform: translateY(-20px);
overflow-y: auto;
overflow-x: none;
}

.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;
}

@keyframes fadeUp {
from {
opacity: 0;
transform: translate(-50%, 100%);
}
to {
opacity: 1;
transform: translate(-50%, 5%);
}
}

@keyframes fadeDown {
from {
opacity: 1;
transform: translate(-50%, 0);
}
to {
opacity: 0;
transform: translate(-50%, 100%);
}
.instruction-heading {
margin-top: 2.5rem;
}

.abc.fade-up {
animation-name: fadeUp;
#instructions ol,
#instructions2 ol,
#instructions3 ol {
margin-top: 0;
margin-bottom: 0;
}

.abc.fade-down {
animation-name: fadeDown;
#instructions ol li,
#instructions2 ol li,
#instructions3 ol li {
text-align: left;
font-weight: 300;
}

.abc ul li{
text-align: left;
margin-top: 1rem;
font-size: 14px;
list-style:decimal-leading-zero;
li {
margin-top: 10px;
}

span {
position: absolute;
position: absolute;
width: 25%;
height: 100%;
background-color: var(--c);
Expand Down Expand Up @@ -1517,11 +1495,10 @@ h1 {
}

/* Additional styling for icons if needed */
#instructions {
background: rgba(0, 0, 0, 0.8);
/* background: #fb2e90; */
backdrop-filter: blur(10px);
box-shadow: 0 0 10px 0 #000;
#instructions,
#instructions2,
#instructions3 {
background: linear-gradient(to bottom, #001325, #014588, #0073a1, #07778d);
color: white;
}

Expand All @@ -1547,8 +1524,17 @@ 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 @@ -1604,7 +1590,7 @@ h1 {
color: black;
text-align: center;
}
} */
}

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

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

Expand All @@ -1629,13 +1615,13 @@ h1 {
}

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

/* .xy {
.xy {
margin-left: 30px;
margin-right: 30px;
} */
}

.game-container {
margin-top: 3.4rem;
Expand All @@ -1644,10 +1630,7 @@ h1 {

@media screen and (max-width: 676px) {
.instruction-heading {
margin-top: 5rem;
}
.abc ul li{
font-size: 12px;
margin-top: 13rem;
}
}

Expand All @@ -1660,12 +1643,12 @@ h1 {
}

.instruction-heading {
margin-top: 7rem;
margin-top: 13rem;
}

#instructions ul,
#instructions2 ul,
#instructions3 ul {
#instructions ol,
#instructions2 ol,
#instructions3 ol {
padding: 0 6px;
}
}
Expand All @@ -1679,7 +1662,7 @@ h1 {
}

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

Expand Down
16 changes: 9 additions & 7 deletions assets/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,16 @@ <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="instruction-heading">&#129389 Alrighty, welcome to Click the Edible Game!! &#127817</b><br>
class="xy 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; text-align: left; ">Here's how to play:</b>
<ul>
<b style=" font-size: 1.4vmax; ">Here's how to play:</b><br>

<ol type="1">
<li>
Choose your sidekick -- Will it be Team Fruit, Vegetable, Sweet, Snack or Backery?
</li>
Expand All @@ -92,9 +94,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>
</ul><br>
</ol><br>

<div id="info-span" style=" font-size: 1.3vmax; ">Ready to squash the competition?</div>
<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;">
<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 @@ -109,7 +111,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>
<b style=" font-size: 1.3vmax; ">Here's how to play:</b><br>

<ol type="1">
<li>
Expand All @@ -134,7 +136,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>
</ol><br>

<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
27 changes: 6 additions & 21 deletions assets/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,20 +358,6 @@ document.querySelectorAll(".choose-btn").forEach(button => {
});
});

document.querySelectorAll(".choose-btn").forEach(button => {
button.addEventListener("click", () => {
const img = button.querySelector("img");
const src = img.getAttribute("src");
const alt = img.getAttribute("alt");
selected_edible = { src, alt };
screens[1].classList.add("up1");
game_container.style.height = "100vh";
startGame();
displayChange();
choose_edible.play();
});
});

// --------------- Uploading Image End ----------------

function chooseGameplayTime() {
Expand Down Expand Up @@ -429,22 +415,21 @@ function startGame() {
function showInstructions() {
var instructionsModal = document.getElementById("instructions");
instructionsModal.style.display = "flex";
instructionsModal.classList.add("fade-up");
// Trigger reflow to ensure the transition is applied
void instructionsModal.offsetWidth;
instructionsModal.classList.add("show");
pauseGame();
}

function closeInstructions() {
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
instructionsModal.classList.remove("show");
// Add a delay before hiding the instructions to allow the animation to play
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
}, 500); // Match the duration of the animation
}

//Maximum in the array
Expand Down

0 comments on commit d2826b1

Please sign in to comment.