initial frontend code

client/src/App.tsx

@@ -1,10 +1,26 @@
-import CodezillaArena from './pages/CodezillaArena';
+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 Signup from './components/screens/Signup';
 
-const App = () => {
+import './styles/codezilla.css';
+
+const App: React.FC = () => {
   return (
-    <div className="min-h-screen bg-black text-white p-6">
-      <CodezillaArena />
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Login />} />
+        <Route path="/map" element={<GameMap />} />
+        <Route path="/gameover" element={<GameOver />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/victory" element={<Victory />} />
+
+
+      </Routes>
+    </Router>
   );
 };
 

client/src/components/screens/GameMap.tsx

@@ -0,0 +1,48 @@
+// MapScreen with clickable monster nodes
+//IMPORT LIBRARIES
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// 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 navigate = useNavigate();
+
+  const goToQuestion = (id: number) => {
+    navigate(`/quiz/${id}`);
+  };
+
+  return (
+    <div className="quiz-container">
+      {minions.map((minion) => (
+        <div
+          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>
+      ))}
+    </div>
+  );
+};
+
+export default MapScreen;

client/src/components/screens/GameOver.tsx

@@ -0,0 +1,11 @@
+// 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;
+

client/src/components/screens/Login.tsx

@@ -0,0 +1,32 @@
+// src/components/Login.tsx
+import React from 'react';
+import '../styles/codezilla.css';
+import { useNavigate } from 'react-router-dom';
+
+export const Login: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    navigate('/map');
+  };
+
+  return (
+    <div className="login-wrapper">
+      <img
+        src="/clients/backgrounds/codezilla_bkgd.png"
+        alt="rainy cityscape"
+        className="background-image"
+      />
+
+      <div className="login-content">
+        <div className="question-box">
+          <h1>Login</h1>
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/screens/Signup.tsx

@@ -0,0 +1,71 @@
+// src/components/SignUp.tsx
+/*CREATE IMPORTS */
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+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',
+
+];
+
+const SignUp: React.FC = () => {
+  const navigate = useNavigate();
+  const [selectedAvatar, setSelectedAvatar] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log({ username, password, selectedAvatar });
+    navigate('/map');
+  };
+
+  return (
+    <div className="login-wrapper">
+       <img
+        src="/clients/backgrounds/codezilla_bkgd.png"
+        alt="Background"
+        className="background-image"
+      />
+      <form className="question-box" onSubmit={handleSubmit}>
+        <h2>Create Your Codezilla Account</h2>
+        <input
+          type="text"
+          placeholder="Username"
+          className="login-input"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          className="login-input"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+
+        <p>Select Your Avatar</p>
+        <div className="avatar-grid">
+          {avatarList.map((avatar, index) => (
+            <img
+              key={index}
+              src={avatar}
+              alt={`Avatar ${index}`}
+              className={`avatar-option ${selectedAvatar === avatar ? 'selected' : ''}`}
+              onClick={() => setSelectedAvatar(avatar)}
+            />
+          ))}
+        </div>
+
+        <button className="signup-button" type="submit">Enter the Game</button>
+      </form>
+    </div>
+  );
+};
+
+export default SignUp;

client/src/components/screens/Victory.tsx

@@ -0,0 +1,12 @@
+// Victory screen with return to map link
+// TODO: IMPORT LIBRARIES: REACT, REACT-ROUTER-DOM
+// TODO:CR8 FUNCTIONAL VICTORY COMPONENT
+// TODO: W/I VICTORY COMPONENT USENAVIGATE()
+// TODO: ADD IMG SRC "/clients/backgrounds/codezilla_bkgd.png"
+// TODO: NAVIGATE BACK TO THE MAP
+// TODO: CREAT A CONTAINER VICTORY-CONTAINER
+// TODO: CREATE "VICTORY" HEADER
+// TODO: CREATE A VICTORY CONGRATULATORY MESSAGE
+// TODO: CREATE A PLAY AGAIN BUTTON
+// TODO: EXPORT DEFAULT VICTORY
+

client/src/index.css

@@ -1,3 +1,72 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+: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;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

client/src/main.tsx

@@ -1,11 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 import './index.css';
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <React.StrictMode>
     <App />
-  </StrictMode>,
-)
+  </React.StrictMode>
+);

client/src/styles/codezilla.css

@@ -0,0 +1,75 @@
+/* BACKGROUND */
+.body {
+    background-image: url('/clients/backgrounds/codezilla_bkgd.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+
+  }
+  /* .background-image {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: 0;
+    } */
+
+     /* SIGNUP */
+
+     .signup-button {
+      font-size: 1rem;
+      background: none;
+      color: #7dd3fc;
+      border: none;
+      cursor: pointer;
+      margin-top: 20px;
+    }
+
+    /* QUIZ CONTAINER */
+
+    .quiz-container {
+      position: relative;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* QUESTION BOX */
+
+    .question-box {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 90%;
+      max-width: 600px;
+      transform: translate(-50%, -50%);
+      background: rgba(0, 0, 50, 0.85);
+      padding: 40px;
+      border-radius: 20px;
+      text-align: center;
+      z-index: 10;
+    }
+
+    .question-options p {
+      margin: 10px 0;
+      cursor: pointer;
+      color: #facc15;
+    }
+
+    .quiz-header {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: rgba(30, 30, 80, 0.7);
+      border-radius: 12px;
+      padding: 10px 24px;
+      display: flex;
+      gap: 20px;
+      font-size: 1.5rem;
+      z-index: 10;
+    }
+
+