added game over and victory pages, along with corresponding stylings

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/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/Victory.tsx

@@ -1,12 +1,46 @@
-// 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
+import './codezilla.css';
+
+export default function VictoryPage({
+  backgroundUrl   = '/assets/background.jpg',
+  logoUrl         = '/assets/codezilla-logo.png',
+  avatarUrl       = '/assets/player-avatar.png',
+  confettiUrl     = '/assets/confetti.png',
+}) {
+  return (
+    <div
+      className="victory-page"
+      style={{ backgroundImage: `url(${backgroundUrl})` }}
+    >
+      <img
+        className="victory-logo"
+        src={logoUrl}
+        alt="Codezilla Logo"
+      />
+
+      <div className="victory-container">
+        {/* Confetti overlay */}
+        <div
+          className="victory-confetti"
+          style={{ backgroundImage: `url(${confettiUrl})` }}
+        />
+
+        <h1 className="victory-title">Congratulations!</h1>
+
+        <img
+          className="victory-avatar"
+          src={avatarUrl}
+          alt="Player Avatar"
+        />
+
+        <h2 className="victory-subtitle">
+          You defeated Codezilla!
+        </h2>
+
+        <p className="victory-cta">
+          you are a coding master!
+        </p>
+      </div>
+    </div>
+  );
+}