From 5b9bb531a94bcb9a1c403dddf18997b48f2f4a1c Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Thu, 20 Jul 2023 22:39:56 +0200
Subject: [PATCH] fix(web/skillcheck): fail on wrong key press

---
 web/src/features/skillcheck/indicator.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/features/skillcheck/indicator.tsx b/web/src/features/skillcheck/indicator.tsx
index 333050e..674f644 100644
--- a/web/src/features/skillcheck/indicator.tsx
+++ b/web/src/features/skillcheck/indicator.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete, skillCheck, className }) => {
   const [indicatorAngle, setIndicatorAngle] = useState(-90);
-  const [keyPressed, setKeyPressed] = useState(false);
+  const [keyPressed, setKeyPressed] = useState<false | string>(false);
   const interval = useInterval(
     () =>
       setIndicatorAngle((prevState) => {
@@ -25,8 +25,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
 
   const keyHandler = useCallback(
     (e: KeyboardEvent) => {
-      if (e.key.toLowerCase() !== skillCheck.key.toLowerCase()) return;
-      setKeyPressed(true);
+      setKeyPressed(e.key.toLowerCase());
     },
     [skillCheck]
   );
@@ -49,11 +48,13 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
 
     interval.stop();
 
-    setKeyPressed(false);
     window.removeEventListener('keydown', keyHandler);
 
-    if (indicatorAngle < angle || indicatorAngle > angle + offset) handleComplete(false);
+    if (keyPressed !== skillCheck.key.toLowerCase() || indicatorAngle < angle || indicatorAngle > angle + offset)
+      handleComplete(false);
     else handleComplete(true);
+
+    setKeyPressed(false);
   }, [keyPressed]);
 
   return (