Merge pull request #48 from Treevyy/feature/react-fe

Main Menu and Play Again Btns on Victory and Game Over pgs

Author: hazyplebian

client/src/components/screens/GameOver.tsx

@@ -1,16 +1,28 @@
+import { useNavigate } from 'react-router-dom';
 import "../../styles/codezilla.css";
 
 const GameOverPage = ({
   backgroundUrl = 'client/background/codezilla_bkgd.png',
   avatarUrl     = 'client/avatars/avatar4.png',
   codezillaUrl  = 'client/minions/codezilla2.png',
 }) => {
+  const navigate = useNavigate();
+
+  const handlePlayAgain = () => {
+    // navigate to your game-start route
+    navigate('/game');
+  };
+
+  const handleMainMenu = () => {
+    // navigate back to your main menu/home route
+    navigate('/');
+  };
+
   return (
     <div
       className="game-over-page"
       style={{ backgroundImage: `url(${backgroundUrl})` }}
     >
-
       <div className="game-over-container">
         <h1 className="game-over-title">Game Over!</h1>
 
@@ -34,9 +46,25 @@ const GameOverPage = ({
         <p className="game-over-cta">
           Try again to become a code master
         </p>
+
+        <div className="game-over-actions">
+          <button
+            className="btn play-again-btn"
+            onClick={handlePlayAgain}
+          >
+            Play Again!
+          </button>
+
+          <button
+            className="btn main-menu-btn"
+            onClick={handleMainMenu}
+          >
+            Main Menu
+          </button>
+        </div>
       </div>
     </div>
   );
 };
 
-export default GameOverPage;
+export default GameOverPage;

client/src/components/screens/Victory.tsx

@@ -1,16 +1,26 @@
+import { useNavigate } from 'react-router-dom';
 import "../../styles/codezilla.css";
 
 export default function VictoryPage({
   backgroundUrl   = 'client/background/codezilla_bkgd.png',
   avatarUrl       = 'client/avatars/avatar4.png',
   confettiUrl     = 'client/background/confetti_image.jpg',
 }) {
+  const navigate = useNavigate();
+
+  const handlePlayAgain = () => {
+    navigate('/game');
+  };
+
+  const handleMainMenu = () => {
+    navigate('/');
+  };
+
   return (
     <div
       className="victory-page"
       style={{ backgroundImage: `url(${backgroundUrl})` }}
     >
-
       <div className="victory-container">
         {/* Confetti overlay */}
         <div
@@ -31,10 +41,24 @@ export default function VictoryPage({
         </h2>
 
         <p className="victory-cta">
-          you are a coding master!
+          You are a coding master!
         </p>
+
+        <div className="victory-actions">
+          <button
+            className="btn play-again-btn"
+            onClick={handlePlayAgain}
+          >
+            Play Again!
+          </button>
+          <button
+            className="btn main-menu-btn"
+            onClick={handleMainMenu}
+          >
+            Main Menu
+          </button>
+        </div>
       </div>
     </div>
   );
 }
-

client/src/styles/codezilla.css

@@ -168,6 +168,36 @@ body,
     font-size: 1.25rem;
     margin: 0;
 }
+
+.game-over-actions {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+  }
+  
+  .game-over-actions .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+  }
+  
+  .play-again-btn:hover {
+    transform: scale(1.05);
+  }
+  
+  .main-menu-btn {
+    background-color: #555;
+    color: #fff;
+  }
+  
+  .main-menu-btn:hover {
+    background-color: #333;
+  }
+
 /* Victory Page Styling */
 /* Full-screen rainy night background */
 .victory-page {
@@ -249,6 +279,36 @@ body,
     z-index: 1;
 }
 
+.victory-actions {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+  }
+  
+  .victory-actions .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+  }
+  
+  .play-again-btn:hover,
+  .main-menu-btn:hover {
+    transform: scale(1.05);
+  }
+  
+  .main-menu-btn {
+    background-color: #555;
+    color: #fff;
+  }
+  
+  .main-menu-btn:hover {
+    background-color: #333;
+  }
+  
 /* GAME MAP */
 .game-map {
     position: relative;