Simplified the timer

Removed previous approach to the timer and instead tried to replicate NoPixel's timer that has a more cubic-bezier look
MaximilianAdF · Feb 18, 2024 · 4710cf7 · 4710cf7
1 parent 3141d64
commit 4710cf7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 47 deletions.
diff --git a/RoofRunning/RoofRunning.css b/RoofRunning/RoofRunning.css
@@ -63,8 +63,6 @@ body {
   justify-content: center;
   width: calc(var(--grid-columns) * (90px + 2px));
   height: calc(var(--grid-rows) * (90px + 2px) + 50px);
-  max-width: fit-content;
-  max-height: fit-content;
   background-color: rgb(22, 40, 52);
   display: flex;
 }
@@ -95,7 +93,7 @@ body {
   background-color: orangered;
   width: 100%;
   height: 100%;
-  transition: width 1s linear;
+  transition: width 25s cubic-bezier(0.5, 1, 0.6, 0.85);
 }
 
 .message-container{

diff --git a/RoofRunning/RoofRunning.js b/RoofRunning/RoofRunning.js
@@ -1,9 +1,8 @@
-var timerInterval = null;
-var secondsRemaining = 25;
+var totalSeconds = 25;
 var gridCols = 11;
 var gridRows = 8;
 var cssVariables = {
-    "--total-seconds": secondsRemaining,
+    "--total-seconds": totalSeconds,
     "--grid-columns": gridCols,
     "--grid-rows": gridRows
 };
@@ -299,8 +298,7 @@ function getColorCount(container) {
 function endGame(outcome) {
     var timerProgress = document.querySelector(".timer-progress-bar");
     var overlay = document.querySelector(".overlay");
-    clearInterval(timerInterval);
-    timerProgress.style.display = "none";
+    timerProgress.style.transition = "none";
     timerProgress.style.width = "100%";
     overlay.style.display = "block";
     if (outcome === "win") {
@@ -314,14 +312,12 @@ function endGame(outcome) {
         setTimeout(function () { loseMsg_1.style.display = 'none'; }, 2000);
     }
     setTimeout(function () {
-        timerProgress.style.display = 'flex';
+        timerProgress.style.transition = "width 25s linear";
         overlay.style.display = 'none';
         resetGame();
     }, 2000);
 }
 function resetGame() {
-    clearInterval(timerInterval);
-    secondsRemaining = 15;
     generateCubes();
     runTimer();
 }
@@ -336,21 +332,12 @@ function generateCubes() {
         }
     } while (!checkSolvable()); // Regenerate the cubes if the board is not solvable
 }
-function updateTimerDisplay() {
-    var timerProgress = document.querySelector(".timer-progress-bar");
-    var percentageLeft = Math.floor(100 * secondsRemaining / 15);
-    if (timerProgress) {
-        timerProgress.style.width = "".concat(percentageLeft, "%");
-    }
-}
 function runTimer() {
-    timerInterval = setInterval(function () {
-        secondsRemaining--;
-        updateTimerDisplay();
-        if (secondsRemaining < 0) {
-            endGame("lose");
-        }
-    }, 1000);
+    var timerProgress = document.querySelector(".timer-progress-bar");
+    timerProgress.style.width = "0%";
+    setTimeout(function () {
+        endGame("lose");
+    }, totalSeconds * 1000);
 }
 document.addEventListener("DOMContentLoaded", function () {
     resetGame();

diff --git a/RoofRunning/RoofRunning.ts b/RoofRunning/RoofRunning.ts
@@ -1,10 +1,9 @@
-let timerInterval: NodeJS.Timeout | null = null;
-let secondsRemaining = 25;
+const totalSeconds = 25;
 const gridCols = 11;
 const gridRows = 8;
 
 const cssVariables = {
-    "--total-seconds": secondsRemaining,
+    "--total-seconds": totalSeconds,
     "--grid-columns": gridCols,
     "--grid-rows": gridRows
 };
@@ -324,9 +323,8 @@ function getColorCount(container): number[] {
 function endGame(outcome: string): void {
     const timerProgress = document.querySelector(".timer-progress-bar") as HTMLElement;
     const overlay = document.querySelector(".overlay") as HTMLElement;
-    clearInterval(timerInterval as NodeJS.Timeout);
 
-    timerProgress.style.display = "none";
+    timerProgress.style.transition = "none";
     timerProgress.style.width = "100%";
     overlay.style.display = "block";
 
@@ -340,15 +338,13 @@ function endGame(outcome: string): void {
         setTimeout(function () {loseMsg.style.display = 'none';}, 2000);
     }
     setTimeout(function () {
-        timerProgress.style.display = 'flex';
+        timerProgress.style.transition = "width 25s linear";
         overlay.style.display = 'none';
         resetGame(); 
     }, 2000);
 }
 
 function resetGame(): void {
-    clearInterval(timerInterval as NodeJS.Timeout);
-    secondsRemaining = 15;
     generateCubes();
     runTimer();
 }
@@ -366,22 +362,13 @@ function generateCubes(): void {
     } while (!checkSolvable()); // Regenerate the cubes if the board is not solvable
 }
 
-function updateTimerDisplay() {
-    const timerProgress = document.querySelector(".timer-progress-bar") as HTMLElement;
-    let percentageLeft = Math.floor(100 * secondsRemaining / 15);
-    if (timerProgress) {
-        timerProgress.style.width = `${percentageLeft}%`;
-    }
-}
 
 function runTimer() {
-    timerInterval = setInterval(function () {
-        secondsRemaining--;
-        updateTimerDisplay();
-        if (secondsRemaining < 0) {
-            endGame("lose");
-        }
-    }, 1000);
+    const timerProgress = document.querySelector(".timer-progress-bar") as HTMLElement;
+    timerProgress.style.width = "0%";
+    setTimeout(function () {
+        endGame("lose");
+    }, totalSeconds*1000);
 }
 
 document.addEventListener("DOMContentLoaded", function () {