diff --git a/client/package.json b/client/package.json
index aa73012..5128e72 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,7 +20,7 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
- "react-howler": "^5.2.0"
+ "react-howler": "^5.2.0",
"react-router-dom": "^7.5.2"
diff --git a/client/src/components/screens/GameOver.tsx b/client/src/components/screens/GameOver.tsx
index 37ef23b..b410120 100644
--- a/client/src/components/screens/GameOver.tsx
+++ b/client/src/components/screens/GameOver.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
import "../../styles/codezilla.css";
const GameOverPage = ({
@@ -5,12 +6,23 @@ const GameOverPage = ({
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 (
-
Game Over!
@@ -34,9 +46,25 @@ const GameOverPage = ({
Try again to become a code master
+
+
+
+
+
+
);
};
-export default GameOverPage;
+export default GameOverPage;
\ No newline at end of file
diff --git a/client/src/components/screens/Victory.tsx b/client/src/components/screens/Victory.tsx
index cf5bfb0..7600020 100644
--- a/client/src/components/screens/Victory.tsx
+++ b/client/src/components/screens/Victory.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
import "../../styles/codezilla.css";
export default function VictoryPage({
@@ -5,12 +6,21 @@ export default function VictoryPage({
avatarUrl = 'client/avatars/avatar4.png',
confettiUrl = 'client/background/confetti_image.jpg',
}) {
+ const navigate = useNavigate();
+
+ const handlePlayAgain = () => {
+ navigate('/game');
+ };
+
+ const handleMainMenu = () => {
+ navigate('/');
+ };
+
return (
-
{/* Confetti overlay */}
- you are a coding master!
+ You are a coding master!
+
+
+
+
+
);
}
-
diff --git a/client/src/styles/codezilla.css b/client/src/styles/codezilla.css
index 1c513e5..12679cf 100644
--- a/client/src/styles/codezilla.css
+++ b/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;