feat: add Brick Breaker game

README.md

@@ -1,6 +1,6 @@
 # Arcade
 
-A collection of classic arcade games built with React and TypeScript. Play Snake, 2048, Tetris, and Flappy Bird right in your browser!
+A collection of classic arcade games built with React and TypeScript. Play Snake, 2048, Tetris, Flappy Bird, Minesweeper, and Brick Breaker right in your browser!
 
 ## Games
 
@@ -12,6 +12,10 @@ A collection of classic arcade games built with React and TypeScript. Play Snake
 
 🐦 **Flappy Bird** - Tap to fly through gaps in the pipes
 
+💣 **Minesweeper** - Uncover tiles without triggering hidden mines
+
+🧱 **Brick Breaker** - Bounce the ball off your paddle to smash all the bricks, earn points, and clear every row before you run out of lives
+
 ## Features
 
 - Light/Dark theme toggle with persistent preference
@@ -49,11 +53,13 @@ A collection of classic arcade games built with React and TypeScript. Play Snake
 ```
 src/
 ├── components/
-│   ├── Home.tsx         # Home page with game selection
-│   ├── SnakeGame.tsx    # Snake game component
-│   ├── Game2048.tsx     # 2048 game component
-│   ├── TetrisGame.tsx   # Tetris game component
-│   └── FlappyGame.tsx   # Flappy Bird game component
+│   ├── Home.tsx              # Home page with game selection
+│   ├── SnakeGame.tsx         # Snake game component
+│   ├── Game2048.tsx          # 2048 game component
+│   ├── TetrisGame.tsx        # Tetris game component
+│   ├── FlappyGame.tsx        # Flappy Bird game component
+│   ├── MinesweeperGame.tsx   # Minesweeper game component
+│   └── BrickBreakerGame.tsx  # Brick Breaker game component
 ├── App.tsx              # Main app with routing
 ├── main.tsx             # Entry point
 └── index.css            # Global styles
@@ -80,4 +86,16 @@ src/
 ### Flappy Bird
 - **Space** or **Click** to flap
 - Navigate through the pipes
-- Don't hit the ground or pipes!
+- Don't hit the ground or pipes!
+
+### Minesweeper
+- **Left click** to reveal a tile
+- **Right click** to place or remove a flag
+- Use the numbers to deduce where the mines are hiding
+
+### Brick Breaker
+- **Left/Right arrows** or **mouse movement** to move the paddle
+- **Space** or **Click** to launch the ball
+- Break all the bricks to win — each brick is worth 10 points
+- You have 3 lives; losing the ball costs one life
+- The ball speeds up as you clear bricks, and your high score is saved locally

src/App.tsx

@@ -5,6 +5,7 @@ import Game2048 from "./components/Game2048";
 import TetrisGame from "./components/TetrisGame";
 import FlappyGame from "./components/FlappyGame";
 import MinesweeperGame from "./components/MinesweeperGame";
+import BrickBreakerGame from "./components/BrickBreakerGame";
 
 interface GameLayoutProps {
   title: string;
@@ -72,7 +73,13 @@ function App() {
   });
 
   const [view, setView] = useState<
-    "home" | "snake" | "2048" | "tetris" | "flappy" | "minesweeper"
+    | "home"
+    | "snake"
+    | "2048"
+    | "tetris"
+    | "flappy"
+    | "minesweeper"
+    | "brickbreaker"
   >("home");
 
   useEffect(() => {
@@ -109,6 +116,7 @@ function App() {
           onPlayTetris={() => setView("tetris")}
           onPlayFlappy={() => setView("flappy")}
           onPlayMinesweeper={() => setView("minesweeper")}
+          onPlayBrickBreaker={() => setView("brickbreaker")}
         />
       )}
 
@@ -168,6 +176,18 @@ function App() {
           <MinesweeperGame />
         </GameLayout>
       )}
+
+      {view === "brickbreaker" && (
+        <GameLayout
+          title="BRICK BREAKER"
+          onBack={() => setView("home")}
+          onThemeChange={handleThemeChange}
+          theme={theme}
+          bgColor="bg-black"
+        >
+          <BrickBreakerGame />
+        </GameLayout>
+      )}
     </div>
   );
 }