Added music and reactive sound effects when hovering and selecting to toolbar and planetinfo components :D

project_zeta/src/app/page.tsx

@@ -11,6 +11,7 @@ import { Planet } from '@/types/planet';
 import styles from "./page.module.css";
 import ParticlesStars from '@/components/ParticlesStars';
 import PlanetVisualization from '@/components/PlanetVisualization';
+import BackgroundMusic from "@/components/BackgroundMusic";
 
 export default function Home() {
   const [selectedPlanet, setSelectedPlanet] = useState<Planet | null>(null);
@@ -19,33 +20,31 @@ export default function Home() {
     setSelectedPlanet(planet);
   };
 
-
-<div className={styles.planetVisualization}>
-  <PlanetVisualization planet={selectedPlanet} />
-</div>
-
-
   return (
+
     <div className={styles.page}>
+
+      {/* Background music */}
+      <BackgroundMusic />
+
+      {/* Toolbar */}
       <Toolbar 
         onPlanetSelect={handlePlanetSelect}
         selectedPlanetId={selectedPlanet?._id}
       />
+
+      {/* Particle Background */}
       <ParticlesStars/>
+
+    {/* Planet Visualization */}
       <main className={styles.main}>
-          {/* Placeholder for planet visualization */}
-          {/* <div className={styles.planetPlaceholder}> 
-            {selectedPlanet ? (
-              <div className={styles.planetName}>{selectedPlanet.name}</div>
-            ) : (
-              <div className={styles.placeholderText}>Select a planet to explore</div>
-            )} */ }
-          <div className={styles.planetVisualization}>
-            <PlanetVisualization planet={selectedPlanet} />
-          </div>
+        <div className={styles.planetVisualization}>
+          <PlanetVisualization planet={selectedPlanet} />
+        </div>
       </main>
 
+      {/* Planet Info */}
       <PlanetInfo planet={selectedPlanet} />
     </div>
   );
-}
+}

project_zeta/src/components/BackgroundMusic.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useRef, useState } from "react";
+
+export default function BackgroundMusic() {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    // autoplay when the component mounts
+    if (audioRef.current) {
+      audioRef.current.loop = true; // loop the music
+      audioRef.current.volume = 0.3; // adjust volume
+      audioRef.current.play().catch(() => {
+        // autoplay might fail on mobile browsers, wait for user interaction
+        console.log("Autoplay prevented");
+      });
+      setIsPlaying(true);
+    }
+  }, []);
+
+  const togglePlay = () => {
+    if (!audioRef.current) return;
+
+    if (isPlaying) {
+      audioRef.current.pause();
+    } else {
+      audioRef.current.play();
+    }
+
+    setIsPlaying(!isPlaying);
+  };
+
+  return (
+    <div style={{ position: "fixed", bottom: "1rem", right: "1rem", zIndex: 1000 }}>
+      <audio ref={audioRef} src="/music/SpaceWalk.mp4" />
+      <button onClick={togglePlay} style={{ padding: "0.5rem 1rem", borderRadius: "0.5rem" }}>
+        {isPlaying ? "Pause Music" : "Play Music"}
+      </button>
+    </div>
+  );
+}

project_zeta/src/components/PlanetInfo.tsx

@@ -128,7 +128,17 @@ const displayedValues = useEarthAdjusted
         <div className={styles.footerButtonContainer}>
           <button
             className={styles.toggleButton}
-            onClick={() => setUseEarthAdjusted(!useEarthAdjusted)}
+            onClick={() => {
+
+              setUseEarthAdjusted(!useEarthAdjusted)
+
+              // Play click sound
+              const clickAudio = new Audio('/audio/whimsy_click.mp3');
+              clickAudio.volume = 0.3;
+              clickAudio.play().catch(() => console.log('Audio play prevented'));
+
+              }
+            }
           >
             {useEarthAdjusted ? 'Show Original Values' : 'Show Earth-Adjusted Values'}
           </button>

project_zeta/src/components/Toolbar.tsx

@@ -44,9 +44,18 @@ export default function Toolbar({ onPlanetSelect, selectedPlanetId }: ToolbarPro
   );
 
   const handlePlanetClick = (planet: Planet) => {
+
+    // Select the planet
     onPlanetSelect(planet);
+
+    // Play click sound
+    const clickAudio = new Audio('/audio/whimsy_click.mp3');
+    clickAudio.volume = 0.5;
+    clickAudio.play().catch(() => console.log('Audio play prevented'));
+
   };
 
+
   return (
     <div className={styles.toolbar}>
       <div className={styles.searchContainer}>
@@ -73,6 +82,12 @@ export default function Toolbar({ onPlanetSelect, selectedPlanetId }: ToolbarPro
                 selectedPlanetId === planet._id ? styles.selected : ''
               }`}
               onClick={() => handlePlanetClick(planet)}
+              onMouseEnter={() => {
+                // Play hover sound
+                const hoverAudio = new Audio('/audio/whimsy_hover.mp3'); // file in /public/audio/
+                hoverAudio.volume = 0.25;
+                hoverAudio.play().catch(() => console.log('Hover audio blocked'));
+              }}
             >
               {planet.name}
             </div>

project_zeta/src/components/planetInfo.module.css

@@ -2,7 +2,7 @@
   position: absolute;
   right: 20px;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-55%);
 
   width: 350px;
   max-height: 80vh;        /* constrain to viewport */

project_zeta/tsconfig.json

@@ -40,4 +40,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}