Merge pull request #97 from Treevyy/fallbacksecurity

Fallbacksecurity

Author: OutsideofemiT

client/src/App.tsx

@@ -1,47 +1,23 @@
-import React, { useEffect, useRef } from 'react';
+import React 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';
 import GameOver from './components/screens/GameOver';
 import Victory from './components/screens/Victory';
 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 });
-    }
+import LeaderBoard from './components/LeaderBoard';
 
-    return () => {
-      audioRef.current?.pause();
-    };
-  }, []);
-
-  return null;
-};
+import './styles/codezilla.css';
+import BackgroundMusicProvider from './components/BackgroundMusicProvider';
 
 const LogoutButton: React.FC = () => {
   const navigate = useNavigate();
@@ -60,14 +36,17 @@ 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 />}
+      {isGameActive && (
+        <BackgroundMusicProvider src="/black.sabbath.mp3" volume={0.03} />
+      )}
 
       <img
         src="/codezilla_logo.png"
@@ -84,6 +63,8 @@ const AppContent: React.FC = () => {
         <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>
@@ -99,4 +80,3 @@ const App: React.FC = () => {
 };
 
 export default App;
-

client/src/components/BackgroundMusic.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+
+interface Props {
+  src: string;
+  volume?: number;
+}
+
+const BackgroundMusicProvider: React.FC<Props> = ({ src, volume = 0.03 }) => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (!audioRef.current) {
+      const audio = new Audio(src);
+      audio.loop = true;
+      audio.volume = volume;
+      audioRef.current = audio;
+
+      // 🔒 Play only after a click event
+      const handleUserInteraction = () => {
+        audio.play().catch((err) =>
+          console.warn('Autoplay blocked or error playing:', err)
+        );
+        document.removeEventListener('click', handleUserInteraction);
+      };
+
+      document.addEventListener('click', handleUserInteraction, { once: true });
+    }
+
+    return () => {
+      audioRef.current?.pause();
+    };
+  }, [src, volume]);
+
+  return null;
+};
+
+export default BackgroundMusicProvider;

client/src/components/BackgroundMusicProvider.tsx

@@ -2,7 +2,7 @@
 // import { useQuery } from '@apollo/client';
 // import { GET_USERS } from '../graphql/queries'; // Adjust the import path as necessary
 
-// function LeaderBoard() {
+function LeaderBoard() {
 
 //     interface IUser {
 //         _id: string;
@@ -15,7 +15,6 @@
 //    /* const [leaderboardData, setLeaderboardData] = useState([
 //         { _id: 'kjhd63r9bhsef', username: 'Player1', correctAnswers: 100 },
 //         { username: 'Player2', score: 90 },
-//         { username: 'Player3', score: 80 },
 //         { username: 'Player4', score: 70 },
 //         { username: 'Player5', score: 60 },
 //     ]);
@@ -53,6 +52,6 @@
 //     </div>
 
 //   )
-// }
+}
 
-// export default LeaderBoard
+ export default LeaderBoard

client/src/components/LeaderBoard.tsx

@@ -4,7 +4,7 @@ import Minion from './Minions';
 
 import { useBodyClass } from '../../utils/useBodyClass';
 import { preloadSounds } from '../../utils/preloadSounds';
-import BackgroundMusic from '../BackgroundMusic';
+import BackgroundMusic from '../BackgroundMusicProvider';
 
 import "../../styles/codezilla.css";
 import drDanImg from '../../../avatars/drdan2.png';
@@ -25,13 +25,13 @@ const GameMap: React.FC = () => {
       '/audio/Dan_correct/Dan-correct-1.wav',
       '/audio/Dan_correct/Dan-correct-2.wav',
       '/audio/Dan_correct/Dan-correct-3.wav',
-      '/audio/Dan_correct/correctStar.wav',
+      '/audio/Dan_correct/Dan-correct-4.wav',
       '/audio/Dan_incorrect/Dan-incorrect-1.wav',
       '/audio/Dan_incorrect/Dan-incorrect-2.wav',
       '/audio/Dan_incorrect/Dan-incorrect-3.wav',
       '/audio/Dan_incorrect/Dan-incorrect-4.wav',
-      '/audio/Dan_incorrect/firstincorrect.wav',
-      '/audio/5inarow.wav'
+      '/audio/Dan_incorrect/Dan-incorrect-5.wav',
+      //'/audio/5inarow.wav'
     ]);
   }, []);