Squashed merge with Asteroids branch

package.json

@@ -13,6 +13,7 @@
     "lint-check": "eslint . && prettier . --check"
   },
   "dependencies": {
+    "framer-motion": "^11.0.24",
     "@gsap/react": "^2.1.0",
     "gsap": "^3.12.5",
     "lint-staged": "^15.2.2",

src/App.tsx

@@ -10,6 +10,7 @@ import Timeline from './pages/Timeline/Timeline';
 import Judges from './pages/Judges/Judges';
 import { useRef, useState } from 'react';
 import LogoAndRegister from './components/LogoAndRegister/LogoAndRegister';
+import Asteroid from './components/Asteroid/Asteroid';
 
 function Rotate() {
   const scrollContainerRef = useRef<HTMLElement>(null);
@@ -24,6 +25,7 @@ function Rotate() {
   const mobileFAQRef = useRef<HTMLDivElement>(null);
   const mobileJudgesRef = useRef<HTMLDivElement>(null);
   const [logoLoaded, setLogoLoaded] = useState(false);
+  const homeRef = useRef<HTMLDivElement>(null);
 
   const scrollRefList = [scroll1Ref, scroll2Ref, scroll3Ref, scroll4Ref];
   const mobileScrollRefList = [
@@ -41,6 +43,7 @@ function Rotate() {
 
   return (
     <main ref={scrollContainerRef} className="scroll-cont">
+      <Asteroid homeRef={homeRef} />
       <OrbitingPlanets planetRef={planetRef} pausedPlanet={pausedPlanet} />
       <Navbar
         navRef={navRef}
@@ -57,6 +60,7 @@ function Rotate() {
         logoLoaded={logoLoaded}
       />
       <Home
+        homeRef={homeRef}
         scroll1Ref={scroll1Ref}
         fakeLogoRef={fakeLogoRef}
         fakeRegisterRef={fakeRegisterRef}

src/components/Asteroid/Asteroid.scss

@@ -0,0 +1,33 @@
+.asteroid-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  align-items: start;
+  pointer-events: none;
+  z-index: 1;
+
+  .asteroid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: auto;
+
+    &:hover {
+      cursor: $cursor-pointer;
+    }
+  }
+
+  .fragment {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .asteroid-signifier {
+    position: absolute;
+    top: -26px;
+    left: -15px;
+    width: 5rem;
+  }
+}

src/components/Asteroid/Asteroid.tsx

@@ -0,0 +1,162 @@
+import { motion } from 'framer-motion';
+import React, { useEffect } from 'react';
+import { useState } from 'react';
+
+import './Asteroid.scss';
+import LargeAsteroid2 from './Large-Asteroid-2';
+import FragmentAsteroid1 from './Fragments/Fragment-Asteroid-1';
+import FragmentAsteroid2 from './Fragments/Fragment-Asteroid-2';
+import FragmentAsteroid3 from './Fragments/Fragment-Asteroid-3';
+import FragmentAsteroid4 from './Fragments/Fragment-Asteroid-4';
+import asteroidLogic from './asteroidLogic';
+
+type AsteroidProps = {
+  homeRef: React.RefObject<HTMLElement>;
+};
+
+type animationProps = {
+  initial: Point;
+  animate: Point;
+  transition: { duration: number; ease: number[] };
+};
+
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export default function Asteroid({ homeRef }: AsteroidProps) {
+  const [numAsteroids, setNumAsteroids] = useState(0);
+  const [asteroidAnimations, setAsteroidAnimations] = useState<
+    animationProps[]
+  >([]); // [ {x: number, y: number}
+  const [asteroidVisibility, setAsteroidVisibility] = useState<boolean[]>([]);
+  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 onButtonClick = (index: number) => {
+    // Update the visibility state to hide the clicked asteroid
+    setAsteroidVisibility(prevVisibility => {
+      const newVisibility = [...prevVisibility];
+      newVisibility[index] = false;
+      return newVisibility;
+    });
+
+    setFragmentVisibility(Array(numAsteroids).fill(true));
+
+    // Update the exploded state to show the fragments
+    setAsteroidExploded(prevExploded => {
+      const newExploded = [...prevExploded];
+      newExploded[index] = true;
+      return newExploded;
+    });
+  };
+
+  const onFragmentAnimationComplete = (index: number) => {
+    setFragmentVisibility(prevVisibility => {
+      const newVisibility = [...prevVisibility];
+      newVisibility[index] = false;
+      return newVisibility;
+    });
+  };
+
+  useEffect(() => {
+    const homeElement = homeRef.current;
+    const numAsteroids = 6;
+
+    if (homeElement) {
+      const style = window.getComputedStyle(homeElement);
+      asteroidLogic({
+        numAsteroids,
+        contentPaddingLeft: parseInt(style.paddingLeft),
+        contentPaddingRight: parseInt(style.paddingRight),
+        contentWidth: parseInt(style.width),
+        setNumAsteroids,
+        setAsteroidVisibility,
+        setAsteroidAnimations,
+        setFragmentEndPts
+      });
+    }
+  }, [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 = [
+    FragmentAsteroid1,
+    FragmentAsteroid2,
+    FragmentAsteroid3,
+    FragmentAsteroid4
+  ];
+
+  return (
+    <section className="asteroid-container">
+      {Array.from({ length: numAsteroids }, (_, index) =>
+        asteroidExploded[index] && fragmentVisibility[index] ? (
+          <>
+            {FragmentAsteroidComponents.map((FragmentComponent, i) => (
+              <motion.div
+                key={i}
+                className="fragment"
+                initial={
+                  index === 0
+                    ? clickMeLocation
+                    : asteroidAnimations[index]?.animate
+                }
+                animate={{
+                  x: fragmentEdPts[index * 4 + i].x,
+                  y: fragmentEdPts[index * 4 + i].y,
+                  scale: 0
+                }}
+                transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
+                onAnimationComplete={() =>
+                  index === i && onFragmentAnimationComplete(index)
+                }
+              >
+                <FragmentComponent />
+              </motion.div>
+            ))}
+          </>
+        ) : (
+          asteroidVisibility[index] && (
+            <motion.div
+              key={index}
+              className="asteroid"
+              onClick={() => onButtonClick(index)}
+              initial={asteroidAnimations[index]?.initial}
+              animate={
+                index === 0
+                  ? clickMeLocation
+                  : asteroidAnimations[index]?.animate
+              }
+              transition={asteroidAnimations[index]?.transition}
+              style={
+                index === 0 ? {} : { rotate: `${asteroidRotations[index]}deg` }
+              }
+            >
+              <LargeAsteroid2 />
+              {index === 0 && (
+                <p
+                  style={{ textWrap: 'nowrap' }}
+                  className="asteroid-signifier"
+                >
+                  Click Me !
+                </p>
+              )}
+            </motion.div>
+          )
+        )
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,56 @@
+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;