refactor(web/skillcheck): skillcheck mantine rewrite

web/src/features/skillcheck/indicator.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { useKeyPress } from '../../hooks/useKeyPress';
 import { SkillCheckProps } from './index';
-import { useInterval } from '@chakra-ui/react';
+// import { useInterval } from '@chakra-ui/react';
+import { useInterval } from '@mantine/hooks';
 import { circleCircumference } from './index';
 
 interface Props {
@@ -9,31 +10,29 @@ interface Props {
   offset: number;
   multiplier: number;
   skillCheck: SkillCheckProps;
+  className: string;
   handleComplete: (success: boolean) => void;
 }
 
-const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete, skillCheck }) => {
+const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete, skillCheck, className }) => {
   const [indicatorAngle, setIndicatorAngle] = useState(-90);
-  const [gameState, setGameState] = useState(false);
   const isKeyPressed = useKeyPress('e');
-
-  useInterval(
-    () => {
+  const interval = useInterval(
+    () =>
       setIndicatorAngle((prevState) => {
         return (prevState += multiplier);
-      });
-    },
-    gameState ? 1 : null
+      }),
+    1
   );
 
   useEffect(() => {
     setIndicatorAngle(-90);
-    setGameState(true);
+    interval.start();
   }, [skillCheck]);
 
   useEffect(() => {
     if (indicatorAngle + 90 >= 360) {
-      setGameState(false);
+      interval.stop();
       handleComplete(false);
     }
   }, [indicatorAngle]);
@@ -41,7 +40,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
   useEffect(() => {
     if (!isKeyPressed) return;
 
-    setGameState(false);
+    interval.stop();
 
     if (indicatorAngle < angle || indicatorAngle > angle + offset) handleComplete(false);
     else handleComplete(true);
@@ -52,12 +51,10 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
       r={50}
       cx={250}
       cy={250}
-      fill="transparent"
-      stroke="red"
-      strokeWidth={15}
       strokeDasharray={circleCircumference}
       strokeDashoffset={circleCircumference - 3}
       transform={`rotate(${indicatorAngle}, 250, 250)`}
+      className={className}
     />
   );
 };