Merge pull request #114 from Treevyy/feature/sound-toggle

Feature/sound toggle

Author: OutsideofemiT

client/public/game_over.mp3

@@ -20,7 +20,7 @@ import LeaderBoard from './components/LeaderBoard';
 
 import './styles/codezilla.css';
 import BackgroundMusicProvider from './components/BackgroundMusicProvider';
-
+import SoundToggle from './components/SoundToggle';
 
 const LogoutButton: React.FC = () => {
   const navigate = useNavigate();
@@ -43,11 +43,12 @@ const AppContent: React.FC = () => {
   const isGameActive =
     location.pathname.startsWith('/map') ||
     location.pathname.startsWith('/question');
+  
+
 
   return (
     <div className="app-wrapper">
       {/* Only load persistent music during gameplay */}
-
       {isGameActive && (
         <BackgroundMusicProvider src="/black.sabbath.mp3" volume={0.03} />
       )}
@@ -60,22 +61,25 @@ const AppContent: React.FC = () => {
 
       <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="/leaderboard" element={<LeaderBoard />} />
-          <Route path="/question/:id" element={<Questions />} />
-        </Routes>
-      </div>
-
+      {/* ✅ GLOBAL SoundToggle button */}
+      <SoundToggle />
+
+      {/* 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="/leaderboard" element={<LeaderBoard />} />
+        <Route path="/question/:id" element={<Questions />} />
+      </Routes>
+    </div>
   );
 };
 
+
 const App: React.FC = () => {
   return (
     <Router>
@@ -85,4 +89,3 @@ const App: React.FC = () => {
 };
 
 export default App;
-// commmits

client/public/icons/spkr-off.png

@@ -1,5 +1,6 @@
-// src/components/BackgroundMusic.tsx
 import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useSound } from './SoundContext';
 
 interface Props {
   src: string;
@@ -10,22 +11,44 @@ let globalAudio: HTMLAudioElement | null = null;
 
 const BackgroundMusic: React.FC<Props> = ({ src, volume = 0.03 }) => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const { pathname } = useLocation();
+  const { isSoundOn } = useSound();
 
   useEffect(() => {
+    // Always stop music on login screen
+    if (pathname === '/login') {
+      if (globalAudio) {
+        globalAudio.pause();
+        globalAudio.currentTime = 0;
+        globalAudio = null;
+      }
+      return;
+    }
+
     if (!globalAudio) {
       globalAudio = new Audio(src);
       globalAudio.loop = true;
       globalAudio.volume = volume;
-      globalAudio.play().catch((err) => {
-        console.warn('🎵 Autoplay blocked or failed:', err);
-      });
+
+      const handleUserInteraction = () => {
+        if (isSoundOn) {
+          globalAudio?.play().catch((err) =>
+            console.warn('🎵 Autoplay blocked:', err)
+          );
+        }
+        document.removeEventListener('click', handleUserInteraction);
+      };
+
+      document.addEventListener('click', handleUserInteraction);
     }
+
     audioRef.current = globalAudio;
 
-    return () => {
-      // DO NOT stop or recreate the audio on unmount
-    };
-  }, [src, volume]);
+    // Sync mute state with toggle
+    if (globalAudio) {
+      globalAudio.muted = !isSoundOn;
+    }
+  }, [pathname, src, volume, isSoundOn]);
 
   return null;
 };

client/public/icons/spkr-on.png

@@ -1,5 +1,4 @@
 import "../styles/leaderboard.css";
-import "../styles/codezilla.css"
 import { useBodyClass } from '../utils/useBodyClass';
 import { useQuery } from "@apollo/client";
 import { GET_USERS } from "@/graphql/queries";

client/public/totalwin1.mp3

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface SoundContextType {
+  isSoundOn: boolean;
+  toggleSound: () => void;
+  stopMusic: () => void;
+}
+
+const SoundContext = createContext<SoundContextType | undefined>(undefined);
+
+export const SoundProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isSoundOn, setIsSoundOn] = useState(true);
+
+  const toggleSound = () => {
+    setIsSoundOn((prev) => !prev);
+  };
+
+  const stopMusic = () => {
+    if ((globalThis as any).globalAudio) {
+      const audio = (globalThis as any).globalAudio as HTMLAudioElement;
+      audio.pause();
+      audio.currentTime = 0;
+      (globalThis as any).globalAudio = null;
+    }
+    setIsSoundOn(false);
+  };
+
+  return (
+    <SoundContext.Provider value={{ isSoundOn, toggleSound, stopMusic }}>
+      {children}
+    </SoundContext.Provider>
+  );
+};
+
+export const useSound = () => {
+  const context = useContext(SoundContext);
+  if (!context) throw new Error('useSound must be used within SoundProvider');
+  return context;
+};

client/src/App.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useSound } from '../components/SoundContext';
+import { useLocation } from 'react-router-dom';
+
+
+const SoundToggle: React.FC = () => {
+  const { isSoundOn, toggleSound } = useSound();
+  const location = useLocation();
+const isGamePage = location.pathname.startsWith('/map') || location.pathname.startsWith('/question');
+
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '1rem',
+        left: '1rem',
+        zIndex: 9999,
+      }}
+    >
+      <button
+  onClick={toggleSound}
+  className={`p-2 bg-transparent rounded-full transition ${isGamePage ? 'hover:opacity-80' : 'opacity-40 cursor-not-allowed'}`}
+  aria-label={isSoundOn ? 'Mute sound' : 'Unmute sound'}
+  disabled={!isGamePage}
+>
+  <img
+    src={isSoundOn && isGamePage ? '/icons/spkr-on.png' : '/icons/spkr-off.png'}
+    alt="Sound Toggle"
+    style={{
+      width: '24px',
+      height: '24px',
+      objectFit: 'contain',
+    }}
+  />"
+
+</button>
+
+    </div>
+  );
+};
+
+export default SoundToggle;

client/src/components/BackgroundMusicProvider.tsx

@@ -10,6 +10,8 @@ import "../../styles/codezilla.css";
 import drDanImg from '../../../avatars/drdan2.png';
 import flameImg from '../../assets/flame.png';
 
+
+
 const selectedAvatar = localStorage.getItem('selectedAvatar');
 const username = localStorage.getItem('username') || 'Player';
 
@@ -21,8 +23,7 @@ const GameMap: React.FC = () => {
   const [selectedMinionId, setSelectedMinionId] = useState<string | null>(null);
 
   useEffect(() => {
-    preloadSounds([
-      '/audio/Dan_correct/Dan-correct-1.wav']);
+    preloadSounds(['/audio/Dan_correct/Dan-correct-1.wav']);
   }, []);
 
   const handleDanHover = () => {
@@ -112,7 +113,6 @@ const GameMap: React.FC = () => {
     navigate(`/question/${questionId}`);
   };
 
-  console.log("selectedAvatar:", selectedAvatar);
   return (
     <div className="game-map">
       <BackgroundMusic src="/black.sabbath.mp3" volume={0.03} />