Skip to content

Commit

Permalink
Added Settings Menu & Countdown to Laundromat
Browse files Browse the repository at this point in the history 
Improvements
- Added a countdown (3,2,1) at the beginning of the Laundromat game, to ready the player.
- Added a settings menu
-Possibility to alter the timer in the range (5 - 100) seconds
  • Loading branch information
@MaximilianAdF
MaximilianAdF committed Feb 21, 2024
1 parent ce86cd2 commit 5ba66d1
Show file tree
Hide file tree
Showing 6 changed files with 462 additions and 93 deletions.
261 changes: 259 additions & 2 deletions Laundromat/Laundromat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,20 @@ body {
background-color: rgb(23, 95, 88);
}

.lose-message p, .win-message p{
.reset-message {
gap: 10px;
margin-top: -40px;
margin-left: 500px;
display: none;
color: white;
padding: 0px 10px;
border-radius: 5px;
align-items: center;
justify-content: center;
background-color: rgb(118, 128, 37);
}

.lose-message p, .win-message p, .reset-message p{
font-size: 12px;
font-weight: 500;
}
Expand Down Expand Up @@ -293,4 +306,248 @@ body {
.home-button:hover {
box-shadow: rgba(127, 255, 191, 0.397) 0 -25px 18px -14px inset,rgba(127, 255, 191, 0.397) 0 1px 2px,rgba(127, 255, 191, 0.397) 0 2px 4px,rgba(127, 255, 191, 0.397) 0 4px 8px,rgba(127, 255, 191, 0.397) 0 8px 16px,rgba(127, 255, 191, 0.397) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}
}


.home-button:hover {
box-shadow: rgba(127, 255, 191, 0.397) 0 -25px 18px -14px inset,rgba(127, 255, 191, 0.397) 0 1px 2px,rgba(127, 255, 191, 0.397) 0 2px 4px,rgba(127, 255, 191, 0.397) 0 4px 8px,rgba(127, 255, 191, 0.397) 0 8px 16px,rgba(127, 255, 191, 0.397) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}

#settings-icon {
color: rgb(94, 93, 93);
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 0px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#settings-icon:hover {
transform: scale(1.1) rotate(270deg);
}

.settings-container {
flex-direction: column;
background: radial-gradient(rgba(15, 27, 33, 0.781), rgb(15, 27, 33));
outline: 3px solid rgb(84, 255, 164);
z-index: 10000;
position: absolute;
width: 640px;
height: 580px;
display: none;
left: 50%;
top: 55%;
gap: 50px;
transform: translate(-50%, -50%);
}

#settings-exit {
position: absolute;
color: rgb(94, 93, 93);
top: 0px;
right: 0px;
width: 20px;
height: 20px;
cursor: pointer;
}

.settings-header {
font-size: 25px;
color: rgb(84, 255, 164);
text-shadow: 0 0 2.1px rgb(127, 255, 191);
margin: 20px 0px 0px 20px;
}

.sliders {
color: rgb(94, 93, 93);
font-size: 20px;
margin: 0 auto;
margin-bottom: 10px;
margin-top: -20px;
display: flex;
flex-direction: row;
width: 70%;
justify-content: space-between;
}

.timing-container {
color: rgb(94, 93, 93);
width: 50%;
margin: 0 auto;
font-size: 20px;
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
justify-content: center;
}

.timing-container .slider-value {
position: relative;
width: 100%;
}

.timing-container .slider-value span {
position: absolute;
text-align: center;
height: 25px;
width: 25px;
color: rgba(22, 40, 52, 0.979);
top: 60px;
left: 12%;
font-size: 15px;
transform: translateX(-80%);
line-height: 45px;
z-index: 2;
}

.timing-container .slider-value span:after {
position: absolute;
text-align: center;
left: 50%;
top: 30%;
content: "";
height: 25px;
width: 25px;
background-color: rgb(84, 255, 164);
transform: translateX(-50%) rotate(45deg);
border: 3px solid rgba(22, 40, 52, 0.651);
border-bottom-left-radius: 70%;
border-bottom-right-radius: 70%;
border-top-right-radius: 70%;
z-index: -1;
}

input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 20px;
background: transparent;
outline: none;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 2px rgb(127, 255, 191);
transition: all 0.3s;

}

input::-moz-range-thumb {
width: 20px;
height: 20px;
background: rgb(84, 255, 164);
cursor: pointer;
border-radius: 50%;
border: 1px solid rgba(22, 40, 52, 0.651);
transition: all 0.3s;
}

input::-moz-range-progress {
width: 100%;
height: 20px;
cursor: pointer;
background: radial-gradient(rgba(22, 40, 52, 0.651), rgb(22, 40, 52));
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transition: all 0.3s;
}

input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: rgb(84, 255, 164);
cursor: pointer;
border-radius: 50%;
border: 1px solid rgba(22, 40, 52, 0.651);
transition: all 0.3s;
}


.button-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}

#save-button,
#reset-button {
background-color: rgb(84, 255, 164);
border-radius: 10px;
box-shadow: 0 0 2px rgb(127, 255, 191);
color: black;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: all 250ms;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100px;
}

#save-button:hover,
#reset-button:hover {
box-shadow: rgba(127, 255, 191, 0.397) 0 -25px 18px -14px inset,rgba(127, 255, 191, 0.397) 0 1px 2px,rgba(127, 255, 191, 0.397) 0 2px 4px,rgba(127, 255, 191, 0.397) 0 4px 8px,rgba(127, 255, 191, 0.397) 0 8px 16px,rgba(127, 255, 191, 0.397) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}

.countdown-container {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}

.countdown {
position: absolute;
display: none;
font-size: 200px;
opacity: 0;
color: rgb(84, 255, 164);
text-shadow: 0 0 2.1px rgb(127, 255, 191);
margin: 0;
padding: 0;
animation: countdown-animation 900ms cubic-bezier(0.95, 0.05, 0.795, 0.035) forwards infinite;
}

.countdown.two {
animation-delay: 30ms;
}
.countdown.three {
animation-delay: 40ms;
}
.countdown.four {
animation-delay: 50ms;
}
.countdown.five {
animation-delay: 60ms;
}

@keyframes countdown-animation {
0% {
transform: scale(1);
opacity: 1;
}

80% {
transform: scale(1.5);
opacity: 0.4;
}
100% {
transform: scale(10);
opacity: 0;
}
}
27 changes: 26 additions & 1 deletion Laundromat/Laundromat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,20 @@
<body>
<div class="other-container">
<a href="https://maximilianadf.github.io/NoPixel-MiniGames-4.0/" class="home-button">Check other Mini-games</a>
<i class="fas fa-gear" id="settings-icon" onclick="toggleSettings()"></i>
</div>
<div class="settings-container">
<h2 class="settings-header">Settings</h2>
<i class="fas fa-xmark" id="settings-exit" onclick="toggleSettings('close')"></i>
<div class="timing-container">
<div class="slider-value"><span>12</span></div>
<label for="timing-slider">Timer</label>
<input type="range" id="timing-slider" name="timing" min="5" max="100" value="12"/>
</div>
<div class="button-container">
<button id="save-button" onclick="applySettings()">Save</button>
<button id="reset-button" onclick="resetSettings()">Reset</button>
</div>
</div>
<div class="hack-box-container">
<div class="outer-container">
Expand All @@ -29,7 +43,18 @@ <h2>Laundromat</h2>
<i class="fa-solid fa-circle-check"></i>
<p>Success!</p>
</div>
<div class="hack-box">
<div class="reset-message">
<i class="fas fa-hourglass-start"></i>
<p>Reset!</p>
</div>
<div class="hack-box">
<div class="countdown-container">
<div class="countdown">3</div>
<div class="countdown two">3</div>
<div class="countdown three">3</div>
<div class="countdown four">3</div>
<div class="countdown five">3</div>
</div>
<div class="position-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"></svg>
</div>
Expand Down
Loading

0 comments on commit 5ba66d1

Please sign in to comment.