login/signup UI, minions page, gamemap setup

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/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;

client/src/components/screens/Signup.tsx

@@ -2,15 +2,14 @@
 /*CREATE IMPORTS */
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import '../styles/codezilla.css';
+import "../../styles/codezilla.css";
 
 const avatarList = [
-  '/client/avatars/carmen.png',
-  '/client/avatars/jacquilyn.png',
-  '/client/avatars/trevor.png',
-  '/client/avatars/michael.png',
-  '/client/avatars/shawna.png',
-
+  '/avatars/carmen.png',
+  '/avatars/jacquilyn.png',
+  '/avatars/trevor.png',
+  '/avatars/michael.png',
+  '/avatars/shawna.png',
 ];
 
 const SignUp: React.FC = () => {
@@ -28,7 +27,7 @@ const SignUp: React.FC = () => {
   return (
     <div className="login-wrapper">
        <img
-        src="/clients/backgrounds/codezilla_bkgd.png"
+        src="/background/codezilla_bkgd.png"
         alt="Background"
         className="background-image"
       />

client/src/styles/codezilla.css

@@ -1,21 +1,30 @@
 /* BACKGROUND */
-.body {
+/* .body {
     background-image: url('/clients/backgrounds/codezilla_bkgd.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    height: 100vh;
+    height: 100vh; */
 
-  }
-  /* .background-image {
+  /* } */
+  .background-image {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: 0;
-    } */
+    }
 
+    .login-wrapper{
+        height: 100vh;
+        width: 100vw;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow:hidden;
+    }
      /* SIGNUP */
 
      .signup-button {
@@ -27,6 +36,26 @@
       margin-top: 20px;
     }
 
+    .avatar-grid {
+        display:flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1.5rem;
+        margin: 2 rem 0;
+        width: 100%;
+    }
+
+    .avatar-option{
+        width: 150px;
+        height: 150px;
+        object-fit: cover;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        border: 2px solid transparent;
+    }
+
+    .avata
     /* QUIZ CONTAINER */
 
     .quiz-container {
@@ -41,8 +70,9 @@
     .question-box {
       position: absolute;
       top: 50%;
-      left: 50%;
-      width: 90%;
+      left: 50%; 
+      height: 80%;
+      width: 80%;
       max-width: 600px;
       transform: translate(-50%, -50%);
       background: rgba(0, 0, 50, 0.85);