From 26852786787666be79b34ba91a4f33322c62fff2 Mon Sep 17 00:00:00 2001
From: Maximilian Alvim de Faria
 <63980031+MaximilianAdF@users.noreply.github.com>
Date: Sat, 10 Feb 2024 18:58:52 +0100
Subject: [PATCH] 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 |  2 +-
 RepairKit/RepairKit.js  | 13 ++++++++++++-
 RepairKit/RepairKit.ts  | 13 ++++++++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/RepairKit/RepairKit.css b/RepairKit/RepairKit.css
index 98f2c07..63640cc 100644
--- a/RepairKit/RepairKit.css
+++ b/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 {
diff --git a/RepairKit/RepairKit.js b/RepairKit/RepairKit.js
index 1963c86..72d693b 100644
--- a/RepairKit/RepairKit.js
+++ b/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();
diff --git a/RepairKit/RepairKit.ts b/RepairKit/RepairKit.ts
index 16280f5..204160b 100644
--- a/RepairKit/RepairKit.ts
+++ b/RepairKit/RepairKit.ts
@@ -1,12 +1,18 @@
 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();
@@ -14,6 +20,8 @@ function startGame(): void {
 
 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();