Frontend/map

client/src/App.tsx

@@ -2,9 +2,10 @@ 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 Questions from './components/screens/Questions';
 
 import './styles/codezilla.css';
 
@@ -14,9 +15,11 @@ 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 />} />
+        <Route path="/question/:id" element={<Questions />} />
+
 
 
       </Routes>

client/src/components/screens/GameMap.tsx

@@ -1,78 +1,134 @@
-// src/components/screens/GameMap.tsx
-
-// IMPORT LIBRARIES
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Minion from './Minions'; 
+import Minion from './Minions';
 import "../../styles/codezilla.css";
 
 const GameMap: React.FC = () => {
   const navigate = useNavigate();
+  const [completedPaths, setCompletedPaths] = useState<string[]>([]);
 
   const minions = [
     {
       id: '1',
-      x: 100,
-      y: 150,
+      xPercent: 17,
+      yPercent: 25,
       image: '/minions/nullbyte3a.png',
       name: 'Nullbyte',
       questionId: 'q1',
     },
     {
       id: '2',
-      x: 250,
-      y: 200,
+      xPercent: 35,
+      yPercent: 48,
       image: '/minions/dbug2a.png',
       name: 'Dbug',
       questionId: 'q2',
     },
     {
       id: '3',
-      x: 400,
-      y: 250,
+      xPercent: 53,
+      yPercent: 65,
       image: '/minions/typerrorus.png',
       name: 'Typerrorasaurus',
       questionId: 'q3',
     },
     {
       id: '4',
-      x: 550,
-      y: 300,
+      xPercent: 72,
+      yPercent: 50,
       image: '/minions/monster-left.png',
       name: 'Pie-Thon',
       questionId: 'q4',
     },
     {
       id: '5',
-      x: 700,
-      y: 350,
+      xPercent: 87,
+      yPercent: 27,
       image: '/minions/codezilla2.png',
       name: 'Codezilla',
       questionId: 'q5',
     },
   ];
 
+  const nodes = [
+    { id: 'node1', xPercent: 18, yPercent: 28 }, // START LEFT
+    { id: 'node2', xPercent: 18, yPercent: 48 }, // SMALL DOWN
+    { id: 'node3', xPercent: 35, yPercent: 48 }, // SMALL RIGHT
+    { id: 'node4', xPercent: 35, yPercent: 68 }, // SMALL DOWN
+    { id: 'node5', xPercent: 53, yPercent: 68 }, // SMALL RIGHT
+    { id: 'node6', xPercent: 53, yPercent: 48 }, // SMALL UP
+    { id: 'node7', xPercent: 70, yPercent: 48 }, // SMALL RIGHT
+    { id: 'node8', xPercent: 70, yPercent: 28 }, // SMALL UP
+    { id: 'node9', xPercent: 88, yPercent: 28 }, // CODEZILLA
+  ];
+
   const goToQuestion = (questionId: string) => {
     console.log('Go to question', questionId);
+
+    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]);
+    }
+
     navigate(`/question/${questionId}`);
   };
 
   return (
     <div className="game-map">
-      {/* Background image */}
-      <img
-        src="/background/codezilla_bkgd.png"
-        alt="rainy cityscape"
-        className="background-image"
-      />
+
+      {/* SVG LINES AND CIRCLES 2*/}
+      <svg className="map-lines">
+        {/* LINES BETWEEN NODES */}
+        {nodes.map((node, index) => {
+          const nextNode = nodes[index + 1];
+          if (!nextNode) return null;
+
+          return (
+            <line
+              key={`line-${node.id}-${nextNode.id}`}
+              x1={`${node.xPercent}%`}
+              y1={`${node.yPercent}%`}
+              x2={`${nextNode.xPercent}%`}
+              y2={`${nextNode.yPercent}%`}
+              className={`map-line ${completedPaths.includes(`${node.id}-${nextNode.id}`) ? 'completed' : ''}`}
+            />
+          );
+        })}
+
+        {/* GLOWING OUTER CIRCLE + DARKER INNER CIRCLE */}
+        {nodes.map((node, index) => {
+          const isCompleted = index < completedPaths.length;
+
+          return (
+            <g key={`node-${node.id}`}>
+              {/* OUTER GLOW CIRCLE */}
+              <circle
+                cx={`${node.xPercent}%`}
+                cy={`${node.yPercent}%`}
+                r="3.5%"
+                className={`map-node-outer ${isCompleted ? 'completed' : ''}`}
+              />
+              {/* INNER DARKER CIRCLE */}
+              <circle
+                cx={`${node.xPercent}%`}
+                cy={`${node.yPercent}%`}
+                r="3%"
+                className="map-node-inner"
+              />
+            </g>
+          );
+        })}
+      </svg>
 
-      {/* Minions */}
+      {/* MINIONS */}
       {minions.map((minion) => (
         <Minion
           key={minion.id}
           id={minion.id}
-          x={minion.x}
-          y={minion.y}
+          xPercent={minion.xPercent}
+          yPercent={minion.yPercent}
           image={minion.image}
           name={minion.name}
           questionId={minion.questionId}

client/src/components/screens/GameOver.tsx

@@ -1,7 +1,7 @@
-import './codezilla.css';
+import "../../styles/codezilla.css";
 
 const GameOverPage = ({
   backgroundUrl = '/assets/background.jpg',
   logoUrl       = '/assets/codezilla-logo.png',
   avatarUrl     = '/assets/player-avatar.png',
   codezillaUrl  = '/assets/codezilla.png',

client/src/components/screens/Login.tsx

@@ -12,12 +12,6 @@ export const Login: React.FC = () => {
 
   return (
     <div className="login-wrapper">
-      <img
-  src="/background/codezilla_bkgd.png"
-  alt="rainy cityscape"
-        className="background-image"
-      />
-
       <div className="login-content">
         <div className="question-box">
           <h1>Login</h1>

client/src/components/screens/Minions.tsx

@@ -1,25 +1,52 @@
-// src/components/Minion.tsx
-
 import React from 'react';
 
 interface MinionProps {
   id: string;
-  x: number;
-  y: number;
+  xPercent: number;
+  yPercent: number;
   image: string;
   name: string;
   questionId: string;
   goToQuestion: (questionId: string) => void;
+  size: number,
 }
 
-const Minion: React.FC<MinionProps> = ({ id, x, y, image, name, questionId, goToQuestion }) => {
+const Minion: React.FC<MinionProps> = ({ 
+  id, 
+  xPercent, 
+  yPercent, 
+  image, 
+  name, 
+  questionId, 
+  goToQuestion,
+ }) => {
+
   return (
     <div
-      id={`minion-${id}`} // ✅ Corrected here
-      style={{ position: 'absolute', top: y, left: x, cursor: 'pointer' }}
+      id={`minion-${id}`}
+      className="minion"
+      style={{
+        position: 'absolute',
+        top: `${yPercent}%`,
+        left: `${xPercent}%`,
+        width: '120px',
+        height: '120px',
+        transform: 'translate(-50%, -50%)',
+        cursor: 'pointer',
+        zIndex: 2,
+      }}
       onClick={() => goToQuestion(questionId)}
+      title={name}
     >
-      <img src={image} alt={name} style={{ width: '80px', height: '80px' }} />
+      <img
+        src={image}
+        alt={name}
+        style={{
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+        }}
+      />
     </div>
   );
 };

client/src/components/screens/Questions.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+
+const Questions: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate('/map');
+  };
+
+  return (
+    <div className="question-screen">
+      <h1>Question {id}</h1>
+      <p>This is where the question {id} will go!</p>
+      <button onClick={handleBack}>Back to Map</button>
+    </div>
+  );
+};
+
+export default Questions;

client/src/components/screens/Signup.tsx

@@ -1,4 +1,3 @@
-// src/components/SignUp.tsx
 /*CREATE IMPORTS */
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -26,11 +25,6 @@ const SignUp: React.FC = () => {
 
   return (
     <div className="login-wrapper">
-       <img
-        src="/background/codezilla_bkgd.png"
-        alt="Background"
-        className="background-image"
-      />
       <form className="question-box" onSubmit={handleSubmit}>
         <h2>Create Your Codezilla Account</h2>
         <input

client/src/components/screens/Victory.tsx

@@ -1,4 +1,4 @@
-import './codezilla.css';
+import "../../styles/codezilla.css";
 
 export default function VictoryPage({
   backgroundUrl   = '/assets/background.jpg',

client/src/index.css

@@ -2,15 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+html, body, #root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -26,12 +32,14 @@ a:hover {
   color: #535bf2;
 }
 
+/* IMPORTANT: NO FLEX, NO PLACE-ITEMS IN BODY */
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
 
 h1 {