diff --git a/src/components/App.tsx b/src/components/App.tsx
index 951569b..8ce3a9d 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,8 +1,9 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useCallback } from "react";
import { Difficulty } from "../types";
import { GameStateManager } from "../game/state";
import { Menu } from "./Menu";
import { DifficultySelect } from "./DifficultySelect";
+import { GameContainer } from "./GameContainer";
type Screen = "menu" | "difficulty" | "game" | "gameover";
@@ -17,6 +18,10 @@ function App() {
setScreen("game");
};
+ const handleGameOver = useCallback(() => {
+ setScreen("gameover");
+ }, []);
+
return (
{screen === "menu" && (
@@ -29,7 +34,11 @@ function App() {
/>
)}
{screen === "game" && (
-
Game placeholder — {difficulty}
+
)}
{screen === "gameover" && (
Game Over placeholder
diff --git a/src/components/GameContainer.tsx b/src/components/GameContainer.tsx
new file mode 100644
index 0000000..0e74d1f
--- /dev/null
+++ b/src/components/GameContainer.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+import Phaser from "phaser";
+import { createPhaserConfig } from "../phaser/config";
+import { Difficulty } from "../types";
+import { GameStateManager } from "../game/state";
+
+interface GameContainerProps {
+ difficulty: Difficulty;
+ stateManager: GameStateManager;
+ onGameOver: () => void;
+}
+
+export function GameContainer({ difficulty, stateManager, onGameOver }: GameContainerProps) {
+ const containerRef = useRef
(null);
+ const gameRef = useRef(null);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const config = createPhaserConfig(containerRef.current, 800, 600);
+ const game = new Phaser.Game(config);
+ gameRef.current = game;
+
+ // Pass data to Phaser scenes via the registry
+ game.registry.set("difficulty", difficulty);
+ game.registry.set("stateManager", stateManager);
+
+ // Listen for game over
+ const handleStateChange = () => {
+ const state = stateManager.getState();
+ if (state.status === "won" || state.status === "lost") {
+ onGameOver();
+ }
+ };
+ stateManager.on("stateChange", handleStateChange);
+
+ return () => {
+ stateManager.off("stateChange", handleStateChange);
+ game.destroy(true);
+ gameRef.current = null;
+ };
+ }, [difficulty, stateManager, onGameOver]);
+
+ return (
+
+ );
+}