Changes

src/pages/Snake.tsx

@@ -4,7 +4,7 @@ import { useSettings } from '@/contexts/SettingsContext';
 import { useAchievements } from '@/contexts/AchievementsContext';
 import { Link } from 'react-router-dom';
 import GlitchCrash from '@/components/GlitchCrash';
-import { Maximize2, Minimize2 } from 'lucide-react';
+import { Maximize2, Minimize2, Users, User } from 'lucide-react';
 import { useBrowserFullscreen } from '@/hooks/useGameDimensions';
 import GameTouchButton from '@/components/GameTouchButton';
 import { MobileControlsDock, MobileControlsSpacer } from '@/components/MobileControlsDock';
@@ -17,14 +17,40 @@ const HIGHSCORE_KEY = 'snake-highscore';
 type Direction = 'up' | 'down' | 'left' | 'right';
 type Position = { x: number; y: number };
 
+type GameMode = '1p' | '2p';
+
+interface Player {
+  snake: Position[];
+  direction: Direction;
+  score: number;
+  alive: boolean;
+  color: string;
+  name: string;
+}
+
 const Snake = () => {
   const { playSound } = useSettings();
   const { checkGameScoreAchievements, unlockMaxScore } = useAchievements();
+  
+  // Mode selection
+  const [gameMode, setGameMode] = useState<GameMode | null>(null);
+  
+  // Single player state
   const [snake, setSnake] = useState<Position[]>([{ x: 10, y: 10 }]);
   const [direction, setDirection] = useState<Direction>('right');
   const [food, setFood] = useState<Position>({ x: 15, y: 10 });
   const [score, setScore] = useState(0);
   const [highScore, setHighScore] = useState(0);
+  
+  // Multiplayer state
+  const [players, setPlayers] = useState<[Player, Player]>([
+    { snake: [{ x: 5, y: 10 }], direction: 'right', score: 0, alive: true, color: 'hsl(var(--primary))', name: 'P1' },
+    { snake: [{ x: 15, y: 10 }], direction: 'left', score: 0, alive: true, color: 'hsl(280 70% 50%)', name: 'P2' },
+  ]);
+  const [food2P, setFood2P] = useState<Position>({ x: 10, y: 10 });
+  const [winner, setWinner] = useState<string | null>(null);
+  
+  // Common state
   const [gameOver, setGameOver] = useState(false);
   const [gameComplete, setGameComplete] = useState(false);
   const [gameStarted, setGameStarted] = useState(false);
@@ -34,21 +60,26 @@ const Snake = () => {
   const gameRef = useRef<HTMLDivElement>(null);
   const directionQueueRef = useRef<Direction[]>([]);
   const currentDirectionRef = useRef<Direction>('right');
+  
+  // 2P direction refs
+  const directionQueues2P = useRef<[Direction[], Direction[]]>([[], []]);
+  const currentDirections2P = useRef<[Direction, Direction]>(['right', 'left']);
 
   const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
 
-  // Calculate cell size based on screen
   const getCellSize = useCallback(() => {
     if (typeof window === 'undefined') return 24;
     const isMobile = window.innerWidth < 768;
     if (isMobile) {
       const maxWidth = window.innerWidth - 40;
-      // Reserve space for header + fixed controls dock on mobile
       const maxHeight = window.innerHeight - 420;
       return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 18);
     }
+    if (gameMode === '2p') {
+      return isFullscreen ? 20 : 16;
+    }
     return isFullscreen ? 28 : 24;
-  }, [isFullscreen]);
+  }, [isFullscreen, gameMode]);
 
   const [cellSize, setCellSize] = useState(getCellSize);
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
@@ -61,9 +92,8 @@ const Snake = () => {
 
   useEffect(() => {
     setCellSize(getCellSize());
-  }, [isFullscreen, getCellSize]);
+  }, [isFullscreen, getCellSize, gameMode]);
 
-  // Auto-fullscreen on mobile
   useEffect(() => {
     if (gameStarted && isMobile && !isFullscreen) {
       setIsFullscreen(true);
@@ -98,13 +128,12 @@ const Snake = () => {
     if (saved) setHighScore(Math.min(parseInt(saved, 10), MAX_SCORE));
   }, []);
 
-  // Check score achievements
   useEffect(() => {
-    if (score > 0) {
+    if (score > 0 && gameMode === '1p') {
       checkGameScoreAchievements('snake', score);
       if (score >= MAX_SCORE) unlockMaxScore();
     }
-  }, [score, checkGameScoreAchievements, unlockMaxScore]);
+  }, [score, checkGameScoreAchievements, unlockMaxScore, gameMode]);
 
   const spawnFood = useCallback((currentSnake: Position[]): Position | null => {
     const occupied = new Set(currentSnake.map(s => `${s.x},${s.y}`));
@@ -118,6 +147,18 @@ const Snake = () => {
     return available[Math.floor(Math.random() * available.length)];
   }, []);
 
+  const spawnFood2P = useCallback((snakes: Position[][]): Position => {
+    const occupied = new Set(snakes.flat().map(s => `${s.x},${s.y}`));
+    const available: Position[] = [];
+    for (let x = 0; x < GRID_SIZE; x++) {
+      for (let y = 0; y < GRID_SIZE; y++) {
+        if (!occupied.has(`${x},${y}`)) available.push({ x, y });
+      }
+    }
+    if (available.length === 0) return { x: 10, y: 10 };
+    return available[Math.floor(Math.random() * available.length)];
+  }, []);
+
   const resetSnakeKeepScore = useCallback(() => {
     const initialSnake = [{ x: 10, y: 10 }];
     setSnake(initialSnake);
@@ -128,14 +169,30 @@ const Snake = () => {
     playSound('success');
   }, [spawnFood, playSound]);
 
-  const startGame = () => {
-    const initialSnake = [{ x: 10, y: 10 }];
-    setSnake(initialSnake);
-    setDirection('right');
-    currentDirectionRef.current = 'right';
-    directionQueueRef.current = [];
-    setFood(spawnFood(initialSnake)!);
-    setScore(0);
+  const startGame = (mode: GameMode) => {
+    setGameMode(mode);
+    
+    if (mode === '1p') {
+      const initialSnake = [{ x: 10, y: 10 }];
+      setSnake(initialSnake);
+      setDirection('right');
+      currentDirectionRef.current = 'right';
+      directionQueueRef.current = [];
+      setFood(spawnFood(initialSnake)!);
+      setScore(0);
+    } else {
+      const p1Start = [{ x: 5, y: 10 }];
+      const p2Start = [{ x: 15, y: 10 }];
+      setPlayers([
+        { snake: p1Start, direction: 'right', score: 0, alive: true, color: 'hsl(var(--primary))', name: 'P1' },
+        { snake: p2Start, direction: 'left', score: 0, alive: true, color: 'hsl(280 70% 50%)', name: 'P2' },
+      ]);
+      currentDirections2P.current = ['right', 'left'];
+      directionQueues2P.current = [[], []];
+      setFood2P(spawnFood2P([p1Start, p2Start]));
+      setWinner(null);
+    }
+    
     setGameOver(false);
     setGameComplete(false);
     setIsPaused(false);
@@ -144,8 +201,9 @@ const Snake = () => {
     gameRef.current?.focus();
   };
 
+  // 1P Game loop
   useEffect(() => {
-    if (!gameStarted || gameOver || gameComplete || isPaused) return;
+    if (!gameStarted || gameOver || gameComplete || isPaused || gameMode !== '1p') return;
 
     const interval = setInterval(() => {
       const opposite: Record<Direction, Direction> = { up: 'down', down: 'up', left: 'right', right: 'left' };
@@ -204,26 +262,125 @@ const Snake = () => {
     }, TICK_SPEED);
 
     return () => clearInterval(interval);
-  }, [gameStarted, gameOver, gameComplete, isPaused, food, highScore, playSound, spawnFood, resetSnakeKeepScore]);
+  }, [gameStarted, gameOver, gameComplete, isPaused, food, highScore, playSound, spawnFood, resetSnakeKeepScore, gameMode]);
 
+  // 2P Game loop
+  useEffect(() => {
+    if (!gameStarted || gameOver || isPaused || gameMode !== '2p') return;
+
+    const interval = setInterval(() => {
+      const opposite: Record<Direction, Direction> = { up: 'down', down: 'up', left: 'right', right: 'left' };
+      
+      setPlayers(prev => {
+        const newPlayers: [Player, Player] = [{ ...prev[0] }, { ...prev[1] }];
+        
+        for (let i = 0; i < 2; i++) {
+          if (!newPlayers[i].alive) continue;
+          
+          let nextDir = currentDirections2P.current[i];
+          while (directionQueues2P.current[i].length > 0) {
+            const queuedDir = directionQueues2P.current[i].shift()!;
+            if (queuedDir !== opposite[currentDirections2P.current[i]]) {
+              nextDir = queuedDir;
+              break;
+            }
+          }
+          currentDirections2P.current[i] = nextDir;
+          newPlayers[i].direction = nextDir;
+          
+          const head = newPlayers[i].snake[0];
+          let newHead: Position;
+          switch (nextDir) {
+            case 'up': newHead = { x: head.x, y: head.y - 1 }; break;
+            case 'down': newHead = { x: head.x, y: head.y + 1 }; break;
+            case 'left': newHead = { x: head.x - 1, y: head.y }; break;
+            case 'right': newHead = { x: head.x + 1, y: head.y }; break;
+          }
+          
+          if (newHead.x < 0 || newHead.x >= GRID_SIZE || newHead.y < 0 || newHead.y >= GRID_SIZE) {
+            newPlayers[i].alive = false;
+            playSound('error');
+            continue;
+          }
+          
+          if (newPlayers[i].snake.some(s => s.x === newHead.x && s.y === newHead.y)) {
+            newPlayers[i].alive = false;
+            playSound('error');
+            continue;
+          }
+          
+          const otherIndex = i === 0 ? 1 : 0;
+          if (newPlayers[otherIndex].snake.some(s => s.x === newHead.x && s.y === newHead.y)) {
+            newPlayers[i].alive = false;
+            playSound('error');
+            continue;
+          }
+          
+          const newSnake = [newHead, ...newPlayers[i].snake];
+          
+          if (newHead.x === food2P.x && newHead.y === food2P.y) {
+            playSound('success');
+            newPlayers[i].score += 10;
+            setFood2P(spawnFood2P([newPlayers[0].snake, newPlayers[1].snake]));
+          } else {
+            newSnake.pop();
+          }
+          
+          newPlayers[i].snake = newSnake;
+        }
+        
+        const alive = newPlayers.filter(p => p.alive);
+        if (alive.length === 0) {
+          setGameOver(true);
+          setWinner('Draw!');
+        } else if (alive.length === 1) {
+          setGameOver(true);
+          setWinner(`${alive[0].name} Wins!`);
+        }
+        
+        return newPlayers;
+      });
+    }, TICK_SPEED);
+
+    return () => clearInterval(interval);
+  }, [gameStarted, gameOver, isPaused, food2P, playSound, spawnFood2P, gameMode]);
+
+  // Keyboard handler
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!gameStarted) return;
-      let newDir: Direction | null = null;
-      switch (e.key) {
-        case 'ArrowUp': case 'w': e.preventDefault(); newDir = 'up'; break;
-        case 'ArrowDown': case 's': e.preventDefault(); newDir = 'down'; break;
-        case 'ArrowLeft': case 'a': e.preventDefault(); newDir = 'left'; break;
-        case 'ArrowRight': case 'd': e.preventDefault(); newDir = 'right'; break;
-        case 'p': e.preventDefault(); if (!gameOver && !gameComplete) setIsPaused(p => !p); return;
+      
+      if (gameMode === '1p') {
+        let newDir: Direction | null = null;
+        switch (e.key) {
+          case 'ArrowUp': case 'w': e.preventDefault(); newDir = 'up'; break;
+          case 'ArrowDown': case 's': e.preventDefault(); newDir = 'down'; break;
+          case 'ArrowLeft': case 'a': e.preventDefault(); newDir = 'left'; break;
+          case 'ArrowRight': case 'd': e.preventDefault(); newDir = 'right'; break;
+          case 'p': e.preventDefault(); if (!gameOver && !gameComplete) setIsPaused(p => !p); return;
+        }
+        if (newDir && directionQueueRef.current.length < 3) directionQueueRef.current.push(newDir);
+      } else {
+        // P1: WASD
+        if (e.key === 'w' || e.key === 'W') { e.preventDefault(); if (directionQueues2P.current[0].length < 3) directionQueues2P.current[0].push('up'); }
+        if (e.key === 's' || e.key === 'S') { e.preventDefault(); if (directionQueues2P.current[0].length < 3) directionQueues2P.current[0].push('down'); }
+        if (e.key === 'a' || e.key === 'A') { e.preventDefault(); if (directionQueues2P.current[0].length < 3) directionQueues2P.current[0].push('left'); }
+        if (e.key === 'd' || e.key === 'D') { e.preventDefault(); if (directionQueues2P.current[0].length < 3) directionQueues2P.current[0].push('right'); }
+        
+        // P2: Arrows
+        if (e.key === 'ArrowUp') { e.preventDefault(); if (directionQueues2P.current[1].length < 3) directionQueues2P.current[1].push('up'); }
+        if (e.key === 'ArrowDown') { e.preventDefault(); if (directionQueues2P.current[1].length < 3) directionQueues2P.current[1].push('down'); }
+        if (e.key === 'ArrowLeft') { e.preventDefault(); if (directionQueues2P.current[1].length < 3) directionQueues2P.current[1].push('left'); }
+        if (e.key === 'ArrowRight') { e.preventDefault(); if (directionQueues2P.current[1].length < 3) directionQueues2P.current[1].push('right'); }
+        
+        if (e.key === 'p' || e.key === 'P') { e.preventDefault(); if (!gameOver) setIsPaused(p => !p); }
       }
-      if (newDir && directionQueueRef.current.length < 3) directionQueueRef.current.push(newDir);
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [gameStarted, gameOver, gameComplete]);
+  }, [gameStarted, gameOver, gameComplete, gameMode]);
 
-  const renderGrid = () => {
+  const renderGrid1P = () => {
     const cells = [];
     const snakeSet = new Set(snake.map(s => `${s.x},${s.y}`));
     const head = snake[0];
@@ -251,8 +408,115 @@ const Snake = () => {
     return cells;
   };
 
+  const renderGrid2P = () => {
+    const cells = [];
+    const p1Set = new Set(players[0].snake.map(s => `${s.x},${s.y}`));
+    const p2Set = new Set(players[1].snake.map(s => `${s.x},${s.y}`));
+    const p1Head = players[0].snake[0];
+    const p2Head = players[1].snake[0];
+    
+    for (let y = 0; y < GRID_SIZE; y++) {
+      for (let x = 0; x < GRID_SIZE; x++) {
+        const isP1 = p1Set.has(`${x},${y}`);
+        const isP2 = p2Set.has(`${x},${y}`);
+        const isP1Head = p1Head.x === x && p1Head.y === y && players[0].alive;
+        const isP2Head = p2Head.x === x && p2Head.y === y && players[1].alive;
+        const isFood = food2P.x === x && food2P.y === y;
+        
+        let bgClass = 'bg-background/50 border-primary/10';
+        let style: React.CSSProperties = { width: cellSize, height: cellSize };
+        
+        if (isP1Head) {
+          bgClass = 'border-primary';
+          style.backgroundColor = players[0].color;
+          style.boxShadow = `0 0 10px ${players[0].color}`;
+        } else if (isP1 && players[0].alive) {
+          bgClass = 'border-primary/60';
+          style.backgroundColor = players[0].color;
+          style.opacity = 0.8;
+        } else if (isP2Head) {
+          bgClass = 'border-purple-500';
+          style.backgroundColor = players[1].color;
+          style.boxShadow = `0 0 10px ${players[1].color}`;
+        } else if (isP2 && players[1].alive) {
+          bgClass = 'border-purple-500/60';
+          style.backgroundColor = players[1].color;
+          style.opacity = 0.8;
+        } else if (isFood) {
+          bgClass = 'bg-destructive/80 border-destructive/60';
+        }
+        
+        cells.push(
+          <div
+            key={`${x}-${y}`}
+            className={`flex items-center justify-center border transition-colors duration-75 ${bgClass}`}
+            style={style}
+          >
+            {isFood && <div className="bg-destructive rounded-sm animate-pulse" style={{ width: cellSize * 0.5, height: cellSize * 0.5 }} />}
+          </div>
+        );
+      }
+    }
+    return cells;
+  };
+
   if (showGlitchCrash) return <GlitchCrash onComplete={() => window.location.reload()} />;
 
+  // Mode selection screen
+  if (!gameMode) {
+    return (
+      <motion.div
+        ref={gameRef}
+        tabIndex={0}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+        className="flex flex-col h-full"
+      >
+        <div className="flex items-center gap-4 mb-4">
+          <Link to="/games" className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</Link>
+          <h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">Snake</h1>
+        </div>
+
+        <div className="flex-1 flex flex-col items-center justify-center gap-6">
+          <p className="font-pixel text-sm text-foreground/70">Select game mode</p>
+          
+          <div className="flex gap-4">
+            <button
+              onClick={() => startGame('1p')}
+              className="flex flex-col items-center gap-2 p-6 border-2 border-primary/50 hover:border-primary bg-background/50 hover:bg-primary/10 transition-all"
+            >
+              <User size={32} className="text-primary" />
+              <span className="font-minecraft text-lg text-primary">1 Player</span>
+              <span className="font-pixel text-xs text-foreground/60">Solo mode</span>
+            </button>
+
+            {!isMobile && (
+              <button
+                onClick={() => startGame('2p')}
+                className="flex flex-col items-center gap-2 p-6 border-2 border-purple-500/50 hover:border-purple-500 bg-background/50 hover:bg-purple-500/10 transition-all"
+              >
+                <Users size={32} className="text-purple-400" />
+                <span className="font-minecraft text-lg text-purple-400">2 Players</span>
+                <span className="font-pixel text-xs text-foreground/60">Local versus</span>
+              </button>
+            )}
+          </div>
+
+          {isMobile && (
+            <p className="font-pixel text-xs text-foreground/40 text-center max-w-xs">
+              2 Player mode requires a keyboard and is not available on mobile devices
+            </p>
+          )}
+
+          <div className="border border-primary/30 p-3 bg-background/30 mt-4">
+            <p className="font-pixel text-xs text-foreground/60">HIGH SCORE: <span className="text-primary">{highScore.toLocaleString()}</span></p>
+          </div>
+        </div>
+      </motion.div>
+    );
+  }
+
   return (
     <motion.div
       ref={gameRef}
@@ -262,26 +526,26 @@ const Snake = () => {
       transition={{ duration: 0.5 }}
       className={`flex flex-col outline-none ${isFullscreen ? 'fixed inset-0 z-50 bg-background p-4' : 'h-full'}`}
     >
-      {/* Header */}
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-4">
-          <Link to="/games" className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</Link>
-          <h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">Snake</h1>
+          <button onClick={() => { setGameMode(null); setGameStarted(false); }} className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</button>
+          <h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">
+            Snake {gameMode === '2p' && <span className="text-purple-400">2P</span>}
+          </h1>
         </div>
         <button onClick={toggleFullscreen} className="p-2 border border-primary/50 hover:bg-primary/20 transition-colors" title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
           {isFullscreen ? <Minimize2 size={16} className="text-primary" /> : <Maximize2 size={16} className="text-primary" />}
         </button>
       </div>
 
-      {/* Main layout */}
       <div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4'} flex-1 ${isFullscreen ? 'justify-center items-center' : ''}`}>
-        {/* Game Grid */}
         <div className="border-2 border-primary box-glow p-1 bg-background/80">
-          <div className="grid" style={{ gridTemplateColumns: `repeat(${GRID_SIZE}, ${cellSize}px)` }}>{renderGrid()}</div>
+          <div className="grid" style={{ gridTemplateColumns: `repeat(${GRID_SIZE}, ${cellSize}px)` }}>
+            {gameMode === '1p' ? renderGrid1P() : renderGrid2P()}
+          </div>
         </div>
 
-        {/* Side Panel */}
-        {!isMobile && (
+        {!isMobile && gameMode === '1p' && (
           <div className="flex flex-col gap-2 min-w-[140px]">
             <div className="border border-primary/50 p-3 bg-background/50">
               <p className="font-pixel text-[10px] text-foreground/60">SCORE</p>
@@ -302,7 +566,7 @@ const Snake = () => {
               <p className="font-pixel text-[10px] text-foreground/80">P: Pause</p>
             </div>
             {!gameStarted || gameOver || gameComplete ? (
-              <button onClick={startGame} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
+              <button onClick={() => startGame('1p')} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
                 {gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}
               </button>
             ) : (
@@ -313,7 +577,45 @@ const Snake = () => {
           </div>
         )}
 
-        {/* Mobile Controls */}
+        {!isMobile && gameMode === '2p' && (
+          <div className="flex flex-col gap-2 min-w-[160px]">
+            <div className="border border-primary/50 p-3 bg-background/50">
+              <div className="flex items-center gap-2 mb-1">
+                <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: players[0].color }} />
+                <p className="font-pixel text-[10px] text-foreground/60">P1 (WASD)</p>
+              </div>
+              <p className="font-minecraft text-lg text-primary text-glow">{players[0].score}</p>
+              {!players[0].alive && <p className="font-pixel text-[8px] text-destructive">DEAD</p>}
+            </div>
+
+            <div className="border border-purple-500/50 p-3 bg-background/50">
+              <div className="flex items-center gap-2 mb-1">
+                <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: players[1].color }} />
+                <p className="font-pixel text-[10px] text-foreground/60">P2 (↑↓←→)</p>
+              </div>
+              <p className="font-minecraft text-lg text-purple-400">{players[1].score}</p>
+              {!players[1].alive && <p className="font-pixel text-[8px] text-destructive">DEAD</p>}
+            </div>
+
+            <div className="border border-primary/50 p-3 bg-background/50">
+              <p className="font-pixel text-[10px] text-foreground/60 mb-1">CONTROLS</p>
+              <p className="font-pixel text-[9px] text-primary">P1: W A S D</p>
+              <p className="font-pixel text-[9px] text-purple-400">P2: ↑ ↓ ← →</p>
+              <p className="font-pixel text-[9px] text-foreground/80 mt-1">P: Pause</p>
+            </div>
+
+            {!gameStarted || gameOver ? (
+              <button onClick={() => startGame('2p')} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
+                {gameOver ? 'PLAY AGAIN' : 'START'}
+              </button>
+            ) : (
+              <button onClick={() => setIsPaused(p => !p)} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all">
+                {isPaused ? 'RESUME' : 'PAUSE'}
+              </button>
+            )}
+          </div>
+        )}
+
         {isMobile && (
           <>
             <MobileControlsSpacer />
@@ -338,7 +640,7 @@ const Snake = () => {
                     <div />
                   </div>
                 ) : (
-                  <button onClick={startGame} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
+                  <button onClick={() => startGame('1p')} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
                     {gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}
                   </button>
                 )}
@@ -348,18 +650,32 @@ const Snake = () => {
         )}
       </div>
 
-      {/* Desktop Overlay */}
+      {/* Overlays */}
       {!isMobile && (gameOver || isPaused || gameComplete) && gameStarted && (
         <div className="fixed inset-0 bg-background/80 flex items-center justify-center z-50">
           <div className="border-2 border-primary box-glow-strong p-6 bg-background text-center">
-            <h2 className="font-minecraft text-2xl text-primary text-glow-strong mb-3">{gameComplete ? 'GAME COMPLETE!' : gameOver ? 'GAME OVER' : 'PAUSED'}</h2>
-            {(gameOver || gameComplete) && (
+            <h2 className="font-minecraft text-2xl text-primary text-glow-strong mb-3">
+              {gameMode === '2p' && gameOver ? winner : gameComplete ? 'GAME COMPLETE!' : gameOver ? 'GAME OVER' : 'PAUSED'}
+            </h2>
+            {gameMode === '1p' && (gameOver || gameComplete) && (
               <>
                 <p className="font-pixel text-sm text-foreground/80 mb-1">Final Score: {score.toLocaleString()}</p>
                 <p className="font-pixel text-xs text-foreground/60 mb-3">Length: {snake.length}</p>
               </>
             )}
-            <button onClick={(gameOver || gameComplete) ? startGame : () => setIsPaused(false)} className="font-minecraft text-sm py-2 px-6 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
+            {gameMode === '2p' && gameOver && (
+              <div className="flex gap-4 justify-center mb-3">
+                <div>
+                  <p className="font-pixel text-[10px] text-foreground/60">P1 Score</p>
+                  <p className="font-minecraft text-lg text-primary">{players[0].score}</p>
+                </div>
+                <div>
+                  <p className="font-pixel text-[10px] text-foreground/60">P2 Score</p>
+                  <p className="font-minecraft text-lg text-purple-400">{players[1].score}</p>
+                </div>
+              </div>
+            )}
+            <button onClick={(gameOver || gameComplete) ? () => startGame(gameMode!) : () => setIsPaused(false)} className="font-minecraft text-sm py-2 px-6 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
               {(gameOver || gameComplete) ? 'PLAY AGAIN' : 'RESUME'}
             </button>
           </div>
@@ -369,4 +685,4 @@ const Snake = () => {
   );
 };
 
-export default Snake;
+export default Snake;