diff --git a/frontend/public/images/earth-blue-marble.jpg b/frontend/public/images/earth-blue-marble.jpg new file mode 100644 index 0000000..e673a7c Binary files /dev/null and b/frontend/public/images/earth-blue-marble.jpg differ diff --git a/frontend/public/images/night-sky.png b/frontend/public/images/night-sky.png new file mode 100644 index 0000000..f5d4f2b Binary files /dev/null and b/frontend/public/images/night-sky.png differ diff --git a/frontend/src/app/_homeComponents/FeaturedImage.tsx b/frontend/src/app/_homeComponents/FeaturedImage.tsx index 6d4b838..4a54d6f 100644 --- a/frontend/src/app/_homeComponents/FeaturedImage.tsx +++ b/frontend/src/app/_homeComponents/FeaturedImage.tsx @@ -65,7 +65,7 @@ export default async function featuredImage() { src={STRAPI_URL + featuredImageURL} width={900} height={900} - className="bg-black-900 max-w-screen-xs object-contain sm:max-w-screen-sm md:max-w-screen-md " + className="bg-black-900 max-w-screen-xxs object-contain sm:max-w-screen-sm md:max-w-screen-md " /> {satelliteName && satelliteSlug ? ( diff --git a/frontend/src/app/_homeComponents/GlobeWithStats.tsx b/frontend/src/app/_homeComponents/GlobeWithStats.tsx index d60cdf0..fbbeb2c 100644 --- a/frontend/src/app/_homeComponents/GlobeWithStats.tsx +++ b/frontend/src/app/_homeComponents/GlobeWithStats.tsx @@ -10,13 +10,13 @@ const SatelliteGlobeNoSSR = dynamic(() => import("./SatelliteGlobe"), { export default function GlobeWithStats() { return ( <> -
-
+
+
-
+
diff --git a/frontend/src/app/_homeComponents/SatDropdown.tsx b/frontend/src/app/_homeComponents/SatDropdown.tsx index 2321cdf..0faa12c 100644 --- a/frontend/src/app/_homeComponents/SatDropdown.tsx +++ b/frontend/src/app/_homeComponents/SatDropdown.tsx @@ -96,7 +96,11 @@ export default function SatDropdown() { const value = event.target.value; // Allow only numeric input if (/^\d*$/.test(value)) { - setNoradID(Number(value) as SatelliteNumber); + if (value.length == 0) { + setNoradID(undefined); + } else { + setNoradID(Number(value) as SatelliteNumber); + } } }; diff --git a/frontend/src/app/_homeComponents/SatelliteGlobe.tsx b/frontend/src/app/_homeComponents/SatelliteGlobe.tsx index bcf48c3..7984eea 100644 --- a/frontend/src/app/_homeComponents/SatelliteGlobe.tsx +++ b/frontend/src/app/_homeComponents/SatelliteGlobe.tsx @@ -31,12 +31,8 @@ export default function SatelliteGlobe() { useEffect(() => { if (chart.current && !globeRef.current) { globeRef.current = Globe()(chart.current) - .globeImageUrl( - "//unpkg.com/three-globe/example/img/earth-blue-marble.jpg", - ) - .backgroundImageUrl( - "//unpkg.com/three-globe/example/img/night-sky.png", - ) + .globeImageUrl("/images/earth-blue-marble.jpg") + .backgroundImageUrl("/images/night-sky.png") .objectLat("lat") .objectLng("lng") .objectAltitude("alt") @@ -67,19 +63,35 @@ export default function SatelliteGlobe() { globeRef.current.controls().enableRotate = true; // lock the initial height of the globe - const setInitialGlobeSize = () => { + const setGlobeSize = () => { if (globeRef.current && chart.current) { - const { width, height } = - chart.current.getBoundingClientRect(); - globeRef.current.width(width); - globeRef.current.height(height - 76); + const { width } = chart.current.getBoundingClientRect(); - console.log(width, height); + globeRef.current.width(width); + if (typeof window !== "undefined") { + let windowWidth = window.innerWidth; + let windowHeight = window.innerHeight; + + // If the window width is less than 768, disable controls and set height to window height + if (windowWidth <= 768) { + globeRef.current.controls().enabled = false; + globeRef.current.controls().enableRotate = false; + globeRef.current.height(windowWidth); // Minus navbar height and stats height + // Set touch action to auto to allow for scrolling on mobile + let globeElement = + globeRef.current.renderer().domElement; + globeElement.style.touchAction = "auto"; + } else { + globeRef.current.controls().enabled = true; + globeRef.current.controls().enableRotate = true; + globeRef.current.height(windowHeight - 73); // Minus navbar height + } + } } }; // Initially set the globe size to match the container - setInitialGlobeSize(); + setGlobeSize(); // Set initial positions of satellites let initialPositions: initpostype[] = Object.entries(satNumToEntry) @@ -109,27 +121,17 @@ export default function SatelliteGlobe() { globeRef.current.objectsData(initialPositions); } - // Function to update the globe size based on the current size of the chart - const setGlobeSize = () => { - if (globeRef.current && chart.current) { - const { width, height } = - chart.current.getBoundingClientRect(); - globeRef.current.width(width); - globeRef.current.height(width <= 640 ? width : height - 76); - } - }; - // Add resize event listener if the window is defined (i.e., in client-side environment) if (typeof window !== "undefined") { window.addEventListener("resize", setGlobeSize); } // Cleanup function to remove the resize event listener - return () => { - if (typeof window !== "undefined") { - window.removeEventListener("resize", setGlobeSize); - } - }; + // return () => { + // if (typeof window !== "undefined") { + // window.removeEventListener("resize", setGlobeSize); + // } + // }; } }, [satNumToEntry, setSelectedSatellite]); @@ -197,5 +199,5 @@ export default function SatelliteGlobe() { return () => clearInterval(intervalId); }, [satNumToEntry, selectedSatellite]); - return
; + return
; } diff --git a/frontend/src/app/_homeComponents/ScrollIndicator.tsx b/frontend/src/app/_homeComponents/ScrollIndicator.tsx index 438580e..d872b5b 100644 --- a/frontend/src/app/_homeComponents/ScrollIndicator.tsx +++ b/frontend/src/app/_homeComponents/ScrollIndicator.tsx @@ -1,7 +1,8 @@ "use client"; import { motion, useScroll } from "framer-motion"; -import React, { useRef } from "react"; +import React, { useEffect, useRef } from "react"; import type { SVGProps } from "react"; +import { inView } from "framer-motion"; export function UiwDown(props: SVGProps) { return ( @@ -27,12 +28,26 @@ export default function ScrollIndicator() { offset: ["start start", "end end"], }); + useEffect(() => { + if (ref.current) { + inView(ref.current, () => { + return () => { + ref.current?.style.setProperty( + "display", + "none", + "important", + ); + }; + }); + } + }, []); + return ( {/* Globe */} -
- -
-
- {/* Mission Statement Section */} - -
+ + + + {/* Mission Statement Section */} + {/* Projects Section */} diff --git a/frontend/src/components/ui/hero.tsx b/frontend/src/components/ui/hero.tsx index d5d2638..d606918 100644 --- a/frontend/src/components/ui/hero.tsx +++ b/frontend/src/components/ui/hero.tsx @@ -12,7 +12,7 @@ const Hero = React.forwardRef(

{title}