edit to mongoose connections

client/package.json

@@ -14,14 +14,16 @@
     "howler": "^2.2.4",
     "lucide-react": "^0.503.0",
     "react": "^19.1.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.30.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@tailwindcss/postcss": "^4.1.4",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@types/react-howler": "^5.2.3",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.21.0",

client/src/App.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 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 GameOver from './components/screens/GameOver';
+// import Victory from './components/screens/Victory';
 import Signup from './components/screens/Signup';
 
 import './styles/codezilla.css';
@@ -14,9 +14,9 @@ const App: React.FC = () => {
       <Routes>
         <Route path="/" element={<Login />} />
         <Route path="/map" element={<GameMap />} />
-        <Route path="/gameover" element={<GameOver />} />
+        {/* <Route path="/gameover" element={<GameOver />} /> */}
         <Route path="/signup" element={<Signup />} />
-        <Route path="/victory" element={<Victory />} />
+        {/* <Route path="/victory" element={<Victory />} /> */}
 
 
       </Routes>

client/src/components/screens/GameMap.tsx

@@ -1,48 +1,86 @@
-// MapScreen with clickable monster nodes
-//IMPORT LIBRARIES
+// src/components/screens/GameMap.tsx
+
+// IMPORT LIBRARIES
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import Minion from './Minions'; 
+import "../../styles/codezilla.css";
 
-// ARRAY OF MINIONS: ID,POSITION ON SCREEN??, IMG SRC, QUESTION ID? (TALK 2 BACKEND TEAM, ON HOW TO USE W/ AI)
-const minions = [
-  { id: 1, name: 'Nullbyte', x: '10%', y: '20%', image: '/clients/minions/nullbyte3.png', questionId: 0 },
-  { id: 2, name: 'Typerrorasaurus', x: '30%', y: '50%', image: '/clients/minions/typerrorasaurus.png', questionId: 1 },
-  { id: 3, name: 'Dbug', x: '30%', y: '50%', image: '/clients/minions/Dbug2a.png', questionId: 1 },
-  { id: 4, name: 'Pie-thon', x: '30%', y: '50%', image: '/clients/minions/pie-thon.png', questionId: 1 },
-  { id: 5, name: 'Codezilla', x: '30%', y: '50%', image: '/clients/minions/codezilla2.png', questionId: 1 },
-
-];
-// CREATE FUNCTIONAL COMPONENT MAPSCREEN, USENAVIGATE()
-// CREATE FUNCTION CALLED GOTOQUESTIONS
-// INSIDE GOTOQUESTIONS: IDENTIFY EACH QUESTION WITH A MINION
-// ADD BACKGROUND IMG SRC "/clients/backgrounds/codezilla_bkgd.png"
-// CREATE A CONTAINER QUIZ-CONTAINER
-// INSIDE CONTAINER A MAP THAT HAS CLICKABLE MINIONS ON NODES CONNECTED WITH LINES
-// POPUP QUESTION SCREEN FOR EACH QUESTION
-// WHEN CLICKED IT TAKES TO GOTOQUESTION ASSCOIATED WITH EACH MINION
-// THEN EITHR AUTO MATICALLY GOES TO THE NEXT MINION QUESTIONS OR TAKES BACK TO MAP HANDLERESTART?
-// EXPORT TO MAPSCREEN
-
-const MapScreen: React.FC = () => {
+const GameMap: React.FC = () => {
   const navigate = useNavigate();
 
-  const goToQuestion = (id: number) => {
-    navigate(`/quiz/${id}`);
+  const minions = [
+    {
+      id: '1',
+      x: 100,
+      y: 150,
+      image: '/minions/nullbyte3a.png',
+      name: 'Nullbyte',
+      questionId: 'q1',
+    },
+    {
+      id: '2',
+      x: 250,
+      y: 200,
+      image: '/minions/dbug2a.png',
+      name: 'Dbug',
+      questionId: 'q2',
+    },
+    {
+      id: '3',
+      x: 400,
+      y: 250,
+      image: '/minions/typerrorus.png',
+      name: 'Typerrorasaurus',
+      questionId: 'q3',
+    },
+    {
+      id: '4',
+      x: 550,
+      y: 300,
+      image: '/minions/monster-left.png',
+      name: 'Pie-Thon',
+      questionId: 'q4',
+    },
+    {
+      id: '5',
+      x: 700,
+      y: 350,
+      image: '/minions/codezilla2.png',
+      name: 'Codezilla',
+      questionId: 'q5',
+    },
+  ];
+
+  const goToQuestion = (questionId: string) => {
+    console.log('Go to question', questionId);
+    navigate(`/question/${questionId}`);
   };
 
   return (
-    <div className="quiz-container">
+    <div className="game-map">
+      {/* Background image */}
+      <img
+        src="/background/codezilla_bkgd.png"
+        alt="rainy cityscape"
+        className="background-image"
+      />
+
+      {/* Minions */}
       {minions.map((minion) => (
-        <div
+        <Minion
           key={minion.id}
-          style={{ position: 'absolute', top: minion.y, left: minion.x, cursor: 'pointer' }}
-          onClick={() => goToQuestion(minion.questionId)}
-        >
-          <img src={minion.image} alt={minion.name} style={{ width: '80px', height: '80px' }} />
-        </div>
+          id={minion.id}
+          x={minion.x}
+          y={minion.y}
+          image={minion.image}
+          name={minion.name}
+          questionId={minion.questionId}
+          goToQuestion={goToQuestion}
+        />
       ))}
     </div>
   );
 };
 
-export default MapScreen;
+export default GameMap;

client/src/components/screens/GameOver.tsx

@@ -1,11 +1,48 @@
-// GameOver you lost screen :(
-// TODO: IMPORT LIBRARIES: REACT, REACT-ROUTER-DOM
-// TODO: FUNCTIONAL GAMEOVER COMPONENT
-// TODO: USENAVIGATE()
-// TODO: ADD IMG SRC "/clients/backgrounds/codezilla_bkgd.png"
-// TODO: NAVIGATE USERS BACK TO THE MAP
-// TODO: CREATE A CONTAINER GAMEOVER-CONTAINER W/ A GAME OVER HEADING
-// TODO: CREATE A GAME OVER MESSAGE
-// TODO: CREATE A RESTRT HANDLE
-// TODO: EXPORT DEFAULT GAMEOVER;
+import './codezilla.css';
 
+const GameOverPage = ({
+  backgroundUrl = '/assets/background.jpg',
+  logoUrl       = '/assets/codezilla-logo.png',
+  avatarUrl     = '/assets/player-avatar.png',
+  codezillaUrl  = '/assets/codezilla.png',
+}) => {
+  return (
+    <div
+      className="game-over-page"
+      style={{ backgroundImage: `url(${backgroundUrl})` }}
+    >
+      <img
+        className="game-over-logo"
+        src={logoUrl}
+        alt="Codezilla Logo"
+      />
+
+      <div className="game-over-container">
+        <h1 className="game-over-title">Game Over!</h1>
+
+        <div className="game-over-images">
+          <img
+            className="player-avatar"
+            src={avatarUrl}
+            alt="Player Avatar"
+          />
+          <img
+            className="codezilla-avatar"
+            src={codezillaUrl}
+            alt="Codezilla"
+          />
+        </div>
+
+        <h2 className="game-over-subtitle">
+          You were defeated by Codezilla!
+        </h2>
+
+        <p className="game-over-cta">
+          Try again to become a code master
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default GameOverPage;

client/src/components/screens/Login.tsx

@@ -1,20 +1,20 @@
 // src/components/Login.tsx
 import React from 'react';
-import '../styles/codezilla.css';
+import "../../styles/codezilla.css";
 import { useNavigate } from 'react-router-dom';
 
 export const Login: React.FC = () => {
   const navigate = useNavigate();
 
   const handleLogin = () => {
-    navigate('/map');
+    navigate('/signup');
   };
 
   return (
     <div className="login-wrapper">
       <img
-        src="/clients/backgrounds/codezilla_bkgd.png"
-        alt="rainy cityscape"
+  src="/background/codezilla_bkgd.png"
+  alt="rainy cityscape"
         className="background-image"
       />
 
@@ -24,7 +24,7 @@ export const Login: React.FC = () => {
           <input type="text" placeholder="username" className="login-input" />
           <input type="password" placeholder="password" className="login-input" />
           <p>Not a player yet?</p>
-          <button className="signup-button" onClick={handleLogin}>Login In!</button>
+          <button className="signup-button" onClick={handleLogin}>Sign Up!</button>
         </div>
       </div>
     </div>

client/src/components/screens/Minions.tsx

@@ -0,0 +1,27 @@
+// src/components/Minion.tsx
+
+import React from 'react';
+
+interface MinionProps {
+  id: string;
+  x: number;
+  y: number;
+  image: string;
+  name: string;
+  questionId: string;
+  goToQuestion: (questionId: string) => void;
+}
+
+const Minion: React.FC<MinionProps> = ({ id, x, y, image, name, questionId, goToQuestion }) => {
+  return (
+    <div
+      id={`minion-${id}`} // ✅ Corrected here
+      style={{ position: 'absolute', top: y, left: x, cursor: 'pointer' }}
+      onClick={() => goToQuestion(questionId)}
+    >
+      <img src={image} alt={name} style={{ width: '80px', height: '80px' }} />
+    </div>
+  );
+};
+
+export default Minion;