Merge pull request #95 from Treevyy/GO-Vic-Connections

Go vic connections

Author: hazyplebian

client/src/components/BackgroundMusic.tsx

@@ -9,23 +9,31 @@ const BackgroundMusic: React.FC<Props> = ({ src, volume = 0.03 }) => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
   useEffect(() => {
+    // Create audio instance if it doesn't exist
     if (!audioRef.current) {
       audioRef.current = new Audio(src);
       audioRef.current.loop = true;
       audioRef.current.volume = volume;
     }
 
     const audio = audioRef.current;
+
+    // Play the audio
     audio.play().catch((err) => {
       console.warn('⚠️ Autoplay blocked:', err);
     });
 
+    // Stop the audio when component unmounts (e.g., on Play Again)
     return () => {
-      // Do not pause or destroy the audio here to preserve continuity
+      if (audio) {
+        audio.pause();
+        audio.currentTime = 0;
+        audioRef.current = null;
+      }
     };
   }, [src, volume]);
 
   return null;
 };
 
-export default BackgroundMusic;
+export default BackgroundMusic;

client/src/components/DanismEvent.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"; 
 import SoundPlayer from "@/components/SoundPlayer"; 
-import { preloadSounds } from "../Utils/preloadSounds"; 
-import { getRandomDanismAndSound } from "../Utils/handleAnswer";
+import { preloadSounds } from "../utils/preloadSounds"; 
+import { getRandomDanismAndSound } from "../utils/handleAnswer";
 
 
 const DanismEvent = () => {

client/src/components/screens/GameMap.tsx

@@ -122,6 +122,7 @@ const GameMap: React.FC = () => {
     navigate(`/question/${questionId}`);
   };
 
+  console.log("selectedAvatar:", selectedAvatar);
   return (
     <div className="game-map">
       <BackgroundMusic src="/black.sabbath.mp3" volume={0.03} />

client/src/components/screens/GameOver.tsx

@@ -3,19 +3,18 @@ import "../../styles/codezilla.css";
 
 
 const GameOverPage = ({
-  // backgroundUrl = 'client/background/codezilla_bkgd.png',
-  avatarUrl     = 'client/avatars/avatar4.png',
-  codezillaUrl  = 'client/minions/codezilla2.png',
+  avatarUrl     = '/avatars/michael.png',
+  codezillaUrl  = '/minions/codezilla2.png',
 }) => {
   const navigate = useNavigate();
 
   const handlePlayAgain = () => {
-    // navigate to your game-start route
-    navigate('/game');
+    // back to the question map
+    navigate('/map');
   };
 
   const handleMainMenu = () => {
-    // navigate back to your main menu/home route
+    // back to your overall main menu/home
     navigate('/');
   };
 
@@ -68,4 +67,4 @@ const GameOverPage = ({
   );
 };
 
-export default GameOverPage;
+export default GameOverPage;

client/src/components/screens/Login.tsx

@@ -4,7 +4,7 @@ import "../../styles/codezilla.css";
 import { useNavigate } from "react-router-dom";
 import { useMutation } from "@apollo/client";
 import { LOGIN } from "../../graphql/mutations";
-import { useBodyClass } from "../../Utils/useBodyClass";
+import { useBodyClass } from "../../utils/useBodyClass";
 
 export const Login: React.FC = () => {
   const navigate = useNavigate();

client/src/components/screens/Questions.tsx

@@ -4,13 +4,9 @@ import AnswerResultModal from '../AnswerResultModal';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-
 import { preloadSounds } from '../../utils/preloadSounds';
-
 import BackgroundMusic from '../BackgroundMusic';
 
-
-
 interface Question {
   snippet?: string;
   question: string;
@@ -19,7 +15,6 @@ interface Question {
 }
 
 const Questions: React.FC = () => {
-  const [updateStats] = useMutation(UPDATE_STATS);
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
 
@@ -30,8 +25,6 @@ const Questions: React.FC = () => {
   const [audioUrl, setAudioUrl] = useState('');
   const [isReady, setIsReady] = useState(false);
 
-  const [score, setScore] = useState(0);
-
   useEffect(() => {
     preloadSounds([
       '/audio/Dan_correct/Dan-correct-1.wav',
@@ -80,7 +73,7 @@ const Questions: React.FC = () => {
         if (data.isFallback && data.question.correctIndex !== undefined) {
           const fallback = data.question;
           const labeledChoices = fallback.choices.map((choice: string, index: number) => {
-            const label = String.fromCharCode(65 + index); // "A", "B", "C", ...
+            const label = String.fromCharCode(65 + index);
             return `${label}) ${choice}`;
           });
           const correctLetter = String.fromCharCode(65 + fallback.correctIndex);
@@ -136,16 +129,26 @@ const Questions: React.FC = () => {
     const correctChoice = question.choices[correctIndex]?.slice(3).trim();
     const isCorrect = selectedAnswer === correctChoice;
 
-
     setUserWasCorrect(isCorrect);
     setAudioUrl(getRandomAudio(isCorrect));
     setShowResult(true);
+
+    const questionNumber = Number(id?.replace('q', ''));
+
+    setTimeout(() => {
+      if (questionNumber === 5) {
+        if (isCorrect) {
+          navigate('/victory');
+        } else {
+          navigate('/gameover');
+        }
+      }
+    }, 6000);
   };
 
   const handleBack = () => navigate('/map');
 
   return (
-
     <div
       className="min-h-screen bg-cover bg-center bg-no-repeat"
       style={{ backgroundImage: 'url("/background/codezilla_bkgd.png")' }}
@@ -189,7 +192,6 @@ const Questions: React.FC = () => {
                       </pre>
                     );
                   },
-
                 }}
               >
                 {question.question}
@@ -198,7 +200,7 @@ const Questions: React.FC = () => {
 
             <div className="text-left flex flex-col items-start gap-2 text-white">
               {question.choices.map((choice, index) => {
-                const value = choice.slice(3).trim(); // remove "A) " etc.
+                const value = choice.slice(3).trim();
                 return (
                   <label key={index} className="flex items-center gap-2 cursor-pointer">
                     <input
@@ -248,4 +250,4 @@ const Questions: React.FC = () => {
   );
 };
 
-export default Questions;
+export default Questions;

client/src/components/screens/Signup.tsx

@@ -23,16 +23,6 @@ const avatarList = [
   "/avatars/shawna.png",
 ];
 
-// Utility hook to set a class on the body element
-const useBodyClass = (className: string) => {
-  React.useEffect(() => {
-    document.body.classList.add(className);
-    return () => {
-      document.body.classList.remove(className);
-    };
-  }, [className]);
-};
-
 const SignUp: React.FC = () => {
   useBodyClass('signup-background');
   const navigate = useNavigate();
@@ -128,44 +118,12 @@ const SignUp: React.FC = () => {
             ))}
           </div>
         </div>
-
-        <button className="signup-button" type="submit">Enter the Game</button>
-        <p>Select Your Avatar</p>
-        <div className="avatar-grid">
-          <div className="avatar-row">
-            {avatarList.slice(0, 3).map((avatar, index) => (
-              <img
-                key={index}
-                src={avatar}
-                alt={`Avatar ${index}`}
-                className={`avatar-option ${
-                  selectedAvatar === avatar ? "selected" : ""
-                }`}
-                onClick={() => setSelectedAvatar(avatar)}
-              />
-            ))}
-          </div>
-          <div className="avatar-row">
-            {avatarList.slice(3).map((avatar, index) => (
-              <img
-                key={index + 3}
-                src={avatar}
-                alt={`Avatar ${index + 3}`}
-                className={`avatar-option ${
-                  selectedAvatar === avatar ? "selected" : ""
-                }`}
-                onClick={() => setSelectedAvatar(avatar)}
-              />
-            ))}
-          </div>
-        </div>
-
-        <button className="signup-button" type="submit">
-          Enter the Game
-        </button>
+        <button type="submit" className="login-button">Sign Up</button>
       </form>
     </div>
   );
 };
 
-export default SignUp;
+
+
+export default SignUp;

client/src/components/screens/Victory.tsx

@@ -1,19 +1,19 @@
+// src/pages/VictoryPage.tsx
 import { useNavigate } from 'react-router-dom';
 import "../../styles/codezilla.css";
 
 export default function VictoryPage({
-  // backgroundUrl   = 'client/background/codezilla_bkgd.png',
-  avatarUrl       = 'client/avatars/avatar4.png',
-  confettiUrl     = 'client/background/confetti_image.jpg',
+  avatarUrl     = '/avatars/michael.png',
+  confettiUrl   = '/background/confetti_image.jpg',
 }) {
   const navigate = useNavigate();
 
   const handlePlayAgain = () => {
-    navigate('/game');
+    navigate('/map');      // ← back to your question map
   };
 
   const handleMainMenu = () => {
-    navigate('/');
+    navigate('/');         // ← back to your main menu/home
   };
 
   return (

client/src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "@/Utils/utils";
+import { cn } from "@/utils/utils";
 
 // Root dialog elements
 const Dialog = DialogPrimitive.Root;

client/src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
 import { ApolloProvider } from '@apollo/client';
-import client from './Utils/apolloClient'; // or wherever your client file is
+import client from './utils/apolloClient'; // or wherever your client file is
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>