From 07a2fe0c17afd4c27533e8b27be0061e45e547c6 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 22 Jan 2026 23:52:02 +0000
Subject: [PATCH] Changes

---
 src/components/MatrixCursor.tsx | 13 ++++--------
 src/pages/Breakout.tsx          | 12 ++++++++++-
 src/pages/Games.tsx             | 10 ----------
 src/pages/Tetris.tsx            | 35 ++++++++++++++++++---------------
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/MatrixCursor.tsx b/src/components/MatrixCursor.tsx
index 0344d5d..01fdbe5 100644
--- a/src/components/MatrixCursor.tsx
+++ b/src/components/MatrixCursor.tsx
@@ -7,18 +7,13 @@ const MatrixCursor = () => {
   const [isTouchDevice, setIsTouchDevice] = useState(false);
 
   useEffect(() => {
-    // Detect touch device - check for touch capability and if primary input is touch
+    // Detect touch device - only consider it a touch device if primary pointer is coarse (touch)
     const checkTouchDevice = () => {
-      const hasTouchScreen = 'ontouchstart' in window || 
-        navigator.maxTouchPoints > 0 ||
-        // @ts-ignore - msMaxTouchPoints is IE-specific
-        navigator.msMaxTouchPoints > 0;
-      
-      // Also check if the device has a fine pointer (mouse)
+      // Check if the device has a fine pointer (mouse) as primary input
       const hasFinePrimary = window.matchMedia('(pointer: fine)').matches;
       
-      // Consider it a touch device if it has touch AND doesn't have fine pointer as primary
-      setIsTouchDevice(hasTouchScreen && !hasFinePrimary);
+      // Consider it a touch device only if it doesn't have a fine pointer as primary
+      setIsTouchDevice(!hasFinePrimary);
     };
 
     checkTouchDevice();
diff --git a/src/pages/Breakout.tsx b/src/pages/Breakout.tsx
index 78c3d15..3579303 100644
--- a/src/pages/Breakout.tsx
+++ b/src/pages/Breakout.tsx
@@ -261,6 +261,16 @@ const Breakout = () => {
     paddleXRef.current = Math.max(0, Math.min(canvasSize.width - paddleWidth, x - paddleWidth / 2));
   }, [gameStarted, gameOver, isPaused, canvasSize.width, paddleWidth]);
 
+  // Mouse move handler for desktop
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!gameStarted || gameOver || isPaused || isMobile || isTwoPlayer) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    paddleXRef.current = Math.max(0, Math.min(canvasSize.width - paddleWidth, x - paddleWidth / 2));
+  }, [gameStarted, gameOver, isPaused, canvasSize.width, paddleWidth, isMobile, isTwoPlayer]);
+
   const moveLeft = useCallback(() => { paddleXRef.current = Math.max(0, paddleXRef.current - 20); }, []);
   const moveRight = useCallback(() => { paddleXRef.current = Math.min(canvasSize.width - paddleWidth, paddleXRef.current + 20); }, [canvasSize.width, paddleWidth]);
 
@@ -547,7 +557,7 @@ const Breakout = () => {
         <div className={`flex ${isTwoPlayer ? 'gap-4' : ''}`}>
           {/* P1 Board */}
           <div className="border-2 border-primary box-glow bg-background/80">
-            <canvas ref={canvasRef} width={canvasSize.width} height={canvasSize.height} onTouchMove={handleTouchMove} className="block" />
+            <canvas ref={canvasRef} width={canvasSize.width} height={canvasSize.height} onTouchMove={handleTouchMove} onMouseMove={handleMouseMove} className="block cursor-none" />
           </div>
 
           {/* P2 Board */}
diff --git a/src/pages/Games.tsx b/src/pages/Games.tsx
index 1855cb4..3636341 100644
--- a/src/pages/Games.tsx
+++ b/src/pages/Games.tsx
@@ -8,7 +8,6 @@ const games = [
     id: 'tetris',
     name: 'Tetris',
     description: 'Classic block-stacking puzzle game',
-    hasMultiplayer: true,
     ascii: `┌────────┐
 │ ▓▓     │
 │ ▓▓ ██  │
@@ -20,7 +19,6 @@ const games = [
     id: 'pacman',
     name: 'Pac-Man',
     description: 'Navigate the maze, eat dots, avoid ghosts',
-    hasMultiplayer: true,
     ascii: `┌────────┐
 │· · ᗣ · │
 │ ┌─┐ ┌─┐│
@@ -32,7 +30,6 @@ const games = [
     id: 'snake',
     name: 'Snake',
     description: 'Eat food, grow longer, dont hit yourself',
-    hasMultiplayer: true,
     ascii: `┌────────┐
 │        │
 │ ●■■■   │
@@ -44,7 +41,6 @@ const games = [
     id: 'breakout',
     name: 'Breakout',
     description: 'Break bricks with a bouncing ball',
-    hasMultiplayer: true,
     ascii: `┌────────┐
 │████████│
 │▓▓▓▓▓▓▓▓│
@@ -110,12 +106,6 @@ const Games = () => {
                   </p>
                 </div>
                 
-                {/* Multiplayer Badge - using primary colors instead of purple */}
-                {game.hasMultiplayer && (
-                  <span className="absolute top-3 right-3 font-pixel text-[10px] text-primary border border-primary/60 bg-primary/10 px-2 py-1 rounded-sm">
-                    2P
-                  </span>
-                )}
               </div>
             </Link>
           </motion.div>
diff --git a/src/pages/Tetris.tsx b/src/pages/Tetris.tsx
index 9b595ea..f3e73d3 100644
--- a/src/pages/Tetris.tsx
+++ b/src/pages/Tetris.tsx
@@ -339,31 +339,26 @@ const Tetris = () => {
   const movePlayer = useCallback((playerNum: 1 | 2, action: 'left' | 'right' | 'down' | 'rotate' | 'drop') => {
     if (gameOver || isPaused || !gameStarted || gameMode !== '2p') return;
     const setPlayer = playerNum === 1 ? setPlayer1 : setPlayer2;
-    const player = playerNum === 1 ? player1 : player2;
     const isP2 = playerNum === 2;
-    if (player.gameOver) return;
     
     setPlayer(prev => {
+      if (prev.gameOver) return prev;
       let newPiece = { ...prev.piece };
       switch (action) {
         case 'left':
           newPiece.x--;
           if (!isValidMove(newPiece, prev.board)) return prev;
-          playSound('hover');
           return { ...prev, piece: newPiece };
         case 'right':
           newPiece.x++;
           if (!isValidMove(newPiece, prev.board)) return prev;
-          playSound('hover');
           return { ...prev, piece: newPiece };
         case 'rotate':
           newPiece.shape = rotate(prev.piece.shape);
           if (!isValidMove(newPiece, prev.board)) return prev;
-          playSound('hover');
           return { ...prev, piece: newPiece };
         case 'drop':
           while (isValidMove({ ...newPiece, y: newPiece.y + 1 }, prev.board)) newPiece.y++;
-          playSound('click');
           return { ...prev, piece: newPiece };
         case 'down':
           newPiece.y++;
@@ -373,12 +368,9 @@ const Tetris = () => {
             const { board: clearedBoard, cleared } = clearLines(mergedBoard);
             const newScore = prev.score + (cleared > 0 ? cleared * 100 * cleared : 0);
             const newLines = prev.lines + cleared;
-            if (cleared > 0) playSound('success');
-            else playSound('click');
             const newTetromino = prev.nextPiece;
             const nextNext = randomTetromino(isP2, prev.nextPiece.shape);
             if (!isValidMove(newTetromino, clearedBoard)) {
-              playSound('error');
               return { ...prev, board: clearedBoard, score: newScore, lines: newLines, gameOver: true };
             }
             return { ...prev, board: clearedBoard, piece: newTetromino, nextPiece: nextNext, score: newScore, lines: newLines };
@@ -386,7 +378,7 @@ const Tetris = () => {
       }
       return prev;
     });
-  }, [gameOver, isPaused, gameStarted, gameMode, player1, player2, isValidMove, mergePiece, clearLines, playSound]);
+  }, [gameOver, isPaused, gameStarted, gameMode, isValidMove, mergePiece, clearLines]);
 
   useEffect(() => {
     if (gameMode !== '2p' || !gameStarted) return;
@@ -599,7 +591,16 @@ const Tetris = () => {
             )}
           </>
         ) : (
-          <div className="flex gap-4 items-start">
+          <div className="flex gap-6 items-start">
+            {/* P1 Next Piece - Left side */}
+            <div className="flex flex-col items-center gap-2 min-w-[60px]">
+              <p className="font-pixel text-[10px] text-primary/70">P1 Next</p>
+              <div className="border border-primary/30 p-2 bg-background/40">
+                {renderNextPiece(player1.nextPiece)}
+              </div>
+            </div>
+            
+            {/* P1 Board */}
             <div className="flex flex-col items-center gap-2">
               <p className="font-minecraft text-lg text-primary">P1 <span className="text-xs text-foreground/60">(WASD + Q)</span></p>
               <div className="border-2 border-primary box-glow p-1 bg-background/80">{renderBoard2P(player1, 'border-primary/20')}</div>
@@ -607,11 +608,9 @@ const Tetris = () => {
                 <div><p className="font-pixel text-[10px] text-foreground/60">Score</p><p className="font-minecraft text-lg text-primary">{player1.score}</p></div>
                 <div><p className="font-pixel text-[10px] text-foreground/60">Lines</p><p className="font-minecraft text-lg text-primary">{player1.lines}</p></div>
               </div>
-              <div className="border border-primary/30 p-2 bg-background/40">
-                <p className="font-pixel text-[8px] text-foreground/40">Next</p>
-                {renderNextPiece(player1.nextPiece)}
-              </div>
             </div>
+            
+            {/* P2 Board */}
             <div className="flex flex-col items-center gap-2">
               <p className="font-minecraft text-lg text-secondary">P2 <span className="text-xs text-foreground/60">(Arrows + /)</span></p>
               <div className="border-2 border-secondary p-1 bg-background/80" style={{ boxShadow: '0 0 15px hsl(var(--secondary) / 0.5)' }}>{renderBoard2P(player2, 'border-secondary/20')}</div>
@@ -619,8 +618,12 @@ const Tetris = () => {
                 <div><p className="font-pixel text-[10px] text-foreground/60">Score</p><p className="font-minecraft text-lg text-secondary">{player2.score}</p></div>
                 <div><p className="font-pixel text-[10px] text-foreground/60">Lines</p><p className="font-minecraft text-lg text-secondary">{player2.lines}</p></div>
               </div>
+            </div>
+            
+            {/* P2 Next Piece - Right side */}
+            <div className="flex flex-col items-center gap-2 min-w-[60px]">
+              <p className="font-pixel text-[10px] text-secondary/70">P2 Next</p>
               <div className="border border-secondary/30 p-2 bg-background/40">
-                <p className="font-pixel text-[8px] text-foreground/40">Next</p>
                 {renderNextPiece(player2.nextPiece)}
               </div>
             </div>