feat: add rotation animation for asteroids

ucsddesignco · Apr 6, 2024 · 744e89a · 744e89a
1 parent 35de3f4
commit 744e89a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 22 deletions.
diff --git a/src/components/Asteroid/Asteroid.tsx b/src/components/Asteroid/Asteroid.tsx
@@ -33,7 +33,6 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
   const [fragmentVisibility, setFragmentVisibility] = useState<boolean[]>([]); // [ {x: number, y: number}
   const [asteroidExploded, setAsteroidExploded] = useState<boolean[]>([]);
   const [fragmentEdPts, setFragmentEndPts] = useState<Point[]>([]);
-  const [asteroidRotations, setAsteroidRotations] = useState<number[]>([]);
   const numAsteroids = 7;
 
   const onButtonClick = (index: number) => {
@@ -79,15 +78,6 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
     }
   }, [homeRef]);
 
-  // Initialize asteroid rotation values
-  useEffect(() => {
-    const rotations = Array.from(
-      { length: numAsteroids },
-      () => Math.random() * 360
-    );
-    setAsteroidRotations(rotations);
-  }, [numAsteroids]);
-
   const clickMeLocation = { x: window.innerWidth / 3, y: 100 };
 
   const FragmentAsteroidComponents = [
@@ -121,7 +111,7 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
                   y: fragmentEdPts[index * 4 + i].y,
                   scale: 0
                 }}
-                transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
+                transition={{ duration: 5, ease: [0.1, 0.87, 0.44, 1] }}
                 onAnimationComplete={() =>
                   index === i && onFragmentAnimationComplete(index)
                 }
@@ -143,9 +133,6 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
                   : asteroidAnimations[index]?.animate
               }
               transition={asteroidAnimations[index]?.transition}
-              style={
-                index === 0 ? {} : { rotate: `${asteroidRotations[index]}deg` }
-              }
             >
               <LargeAsteroid2 />
               {index === 0 && (

diff --git a/src/components/Asteroid/asteroidLogic.ts b/src/components/Asteroid/asteroidLogic.ts
@@ -16,7 +16,6 @@ export default function asteroidLogic({
   numAsteroids,
   contentPaddingLeft,
   contentPaddingRight,
-  contentWidth,
   setAsteroidVisibility,
   setAsteroidAnimations,
   setFragmentEndPts
@@ -55,15 +54,14 @@ export default function asteroidLogic({
   let generatedCount = 0;
   const generateEndPT = () => {
     const contentRight = window.innerWidth - contentPaddingRight;
-    console.log('width', contentWidth);
-    console.log(contentRight);
 
     //Let side of content
     if (generatedCount < 3) {
       generatedCount++;
       return {
         x: Math.max(Math.random() * (contentPaddingLeft - 100), 50),
-        y: Math.max(Math.random() * (window.innerHeight - 100), 100)
+        y: Math.max(Math.random() * (window.innerHeight - 100), 100),
+        rotate: Math.random() * 360
       };
     }
 
@@ -72,13 +70,14 @@ export default function asteroidLogic({
       generatedCount++;
       return {
         x: Math.min(
-          contentRight - 100 + Math.random() * (contentPaddingRight + 100),
+          contentRight - 125 + Math.random() * (contentPaddingRight + 75),
           window.innerWidth - 20
         ),
         y: Math.min(
           10 + Math.random() * (window.innerHeight / 3 + 100),
           window.innerHeight / 3
-        )
+        ),
+        rotate: Math.random() * 360
       };
     }
 
@@ -87,15 +86,16 @@ export default function asteroidLogic({
       generatedCount++;
       return {
         x: Math.min(
-          contentRight - 100 + Math.random() * (contentPaddingRight - 100),
+          contentRight - 125 + Math.random() * (contentPaddingRight + 75),
           window.innerWidth - 20
         ),
         y: Math.min(
           100 +
             window.innerHeight / 2 +
             Math.random() * (window.innerHeight / 2),
           window.innerHeight - 75
-        )
+        ),
+        rotate: Math.random() * 360
       };
     } else {
       generatedCount++;