feat(web/skillcheck): fail skill check only on keys that aren't passed

web/src/features/skillcheck/index.tsx

@@ -74,7 +74,8 @@ const SkillCheck: React.FC = () => {
       angle: -90 + getRandomAngle(120, 360 - offset),
       difficultyOffset: offset,
       difficulty: gameData,
-      key: randomKey,
+      keys: data.inputs?.map((input) => input.toLowerCase()),
+      key: randomKey.toLowerCase(),
     });
 
     setVisible(true);
@@ -103,12 +104,13 @@ const SkillCheck: React.FC = () => {
       ? dataRef.current.inputs[Math.floor(Math.random() * dataRef.current.inputs.length)]
       : 'e';
     const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data];
-    setSkillCheck({
+    setSkillCheck((prev) => ({
+      ...prev,
       angle: -90 + getRandomAngle(120, 360 - offset),
       difficultyOffset: offset,
       difficulty: data,
-      key,
-    });
+      key: key.toLowerCase(),
+    }));
   };
 
   return (

web/src/features/skillcheck/indicator.tsx

@@ -46,11 +46,13 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
   useEffect(() => {
     if (!keyPressed) return;
 
+    if (skillCheck.keys && !skillCheck.keys?.includes(keyPressed)) return;
+
     interval.stop();
 
     window.removeEventListener('keydown', keyHandler);
 
-    if (keyPressed !== skillCheck.key.toLowerCase() || indicatorAngle < angle || indicatorAngle > angle + offset)
+    if (keyPressed !== skillCheck.key || indicatorAngle < angle || indicatorAngle > angle + offset)
       handleComplete(false);
     else handleComplete(true);
 

web/src/typings/skillcheck.ts

@@ -9,5 +9,6 @@ export interface SkillCheckProps {
   angle: number;
   difficultyOffset: number;
   difficulty: GameDifficulty;
+  keys?: string[];
   key: string;
 }