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;