Merge pull request #93 from Treevyy/music/things

added background music and dan speech

Author: OutsideofemiT

client/public/audio/DecafDan.wav

@@ -1,5 +1,11 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
+import React, { useEffect, useRef } from 'react';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useNavigate,
+  useLocation,
+} from 'react-router-dom';
 import IntroPage from './components/screens/IntroPage';
 import { Login } from './components/screens/Login';
 import GameMap from './components/screens/GameMap';
@@ -9,14 +15,41 @@ import Signup from './components/screens/Signup';
 import Questions from './components/screens/Questions';
 import './styles/codezilla.css';
 
+// 🔊 Persistent background music that plays on interaction
+const PersistentBackgroundMusic: React.FC = () => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (!audioRef.current) {
+      const audio = new Audio('/black.sabbath.mp3');
+      audio.loop = true;
+      audio.volume = 0.03;
+      audioRef.current = audio;
+
+      const play = () => {
+        audio.play().catch((err) =>
+          console.warn('Autoplay blocked or error playing:', err)
+        );
+      };
+
+      document.addEventListener('click', play, { once: true });
+    }
+
+    return () => {
+      audioRef.current?.pause();
+    };
+  }, []);
+
+  return null;
+};
 
 const LogoutButton: React.FC = () => {
   const navigate = useNavigate();
 
   const handleLogout = () => {
-    localStorage.clear();        
-    navigate('/login'); 
-  };   
+    localStorage.clear();
+    navigate('/login');
+  };
 
   return (
     <button className="logout-button" onClick={handleLogout}>
@@ -25,40 +58,45 @@ const LogoutButton: React.FC = () => {
   );
 };
 
+const AppContent: React.FC = () => {
+  const location = useLocation();
+  const isGameActive =
+    location.pathname.startsWith('/map') ||
+    location.pathname.startsWith('/question');
+
+  return (
+    <div className="app-wrapper">
+      {/* Only load persistent music during gameplay */}
+      {isGameActive && <PersistentBackgroundMusic />}
+
+      <img
+        src="/codezilla_logo.png"
+        alt="Codezilla Logo"
+        className="logo-background"
+      />
+
+      <LogoutButton />
+
+      <Routes>
+        <Route path="/" element={<IntroPage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/map" element={<GameMap />} />
+        <Route path="/gameover" element={<GameOver />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/victory" element={<Victory />} />
+        <Route path="/question/:id" element={<Questions />} />
+      </Routes>
+    </div>
+  );
+};
+
 const App: React.FC = () => {
   return (
     <Router>
-      <div className="app-wrapper">
-        {/* Background Image
-        <img
-          src="/background/codezilla_bkgd.png"
-          alt="Dark rainy cityscape"
-          className="background-image"
-        /> */}
-
-        
-        <img
-          src="/codezilla_logo.png"
-          alt="Codezilla Logo"
-          className="logo-background"
-        />
-
-        {/* Logout Button */}
-        <LogoutButton />
-
-        {/* Routes */}
-        <Routes>
-          <Route path="/" element={<IntroPage />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/map" element={<GameMap />} />
-          <Route path="/gameover" element={<GameOver />} />
-          <Route path="/signup" element={<Signup />} />
-          <Route path="/victory" element={<Victory />} />
-          <Route path="/question/:id" element={<Questions />} />
-        </Routes>
-      </div>
+      <AppContent />
     </Router>
   );
 };
 
 export default App;
+

client/public/balck.sabbath.mp3 client/public/black.sabbath.mp3client/public/balck.sabbath.mp3 renamed to client/public/black.sabbath.mp3

@@ -1,27 +1,31 @@
-// import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-// const BackgroundMusic = () => {
-//   useEffect(() => {
-//     const audio = new Audio('/80s-loop-5.wav'); // or '/background-music.mp3'
-//     audio.loop = true;
-//     audio.volume = 0.5;
+interface Props {
+  src: string;
+  volume?: number;
+}
 
-//     // Try autoplay inside a user interaction-friendly trigger
-//     const playAudio = () => {
-//       audio.play().catch((err) => {
-//         console.warn('Autoplay blocked by browser:', err);
-//       });
-//     };
+const BackgroundMusic: React.FC<Props> = ({ src, volume = 0.03 }) => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
 
-//     // Listen for first click
-//     document.body.addEventListener('click', playAudio, { once: true });
+  useEffect(() => {
+    if (!audioRef.current) {
+      audioRef.current = new Audio(src);
+      audioRef.current.loop = true;
+      audioRef.current.volume = volume;
+    }
 
-//     return () => {
-//       audio.pause();
-//     };
-//   }, []);
+    const audio = audioRef.current;
+    audio.play().catch((err) => {
+      console.warn('⚠️ Autoplay blocked:', err);
+    });
 
-//   return null;
-// };
+    return () => {
+      // Do not pause or destroy the audio here to preserve continuity
+    };
+  }, [src, volume]);
 
-// export default BackgroundMusic;
+  return null;
+};
+
+export default BackgroundMusic;

client/src/App.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Minion from './Minions';
-import { useBodyClass } from '../../Utils/useBodyClass';
+import { useBodyClass } from '../../utils/useBodyClass';
 import { preloadSounds } from '../../utils/preloadSounds';
+import BackgroundMusic from '../BackgroundMusic';
 import "../../styles/codezilla.css";
 import drDanImg from '../../../avatars/drdan2.png';
 import flameImg from '../../assets/flame.png';
@@ -32,6 +33,12 @@ const GameMap: React.FC = () => {
     ]);
   }, []);
 
+  const handleDanHover = () => {
+    const audio = new Audio('/audio/DecafDan.wav');
+    audio.volume = 0.3;
+    audio.play().catch(err => console.warn('Autoplay blocked:', err));
+  };
+
   const minions = [
     {
       id: '1',
@@ -115,6 +122,8 @@ const GameMap: React.FC = () => {
 
   return (
     <div className="game-map">
+      <BackgroundMusic src="/black.sabbath.mp3" volume={0.03} />
+
       <svg className="map-lines">
         {nodes.map((node, index) => {
           const nextNode = nodes[index + 1];
@@ -154,7 +163,12 @@ const GameMap: React.FC = () => {
 
       <div className="dr-dan-wrapper">
         <div className="glow-circle"></div>
-        <img src={drDanImg} alt="Dr. Dan" className="dr-dan-image" />
+        <img
+          src={drDanImg}
+          alt="Dr. Dan"
+          className="dr-dan-image hover:cursor-pointer"
+          onMouseEnter={handleDanHover}
+        />
       </div>
 
       {selectedAvatar && (

client/src/components/BackgroundMusic.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useBodyClass } from '../../Utils/useBodyClass';
+import { useBodyClass } from '../../utils/useBodyClass';
 import "../../styles/codezilla.css";
 
 const IntroPage: React.FC = () => {