refactor(skillcheck): move array handling into ui

web/src/features/skillcheck/index.tsx

@@ -1,8 +1,9 @@
 import { Box, Center } from '@chakra-ui/react';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { debugData } from '../../utils/debugData';
 import Indicator from './indicator';
+import { fetchNui } from '../../utils/fetchNui';
 
 interface CustomGameDifficulty {
   areaSize: number;
@@ -28,27 +29,54 @@ const difficultyOffsets = {
 debugData([
   {
     action: 'startSkillCheck',
-    data: 'easy',
+    data: [{ areaSize: 250, speedMultiplier: 2 }, 'easy'],
   },
 ]);
 
 const SkillCheck: React.FC = () => {
   const [visible, setVisible] = useState(false);
+  const dataRef = useRef<GameDifficulty | GameDifficulty[] | null>(null);
+  const dataIndexRef = useRef<number>(0);
   const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({
     angle: 0,
     difficultyOffset: 315,
     difficulty: 'easy',
   });
 
-  useNuiEvent('startSkillCheck', (data: GameDifficulty) => {
+  useNuiEvent('startSkillCheck', (data: GameDifficulty | GameDifficulty[]) => {
+    dataRef.current = data;
+    dataIndexRef.current = 0;
+    const gameData = Array.isArray(data) ? data[0] : data;
+    const offset = typeof gameData === 'object' ? gameData.areaSize : difficultyOffsets[gameData];
+    setSkillCheck({
+      angle: -90 + getRandomAngle(120, 360 - (315 - offset)),
+      difficultyOffset: offset,
+      difficulty: gameData,
+    });
+
+    setVisible(true);
+  });
+
+  const handleComplete = (success: boolean) => {
+    if (!success || !Array.isArray(dataRef.current)) {
+      setVisible(false);
+      return fetchNui('skillCheckOver', success);
+    }
+
+    if (dataIndexRef.current >= dataRef.current.length - 1) {
+      setVisible(false);
+      return fetchNui('skillCheckOver', success);
+    }
+
+    dataIndexRef.current++;
+    const data = dataRef.current[dataIndexRef.current];
     const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data];
     setSkillCheck({
       angle: -90 + getRandomAngle(120, 360 - (315 - offset)),
       difficultyOffset: offset,
       difficulty: data,
     });
-    setVisible(true);
-  });
+  };
 
   return (
     <Center height="100%" width="100%">
@@ -89,8 +117,8 @@ const SkillCheck: React.FC = () => {
                   ? 1.75
                   : skillCheck.difficulty.speedMultiplier
               }
-              setSkillCheck={setSkillCheck}
-              setVisible={setVisible}
+              handleComplete={handleComplete}
+              skillCheck={skillCheck}
             />
           </svg>
           <Box

web/src/features/skillcheck/indicator.tsx

@@ -2,48 +2,61 @@ import { useEffect, useRef, useState } from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { useKeyPress } from '../../hooks/useKeyPress';
 import { fetchNui } from '../../utils/fetchNui';
-import { SkillCheckProps } from './index';
+import skillcheck, { SkillCheckProps } from './index';
+import { useInterval } from '@chakra-ui/react';
+import { Simulate } from 'react-dom/test-utils';
+import keyPress = Simulate.keyPress;
 
 interface Props {
   angle: number;
   offset: number;
   multiplier: number;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  setSkillCheck: React.Dispatch<React.SetStateAction<SkillCheckProps>>;
+  skillCheck: SkillCheckProps;
+  handleComplete: (success: boolean) => void;
 }
 
-const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck, setVisible }) => {
+const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete, skillCheck }) => {
   const [indicatorAngle, setIndicatorAngle] = useState(-90);
-  const intervalRef = useRef<NodeJS.Timer | null>(null);
+  const [gameState, setGameState] = useState(false);
   const isKeyPressed = useKeyPress('e');
 
-  useEffect(() => {
-    intervalRef.current = setInterval(() => {
-      setIndicatorAngle((prevState) => (prevState += multiplier));
-    }, 1);
-
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
-  }, []);
+  useInterval(
+    () => {
+      setIndicatorAngle((prevState) => {
+        return (prevState += multiplier);
+      });
+    },
+    gameState ? 1 : null
+  );
 
   useEffect(() => {
-    if (intervalRef.current && indicatorAngle + 90 >= 360) {
-      clearInterval(intervalRef.current);
-      fetchNui('skillCheckOver', { success: false });
-      setVisible(false);
+    setIndicatorAngle(-90);
+    setGameState(true);
+  }, [skillCheck]);
+
+  useEffect(() => {
+    if (indicatorAngle + 90 >= 360) {
+      // fetchNui('skillCheckOver', { success: false });
+      setGameState(false);
+      handleComplete(false);
     }
+  }, [indicatorAngle]);
 
-    if (isKeyPressed && intervalRef.current) {
-      clearInterval(intervalRef.current);
+  useEffect(() => {
+    if (!isKeyPressed) return;
+    //
+
+    setGameState(false);
+    if (isKeyPressed) {
       if (indicatorAngle < angle || indicatorAngle > angle + (315 - offset)) {
-        fetchNui('skillCheckOver', { success: false });
+        // fetchNui('skillCheckOver', { success: false });
+        handleComplete(false);
       } else {
-        fetchNui('skillCheckOver', { success: true });
+        // fetchNui('skillCheckOver', { success: true });
+        handleComplete(true);
       }
-      setVisible(false);
     }
-  }, [indicatorAngle, isKeyPressed]);
+  }, [isKeyPressed]);
 
   return (
     <circle