diff --git a/superpowers/src/components/App.tsx b/superpowers/src/components/App.tsx index 712908e..5c8e639 100644 --- a/superpowers/src/components/App.tsx +++ b/superpowers/src/components/App.tsx @@ -6,6 +6,7 @@ import { DifficultySelect } from "./DifficultySelect"; import { GameContainer } from "./GameContainer"; import { HUD } from "./HUD"; import { Toast } from "./Toast"; +import { GameOver } from "./GameOver"; type Screen = "menu" | "difficulty" | "game" | "gameover"; @@ -25,6 +26,11 @@ function App() { setScreen("gameover"); }, []); + const handlePlayAgain = () => { + stateManager.startGame(difficulty); + setScreen("game"); + }; + const handlePause = () => { const state = stateManager.getState(); if (state.status === "playing") { @@ -62,7 +68,12 @@ function App() { )} {screen === "gameover" && ( -
Game Over placeholder
+ setScreen("menu")} + /> )} void; + onMenu: () => void; +} + +export function GameOver({ stateManager, difficulty, onPlayAgain, onMenu }: GameOverProps) { + const state = stateManager.getState(); + const config = DIFFICULTY_CONFIGS[difficulty]; + const timeUsed = config.timerSeconds - state.timerSeconds; + const minutes = Math.floor(timeUsed / 60); + const seconds = timeUsed % 60; + + return ( +
+

+ {state.status === "won" ? "🎉 You Win!" : "⏰ Time's Up!"} +

+
+
Score: {state.score}
+
Time: {minutes}:{seconds.toString().padStart(2, "0")}
+
Difficulty: {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
+
+
+ + +
+
+ ); +}