initial commit

Signed-off-by: ale <ale@manalejandro.com>

app/api/socket/route.ts

@@ -0,0 +1,227 @@
+import { NextRequest } from 'next/server';
+import { Server as SocketIOServer } from 'socket.io';
+import { Server as HTTPServer } from 'http';
+import { GameState, Player, GameMove } from '@/lib/types';
+import { dealTiles, findStartingPlayer, executeMove, canPlayerMove, isGameBlocked, determineBlockedWinner } from '@/lib/gameLogic';
+
+// Store active game rooms
+const gameRooms = new Map<string, GameState>();
+const playerRooms = new Map<string, string>();
+
+// Generate unique room ID
+function generateRoomId(): string {
+  return Math.random().toString(36).substring(2, 8).toUpperCase();
+}
+
+// Create a new game state
+function createGameState(roomId: string): GameState {
+  return {
+    id: roomId,
+    players: [],
+    currentPlayerIndex: 0,
+    board: [],
+    boneyard: [],
+    boardEnds: [],
+    winner: null,
+    isGameOver: false,
+    turnsPassed: 0,
+    gameMode: 'waiting',
+  };
+}
+
+// Initialize game when all players are ready
+function startGame(roomId: string): GameState {
+  const gameState = gameRooms.get(roomId);
+  if (!gameState) throw new Error('Game not found');
+
+  const { playerTiles, boneyard } = dealTiles(gameState.players.length);
+  
+  const updatedPlayers = gameState.players.map((player, index) => ({
+    ...player,
+    tiles: playerTiles[index],
+    score: 0,
+  }));
+
+  const startingPlayerIndex = findStartingPlayer(updatedPlayers);
+
+  const newGameState: GameState = {
+    ...gameState,
+    players: updatedPlayers,
+    currentPlayerIndex: startingPlayerIndex,
+    boneyard,
+    gameMode: 'playing',
+  };
+
+  gameRooms.set(roomId, newGameState);
+  return newGameState;
+}
+
+export async function GET(req: NextRequest) {
+  // @ts-ignore
+  const res = req.res || req.nextUrl;
+  
+  if (!(res as any).socket?.server?.io) {
+    console.log('Initializing Socket.IO server...');
+    
+    const httpServer: HTTPServer = (res as any).socket.server;
+    const io = new SocketIOServer(httpServer, {
+      path: '/api/socket',
+      addTrailingSlash: false,
+      cors: {
+        origin: '*',
+        methods: ['GET', 'POST'],
+      },
+    });
+
+    io.on('connection', (socket) => {
+      console.log('Client connected:', socket.id);
+
+      socket.on('create-room', () => {
+        const roomId = generateRoomId();
+        const gameState = createGameState(roomId);
+        gameRooms.set(roomId, gameState);
+        
+        socket.join(roomId);
+        socket.emit('room-created', roomId);
+        console.log('Room created:', roomId);
+      });
+
+      socket.on('join-room', (roomId: string, playerName: string) => {
+        const gameState = gameRooms.get(roomId);
+        
+        if (!gameState) {
+          socket.emit('error', 'Room not found');
+          return;
+        }
+
+        if (gameState.players.length >= 4) {
+          socket.emit('error', 'Room is full');
+          return;
+        }
+
+        if (gameState.gameMode !== 'waiting') {
+          socket.emit('error', 'Game already started');
+          return;
+        }
+
+        const player: Player = {
+          id: socket.id,
+          name: playerName,
+          tiles: [],
+          score: 0,
+          isAI: false,
+          isReady: false,
+        };
+
+        gameState.players.push(player);
+        playerRooms.set(socket.id, roomId);
+        
+        socket.join(roomId);
+        socket.emit('room-joined', gameState, socket.id);
+        socket.to(roomId).emit('player-joined', player);
+        
+        console.log(`Player ${playerName} joined room ${roomId}`);
+      });
+
+      socket.on('player-ready', (roomId: string) => {
+        const gameState = gameRooms.get(roomId);
+        if (!gameState) return;
+
+        const player = gameState.players.find(p => p.id === socket.id);
+        if (!player) return;
+
+        player.isReady = true;
+        gameRooms.set(roomId, gameState);
+
+        const allReady = gameState.players.length >= 2 && gameState.players.every(p => p.isReady);
+        
+        if (allReady) {
+          const startedGame = startGame(roomId);
+          io.to(roomId).emit('game-started', startedGame);
+          console.log('Game started in room:', roomId);
+        } else {
+          io.to(roomId).emit('game-state-updated', gameState);
+        }
+      });
+
+      socket.on('make-move', (roomId: string, move: GameMove) => {
+        const gameState = gameRooms.get(roomId);
+        if (!gameState) return;
+
+        const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+        
+        if (currentPlayer.id !== socket.id) {
+          socket.emit('invalid-move', 'Not your turn');
+          return;
+        }
+
+        try {
+          const newGameState = executeMove(gameState, move);
+          
+          if (isGameBlocked(newGameState)) {
+            const winnerId = determineBlockedWinner(newGameState);
+            newGameState.winner = winnerId;
+            newGameState.isGameOver = true;
+            newGameState.gameMode = 'finished';
+          }
+
+          gameRooms.set(roomId, newGameState);
+          io.to(roomId).emit('game-state-updated', newGameState);
+        } catch (error) {
+          socket.emit('invalid-move', 'Invalid move');
+        }
+      });
+
+      socket.on('draw-tile', (roomId: string) => {
+        const gameState = gameRooms.get(roomId);
+        if (!gameState) return;
+
+        const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+        
+        if (currentPlayer.id !== socket.id) {
+          socket.emit('invalid-move', 'Not your turn');
+          return;
+        }
+
+        if (gameState.boneyard.length === 0) {
+          socket.emit('invalid-move', 'No tiles left to draw');
+          return;
+        }
+
+        const drawnTile = gameState.boneyard.pop()!;
+        currentPlayer.tiles.push(drawnTile);
+
+        if (!canPlayerMove(currentPlayer, gameState.boardEnds)) {
+          gameState.currentPlayerIndex = (gameState.currentPlayerIndex + 1) % gameState.players.length;
+        }
+
+        gameRooms.set(roomId, gameState);
+        io.to(roomId).emit('game-state-updated', gameState);
+      });
+
+      socket.on('disconnect', () => {
+        const roomId = playerRooms.get(socket.id);
+        if (roomId) {
+          const gameState = gameRooms.get(roomId);
+          if (gameState) {
+            gameState.players = gameState.players.filter(p => p.id !== socket.id);
+            playerRooms.delete(socket.id);
+
+            if (gameState.players.length === 0) {
+              gameRooms.delete(roomId);
+            } else {
+              gameRooms.set(roomId, gameState);
+              io.to(roomId).emit('player-left', socket.id);
+              io.to(roomId).emit('game-state-updated', gameState);
+            }
+          }
+        }
+        console.log('Client disconnected:', socket.id);
+      });
+    });
+
+    (res as any).socket.server.io = io;
+  }
+
+  return new Response('Socket.IO server initialized', { status: 200 });
+}

app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Dominoes Online - Multiplayer Game",
+  description: "Play dominoes online with friends or against AI. Modern, real-time multiplayer domino game built with Next.js.",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,65 +1,367 @@
-import Image from "next/image";
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useGameStore } from '@/lib/store';
+import { Lobby } from '@/components/Lobby';
+import { WaitingRoom } from '@/components/WaitingRoom';
+import { GameBoard } from '@/components/GameBoard';
+import { PlayerHand } from '@/components/PlayerHand';
+import { GameOver } from '@/components/GameOver';
+import { getValidMoves } from '@/lib/gameLogic';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
+  const {
+    gameState,
+    currentPlayerId,
+    roomId,
+    error,
+    selectedTile,
+    initSocket,
+    createRoom,
+    joinRoom,
+    setPlayerReady,
+    makeMove,
+    drawTile,
+    selectTile,
+    leaveRoom,
+    startAIGame,
+    setError,
+  } = useGameStore();
+
+  const [showRules, setShowRules] = useState(false);
+
+  useEffect(() => {
+    initSocket();
+  }, [initSocket]);
+
+  const handleCreateRoom = (playerName: string) => {
+    createRoom(playerName);
+  };
+
+  const handleJoinRoom = (roomId: string, playerName: string) => {
+    joinRoom(roomId, playerName);
+  };
+
+  const handleStartAI = (playerName: string) => {
+    startAIGame(playerName);
+  };
+
+  const handleTileClick = (tileId: string) => {
+    const tile = gameState?.players
+      .find(p => p.id === currentPlayerId)
+      ?.tiles.find(t => t.id === tileId);
+    
+    if (tile) {
+      selectTile(selectedTile?.id === tileId ? null : tile);
+    }
+  };
+
+  const handlePlaceTile = (side: 'left' | 'right') => {
+    if (!selectedTile || !currentPlayerId || !gameState) return;
+
+    console.log('handlePlaceTile called', { 
+      selectedTile, 
+      side, 
+      currentPlayerId,
+      boardEnds: gameState.boardEnds,
+      validMoves 
+    });
+
+    // Verificar si el movimiento es válido
+    const isValid = validMoves.some(m => 
+      m.tile.id === selectedTile.id && 
+      (gameState.boardEnds.length === 0 || m.side === side || validMoves.filter(vm => vm.tile.id === selectedTile.id).length > 1)
+    );
+
+    if (!isValid && gameState.boardEnds.length > 0) {
+      console.error('Invalid move: tile cannot be placed on this side', { selectedTile, side, validMoves });
+      setError(`Cannot place tile ${selectedTile.left}-${selectedTile.right} on the ${side} side. It doesn't match the board end.`);
+      return;
+    }
+
+    console.log('Making move:', { playerId: currentPlayerId, tile: selectedTile, side });
+    makeMove({
+      playerId: currentPlayerId,
+      tile: selectedTile,
+      side,
+    });
+  };
+
+  const handlePass = () => {
+    if (!currentPlayerId || !gameState) return;
+
+    const currentPlayer = gameState.players.find(p => p.id === currentPlayerId);
+    if (!currentPlayer) return;
+
+    makeMove({
+      playerId: currentPlayerId,
+      tile: currentPlayer.tiles[0],
+      side: 'left',
+      pass: true,
+    });
+  };
+
+  const handlePlayAgain = () => {
+    leaveRoom();
+  };
+
+  // Show lobby if no game state or game mode is waiting
+  if (!gameState || gameState.gameMode === 'waiting') {
+    if (roomId && gameState) {
+      return (
+        <WaitingRoom
+          roomId={roomId}
+          players={gameState.players}
+          currentPlayerId={currentPlayerId}
+          onReady={setPlayerReady}
+          onLeave={leaveRoom}
         />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+      );
+    }
+
+    return (
+      <Lobby
+        onCreateRoom={handleCreateRoom}
+        onJoinRoom={handleJoinRoom}
+        onStartAI={handleStartAI}
+        roomId={roomId}
+      />
+    );
+  }
+
+  const currentPlayer = gameState.players.find(p => p.id === currentPlayerId);
+  const isMyTurn = gameState.players[gameState.currentPlayerIndex]?.id === currentPlayerId;
+  const validMoves = currentPlayer ? getValidMoves(currentPlayer, gameState.boardEnds) : [];
+  const validTileIds = currentPlayer && gameState.boardEnds.length === 0 
+    ? currentPlayer.tiles.map(t => t.id)
+    : Array.from(new Set(validMoves.map(m => m.tile.id)));
+  const canDraw = gameState.boneyard.length > 0 && validMoves.length === 0;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-100 to-slate-200">
+      {/* Header */}
+      <header className="bg-white shadow-md">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              Dominoes
+            </h1>
+            {roomId && (
+              <div className="hidden sm:block bg-gradient-to-r from-blue-500 to-purple-500 text-white px-4 py-1 rounded-full text-sm font-mono">
+                {roomId}
+              </div>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setShowRules(!showRules)}
+              className="text-gray-600 hover:text-gray-900 text-sm font-medium"
             >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              Rules
+            </button>
+            <button
+              onClick={leaveRoom}
+              className="bg-red-500 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-red-600 transition-colors"
             >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+              Leave Game
+            </button>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+      </header>
+
+      {/* Error notification */}
+      <AnimatePresence>
+        {error && (
+          <motion.div
+            initial={{ y: -100, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -100, opacity: 0 }}
+            className="fixed top-20 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            {error}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Rules modal */}
+      <AnimatePresence>
+        {showRules && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
+            onClick={() => setShowRules(false)}
           >
-            Documentation
-          </a>
+            <motion.div
+              initial={{ scale: 0.9 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0.9 }}
+              className="bg-white rounded-lg p-6 max-w-md"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h3 className="text-xl font-bold mb-4">How to Play</h3>
+              <ul className="space-y-2 text-sm text-gray-700">
+                <li>• Click on a tile to select it</li>
+                <li>• Click &quot;Place Left&quot; or &quot;Place Right&quot; to place it</li>
+                <li>• Tiles must match the numbers on the board ends</li>
+                <li>• Draw a tile if you can&apos;t play</li>
+                <li>• First player to use all tiles wins!</li>
+                <li>• Game ends when blocked (no one can move)</li>
+              </ul>
+              <button
+                onClick={() => setShowRules(false)}
+                className="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg"
+              >
+                Close
+              </button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Main game area */}
+      <div className="max-w-7xl mx-auto px-4 py-6">
+        <div className="grid lg:grid-cols-[1fr_300px] gap-6">
+          {/* Left side - Game board and controls */}
+          <div className="space-y-4">
+            {/* Game info */}
+            <div className="bg-white rounded-lg shadow-md p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-sm text-gray-600">Current Turn</div>
+                  <div className="text-xl font-bold text-gray-800">
+                    {gameState.players[gameState.currentPlayerIndex]?.name}
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="text-sm text-gray-600">Boneyard</div>
+                  <div className="text-xl font-bold text-gray-800">
+                    {gameState.boneyard.length} tiles
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Game board */}
+            <GameBoard placedTiles={gameState.board} />
+
+            {/* Controls */}
+            {isMyTurn && currentPlayer && (
+              <motion.div
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                className="bg-white rounded-lg shadow-md p-4"
+              >
+                {selectedTile && (
+                  <div className="mb-3 text-center text-sm text-gray-600">
+                    Selected: <span className="font-bold">{selectedTile.left}-{selectedTile.right}</span>
+                    {gameState.boardEnds.length > 0 && (
+                      <div className="mt-1">
+                        Board ends: <span className="font-bold">{gameState.boardEnds[0]?.value}</span> (left) | <span className="font-bold">{gameState.boardEnds[1]?.value}</span> (right)
+                      </div>
+                    )}
+                  </div>
+                )}
+                <div className="flex items-center gap-3 flex-wrap">
+                  <button
+                    onClick={() => handlePlaceTile('left')}
+                    disabled={!selectedTile}
+                    className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-shadow"
+                  >
+                    Place Left
+                  </button>
+                  <button
+                    onClick={() => handlePlaceTile('right')}
+                    disabled={!selectedTile}
+                    className="flex-1 bg-gradient-to-r from-purple-500 to-purple-600 text-white py-3 rounded-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-shadow"
+                  >
+                    Place Right
+                  </button>
+                  {canDraw && (
+                    <button
+                      onClick={drawTile}
+                      className="flex-1 bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-shadow"
+                    >
+                      Draw Tile
+                    </button>
+                  )}
+                  {validMoves.length === 0 && !canDraw && (
+                    <button
+                      onClick={handlePass}
+                      className="flex-1 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-shadow"
+                    >
+                      Pass Turn
+                    </button>
+                  )}
+                </div>
+              </motion.div>
+            )}
+
+            {/* Current player's hand */}
+            {currentPlayer && (
+              <PlayerHand
+                player={currentPlayer}
+                isCurrentPlayer={isMyTurn}
+                selectedTileId={selectedTile?.id || null}
+                onTileClick={handleTileClick}
+                validTileIds={validTileIds}
+              />
+            )}
+          </div>
+
+          {/* Right side - Other players */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold text-gray-700">Players</h3>
+            {gameState.players
+              .filter(p => p.id !== currentPlayerId)
+              .map(player => (
+                <div key={player.id} className="bg-white rounded-lg shadow-md p-4">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-white ${
+                      player.isAI ? 'bg-purple-500' : 'bg-blue-500'
+                    }`}>
+                      {player.name.charAt(0).toUpperCase()}
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-semibold text-gray-800">{player.name}</div>
+                      <div className="text-xs text-gray-500">
+                        {player.tiles.length} tiles
+                        {player.isAI && ' (AI)'}
+                      </div>
+                    </div>
+                    {gameState.players[gameState.currentPlayerIndex]?.id === player.id && (
+                      <div className="bg-green-500 text-white px-2 py-1 rounded text-xs font-semibold">
+                        Turn
+                      </div>
+                    )}
+                  </div>
+                  {/* Show tile backs */}
+                  <div className="flex flex-wrap gap-1">
+                    {player.tiles.map((_, i) => (
+                      <div
+                        key={i}
+                        className="w-12 h-6 bg-gradient-to-br from-gray-700 to-gray-900 rounded border border-gray-600"
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+          </div>
         </div>
-      </main>
+      </div>
+
+      {/* Game over modal */}
+      {gameState.isGameOver && (
+        <GameOver
+          winner={gameState.players.find(p => p.id === gameState.winner) || null}
+          players={gameState.players}
+          onPlayAgain={handlePlayAgain}
+          onLeave={leaveRoom}
+        />
+      )}
     </div>
   );
 }