Asteroids are Deleted On Click

src/components/Asteroid/Asteroid.scss

@@ -1,12 +1,12 @@
 .asteroid-container {
     position: absolute;
-    pointer-events: none;
     height: 100%;
     width: 100%;
     display: grid;
     align-items: start;
 
     .asteroid{
+        z-index: 100;
         position: absolute;
         top: 0;
         left: 0;

src/components/Asteroid/Asteroid.tsx

@@ -13,6 +13,14 @@ 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 [asteroidVisibility, setAsteroidVisibility] = useState<boolean[]>([]);
+
+  type animationProps = {
+    initial: Point;
+    animate: Point;
+    transition: {duration: number, ease: number[]}
+  }
 
   type Point = {
         x: number;
@@ -41,7 +49,7 @@ export default function Asteroid({homeRef}: AsteroidProps) {
     }
 
     if(endX > contentMidPoint) {
-        endX = Math.max(contentWidth - (Math.random() * 500), endX)
+        endX = Math.max(contentWidth - 500 - (Math.random() * 100), endX)
     }
 
     const endPT = {x: endX, 
@@ -69,29 +77,53 @@ export default function Asteroid({homeRef}: AsteroidProps) {
     }
   }
 
+  const onButtonClick = (index : number) => {
+    console.log('button clicked');
+    console.log(index);
+
+    // Update the visibility state to hide the clicked asteroid
+    setAsteroidVisibility(prevVisibility => {
+      const newVisibility = [...prevVisibility];
+      newVisibility[index] = false;
+      return newVisibility;
+    });
+  }
+
   // 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});
+
+      const numAsteroids = 5;
+      setNumAsteroids(numAsteroids);
+
+      setAsteroidVisibility(Array(numAsteroids).fill(true));
 
-      setNumAsteroids(5);
+      // Generate animations for each asteroid
+      const newAnimations = Array.from({ length: numAsteroids }, () => generateAnimationProps());
+      setAsteroidAnimations(newAnimations);
     }
   }, [])
 
   return (
-    <div className='asteroid-container'>
+    <section className='asteroid-container'>
       {Array.from({ length: numAsteroids }, (_, index) => (
-      <motion.div 
-        key={index}
-        className='asteroid'
-        {...generateAnimationProps()}
-      >
-        <LargeAsteroid2 />
-      </motion.div>
-    ))}
-    </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>
   );
 }

src/styles/App.scss

@@ -1,6 +1,7 @@
 .main-content {
   height: 100dvh;
   overflow-y: scroll;
+  overflow-x: hidden;
   scroll-snap-type: y mandatory;
   margin-inline: auto;
   position: relative;