Added settings to LockPick

Improvement - Added a settings menu to the lockpick minigame - Allows for adjustment of timer within the range 5-100 seconds
MaximilianAdF · Feb 20, 2024 · 233ca53 · 233ca53
1 parent 7764185
commit 233ca53
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 8 deletions.
diff --git a/LockPick/LockPick.css b/LockPick/LockPick.css
@@ -238,7 +238,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;
 }
@@ -292,4 +305,191 @@ 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);
- }
+ }
+
+ #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: 20%;
+ 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);
+}
diff --git a/LockPick/LockPick.html b/LockPick/LockPick.html
@@ -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>20</span></div>
+ <label for="timing-slider">Timer</label>
+ <input type="range" id="timing-slider" name="timing" min="5" max="100" value="20"/>
+ </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">
@@ -29,6 +43,10 @@ <h2>Lockpick</h2>
  <i class="fa-solid fa-circle-check"></i>
  <p>The lock was picked successfully.</p>
  </div>
+ <div class="reset-message">
+ <i class="fas fa-hourglass-start"></i>
+ <p>Reset!</p>
+ </div>
  <div class="hack-box"> 
  <div class="position-container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"></svg>

diff --git a/LockPick/LockPick.js b/LockPick/LockPick.js
@@ -1,8 +1,8 @@
+var timerProgressBar;
+var timerTimeout;
 var totalSeconds = 20;
 var currentCircle = 1;
 var isLocked = false;
-var timerProgressBar;
-var timerTimeout;
 function runTimer() {
  var timerProgress = document.querySelector(".timer-progress-bar");
  clearTimeout(timerProgressBar);
@@ -59,6 +59,13 @@ function resetGame(status) {
  loseMsg_1.style.display = "none";
  }, 2000);
  }
+ else if (status === "reset") {
+ var resetMsg_1 = document.querySelector(".reset-message");
+ resetMsg_1.style.display = "flex";
+ setTimeout(function () {
+ resetMsg_1.style.display = "none";
+ }, 2000);
+ }
 }
 function indicateFailed(circleNum) {
  var lockCircle = document.getElementById("lock-circle".concat(circleNum));
@@ -276,7 +283,38 @@ function handleKeyPress(event) {
  return;
  }
 }
+function toggleSettings(action) {
+ if (action === void 0) { action = ""; }
+ var settingsMenu = document.querySelector(".settings-container");
+ if (action === "close" || settingsMenu.style.display === "flex") {
+ settingsMenu.style.display = "none";
+ }
+ else {
+ settingsMenu.style.display = "flex";
+ }
+}
+function applySettings() {
+ var timingSliderValue = document.querySelector(".timing-container .slider-value span");
+ totalSeconds = Number(timingSliderValue.textContent);
+ // Run the game with the new settings
+ toggleSettings("close");
+ resetGame("reset");
+}
+function resetSettings() {
+ var timingSliderValue = document.querySelector(".timing-container .slider-value span");
+ var timingSliderInput = document.querySelector(".timing-container input[type='range']");
+ timingSliderInput.value = "20";
+ timingSliderValue.style.left = "20%";
+ timingSliderValue.textContent = "20";
+}
 document.addEventListener("DOMContentLoaded", function (event) {
+ var timingSliderValue = document.querySelector(".timing-container .slider-value span");
+ var timingSliderInput = document.querySelector(".timing-container input[type='range']");
+ timingSliderInput.addEventListener('input', function () {
+ var value = timingSliderInput.value;
+ timingSliderValue.textContent = value;
+ timingSliderValue.style.left = "".concat(Number(value), "%");
+ });
  generateLines();
  generateHack();
  shuffleLock();

diff --git a/LockPick/LockPick.ts b/LockPick/LockPick.ts
@@ -1,8 +1,8 @@
-const totalSeconds = 20;
-let currentCircle = 1;
-let isLocked = false;
 let timerProgressBar: NodeJS.Timeout;
 let timerTimeout: NodeJS.Timeout;
+let totalSeconds = 20;
+let currentCircle = 1;
+let isLocked = false;
 
 function runTimer(): void {
  const timerProgress = document.querySelector(".timer-progress-bar") as HTMLElement;
@@ -18,7 +18,7 @@ function runTimer(): void {
  }, totalSeconds * 1000);
 }
 
-function resetGame(status: "win" | "lose" | "init"): void {
+function resetGame(status: "win" | "lose" | "init" | "reset"): void {
  // Remove existing lock circles and SVG elements
  const timerProgress = document.querySelector(
  ".timer-progress-bar"
@@ -68,6 +68,12 @@ function resetGame(status: "win" | "lose" | "init"): void {
  setTimeout(() => {
  loseMsg.style.display = "none";
  }, 2000);
+ } else if (status === "reset") {
+ const resetMsg = document.querySelector(".reset-message") as HTMLElement;
+ resetMsg.style.display = "flex";
+ setTimeout(() => {
+ resetMsg.style.display = "none";
+ }, 2000);
  }
 }
 
@@ -339,7 +345,46 @@ function handleKeyPress(event: KeyboardEvent) {
  }
 }
 
+function toggleSettings(action: string = "") {
+ const settingsMenu = document.querySelector(".settings-container") as HTMLElement;
+ if (action === "close" || settingsMenu.style.display === "flex") {
+ settingsMenu.style.display = "none";
+ } else {
+ settingsMenu.style.display = "flex";
+ }
+}
+
+
+function applySettings() {
+ const timingSliderValue = document.querySelector(".timing-container .slider-value span") as HTMLElement;
+ totalSeconds = Number(timingSliderValue.textContent);
+
+ // Run the game with the new settings
+ toggleSettings("close");
+ resetGame("reset");
+}
+
+
+function resetSettings() {
+ const timingSliderValue = document.querySelector(".timing-container .slider-value span") as HTMLElement;
+ const timingSliderInput = document.querySelector(".timing-container input[type='range']") as HTMLInputElement;
+
+ timingSliderInput.value = "20";
+ timingSliderValue.style.left = "20%"
+ timingSliderValue.textContent = "20";
+}
+
+
 document.addEventListener("DOMContentLoaded", (event) => {
+ const timingSliderValue = document.querySelector(".timing-container .slider-value span") as HTMLElement;
+ const timingSliderInput = document.querySelector(".timing-container input[type='range']") as HTMLInputElement;
+
+ timingSliderInput.addEventListener('input', () => {
+ const value = timingSliderInput.value;
+ timingSliderValue.textContent = value;
+ timingSliderValue.style.left = `${Number(value)}%`;
+ });
+
  generateLines();
  generateHack();
  shuffleLock();