Merge pull request #68 from Treevyy/frontend/fixes

Frontend/fixes

Author: OutsideofemiT

client/minions/codezilla3.png

@@ -1,20 +1,21 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, useNavigate } 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';
 
+
 const LogoutButton: React.FC = () => {
   const navigate = useNavigate();
 
   const handleLogout = () => {
     localStorage.clear();        
-    navigate('/signup'); 
+    navigate('/login'); 
   };   
 
   return (
@@ -28,14 +29,14 @@ const App: React.FC = () => {
   return (
     <Router>
       <div className="app-wrapper">
-        {/* Background Image */}
+        {/* Background Image
         <img
           src="/background/codezilla_bkgd.png"
           alt="Dark rainy cityscape"
           className="background-image"
-        />
+        /> */}
 
-        {/* Logo */}
+        
         <img
           src="/codezilla_logo.png"
           alt="Codezilla Logo"
@@ -47,7 +48,8 @@ const App: React.FC = () => {
 
         {/* Routes */}
         <Routes>
-          <Route path="/" element={<Login />} />
+          <Route path="/" element={<IntroPage />} />
+          <Route path="/login" element={<Login />} />
           <Route path="/map" element={<GameMap />} />
           <Route path="/gameover" element={<GameOver />} />
           <Route path="/signup" element={<Signup />} />

client/minions/pie-thon3.png

@@ -0,0 +1,13 @@
+// src/Utils/useBodyClass.ts
+import { useEffect } from 'react';
+
+export const useBodyClass = (className: string) => {
+  useEffect(() => {
+    console.log(`✅applying body class: ${className}`);
+
+    document.body.classList.add(className);
+    return () => {
+      document.body.classList.remove(className);
+    };
+  }, [className]);
+};

client/package-lock.json

@@ -1,11 +1,9 @@
-// src/components/screens/GameMap.tsx
-
-// IMPORT LIBRARIES
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Minion from './Minions';
+import { useBodyClass } from '../../Utils/useBodyClass';
 import { preloadSounds } from '../../utils/preloadSounds';
-import '../../styles/codezilla.css';
+import "../../styles/codezilla.css";
 import drDanImg from '../../../avatars/drdan2.png';
 import flameImg from '../../assets/flame.png';
 
@@ -14,9 +12,11 @@ const username = localStorage.getItem('username') || 'Player';
 
 const GameMap: React.FC = () => {
   const navigate = useNavigate();
+  useBodyClass('login-background');
+
   const [completedPaths, setCompletedPaths] = useState<string[]>([]);
+  const [selectedMinionId, setSelectedMinionId] = useState<string | null>(null);
 
-  // ✅ Preload Dr. Dan audio files on mount
   useEffect(() => {
     preloadSounds([
       '/audio/Dan_correct/Dan-correct-1.wav',
@@ -31,7 +31,6 @@ const GameMap: React.FC = () => {
       '/audio/5inarow.wav'
     ]);
   }, []);
-  const [selectedMinionId, setSelectedMinionId] = useState<string | null>(null);
 
   const minions = [
     {
@@ -105,15 +104,12 @@ const GameMap: React.FC = () => {
 
   const goToQuestion = (questionId: string) => {
     const currentIndex = minions.findIndex(m => m.questionId === questionId);
-
     if (currentIndex < nodes.length - 1) {
       const pathId = `${nodes[currentIndex].id}-${nodes[currentIndex + 1].id}`;
       setCompletedPaths(prev => [...prev, pathId]);
     }
     const minion = minions.find(m => m.questionId === questionId);
-    if (minion) {
-      setSelectedMinionId(minion.id);
-    }  
+    if (minion) setSelectedMinionId(minion.id);
     navigate(`/question/${questionId}`);
   };
 
@@ -123,7 +119,6 @@ const GameMap: React.FC = () => {
         {nodes.map((node, index) => {
           const nextNode = nodes[index + 1];
           if (!nextNode) return null;
-
           return (
             <line
               key={`line-${node.id}-${nextNode.id}`}
@@ -136,10 +131,8 @@ const GameMap: React.FC = () => {
           );
         })}
 
-        {/* GLOWING OUTER CIRCLE + DARKER INNER CIRCLE */}
         {nodes.map((node, index) => {
           const isCompleted = index < completedPaths.length;
-
           return (
             <g key={`node-${node.id}`}>
               <circle
@@ -158,6 +151,7 @@ const GameMap: React.FC = () => {
           );
         })}
       </svg>
+
       <div className="dr-dan-wrapper">
         <div className="glow-circle"></div>
         <img src={drDanImg} alt="Dr. Dan" className="dr-dan-image" />
@@ -167,22 +161,19 @@ const GameMap: React.FC = () => {
         <div className="player-avatar-wrapper">
           <div className="player-glow-circle"></div>
           <img src={selectedAvatar} alt="Your Avatar" className="player-avatar" />
-
           <div className="player-info-wrapper">
             <div className="player-info-box">
               <p className="player-name">{username}</p>
               <p className="player-level">Level 1</p>
             </div>
-
             <div className="learning-info-box">
-              <p className='learning-title'> Studying</p>
+              <p className='learning-title'>Studying</p>
               <p className="learning-text">Coding Bootcamp</p>
             </div>
-            {/*  Lifeline Box */}
             <div className='flames'>
               <div className="lifeline-info-box">
                 <div className="lifeline-flames">
-                  <p className='learning-title'> Life Lines</p>
+                  <p className='learning-title'>Life Lines</p>
                   <img src={flameImg} alt="Flame 1" />
                   <img src={flameImg} alt="Flame 2" />
                   <img src={flameImg} alt="Flame 3" />

client/public/codezilla_intro.mp4

@@ -1,8 +1,9 @@
 import { useNavigate } from 'react-router-dom';
 import "../../styles/codezilla.css";
 
+
 const GameOverPage = ({
-  backgroundUrl = 'client/background/codezilla_bkgd.png',
+  // backgroundUrl = 'client/background/codezilla_bkgd.png',
   avatarUrl     = 'client/avatars/avatar4.png',
   codezillaUrl  = 'client/minions/codezilla2.png',
 }) => {
@@ -21,7 +22,7 @@ const GameOverPage = ({
   return (
     <div
       className="game-over-page"
-      style={{ backgroundImage: `url(${backgroundUrl})` }}
+      // style={{ backgroundImage: `url(${backgroundUrl})` }}
     >
       <div className="game-over-container">
         <h1 className="game-over-title">Game Over!</h1>

client/src/App.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBodyClass } from '../../Utils/useBodyClass';
+import "../../styles/codezilla.css";
+
+const IntroPage: React.FC = () => {
+  const navigate = useNavigate();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [hasClicked, setHasClicked] = useState(false);
+  useBodyClass('intro-background');
+
+  const handleVideoEnd = () => {
+    navigate('/login');
+  };
+
+  const handleUserClick = () => {
+    if (videoRef.current && !hasClicked) {
+      videoRef.current.muted = false;
+      videoRef.current.play();
+      setHasClicked(true);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleUserClick);
+    return () => document.removeEventListener('click', handleUserClick);
+  }, [hasClicked]);
+
+  return (
+    <div className="intro-overlay">
+      <video
+        ref={videoRef}
+        className="intro-video"
+        autoPlay
+        muted
+        playsInline
+        onEnded={handleVideoEnd}
+      >
+        <source src="/codezilla_intro.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default IntroPage;

client/src/Utils/useBodyClass.ts

@@ -1,55 +1,47 @@
-// src/components/Login.tsx
-import React from "react";
+// src/components/screens/Login.tsx
+import React, { useState,  } from "react";
 import "../../styles/codezilla.css";
 import { useNavigate } from "react-router-dom";
 import { useMutation } from "@apollo/client";
 import { LOGIN } from "../../graphql/mutations";
-import { useState } from "react";
+import { useBodyClass } from "../../Utils/useBodyClass";
 
 export const Login: React.FC = () => {
   const navigate = useNavigate();
+  useBodyClass('login-background'); // ✅ YOUR background image class
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  // create a function to handle the mutation
   const [login] = useMutation(LOGIN);
 
-  const handleLogin = async (e:any) => {
-   e.preventDefault();
+  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-   console.log(username)
-   console.log(password)
+    try {
+      const response = await login({
+        variables: { username, password }
+      });
 
-  try {
-    const response = await login({
-      variables: {
-        username: username,
-        password: password,
-      },
-    });
+      const token = response.data.login.token;
+      localStorage.setItem('token', token);
 
-    const token = response.data.login.token;
-
-
-    localStorage.setItem('token', token);
-    console.log(token)
-
-    if(token) {
-      navigate('/map');
+      if (token) {
+        navigate('/map');
+      }
+    } catch (err) {
+      console.error("Login failed", err);
+      alert("Login failed. Please check your username and password.");
     }
-  } catch(err) {
-    console.error("Login failed", err);
-    alert("Login failed. Please check your username and password.");
-  }
-
   };
 
+  const goToSignup = () => navigate('/signup');
+
   return (
     <div className="login-wrapper">
       <div className="login-content">
         <form className="question-box" onSubmit={handleLogin}>
           <h1>Login</h1>
-          
+
           <input 
             type="text" 
             placeholder="username" 
@@ -66,11 +58,10 @@ export const Login: React.FC = () => {
           />
           <button type="submit">Login</button>
 
-          
           <p>Not a player yet?</p>
-          <a href="/signup" className="signup-link">
-            <button type="button" className="signup-button">Sign Up</button>
-          </a>
+          <button type="button" className="signup-button" onClick={goToSignup}>
+            Sign Up!
+          </button>
         </form>
       </div>
     </div>