fix: lint error fixes

ucsddesignco · Apr 5, 2024 · a3fd712 · a3fd712
1 parent 68d676b
commit a3fd712
Show file tree

Hide file tree

Showing 10 changed files with 1,908 additions and 842 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,10 +13,10 @@ function App() {
 
   return (
     <main className="main-content">
-      <Asteroid homeRef={homeRef}/>
+      <Asteroid homeRef={homeRef} />
       <OrbitingPlanets />
       <Navbar />
-      <Home homeRef={homeRef}/>
+      <Home homeRef={homeRef} />
       <FAQ />
       <Timeline />
       <Judges />

diff --git a/src/components/Asteroid/Asteroid.scss b/src/components/Asteroid/Asteroid.scss
@@ -1,21 +1,20 @@
 .asteroid-container {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    display: grid;
-    align-items: start;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  align-items: start;
 
-    .asteroid{
-        z-index: 100;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
+  .asteroid {
+    z-index: 100;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 
-    .fragment{
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
+  .fragment {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
-
diff --git a/src/components/Asteroid/Asteroid.tsx b/src/components/Asteroid/Asteroid.tsx
@@ -11,88 +11,30 @@ import FragmentAsteroid4 from './Fragment-Asteroid-4';
 
 type AsteroidProps = {
   homeRef: React.RefObject<HTMLElement>;
-}
-
-export default function Asteroid({homeRef}: AsteroidProps) {
+};
 
+export default function Asteroid({ homeRef }: AsteroidProps) {
   const [numAsteroids, setNumAsteroids] = useState(0);
-  const [contentInfo, setContentInfo] = useState({paddingLeft: 0,  width: 0});
-  const [asteroidAnimations, setAsteroidAnimations] = useState<animationProps[]>([]); // [ {x: number, y: number}
+  const [contentInfo, setContentInfo] = useState({ paddingLeft: 0, width: 0 });
+  const [asteroidAnimations, setAsteroidAnimations] = useState<
+    animationProps[]
+  >([]); // [ {x: number, y: number}
   const [asteroidVisibility, setAsteroidVisibility] = useState<boolean[]>([]);
   const [asteroidExploded, setAsteroidExploded] = useState<boolean[]>([]);
   const [fragmentEdPts, setFragmentEndPts] = useState<Point[]>([]);
 
-
   type animationProps = {
     initial: Point;
     animate: Point;
-    transition: {duration: number, ease: number[]}
-  }
+    transition: { duration: number; ease: number[] };
+  };
 
   type Point = {
-        x: number;
-        y: number;
-   };
-
-  //Startpt x: -window.innerWidth < x < 0
-  //Startpt y: 0 < y < window.innerHeight
-  const generateStartPT = () => {
-    const startPT = { x: -(Math.random() * window.innerWidth/4), y: Math.random() * window.innerHeight}
-    return startPT
-  }
-
+    x: number;
+    y: number;
+  };
 
-  //Endpt x: 0 < x < left padding || left padding + contentWidth < x < window.innerWidth
-  //Endpt y: 0 < y < window.innerHeight
-  const generateEndPT = () => {
-    const contentPaddingLeft = contentInfo.paddingLeft;
-    const contentWidth = contentInfo.width;
-    const contentMidPoint = contentPaddingLeft + contentWidth/2;
-
-    let endX = Math.random() * window.innerWidth;
-
-    if(endX < contentMidPoint) { 
-      endX = Math.min(contentPaddingLeft - (Math.random() * 100), endX)
-    }
-
-    if(endX > contentMidPoint) {
-        endX = Math.max(contentWidth - 500 - (Math.random() * 100), endX)
-    }
-
-    const endPT = {x: endX, 
-                  y: Math.random() * (window.innerHeight - 100)
-    };
-    return endPT;
-  }
-
-  const generateFragmentEndPT = () => {
-    const endPT = {
-      x: (Math.random() * 2 - 1) * window.innerWidth,  
-      y: Math.random() * 100 + window.innerHeight
-    };
-    return endPT;
-  }
-
-  const calculateDistance = (startPT: Point, endPT: Point) => {
-    return Math.sqrt(Math.pow(endPT.x - startPT.x, 2) + Math.pow(endPT.y - startPT.y, 2));
-  }
-
-  const generateAnimationProps = () => {
-    const startPT = generateStartPT();
-    const endPT = generateEndPT();
-    const distance = calculateDistance(startPT, endPT);
-
-    const speed = 200; // pixels per second
-    const duration = distance / speed; // seconds
-
-    return {
-      initial: startPT,
-      animate: endPT,
-      transition: {duration: duration, ease: [0.1, 0.87, 0.44, 1] },
-    }
-  }
-
-  const onButtonClick = (index : number) => {
+  const onButtonClick = (index: number) => {
     console.log(index);
     console.log(fragmentEdPts);
 
@@ -109,88 +51,156 @@ export default function Asteroid({homeRef}: AsteroidProps) {
       newExploded[index] = true;
       return newExploded;
     });
-  }
+  };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     const homeElement = homeRef.current;
     if (homeElement) {
       const style = window.getComputedStyle(homeElement);
       const paddingLeftValue = style.paddingLeft;
-      setContentInfo({paddingLeft: parseFloat(paddingLeftValue), width: homeElement.getBoundingClientRect().width});
-
+      setContentInfo({
+        paddingLeft: parseFloat(paddingLeftValue),
+        width: homeElement.getBoundingClientRect().width
+      });
+
       const numAsteroids = 5;
       setNumAsteroids(numAsteroids);
 
       setAsteroidVisibility(Array(numAsteroids).fill(true));
 
+      //Startpt x: -window.innerWidth < x < 0
+      //Startpt y: 0 < y < window.innerHeight
+      const generateStartPT = () => {
+        const startPT = {
+          x: -((Math.random() * window.innerWidth) / 4),
+          y: Math.random() * window.innerHeight
+        };
+        return startPT;
+      };
+
+      //Endpt x: 0 < x < left padding || left padding + contentWidth < x < window.innerWidth
+      //Endpt y: 0 < y < window.innerHeight
+      const generateEndPT = () => {
+        const contentPaddingLeft = contentInfo.paddingLeft;
+        const contentWidth = contentInfo.width;
+        const contentMidPoint = contentPaddingLeft + contentWidth / 2;
+
+        let endX = Math.random() * window.innerWidth;
+
+        if (endX < contentMidPoint) {
+          endX = Math.min(contentPaddingLeft - Math.random() * 100, endX);
+        }
+
+        if (endX > contentMidPoint) {
+          endX = Math.max(contentWidth - 500 - Math.random() * 100, endX);
+        }
+
+        const endPT = {
+          x: endX,
+          y: Math.random() * (window.innerHeight - 100)
+        };
+        return endPT;
+      };
+
+      const calculateDistance = (startPT: Point, endPT: Point) => {
+        return Math.sqrt(
+          Math.pow(endPT.x - startPT.x, 2) + Math.pow(endPT.y - startPT.y, 2)
+        );
+      };
+
+      const generateAnimationProps = () => {
+        const startPT = generateStartPT();
+        const endPT = generateEndPT();
+        const distance = calculateDistance(startPT, endPT);
+
+        const speed = 200; // pixels per second
+        const duration = distance / speed; // seconds
+
+        return {
+          initial: startPT,
+          animate: endPT,
+          transition: { duration: duration, ease: [0.1, 0.87, 0.44, 1] }
+        };
+      };
+
       // Generate animations for each asteroid
-      const newAnimations = Array.from({ length: numAsteroids }, () => generateAnimationProps());
+      const newAnimations = Array.from({ length: numAsteroids }, () =>
+        generateAnimationProps()
+      );
       setAsteroidAnimations(newAnimations);
 
+      const generateFragmentEndPT = () => {
+        const endPT = {
+          x: (Math.random() * 2 - 1) * window.innerWidth,
+          y: Math.random() * 100 + window.innerHeight
+        };
+        return endPT;
+      };
+
       // Generate animations for each fragment
-      const newFragments = Array.from({ length: numAsteroids * 4 }, () => generateFragmentEndPT());
+      const newFragments = Array.from({ length: numAsteroids * 4 }, () =>
+        generateFragmentEndPT()
+      );
       setFragmentEndPts(newFragments);
-    }}, [])
-
+    }
+  }, [homeRef, contentInfo.paddingLeft, contentInfo.width]);
+
   return (
-    <section className='asteroid-container'>
-      {Array.from({ length: numAsteroids }, (_, index) => (
+    <section className="asteroid-container">
+      {Array.from({ length: numAsteroids }, (_, index) =>
         asteroidExploded[index] ? (
-        <>
-          <motion.div
-            className='fragment'
-            initial={asteroidAnimations[index]?.animate}
-            animate={fragmentEdPts[(index * 4) + 0]}
-            transition={{duration: 10, ease: [0.1, 0.87, 0.44, 1]}}
-          >
-            <FragmentAsteroid1/>      
-          </motion.div>
-
-          <motion.div
-            className='fragment'
-            initial={asteroidAnimations[index]?.animate}
-            animate={fragmentEdPts[(index * 4) + 1]}
-            transition={{duration: 10, ease: [0.1, 0.87, 0.44, 1]}}
-          >
-            <FragmentAsteroid2/>      
-          </motion.div>
-
-          <motion.div
-            className='fragment'
-            initial={asteroidAnimations[index]?.animate}
-            animate={fragmentEdPts[(index * 4) + 2]}
-            transition={{duration: 10, ease: [0.1, 0.87, 0.44, 1]}}
-          >
-            <FragmentAsteroid3/>      
-          </motion.div>
-
-          <motion.div
-            className='fragment'
-            initial={asteroidAnimations[index]?.animate}
-            animate={fragmentEdPts[(index * 4) + 3]}
-            transition={{duration: 10, ease: [0.1, 0.87, 0.44, 1]}}
-          >
-            <FragmentAsteroid4/>      
-          </motion.div>
-        </>
-        ) :
-
-
-        asteroidVisibility[index] && (
-          <motion.div 
-            key={index}
-            className='asteroid'
-            onClick={() => onButtonClick(index)}
-            initial={asteroidAnimations[index]?.initial}
-            animate={asteroidAnimations[index]?.animate}
-            transition={asteroidAnimations[index]?.transition}
-          >
-            <LargeAsteroid2 />
-          </motion.div>
+          <>
+            <motion.div
+              className="fragment"
+              initial={asteroidAnimations[index]?.animate}
+              animate={fragmentEdPts[index * 4 + 0]}
+              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
+            >
+              <FragmentAsteroid1 />
+            </motion.div>
+
+            <motion.div
+              className="fragment"
+              initial={asteroidAnimations[index]?.animate}
+              animate={fragmentEdPts[index * 4 + 1]}
+              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
+            >
+              <FragmentAsteroid2 />
+            </motion.div>
+
+            <motion.div
+              className="fragment"
+              initial={asteroidAnimations[index]?.animate}
+              animate={fragmentEdPts[index * 4 + 2]}
+              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
+            >
+              <FragmentAsteroid3 />
+            </motion.div>
+
+            <motion.div
+              className="fragment"
+              initial={asteroidAnimations[index]?.animate}
+              animate={fragmentEdPts[index * 4 + 3]}
+              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
+            >
+              <FragmentAsteroid4 />
+            </motion.div>
+          </>
+        ) : (
+          asteroidVisibility[index] && (
+            <motion.div
+              key={index}
+              className="asteroid"
+              onClick={() => onButtonClick(index)}
+              initial={asteroidAnimations[index]?.initial}
+              animate={asteroidAnimations[index]?.animate}
+              transition={asteroidAnimations[index]?.transition}
+            >
+              <LargeAsteroid2 />
+            </motion.div>
+          )
         )
-
-      ))}
+      )}
     </section>
   );
-}
+}
diff --git a/src/components/Asteroid/Fragment-Asteroid-1.tsx b/src/components/Asteroid/Fragment-Asteroid-1.tsx
@@ -1,5 +1,4 @@
-import * as React from "react"
-import { SVGProps } from "react"
+import { SVGProps } from 'react';
 const FragmentAsteroid1 = (props: SVGProps<SVGSVGElement>) => (
   <svg
     width={25}
@@ -14,7 +13,7 @@ const FragmentAsteroid1 = (props: SVGProps<SVGSVGElement>) => (
         <mask
           id="mask0_1643_230"
           style={{
-            maskType: "alpha",
+            maskType: 'alpha'
           }}
           maskUnits="userSpaceOnUse"
           x={1}
@@ -53,5 +52,5 @@ const FragmentAsteroid1 = (props: SVGProps<SVGSVGElement>) => (
       </g>
     </g>
   </svg>
-)
-export default FragmentAsteroid1
+);
+export default FragmentAsteroid1;