Asteroids Have Distrution Paticals

src/components/Asteroid/Asteroid.scss

@@ -11,5 +11,11 @@
         top: 0;
         left: 0;
     }
+
+    .fragment{
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 }
 

src/components/Asteroid/Asteroid.tsx

@@ -4,6 +4,10 @@ import { useState } from 'react';
 
 import './Asteroid.scss';
 import LargeAsteroid2 from './Large-Asteroid-2';
+import FragmentAsteroid1 from './Fragment-Asteroid-1';
+import FragmentAsteroid2 from './Fragment-Asteroid-2';
+import FragmentAsteroid3 from './Fragment-Asteroid-3';
+import FragmentAsteroid4 from './Fragment-Asteroid-4';
 
 type AsteroidProps = {
   homeRef: React.RefObject<HTMLElement>;
@@ -15,6 +19,9 @@ export default function Asteroid({homeRef}: AsteroidProps) {
   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;
@@ -58,6 +65,14 @@ export default function Asteroid({homeRef}: AsteroidProps) {
     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));
   }
@@ -78,15 +93,22 @@ export default function Asteroid({homeRef}: AsteroidProps) {
   }
 
   const onButtonClick = (index : number) => {
-    console.log('button clicked');
     console.log(index);
+    console.log(fragmentEdPts);
 
     // Update the visibility state to hide the clicked asteroid
     setAsteroidVisibility(prevVisibility => {
       const newVisibility = [...prevVisibility];
       newVisibility[index] = false;
       return newVisibility;
     });
+
+    // Update the exploded state to show the fragments
+    setAsteroidExploded(prevExploded => {
+      const newExploded = [...prevExploded];
+      newExploded[index] = true;
+      return newExploded;
+    });
   }
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -105,12 +127,56 @@ export default function Asteroid({homeRef}: AsteroidProps) {
       // Generate animations for each asteroid
       const newAnimations = Array.from({ length: numAsteroids }, () => generateAnimationProps());
       setAsteroidAnimations(newAnimations);
-    }
-  }, [])
+
+      // Generate animations for each fragment
+      const newFragments = Array.from({ length: numAsteroids * 4 }, () => generateFragmentEndPT());
+      setFragmentEndPts(newFragments);
+    }}, [])
 
   return (
     <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}
@@ -123,6 +189,7 @@ export default function Asteroid({homeRef}: AsteroidProps) {
             <LargeAsteroid2 />
           </motion.div>
         )
+
       ))}
     </section>
   );

src/components/Asteroid/Fragment-Asteroid-1.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const FragmentAsteroid1 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={25}
+    height={27}
+    viewBox="0 0 65 67"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="Fragment-Asteroid-1">
+      <g id="Mask group">
+        <mask
+          id="mask0_1643_230"
+          style={{
+            maskType: "alpha",
+          }}
+          maskUnits="userSpaceOnUse"
+          x={1}
+          y={2}
+          width={64}
+          height={65}
+        >
+          <path
+            id="Vector 135"
+            d="M39.1648 56.4816L51.8863 66.7142L61.2893 49.8442L54.0988 44.8662L64.3314 30.7618L55.4816 13.0622L43.5897 19.1465L39.1648 2L24.7838 4.76556L16.7637 22.4652L1 21.3589V36.8461L7.36079 43.2069V55.0988L22.0183 63.3955L39.1648 56.4816Z"
+            fill="#D9D9D9"
+          />
+        </mask>
+        <g mask="url(#mask0_1643_230)">
+          <path
+            id="Vector 138"
+            d="M49.1208 53.716L61.8424 63.9485L71.2453 47.0786L64.0548 42.1006L74.2874 27.9962L65.4376 10.2966L53.5457 16.3809L49.1208 -0.765625L34.7399 1.99994L26.7198 19.6995L10.9561 18.5933V34.0805L17.3168 40.4413V52.3332L31.9743 60.6299L49.1208 53.716Z"
+            fill="#AFAFAF"
+          />
+          <path
+            id="Vector 137"
+            d="M15.9343 71.4152L28.6559 81.6478L38.0588 64.7778L30.8683 59.7998L41.1009 45.6954L32.2511 27.9958L20.3592 34.0801L15.9343 16.9336L1.55337 19.6992L-6.46676 37.3988L-22.2305 36.2925V51.7797L-15.8697 58.1405V70.0324L-1.2122 78.3291L15.9343 71.4152Z"
+            fill="#969696"
+          />
+          <path
+            id="Vector 136"
+            d="M67.9265 85.2433L80.6481 95.4759L90.051 78.6059L82.8605 73.6279L93.0931 59.5236L84.2433 41.824L72.3514 47.9082L67.9265 30.7617L53.5456 33.5273L45.5254 51.2269L29.7617 50.1207V65.6078L36.1225 71.9686V83.8605L50.78 92.1572L67.9265 85.2433Z"
+            fill="#C3C3C3"
+          />
+          <path
+            id="Vector 139"
+            d="M35.8464 20.5294L48.568 30.762L57.9709 13.8921L50.7804 8.91407L61.013 -5.1903L52.1632 -22.8899L40.2713 -16.8057L35.8464 -33.9521L21.4655 -31.1866L13.4453 -13.487L-2.31836 -14.5932V0.893936L4.04243 7.25473V19.1466L18.6999 27.4433L35.8464 20.5294Z"
+            fill="#C3C3C3"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+export default FragmentAsteroid1