RepairKit Bug Fix & Improvements

Fixes:
- Introduced a flag that makes sure that the 'E' button can only be pressed once. Without this, several continuous E presses would cause multiple games to run at once.

Improvements:
- Added color changes to the different green colored element whenever the game is failed; they turn red for 1s

RepairKit/RepairKit.css

@@ -78,7 +78,7 @@ body {
   position: absolute;
   width: 40px;
   height: 3px;
-  background: radial-gradient(circle, rgb(0, 255, 200), rgb(0, 174, 130));
+  background: var(--background-gradient);
 }
 
 .square-slot::before {

RepairKit/RepairKit.js

@@ -1,17 +1,25 @@
 var timerInterval = null;
+var eKeyPressed = false;
 var slotPosition = 0;
 var currPosition = 1;
 function startGame() {
     var movingSquare = document.querySelector('.moving-square');
+    var buttonPress = document.querySelector('.button-press');
+    var squareSlot = document.querySelector('.square-slot');
     movingSquare.style.background = "radial-gradient(circle, rgb(0, 255, 200), rgb(0, 174, 130))";
     movingSquare.style.boxShadow = "0 0 5px 0px rgb(16, 239, 191)";
     movingSquare.style.marginLeft = "1%";
+    buttonPress.style.background = 'radial-gradient(circle, rgb(0, 183, 140), rgb(0, 81, 61))';
+    squareSlot.style.setProperty('--background-gradient', 'radial-gradient(circle, rgb(0, 255, 200), rgb(0, 174, 130))');
+    eKeyPressed = false;
     currPosition = 0;
     randomizeSquareSlot();
     tick();
 }
 function checkWin() {
     var movingSquare = document.querySelector('.moving-square');
+    var squareSlot = document.querySelector('.square-slot');
+    var buttonPress = document.querySelector('.button-press');
     if (timerInterval) {
         clearInterval(timerInterval);
     }
@@ -24,6 +32,8 @@ function checkWin() {
     }
     movingSquare.style.background = "radial-gradient(circle, rgb(255, 85, 76), rgba(132, 32, 32, 0.894))";
     movingSquare.style.boxShadow = "0 0 5px 0px rgb(255, 0, 0)";
+    buttonPress.style.background = "radial-gradient(circle, rgb(255, 85, 76), rgba(132, 32, 32, 0.894))";
+    squareSlot.style.setProperty('--background-gradient', 'radial-gradient(circle, rgb(255, 85, 76), rgba(132, 32, 32, 0.894))');
     return false;
 }
 function tick() {
@@ -40,7 +50,8 @@ function tick() {
     }, 50);
 }
 function handleKeyPress(event) {
-    if (event.key === 'e' || event.key === "E") {
+    if (!eKeyPressed && (event.key === 'e' || event.key === "E")) {
+        eKeyPressed = true;
         checkWin();
         setTimeout(function () {
             startGame();

RepairKit/RepairKit.ts

@@ -1,19 +1,27 @@
 let timerInterval: NodeJS.Timeout | null = null;
+let eKeyPressed = false;
 let slotPosition = 0;
 let currPosition = 1;
 
 function startGame(): void {
     const movingSquare = document.querySelector('.moving-square') as HTMLElement;
+    const buttonPress = document.querySelector('.button-press') as HTMLElement;
+    const squareSlot = document.querySelector('.square-slot') as HTMLElement
     movingSquare.style.background = `radial-gradient(circle, rgb(0, 255, 200), rgb(0, 174, 130))`;
     movingSquare.style.boxShadow = `0 0 5px 0px rgb(16, 239, 191)`;
     movingSquare.style.marginLeft = `1%`;
+    buttonPress.style.background = 'radial-gradient(circle, rgb(0, 183, 140), rgb(0, 81, 61))';
+    squareSlot.style.setProperty('--background-gradient', 'radial-gradient(circle, rgb(0, 255, 200), rgb(0, 174, 130))');
+    eKeyPressed = false;
     currPosition = 0;
     randomizeSquareSlot();
     tick();
 }
 
 function checkWin(): boolean {
     const movingSquare = document.querySelector('.moving-square') as HTMLElement;
+    const squareSlot = document.querySelector('.square-slot') as HTMLElement
+    const buttonPress = document.querySelector('.button-press') as HTMLElement;
     if (timerInterval) {clearInterval(timerInterval);}
     if (slotPosition-2 <= currPosition && currPosition <= slotPosition+2) {
         movingSquare.style.scale = '1.2';
@@ -25,6 +33,8 @@ function checkWin(): boolean {
     }
     movingSquare.style.background = `radial-gradient(circle, rgb(255, 85, 76), rgba(132, 32, 32, 0.894))`;
     movingSquare.style.boxShadow = `0 0 5px 0px rgb(255, 0, 0)`;
+    buttonPress.style.background = `radial-gradient(circle, rgb(255, 85, 76), rgba(132, 32, 32, 0.894))`;
+    squareSlot.style.setProperty('--background-gradient', 'radial-gradient(circle, rgb(255, 85, 76), rgba(132, 32, 32, 0.894))');
     return false;
 }
 
@@ -41,7 +51,8 @@ function tick(): void {
     }, 50);
 }
 function handleKeyPress(event: KeyboardEvent): void {
-    if (event.key === 'e' || event.key === "E") {
+    if (!eKeyPressed && (event.key === 'e' || event.key === "E")) {
+        eKeyPressed = true;
         checkWin();
         setTimeout(() => {
             startGame();