lint fix

battlecode · Jan 9, 2025 · 90ffb63 · 90ffb63
1 parent 5fe9877
commit 90ffb63
Showing 1 changed file with 88 additions and 59 deletions.
diff --git a/frontend/src/components/CountdownDigital.tsx b/frontend/src/components/CountdownDigital.tsx
@@ -14,8 +14,7 @@ interface ProgressCircleProps {
 
 const ProgressCircle: React.FC<ProgressCircleProps> = ({
   sqSize,
-  percentage
-
+  percentage,
 }) => {
   const strokeWidth = 6;
   const radius = (sqSize - strokeWidth) / 2;
@@ -25,46 +24,46 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
 
   return (
     <svg width={sqSize} height={sqSize} viewBox={viewBox}>
-            <circle
-            className="fill-none stroke-gray-200"
-            cx={sqSize / 2}
-            cy={sqSize / 2}
-            r={radius}
-            strokeWidth={`${strokeWidth / 2}px`} />
-            <circle
-              className="fill-none stroke-cyan-600 transition-all delay-200 ease-in"
-              cx={sqSize / 2}
-              cy={sqSize / 2}
-              r={radius}
-              strokeLinecap="round"
-              strokeWidth={`${strokeWidth}px`}
-              transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
-              style={{
-                strokeDasharray: dashArray,
-                strokeDashoffset: dashOffset,
-              }} />
-          </svg>
+      <circle
+        className="fill-none stroke-gray-200"
+        cx={sqSize / 2}
+        cy={sqSize / 2}
+        r={radius}
+        strokeWidth={`${strokeWidth / 2}px`}
+      />
+      <circle
+        className="fill-none stroke-cyan-600 transition-all delay-200 ease-in"
+        cx={sqSize / 2}
+        cy={sqSize / 2}
+        r={radius}
+        strokeLinecap="round"
+        strokeWidth={`${strokeWidth}px`}
+        transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
+        style={{
+          strokeDasharray: dashArray,
+          strokeDashoffset: dashOffset,
+        }}
+      />
+    </svg>
   );
 };
 
 interface DateParams {
-  days: number,
-  hours: number,
-  minutes: number
+  days: number;
+  hours: number;
+  minutes: number;
 }
 
 const computeTimeDiff = (fromDate: Date, toDate: Date): DateParams => {
   const timeDiff = toDate.getTime() - fromDate.getTime();
 
-  const days = Math.floor(
-    (timeDiff) / (thousand * sixty * sixty * hoursInDay),
-  );
+  const days = Math.floor(timeDiff / (thousand * sixty * sixty * hoursInDay));
   const hours = Math.floor(
-    ((timeDiff) % (thousand * sixty * sixty * hoursInDay)) /
+    (timeDiff % (thousand * sixty * sixty * hoursInDay)) /
       (thousand * sixty * sixty),
   );
   const minutes = Math.floor(
-    ((timeDiff) % (thousand * sixty * sixty)) / (thousand * sixty),
+    (timeDiff % (thousand * sixty * sixty)) / (thousand * sixty),
   );
 
   return { days, hours, minutes };
@@ -75,9 +74,7 @@ interface CountdownDigitalProps {
   title?: string;
 }
 
-const CountdownDigital: React.FC<CountdownDigitalProps> = ({
-  date,
-}) => {
+const CountdownDigital: React.FC<CountdownDigitalProps> = ({ date }) => {
   const currentTime = new Date();
   const [count, setCount] = useState(0);
 
@@ -90,42 +87,74 @@ const CountdownDigital: React.FC<CountdownDigitalProps> = ({
     };
   }, []);
 
-  const countdownInfo = useMemo(() => computeTimeDiff(currentTime, date), [count]);
+  const countdownInfo = useMemo(
+    () => computeTimeDiff(currentTime, date),
+    [count],
+  );
   const progressCircleSize = 140;
-  const percentageDays = ((sixty-countdownInfo.days)/sixty)*fullPercentage;
-  const percentageHours = ((hoursInDay-countdownInfo.hours)/hoursInDay)*fullPercentage;
-  const percentageMins = ((sixty-countdownInfo.minutes)/sixty)*fullPercentage;
+  const percentageDays =
+    ((sixty - countdownInfo.days) / sixty) * fullPercentage;
+  const percentageHours =
+    ((hoursInDay - countdownInfo.hours) / hoursInDay) * fullPercentage;
+  const percentageMins =
+    ((sixty - countdownInfo.minutes) / sixty) * fullPercentage;
   const countTxtSize = "3xl";
   const labelTxtSize = "l";
 
-
   return (
-    <div className={`flex flex-row max-w-max justify-evenly gap-8`}>
-        <div className="relative">
-          {ProgressCircle({sqSize: progressCircleSize, percentage: percentageDays})}
-
-          <div className={`absolute top-${progressCircleSize / 2} left-${progressCircleSize / 2} top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center`}>
-            <span className={`font-bold text-${countTxtSize}`}>{countdownInfo.days}</span>
-            <span className={`block text-${labelTxtSize}`}>Days</span>
-          </div>
+    <div className={`flex max-w-max flex-row justify-evenly gap-8`}>
+      <div className="relative">
+        {ProgressCircle({
+          sqSize: progressCircleSize,
+          percentage: percentageDays,
+        })}
+
+        <div
+          className={`absolute top-${progressCircleSize / 2} left-${
+            progressCircleSize / 2
+          } start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-center`}
+        >
+          <span className={`font-bold text-${countTxtSize}`}>
+            {countdownInfo.days}
+          </span>
+          <span className={`block text-${labelTxtSize}`}>Days</span>
         </div>
-        <div className="relative">
-          {ProgressCircle({sqSize: progressCircleSize, percentage: percentageHours})}
-
-          <div className={`absolute top-${progressCircleSize / 2} left-${progressCircleSize / 2} top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center`}>
-            <span className={`font-bold text-${countTxtSize}`}>{countdownInfo.hours}</span>
-            <span className={`block text-${labelTxtSize}`}>Hours</span>
-          </div>
+      </div>
+      <div className="relative">
+        {ProgressCircle({
+          sqSize: progressCircleSize,
+          percentage: percentageHours,
+        })}
+
+        <div
+          className={`absolute top-${progressCircleSize / 2} left-${
+            progressCircleSize / 2
+          } start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-center`}
+        >
+          <span className={`font-bold text-${countTxtSize}`}>
+            {countdownInfo.hours}
+          </span>
+          <span className={`block text-${labelTxtSize}`}>Hours</span>
         </div>
-        <div className="relative">
-          {ProgressCircle({sqSize: progressCircleSize, percentage: percentageMins})}
-
-          <div className={`absolute top-${progressCircleSize / 2} left-${progressCircleSize / 2} top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center`}>
-            <span className={`font-bold text-${countTxtSize}`}>{countdownInfo.minutes}</span>
-            <span className={`block text-${labelTxtSize}`}>Mins</span>
-          </div>
+      </div>
+      <div className="relative">
+        {ProgressCircle({
+          sqSize: progressCircleSize,
+          percentage: percentageMins,
+        })}
+
+        <div
+          className={`absolute top-${progressCircleSize / 2} left-${
+            progressCircleSize / 2
+          } start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-center`}
+        >
+          <span className={`font-bold text-${countTxtSize}`}>
+            {countdownInfo.minutes}
+          </span>
+          <span className={`block text-${labelTxtSize}`}>Mins</span>
         </div>
       </div>
+    </div>
   );
 };