fix: fix click me line wrap and refactor

ucsddesignco · Apr 6, 2024 · d4d5495 · d4d5495
1 parent b996d5d
commit d4d5495
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 97 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -25,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 = [
@@ -42,7 +43,7 @@ function Rotate() {
 
   return (
     <main ref={scrollContainerRef} className="scroll-cont">
-      <Asteroid homeRef={scroll1Ref} />
+      <Asteroid homeRef={homeRef} />
       <OrbitingPlanets planetRef={planetRef} pausedPlanet={pausedPlanet} />
       <Navbar
         navRef={navRef}
@@ -59,6 +60,7 @@ function Rotate() {
         logoLoaded={logoLoaded}
       />
       <Home
+        homeRef={homeRef}
         scroll1Ref={scroll1Ref}
         fakeLogoRef={fakeLogoRef}
         fakeRegisterRef={fakeRegisterRef}

diff --git a/src/components/Asteroid/Asteroid.tsx b/src/components/Asteroid/Asteroid.tsx
@@ -27,7 +27,6 @@ export type Point = {
 
 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}
@@ -38,9 +37,6 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
   const [asteroidRotations, setAsteroidRotations] = useState<number[]>([]);
 
   const onButtonClick = (index: number) => {
-    console.log(index);
-    console.log(fragmentEdPts);
-
     // Update the visibility state to hide the clicked asteroid
     setAsteroidVisibility(prevVisibility => {
       const newVisibility = [...prevVisibility];
@@ -68,19 +64,22 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
 
   useEffect(() => {
     const homeElement = homeRef.current;
+    const numAsteroids = 6;
+
     if (homeElement) {
+      const style = window.getComputedStyle(homeElement);
       asteroidLogic({
-        homeElement,
-        setContentInfo,
-        contentPaddingLeft: contentInfo.paddingLeft,
-        contentWidth: contentInfo.width,
+        numAsteroids,
+        contentPaddingLeft: parseInt(style.paddingLeft),
+        contentPaddingRight: parseInt(style.paddingRight),
+        contentWidth: parseInt(style.width),
         setNumAsteroids,
         setAsteroidVisibility,
         setAsteroidAnimations,
         setFragmentEndPts
       });
     }
-  }, [homeRef, contentInfo.paddingLeft, contentInfo.width]);
+  }, [homeRef]);
 
   // Initialize asteroid rotation values
   useEffect(() => {
@@ -93,80 +92,40 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
 
   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] ? (
           <>
-            <motion.div
-              className="fragment"
-              initial={
-                index === 0
-                  ? clickMeLocation
-                  : asteroidAnimations[index]?.animate
-              }
-              animate={{
-                x: fragmentEdPts[index * 4 + 0].x,
-                y: fragmentEdPts[index * 4 + 0].y,
-                scale: 0
-              }}
-              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
-              onAnimationComplete={() => {
-                onFragmentAnimationComplete(index);
-              }}
-            >
-              <FragmentAsteroid1 />
-            </motion.div>
-            <motion.div
-              className="fragment"
-              initial={
-                index === 0
-                  ? clickMeLocation
-                  : asteroidAnimations[index]?.animate
-              }
-              animate={{
-                x: fragmentEdPts[index * 4 + 1].x,
-                y: fragmentEdPts[index * 4 + 1].y,
-                scale: 0
-              }}
-              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
-            >
-              <FragmentAsteroid2 />
-            </motion.div>
-
-            <motion.div
-              className="fragment"
-              initial={
-                index === 0
-                  ? clickMeLocation
-                  : asteroidAnimations[index]?.animate
-              }
-              animate={{
-                x: fragmentEdPts[index * 4 + 2].x,
-                y: fragmentEdPts[index * 4 + 2].y,
-                scale: 0
-              }}
-              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
-            >
-              <FragmentAsteroid3 />
-            </motion.div>
-
-            <motion.div
-              className="fragment"
-              initial={
-                index === 0
-                  ? clickMeLocation
-                  : asteroidAnimations[index]?.animate
-              }
-              animate={{
-                x: fragmentEdPts[index * 4 + 3].x,
-                y: fragmentEdPts[index * 4 + 3].y,
-                scale: 0
-              }}
-              transition={{ duration: 10, ease: [0.1, 0.87, 0.44, 1] }}
-            >
-              <FragmentAsteroid4 />
-            </motion.div>
+            {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] && (

diff --git a/src/components/Asteroid/asteroidLogic.ts b/src/components/Asteroid/asteroidLogic.ts
@@ -3,46 +3,55 @@ import { Point } from './Asteroid';
 
 //prettier-ignore
 type AsteroidProps = {
-    homeElement: HTMLElement;
+  numAsteroids: number;
     contentPaddingLeft: number;
+    contentPaddingRight: number;
     contentWidth: number;
-    setContentInfo: React.Dispatch<React.SetStateAction<{paddingLeft: number; width: number;}>>;
     setNumAsteroids: React.Dispatch<React.SetStateAction<number>>;
     setAsteroidVisibility: React.Dispatch<React.SetStateAction<boolean[]>>;
     setAsteroidAnimations: React.Dispatch<React.SetStateAction<{initial: Point; animate: Point; transition: {duration: number; ease: number[]}}[]>>;
     setFragmentEndPts: React.Dispatch<React.SetStateAction<Point[]>>;
 };
 
 export default function asteroidLogic({
-  homeElement,
-  setContentInfo,
+  numAsteroids,
   setNumAsteroids,
   contentPaddingLeft,
+  // contentPaddingRight,
   contentWidth,
   setAsteroidVisibility,
   setAsteroidAnimations,
   setFragmentEndPts
 }: AsteroidProps) {
-  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));
 
   //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;
+    // const startPT = {
+    //   x: -((Math.random() * window.innerWidth) / 4),
+    //   y: Math.random() * window.innerHeight
+    // };
+    // return startPT;
+
+    // Randomly decide whether to place the point offscreen to the left or the bottom
+    const isLeft = Math.random() > 0.5;
+
+    let x, y;
+
+    if (isLeft) {
+      // Place the point offscreen to the left
+      x = -Math.random() * 100 - 10; // Offscreen to the left
+      y = Math.random() * window.innerHeight; // Anywhere from top to bottom
+    } else {
+      // Place the point offscreen at the bottom
+      y = window.innerHeight + Math.random() * 100 + 10; // Offscreen at the bottom
+      x = Math.random() * window.innerWidth; // Anywhere from left to right
+    }
+
+    return { x, y };
   };
 
   //Endpt x: 0 < x < left padding || left padding + contentWidth < x < window.innerWidth

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -5,13 +5,15 @@ import mobilePlanets from '/images/mobile-planets.svg';
 //write the typescript type for this prop
 
 type HomeProps = {
+  homeRef: React.RefObject<HTMLDivElement>;
   scroll1Ref: React.RefObject<HTMLElement>;
   fakeLogoRef: React.RefObject<HTMLImageElement>;
   fakeRegisterRef: React.RefObject<HTMLDivElement>;
   setLogoLoaded: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export default function Home({
+  homeRef,
   scroll1Ref,
   fakeLogoRef,
   fakeRegisterRef,
@@ -20,7 +22,7 @@ export default function Home({
   const mobileDateRef = useRef(null);
 
   return (
-    <div className="scroll-section-one">
+    <div ref={homeRef} className="scroll-section-one">
       <section ref={scroll1Ref} className="one home">
         <div className="logo-container">
           <img