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();