feat(web): skillcheck minigame

web/src/App.tsx

@@ -12,6 +12,7 @@ import AlertDialog from './features/dialog/AlertDialog';
 import ListMenu from './features/menu/list';
 import Dev from './features/dev';
 import { isEnvBrowser } from './utils/misc';
+import SkillCheck from './features/skillcheck';
 
 const App: React.FC = () => {
   useNuiEvent('setClipboard', (data: string) => {
@@ -31,6 +32,7 @@ const App: React.FC = () => {
       <AlertDialog />
       <ContextMenu />
       <ListMenu />
+      <SkillCheck />
       {isEnvBrowser() && <Dev />}
     </>
   );

web/src/features/skillcheck/index.tsx

@@ -0,0 +1,93 @@
+import { Box, Center } from '@chakra-ui/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useNuiEvent } from '../../hooks/useNuiEvent';
+import { debugData } from '../../utils/debugData';
+import Indicator from './indicator';
+
+export interface SkillCheckProps {
+  visible: boolean;
+  angle: number;
+  difficultyOffset: number;
+  difficulty: 'easy' | 'medium' | 'hard';
+}
+
+const getRandomAngle = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min;
+
+const difficultyOffsets = {
+  easy: 275,
+  medium: 290,
+  hard: 300,
+};
+
+debugData([
+  {
+    action: 'startSkillCheck',
+    data: 'easy',
+  },
+]);
+
+const SkillCheck: React.FC = () => {
+  const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({
+    visible: false,
+    angle: 0,
+    difficultyOffset: 315,
+    difficulty: 'easy',
+  });
+
+  useNuiEvent('startSkillCheck', (data: 'easy' | 'medium' | 'hard') => {
+    setSkillCheck({
+      visible: true,
+      angle: -90 + getRandomAngle(0, 360),
+      difficultyOffset: difficultyOffsets[data],
+      difficulty: data,
+    });
+  });
+
+  return (
+    <Center height="100%" width="100%">
+      {skillCheck.visible && (
+        <>
+          <svg width={500} height={500}>
+            {/*Circle track*/}
+            <circle r={50} cx={250} cy={250} fill="transparent" stroke="#a3a8a5" strokeDasharray={360} />
+            {/*SkillCheck area*/}
+            <circle
+              r={50}
+              cx={250}
+              cy={250}
+              fill="transparent"
+              stroke="white"
+              strokeDasharray={315}
+              strokeDashoffset={skillCheck.difficultyOffset}
+              strokeWidth={5}
+              transform={`rotate(${skillCheck.angle}, 250, 250)`}
+            />
+            <Indicator
+              angle={skillCheck.angle}
+              offset={skillCheck.difficultyOffset}
+              multiplier={skillCheck.difficulty === 'easy' ? 1 : skillCheck.difficulty === 'medium' ? 1.5 : 2}
+              setSkillCheck={setSkillCheck}
+            />
+          </svg>
+          <Box
+            position="absolute"
+            left="50%"
+            top="50%"
+            transform="translate(-50%, -50%)"
+            backgroundColor="rgba(0, 0, 0, 0.4)"
+            w={25}
+            h={25}
+            textAlign="center"
+            borderRadius={5}
+            fontFamily="Inter"
+            fontSize={16}
+          >
+            E
+          </Box>
+        </>
+      )}
+    </Center>
+  );
+};
+
+export default SkillCheck;

web/src/features/skillcheck/indicator.tsx

@@ -0,0 +1,63 @@
+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';
+
+interface Props {
+  angle: number;
+  offset: number;
+  multiplier: number;
+  setSkillCheck: React.Dispatch<React.SetStateAction<SkillCheckProps>>;
+}
+
+const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }) => {
+  const [indicatorAngle, setIndicatorAngle] = useState(-90);
+  const intervalRef = useRef<NodeJS.Timer | null>(null);
+  const isKeyPressed = useKeyPress('e');
+
+  useEffect(() => {
+    console.log(1);
+    intervalRef.current = setInterval(() => {
+      setIndicatorAngle((prevState) => (prevState += multiplier));
+    }, 1);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (intervalRef.current && indicatorAngle + 90 >= 360) {
+      clearInterval(intervalRef.current);
+      fetchNui('skillCheckOver', { success: false });
+      setSkillCheck((prevState) => ({ ...prevState, visible: false }));
+    }
+
+    if (isKeyPressed && intervalRef.current) {
+      clearInterval(intervalRef.current);
+      if (indicatorAngle < angle || indicatorAngle > angle + (315 - offset)) {
+        fetchNui('skillCheckOver', { success: false });
+      } else {
+        fetchNui('skillCheckOver', { success: true });
+      }
+      setSkillCheck((prevState) => ({ ...prevState, visible: false }));
+    }
+  }, [indicatorAngle, isKeyPressed]);
+
+  return (
+    <circle
+      r={50}
+      cx={250}
+      cy={250}
+      fill="transparent"
+      stroke="red"
+      strokeWidth={15}
+      strokeDasharray={315}
+      strokeDashoffset={312}
+      transform={`rotate(${indicatorAngle}, 250, 250)`}
+    />
+  );
+};
+
+export default Indicator;