Spaces:

Dommos
/

parch

Running

App Files Files Community

Dommos commited on Apr 11, 2025

Commit

a5bdb47

verified ·

1 Parent(s): 93863ff

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1499 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Parch
-emoji: 📊
-colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: parch
+emoji: 🐳
+colorFrom: green
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1499 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Parchís Royale | El juego de mesa clásico reinventado</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎲</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+        }
+        .board-4 {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><path d="M300,0 L600,300 L300,600 L0,300 Z" fill="%23FF5252"/><path d="M300,0 L600,300 L300,600" fill="%234CAF50"/><path d="M300,0 L0,300 L300,600" fill="%23FFC107"/><path d="M300,0 L600,300 L0,300 Z" fill="%232196F3"/><circle cx="300" cy="300" r="100" fill="white"/></svg>');
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .board-6 {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><path d="M300,0 L600,300 L300,600 L0,300 Z" fill="%23FF5252"/><path d="M300,0 L520,150 L450,300 L520,450 L300,600 L80,450 L150,300 L80,150 Z" fill="%234CAF50"/><path d="M300,0 L520,150 L600,300 L520,450 L300,600" fill="%23FFC107"/><path d="M300,0 L80,150 L0,300 L80,450 L300,600" fill="%232196F3"/><path d="M300,0 L520,150 L450,300 L600,300 L520,450 L300,600" fill="%239C27B0"/><path d="M300,0 L80,150 L150,300 L0,300 L80,450 L300,600" fill="%23FF9800"/><circle cx="300" cy="300" r="100" fill="white"/></svg>');
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .piece {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        }
+        .piece:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+        }
+        .dice {
+            width: 60px;
+            height: 60px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            font-weight: bold;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        .dice:hover {
+            transform: scale(1.05);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+        }
+        .home-base {
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+        }
+        .safe-spot {
+            border: 3px dashed white;
+            box-sizing: border-box;
+        }
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+        .modal-content {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+            max-width: 90%;
+            max-height: 90%;
+            overflow-y: auto;
+        }
+        .player-color-selector {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            margin: 0 5px;
+            border: 2px solid transparent;
+            transition: all 0.2s ease;
+        }
+        .player-color-selector:hover, .player-color-selector.selected {
+            transform: scale(1.1);
+            border-color: white;
+        }
+        .glow {
+            animation: glow 1.5s infinite alternate;
+        }
+        @keyframes glow {
+            from {
+                box-shadow: 0 0 5px -5px currentColor;
+            }
+            to {
+                box-shadow: 0 0 10px 5px currentColor;
+            }
+        }
+        .path-cell {
+            position: relative;
+        }
+        .path-cell::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 60%;
+            height: 60%;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        .winner-crown {
+            position: absolute;
+            top: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 24px;
+            color: gold;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+        }
+    </style>
+</head>
+<body class="text-gray-800">
+    <!-- Pantalla de inicio -->
+    <div id="start-screen" class="fixed inset-0 flex flex-col items-center justify-center p-4 z-50 bg-gradient-to-br from-blue-500 to-purple-600 text-white">
+        <div class="text-center mb-8">
+            <h1 class="text-5xl md:text-6xl font-bold mb-2 flex items-center justify-center">
+                <span class="mr-3">🎲</span>
+                <span>Parchís</span>
+                <span class="text-yellow-300 ml-2">Royale</span>
+            </h1>
+            <p class="text-xl md:text-2xl opacity-90">El clásico juego de mesa reinventado</p>
+        </div>
+        <div class="w-full max-w-md bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 shadow-xl">
+            <h2 class="text-2xl font-semibold mb-4 text-center">Crear o unirse a una partida</h2>
+            <div class="flex space-x-4 mb-6">
+                <button id="create-game-btn" class="flex-1 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-105 flex items-center justify-center">
+                    <i class="fas fa-plus-circle mr-2"></i> Crear
+                </button>
+                <button id="join-game-btn" class="flex-1 bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-105 flex items-center justify-center">
+                    <i class="fas fa-sign-in-alt mr-2"></i> Unirse
+                </button>
+            </div>
+            <div class="text-center text-sm opacity-80">
+                <p>Juega con amigos o contra la IA</p>
+                <p class="mt-1">Diversión garantizada para 2-6 jugadores</p>
+            </div>
+        </div>
+        <button id="rules-btn" class="mt-8 text-white bg-transparent border border-white hover:bg-white hover:bg-opacity-20 px-4 py-2 rounded-lg transition-all flex items-center">
+            <i class="fas fa-book mr-2"></i> Ver reglas del juego
+        </button>
+    </div>
+    <!-- Modal de creación de partida -->
+    <div id="create-game-modal" class="modal-overlay hidden">
+        <div class="modal-content w-full max-w-md bg-white p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-2xl font-bold text-gray-800">Nueva partida</h3>
+                <button id="close-create-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Nombre del jugador</label>
+                <input type="text" id="player-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Tu nombre">
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Tablero</label>
+                <div class="flex space-x-4">
+                    <div class="flex-1">
+                        <input type="radio" id="board-4" name="board-type" value="4" class="hidden peer" checked>
+                        <label for="board-4" class="block p-4 border border-gray-300 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:ring-2 peer-checked:ring-blue-200">
+                            <div class="flex flex-col items-center">
+                                <div class="w-24 h-24 board-4 mb-2"></div>
+                                <span>4 jugadores</span>
+                            </div>
+                        </label>
+                    </div>
+                    <div class="flex-1">
+                        <input type="radio" id="board-6" name="board-type" value="6" class="hidden peer">
+                        <label for="board-6" class="block p-4 border border-gray-300 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:ring-2 peer-checked:ring-blue-200">
+                            <div class="flex flex-col items-center">
+                                <div class="w-24 h-24 board-6 mb-2"></div>
+                                <span>6 jugadores</span>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Dificultad</label>
+                <select id="game-difficulty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <option value="easy">Fácil (Clásico)</option>
+                    <option value="medium">Medio (Bloqueos)</option>
+                    <option value="hard">Difícil (Poderes especiales)</option>
+                </select>
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Color</label>
+                <div class="flex justify-center">
+                    <div class="player-color-selector bg-red-500 selected" data-color="red"></div>
+                    <div class="player-color-selector bg-blue-500" data-color="blue"></div>
+                    <div class="player-color-selector bg-green-500" data-color="green"></div>
+                    <div class="player-color-selector bg-yellow-400" data-color="yellow"></div>
+                    <div class="player-color-selector bg-purple-500" data-color="purple"></div>
+                    <div class="player-color-selector bg-orange-500" data-color="orange"></div>
+                </div>
+            </div>
+            <button id="start-game-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-105">
+                <i class="fas fa-play mr-2"></i> Crear partida
+            </button>
+        </div>
+    </div>
+    <!-- Modal de código de invitación -->
+    <div id="invite-modal" class="modal-overlay hidden">
+        <div class="modal-content w-full max-w-md bg-white p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-2xl font-bold text-gray-800">Invitar jugadores</h3>
+                <button id="close-invite-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-6 text-center">
+                <p class="text-gray-700 mb-4">Comparte este código con otros jugadores para que se unan a tu partida:</p>
+                <div class="flex items-center justify-center mb-4">
+                    <div id="game-code" class="text-3xl font-bold bg-gray-100 px-6 py-3 rounded-lg tracking-widest">ABCD12</div>
+                    <button id="copy-code" class="ml-2 bg-blue-100 text-blue-600 p-2 rounded-lg hover:bg-blue-200 transition-all">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                </div>
+                <p class="text-sm text-gray-500">O envía este enlace:</p>
+                <div class="flex items-center mt-2">
+                    <input type="text" id="game-link" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none" readonly>
+                    <button id="copy-link" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition-all">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="bg-blue-50 p-4 rounded-lg mb-6">
+                <h4 class="font-medium text-blue-800 mb-2 flex items-center">
+                    <i class="fas fa-users mr-2"></i> Jugadores conectados
+                </h4>
+                <ul id="players-list" class="space-y-2">
+                    <li class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div>
+                        <span>Jugador 1 (Tú)</span>
+                    </li>
+                </ul>
+            </div>
+            <button id="begin-game-btn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                <i class="fas fa-flag-checkered mr-2"></i> Comenzar partida
+            </button>
+        </div>
+    </div>
+    <!-- Modal de unirse a partida -->
+    <div id="join-game-modal" class="modal-overlay hidden">
+        <div class="modal-content w-full max-w-md bg-white p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-2xl font-bold text-gray-800">Unirse a partida</h3>
+                <button id="close-join-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Nombre del jugador</label>
+                <input type="text" id="join-player-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Tu nombre">
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Código de partida</label>
+                <input type="text" id="join-game-code" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 uppercase" placeholder="ABCD12" maxlength="6">
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 font-medium mb-2">Color</label>
+                <div class="flex justify-center">
+                    <div class="player-color-selector bg-red-500" data-color="red"></div>
+                    <div class="player-color-selector bg-blue-500 selected" data-color="blue"></div>
+                    <div class="player-color-selector bg-green-500" data-color="green"></div>
+                    <div class="player-color-selector bg-yellow-400" data-color="yellow"></div>
+                    <div class="player-color-selector bg-purple-500" data-color="purple"></div>
+                    <div class="player-color-selector bg-orange-500" data-color="orange"></div>
+                </div>
+            </div>
+            <button id="confirm-join-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-105">
+                <i class="fas fa-sign-in-alt mr-2"></i> Unirse a partida
+            </button>
+        </div>
+    </div>
+    <!-- Modal de reglas -->
+    <div id="rules-modal" class="modal-overlay hidden">
+        <div class="modal-content w-full max-w-2xl bg-white p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-2xl font-bold text-gray-800">Reglas del Parchís</h3>
+                <button id="close-rules-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="prose max-w-none">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h4 class="text-lg font-semibold text-blue-600 mb-2">Objetivo del juego</h4>
+                        <p>El objetivo es llevar todas tus fichas desde tu base de salida hasta la base de llegada en el centro del tablero.</p>
+                        <h4 class="text-lg font-semibold text-blue-600 mt-4 mb-2">Movimiento básico</h4>
+                        <ul class="list-disc pl-5 space-y-1">
+                            <li>Los jugadores tiran un dado por turnos.</li>
+                            <li>Para sacar una ficha de la base, se necesita un 5.</li>
+                            <li>Las fichas avanzan en sentido horario según el número del dado.</li>
+                            <li>Si sacas un 6, puedes volver a tirar.</li>
+                        </ul>
+                        <h4 class="text-lg font-semibold text-blue-600 mt-4 mb-2">Capturas</h4>
+                        <ul class="list-disc pl-5 space-y-1">
+                            <li>Si una ficha cae en una casilla ocupada por una ficha rival, la ficha rival regresa a su base.</li>
+                            <li>No puedes capturar en casillas seguras (marcadas con ⭐).</li>
+                            <li>Si tienes dos fichas en la misma casilla, forman un bloqueo que no puede ser capturado.</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-semibold text-blue-600 mb-2">Zona final</h4>
+                        <ul class="list-disc pl-5 space-y-1">
+                            <li>Cuando una ficha completa una vuelta al tablero, entra en su pasillo de color.</li>
+                            <li>Para entrar en la casilla final, el dado debe mostrar el número exacto necesario.</li>
+                            <li>La primera persona en meter todas sus fichas gana.</li>
+                        </ul>
+                        <h4 class="text-lg font-semibold text-blue-600 mt-4 mb-2">Variantes especiales</h4>
+                        <ul class="list-disc pl-5 space-y-1">
+                            <li><strong>Modo bloqueos:</strong> Los bloqueos duran solo 2 turnos.</li>
+                            <li><strong>Poderes especiales:</strong> Cada jugador tiene habilidades únicas.</li>
+                            <li><strong>Super 6:</strong> Tres 6 seguidos hacen que tu ficha regrese a la base.</li>
+                        </ul>
+                        <h4 class="text-lg font-semibold text-blue-600 mt-4 mb-2">Consejos</h4>
+                        <ul class="list-disc pl-5 space-y-1">
+                            <li>Intenta mantener al menos una ficha en juego.</li>
+                            <li>Usa los bloqueos estratégicamente para proteger tus fichas.</li>
+                            <li>No te apresures a meter todas tus fichas al pasillo final.</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="mt-6 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
+                    <h4 class="text-lg font-semibold text-yellow-700 mb-2 flex items-center">
+                        <i class="fas fa-lightbulb mr-2"></i> Dificultades especiales
+                    </h4>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="bg-white p-3 rounded-lg shadow-sm">
+                            <h5 class="font-medium text-green-600">Fácil</h5>
+                            <p class="text-sm">Juego clásico sin modificaciones.</p>
+                        </div>
+                        <div class="bg-white p-3 rounded-lg shadow-sm">
+                            <h5 class="font-medium text-yellow-600">Medio</h5>
+                            <p class="text-sm">Bloqueos temporales y casillas especiales.</p>
+                        </div>
+                        <div class="bg-white p-3 rounded-lg shadow-sm">
+                            <h5 class="font-medium text-red-600">Difícil</h5>
+                            <p class="text-sm">Poderes especiales y reglas avanzadas.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-6 flex justify-center">
+                <button id="close-rules-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition-all">
+                    Entendido
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Pantalla de juego -->
+    <div id="game-screen" class="hidden">
+        <!-- Barra superior -->
+        <div class="bg-gray-800 text-white p-3 shadow-md">
+            <div class="container mx-auto flex justify-between items-center">
+                <div class="flex items-center">
+                    <button id="menu-btn" class="mr-4 text-white hover:text-yellow-300 transition-all">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
+                    <h1 class="text-xl font-bold flex items-center">
+                        <span class="mr-2">🎲</span>
+                        <span>Parchís</span>
+                        <span class="text-yellow-300 ml-1">Royale</span>
+                    </h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div id="turn-indicator" class="px-3 py-1 rounded-full bg-blue-600 text-sm font-medium flex items-center">
+                        <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
+                        <span>Tu turno</span>
+                    </div>
+                    <button id="dice-btn" class="dice bg-yellow-400 text-gray-900">🎲</button>
+                </div>
+            </div>
+        </div>
+        <!-- Contenido principal del juego -->
+        <div class="container mx-auto p-4">
+            <div class="flex flex-col lg:flex-row gap-6">
+                <!-- Tablero de juego -->
+                <div class="flex-1 flex justify-center">
+                    <div id="game-board" class="relative w-full max-w-2xl aspect-square board-4">
+                        <!-- Las celdas y fichas se generarán dinámicamente con JavaScript -->
+                    </div>
+                </div>
+                <!-- Panel lateral -->
+                <div class="w-full lg:w-80 space-y-4">
+                    <!-- Información del jugador actual -->
+                    <div class="bg-white rounded-xl shadow-md p-4">
+                        <h3 class="font-bold text-lg mb-2 flex items-center">
+                            <i class="fas fa-user mr-2"></i> Tu jugador
+                        </h3>
+                        <div class="flex items-center mb-3">
+                            <div id="current-player-color" class="w-5 h-5 rounded-full mr-2"></div>
+                            <span id="current-player-name" class="font-medium">Jugador 1</span>
+                        </div>
+                        <div class="grid grid-cols-2 gap-2">
+                            <div class="bg-gray-100 p-2 rounded-lg">
+                                <p class="text-xs text-gray-500">Fichas en juego</p>
+                                <p id="pieces-in-play" class="font-bold">2</p>
+                            </div>
+                            <div class="bg-gray-100 p-2 rounded-lg">
+                                <p class="text-xs text-gray-500">Fichas en meta</p>
+                                <p id="pieces-in-home" class="font-bold">0</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Historial de dados -->
+                    <div class="bg-white rounded-xl shadow-md p-4">
+                        <h3 class="font-bold text-lg mb-3 flex items-center">
+                            <i class="fas fa-history mr-2"></i> Historial
+                        </h3>
+                        <div id="dice-history" class="space-y-2 max-h-40 overflow-y-auto">
+                            <!-- Los resultados de dados se agregarán aquí -->
+                        </div>
+                    </div>
+                    <!-- Lista de jugadores -->
+                    <div class="bg-white rounded-xl shadow-md p-4">
+                        <h3 class="font-bold text-lg mb-3 flex items-center">
+                            <i class="fas fa-users mr-2"></i> Jugadores
+                        </h3>
+                        <ul id="players-game-list" class="space-y-2">
+                            <!-- Los jugadores se listarán aquí -->
+                        </ul>
+                    </div>
+                    <!-- Chat (opcional) -->
+                    <div class="bg-white rounded-xl shadow-md p-4 hidden">
+                        <h3 class="font-bold text-lg mb-3 flex items-center">
+                            <i class="fas fa-comments mr-2"></i> Chat
+                        </h3>
+                        <div class="bg-gray-50 rounded-lg p-2 h-32 overflow-y-auto mb-2">
+                            <!-- Mensajes de chat -->
+                        </div>
+                        <div class="flex">
+                            <input type="text" placeholder="Escribe un mensaje..." class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 focus:outline-none">
+                            <button class="bg-blue-600 text-white px-4 rounded-r-lg">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal de menú -->
+    <div id="menu-modal" class="modal-overlay hidden">
+        <div class="modal-content w-full max-w-md bg-white p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-2xl font-bold text-gray-800">Menú del juego</h3>
+                <button id="close-menu-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <button class="w-full flex items-center justify-between p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all">
+                    <span class="flex items-center">
+                        <i class="fas fa-book mr-3 text-blue-600"></i>
+                        <span>Reglas del juego</span>
+                    </span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+                <button class="w-full flex items-center justify-between p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all">
+                    <span class="flex items-center">
+                        <i class="fas fa-cog mr-3 text-purple-600"></i>
+                        <span>Ajustes</span>
+                    </span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+                <button class="w-full flex items-center justify-between p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all">
+                    <span class="flex items-center">
+                        <i class="fas fa-users mr-3 text-green-600"></i>
+                        <span>Invitar jugadores</span>
+                    </span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+                <button id="exit-game-btn" class="w-full flex items-center justify-between p-3 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-all mt-6">
+                    <span class="flex items-center">
+                        <i class="fas fa-sign-out-alt mr-3"></i>
+                        <span>Salir del juego</span>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Modal de ganador -->
+    <div id="winner-modal" class="modal-overlay hidden">
+        <div class="modal-content w-full max-w-md bg-white p-8 text-center">
+            <div class="mb-6">
+                <div class="text-6xl mb-4">🏆</div>
+                <h3 class="text-3xl font-bold text-gray-800 mb-2">¡Felicidades!</h3>
+                <p id="winner-name" class="text-xl text-gray-600">Jugador Rojo ha ganado</p>
+            </div>
+            <div class="bg-gray-100 rounded-lg p-4 mb-6">
+                <h4 class="font-medium text-gray-700 mb-2">Resumen de la partida</h4>
+                <div class="grid grid-cols-3 gap-2 text-sm">
+                    <div class="bg-white p-2 rounded">
+                        <p class="text-gray-500">Duración</p>
+                        <p class="font-medium">12 min</p>
+                    </div>
+                    <div class="bg-white p-2 rounded">
+                        <p class="text-gray-500">Turnos</p>
+                        <p class="font-medium">24</p>
+                    </div>
+                    <div class="bg-white p-2 rounded">
+                        <p class="text-gray-500">Dificultad</p>
+                        <p class="font-medium">Media</p>
+                    </div>
+                </div>
+            </div>
+            <div class="flex space-x-4">
+                <button id="rematch-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
+                    <i class="fas fa-redo mr-2"></i> Revancha
+                </button>
+                <button id="new-game-btn" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
+                    <i class="fas fa-plus mr-2"></i> Nueva partida
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Variables del juego
+        let gameState = {
+            players: [],
+            currentPlayerIndex: 0,
+            diceValue: 0,
+            boardType: 4,
+            difficulty: 'medium',
+            gameStarted: false,
+            gameCode: '',
+            pieces: [],
+            paths: {},
+            safeSpots: [],
+            playerColors: ['red', 'blue', 'green', 'yellow', 'purple', 'orange'],
+            colorNames: {
+                red: 'Rojo',
+                blue: 'Azul',
+                green: 'Verde',
+                yellow: 'Amarillo',
+                purple: 'Morado',
+                orange: 'Naranja'
+            },
+            gameHistory: [],
+            playerName: '',
+            playerColor: 'red'
+        };
+        // Elementos del DOM
+        const elements = {
+            startScreen: document.getElementById('start-screen'),
+            gameScreen: document.getElementById('game-screen'),
+            createGameModal: document.getElementById('create-game-modal'),
+            inviteModal: document.getElementById('invite-modal'),
+            joinGameModal: document.getElementById('join-game-modal'),
+            rulesModal: document.getElementById('rules-modal'),
+            menuModal: document.getElementById('menu-modal'),
+            winnerModal: document.getElementById('winner-modal'),
+            gameBoard: document.getElementById('game-board'),
+            playerName: document.getElementById('player-name'),
+            joinPlayerName: document.getElementById('join-player-name'),
+            joinGameCode: document.getElementById('join-game-code'),
+            gameCode: document.getElementById('game-code'),
+            gameLink: document.getElementById('game-link'),
+            playersList: document.getElementById('players-list'),
+            playersGameList: document.getElementById('players-game-list'),
+            diceHistory: document.getElementById('dice-history'),
+            currentPlayerName: document.getElementById('current-player-name'),
+            currentPlayerColor: document.getElementById('current-player-color'),
+            piecesInPlay: document.getElementById('pieces-in-play'),
+            piecesInHome: document.getElementById('pieces-in-home'),
+            turnIndicator: document.getElementById('turn-indicator'),
+            diceBtn: document.getElementById('dice-btn')
+        };
+        // Inicialización del juego
+        document.addEventListener('DOMContentLoaded', () => {
+            // Generar código de juego aleatorio
+            gameState.gameCode = generateGameCode();
+            elements.gameCode.textContent = gameState.gameCode;
+            elements.gameLink.value = `${window.location.href}?game=${gameState.gameCode}`;
+            // Event listeners para botones
+            document.getElementById('create-game-btn').addEventListener('click', showCreateGameModal);
+            document.getElementById('join-game-btn').addEventListener('click', showJoinGameModal);
+            document.getElementById('rules-btn').addEventListener('click', showRulesModal);
+            document.getElementById('close-create-modal').addEventListener('click', hideCreateGameModal);
+            document.getElementById('close-invite-modal').addEventListener('click', hideInviteModal);
+            document.getElementById('close-join-modal').addEventListener('click', hideJoinGameModal);
+            document.getElementById('close-rules-modal').addEventListener('click', hideRulesModal);
+            document.getElementById('close-rules-btn').addEventListener('click', hideRulesModal);
+            document.getElementById('start-game-btn').addEventListener('click', startGameCreation);
+            document.getElementById('begin-game-btn').addEventListener('click', beginGame);
+            document.getElementById('confirm-join-btn').addEventListener('click', joinGame);
+            document.getElementById('copy-code').addEventListener('click', copyGameCode);
+            document.getElementById('copy-link').addEventListener('click', copyGameLink);
+            document.getElementById('menu-btn').addEventListener('click', showMenuModal);
+            document.getElementById('close-menu-modal').addEventListener('click', hideMenuModal);
+            document.getElementById('exit-game-btn').addEventListener('click', exitGame);
+            document.getElementById('rematch-btn').addEventListener('click', startRematch);
+            document.getElementById('new-game-btn').addEventListener('click', newGame);
+            elements.diceBtn.addEventListener('click', rollDice);
+            // Selectores de color
+            document.querySelectorAll('.player-color-selector').forEach(selector => {
+                selector.addEventListener('click', function() {
+                    document.querySelector('.player-color-selector.selected')?.classList.remove('selected');
+                    this.classList.add('selected');
+                    gameState.playerColor = this.dataset.color;
+                });
+            });
+            // Verificar si hay un código de juego en la URL
+            const urlParams = new URLSearchParams(window.location.search);
+            const gameCodeParam = urlParams.get('game');
+            if (gameCodeParam) {
+                showJoinGameModal();
+                document.getElementById('join-game-code').value = gameCodeParam.toUpperCase();
+            }
+        });
+        // Funciones del juego
+        function generateGameCode() {
+            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+            let result = '';
+            for (let i = 0; i < 6; i++) {
+                result += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+            return result;
+        }
+        function showCreateGameModal() {
+            elements.createGameModal.classList.remove('hidden');
+        }
+        function hideCreateGameModal() {
+            elements.createGameModal.classList.add('hidden');
+        }
+        function showInviteModal() {
+            elements.inviteModal.classList.remove('hidden');
+        }
+        function hideInviteModal() {
+            elements.inviteModal.classList.add('hidden');
+        }
+        function showJoinGameModal() {
+            elements.joinGameModal.classList.remove('hidden');
+        }
+        function hideJoinGameModal() {
+            elements.joinGameModal.classList.add('hidden');
+        }
+        function showRulesModal() {
+            elements.rulesModal.classList.remove('hidden');
+        }
+        function hideRulesModal() {
+            elements.rulesModal.classList.add('hidden');
+        }
+        function showMenuModal() {
+            elements.menuModal.classList.remove('hidden');
+        }
+        function hideMenuModal() {
+            elements.menuModal.classList.add('hidden');
+        }
+        function showWinnerModal(winnerName) {
+            document.getElementById('winner-name').textContent = winnerName;
+            elements.winnerModal.classList.remove('hidden');
+        }
+        function hideWinnerModal() {
+            elements.winnerModal.classList.add('hidden');
+        }
+        function copyGameCode() {
+            navigator.clipboard.writeText(gameState.gameCode);
+            showToast('Código copiado al portapapeles');
+        }
+        function copyGameLink() {
+            navigator.clipboard.writeText(elements.gameLink.value);
+            showToast('Enlace copiado al portapapeles');
+        }
+        function showToast(message) {
+            const toast = document.createElement('div');
+            toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in-out';
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.remove();
+            }, 3000);
+        }
+        function startGameCreation() {
+            const playerName = elements.playerName.value.trim();
+            if (!playerName) {
+                showToast('Por favor ingresa tu nombre');
+                return;
+            }
+            gameState.playerName = playerName;
+            gameState.boardType = parseInt(document.querySelector('input[name="board-type"]:checked').value);
+            gameState.difficulty = document.getElementById('game-difficulty').value;
+            // Crear jugador local
+            const player = {
+                id: 'player-' + Date.now(),
+                name: playerName,
+                color: gameState.playerColor,
+                pieces: [],
+                isLocal: true,
+                isHost: true
+            };
+            gameState.players.push(player);
+            updatePlayersList();
+            hideCreateGameModal();
+            showInviteModal();
+        }
+        function updatePlayersList() {
+            elements.playersList.innerHTML = '';
+            elements.playersGameList.innerHTML = '';
+            gameState.players.forEach(player => {
+                // Para el modal de invitación
+                const playerItem = document.createElement('li');
+                playerItem.className = 'flex items-center';
+                playerItem.innerHTML = `
+                    <div class="w-4 h-4 rounded-full bg-${player.color}-500 mr-2"></div>
+                    <span>${player.name} ${player.isHost ? '(Anfitrión)' : ''}</span>
+                `;
+                elements.playersList.appendChild(playerItem);
+                // Para el panel de jugadores en el juego
+                const gamePlayerItem = document.createElement('li');
+                gamePlayerItem.className = 'flex items-center justify-between p-2 bg-gray-50 rounded-lg';
+                gamePlayerItem.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-${player.color}-500 mr-2"></div>
+                        <span class="font-medium">${player.name}</span>
+                    </div>
+                    <div class="text-sm text-gray-500">0/4</div>
+                `;
+                elements.playersGameList.appendChild(gamePlayerItem);
+            });
+            // Habilitar botón de comenzar si hay al menos 2 jugadores
+            document.getElementById('begin-game-btn').disabled = gameState.players.length < 2;
+        }
+        function beginGame() {
+            initializeGame();
+            hideInviteModal();
+            elements.startScreen.classList.add('hidden');
+            elements.gameScreen.classList.remove('hidden');
+        }
+        function joinGame() {
+            const playerName = elements.joinPlayerName.value.trim();
+            const gameCode = elements.joinGameCode.value.trim().toUpperCase();
+            if (!playerName) {
+                showToast('Por favor ingresa tu nombre');
+                return;
+            }
+            if (!gameCode || gameCode.length !== 6) {
+                showToast('Por favor ingresa un código de juego válido');
+                return;
+            }
+            // Simular unirse a una partida existente
+            gameState.playerName = playerName;
+            gameState.gameCode = gameCode;
+            // Crear jugador local (no anfitrión)
+            const player = {
+                id: 'player-' + Date.now(),
+                name: playerName,
+                color: gameState.playerColor,
+                pieces: [],
+                isLocal: true,
+                isHost: false
+            };
+            // Simular que ya hay un anfitrión
+            const hostPlayer = {
+                id: 'player-host',
+                name: 'Anfitrión',
+                color: 'red',
+                pieces: [],
+                isLocal: false,
+                isHost: true
+            };
+            gameState.players = [hostPlayer, player];
+            gameState.boardType = 4; // Asumir tablero de 4 jugadores
+            updatePlayersList();
+            hideJoinGameModal();
+            elements.startScreen.classList.add('hidden');
+            elements.gameScreen.classList.remove('hidden');
+            // Simular que el anfitrión comienza el juego después de unirse
+            setTimeout(() => {
+                initializeGame();
+            }, 1000);
+        }
+        function initializeGame() {
+            gameState.gameStarted = true;
+            gameState.currentPlayerIndex = 0;
+            // Configurar el tablero según el tipo
+            elements.gameBoard.className = `relative w-full max-w-2xl aspect-square board-${gameState.boardType}`;
+            // Crear las rutas del tablero
+            createBoardPaths();
+            // Inicializar fichas para cada jugador
+            initializePieces();
+            // Actualizar la interfaz del jugador actual
+            updateCurrentPlayerUI();
+            // Mostrar mensaje de inicio
+            showToast(`¡Comienza la partida! Es el turno de ${gameState.players[0].name}`);
+        }
+        function createBoardPaths() {
+            // Esto es una simplificación - en un juego real necesitarías coordenadas precisas
+            gameState.paths = {};
+            gameState.safeSpots = [];
+            // Crear rutas básicas para el tablero de 4 jugadores
+            if (gameState.boardType === 4) {
+                // 68 casillas estándar en el parchís de 4 jugadores
+                for (let i = 0; i < 68; i++) {
+                    gameState.paths[`path-${i}`] = {
+                        id: `path-${i}`,
+                        position: i,
+                        pieces: []
+                    };
+                }
+                // 5 casillas seguras por jugador (incluyendo la de salida)
+                for (let i = 0; i < 4; i++) {
+                    for (let j = 0; j < 5; j++) {
+                        gameState.safeSpots.push(`safe-${i}-${j}`);
+                    }
+                }
+            } else {
+                // Tablero de 6 jugadores con más casillas
+                for (let i = 0; i < 96; i++) {
+                    gameState.paths[`path-${i}`] = {
+                        id: `path-${i}`,
+                        position: i,
+                        pieces: []
+                    };
+                }
+                // 5 casillas seguras por jugador
+                for (let i = 0; i < 6; i++) {
+                    for (let j = 0; j < 5; j++) {
+                        gameState.safeSpots.push(`safe-${i}-${j}`);
+                    }
+                }
+            }
+            // Renderizar el tablero
+            renderBoard();
+        }
+        function renderBoard() {
+            elements.gameBoard.innerHTML = '';
+            // Esto es una representación simplificada del tablero
+            // En una implementación real, necesitarías posicionar cada celda con precisión
+            // Bases de inicio
+            gameState.players.forEach((player, index) => {
+                const base = document.createElement('div');
+                base.className = `absolute home-base bg-${player.color}-100 border-4 border-${player.color}-500`;
+                base.style.width = '80px';
+                base.style.height = '80px';
+                // Posicionar las bases según el número de jugadores
+                if (gameState.boardType === 4) {
+                    if (index === 0) {
+                        base.style.top = '10%';
+                        base.style.left = '10%';
+                    } else if (index === 1) {
+                        base.style.top = '10%';
+                        base.style.right = '10%';
+                    } else if (index === 2) {
+                        base.style.bottom = '10%';
+                        base.style.right = '10%';
+                    } else {
+                        base.style.bottom = '10%';
+                        base.style.left = '10%';
+                    }
+                } else {
+                    // Posicionamiento para 6 jugadores
+                    const angle = (index * 60) - 90; // -90 para empezar desde arriba
+                    const radius = 35;
+                    const centerX = 50;
+                    const centerY = 50;
+                    const x = centerX + radius * Math.cos(angle * Math.PI / 180);
+                    const y = centerY + radius * Math.sin(angle * Math.PI / 180);
+                    base.style.left = `${x}%`;
+                    base.style.top = `${y}%`;
+                    base.style.transform = 'translate(-50%, -50%)';
+                }
+                elements.gameBoard.appendChild(base);
+            });
+            // Casillas del camino
+            Object.values(gameState.paths).forEach(path => {
+                const cell = document.createElement('div');
+                cell.className = 'absolute path-cell';
+                cell.id = path.id;
+                cell.dataset.position = path.position;
+                // Posicionamiento simplificado - en realidad necesitarías calcular la posición exacta
+                cell.style.width = '20px';
+                cell.style.height = '20px';
+                cell.style.backgroundColor = '#f0f0f0';
+                cell.style.borderRadius = '50%';
+                cell.style.border = '1px solid #ddd';
+                // Posicionar en un círculo alrededor del tablero
+                const totalCells = gameState.boardType === 4 ? 68 : 96;
+                const angle = (path.position / totalCells) * 2 * Math.PI;
+                const radius = 40;
+                const centerX = 50;
+                const centerY = 50;
+                const x = centerX + radius * Math.cos(angle);
+                const y = centerY + radius * Math.sin(angle);
+                cell.style.left = `${x}%`;
+                cell.style.top = `${y}%`;
+                cell.style.transform = 'translate(-50%, -50%)';
+                elements.gameBoard.appendChild(cell);
+            });
+            // Casillas seguras (simplificado)
+            gameState.safeSpots.forEach(spot => {
+                const safeCell = document.createElement('div');
+                safeCell.className = 'absolute safe-spot';
+                safeCell.id = spot;
+                safeCell.style.width = '25px';
+                safeCell.style.height = '25px';
+                safeCell.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
+                safeCell.style.borderRadius = '50%';
+                // Posicionamiento simplificado
+                const parts = spot.split('-');
+                const playerIndex = parseInt(parts[1]);
+                const spotIndex = parseInt(parts[2]);
+                if (gameState.boardType === 4) {
+                    if (playerIndex === 0) {
+                        safeCell.style.left = `${20 + spotIndex * 5}%`;
+                        safeCell.style.top = '30%';
+                    } else if (playerIndex === 1) {
+                        safeCell.style.right = `${20 + spotIndex * 5}%`;
+                        safeCell.style.top = '30%';
+                    } else if (playerIndex === 2) {
+                        safeCell.style.right = `${20 + spotIndex * 5}%`;
+                        safeCell.style.bottom = '30%';
+                    } else {
+                        safeCell.style.left = `${20 + spotIndex * 5}%`;
+                        safeCell.style.bottom = '30%';
+                    }
+                } else {
+                    // Posicionamiento para 6 jugadores
+                    const angle = (playerIndex * 60) - 90; // -90 para empezar desde arriba
+                    const radius = 30 + spotIndex * 5;
+                    const centerX = 50;
+                    const centerY = 50;
+                    const x = centerX + radius * Math.cos(angle * Math.PI / 180);
+                    const y = centerY + radius * Math.sin(angle * Math.PI / 180);
+                    safeCell.style.left = `${x}%`;
+                    safeCell.style.top = `${y}%`;
+                    safeCell.style.transform = 'translate(-50%, -50%)';
+                }
+                elements.gameBoard.appendChild(safeCell);
+            });
+            // Zona central (meta)
+            const center = document.createElement('div');
+            center.className = 'absolute home-base bg-white';
+            center.style.width = '100px';
+            center.style.height = '100px';
+            center.style.left = '50%';
+            center.style.top = '50%';
+            center.style.transform = 'translate(-50%, -50%)';
+            center.style.boxShadow = 'inset 0 0 15px rgba(0,0,0,0.2)';
+            elements.gameBoard.appendChild(center);
+        }
+        function initializePieces() {
+            gameState.pieces = [];
+            gameState.players.forEach(player => {
+                for (let i = 0; i < 4; i++) {
+                    const piece = {
+                        id: `piece-${player.id}-${i}`,
+                        playerId: player.id,
+                        color: player.color,
+                        position: 'home', // 'home', 'path-X', 'safe-X-Y', 'final'
+                        pathPosition: null,
+                        number: i + 1
+                    };
+                    gameState.pieces.push(piece);
+                    player.pieces.push(piece);
+                    // Renderizar la ficha
+                    renderPiece(piece);
+                }
+            });
+        }
+        function renderPiece(piece) {
+            // Eliminar cualquier representación previa de la ficha
+            const existingPiece = document.getElementById(`piece-${piece.id}`);
+            if (existingPiece) existingPiece.remove();
+            const pieceElement = document.createElement('div');
+            pieceElement.id = `piece-${piece.id}`;
+            pieceElement.className = `absolute piece bg-${piece.color}-500`;
+            pieceElement.textContent = piece.number;
+            pieceElement.dataset.pieceId = piece.id;
+            // Posicionar la ficha según su estado actual
+            if (piece.position === 'home') {
+                const player = gameState.players.find(p => p.id === piece.playerId);
+                const playerIndex = gameState.players.indexOf(player);
+                // Encontrar la base del jugador
+                const base = document.querySelectorAll('.home-base')[playerIndex];
+                const baseRect = base.getBoundingClientRect();
+                const boardRect = elements.gameBoard.getBoundingClientRect();
+                // Calcular posición relativa dentro de la base
+                const offsetX = (piece.number % 2 === 0) ? 15 : -15;
+                const offsetY = (piece.number > 2) ? 15 : -15;
+                pieceElement.style.left = `${((baseRect.left - boardRect.left) / boardRect.width * 100) + offsetX}%`;
+                pieceElement.style.top = `${((baseRect.top - boardRect.top) / boardRect.height * 100) + offsetY}%`;
+            } else if (piece.position.startsWith('path')) {
+                const pathId = piece.position;
+                const pathElement = document.getElementById(pathId);
+                if (pathElement) {
+                    const pathRect = pathElement.getBoundingClientRect();
+                    const boardRect = elements.gameBoard.getBoundingClientRect();
+                    pieceElement.style.left = `${(pathRect.left - boardRect.left + pathRect.width / 2) / boardRect.width * 100}%`;
+                    pieceElement.style.top = `${(pathRect.top - boardRect.top + pathRect.height / 2) / boardRect.height * 100}%`;
+                }
+            } else if (piece.position.startsWith('safe')) {
+                const safeSpotId = piece.position;
+                const safeSpotElement = document.getElementById(safeSpotId);
+                if (safeSpotElement) {
+                    const safeRect = safeSpotElement.getBoundingClientRect();
+                    const boardRect = elements.gameBoard.getBoundingClientRect();
+                    pieceElement.style.left = `${(safeRect.left - boardRect.left + safeRect.width / 2) / boardRect.width * 100}%`;
+                    pieceElement.style.top = `${(safeRect.top - boardRect.top + safeRect.height / 2) / boardRect.height * 100}%`;
+                }
+            } else if (piece.position === 'final') {
+                // Posicionar en la zona central
+                pieceElement.style.left = '50%';
+                pieceElement.style.top = '50%';
+                pieceElement.style.transform = 'translate(-50%, -50%)';
+                // Agregar corona si es la última ficha
+                if (piece.number === 4) {
+                    const crown = document.createElement('div');
+                    crown.className = 'winner-crown';
+                    crown.innerHTML = '👑';
+                    pieceElement.appendChild(crown);
+                }
+            }
+            // Agregar evento de clic si es la ficha del jugador actual
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            if (currentPlayer.isLocal && currentPlayer.id === piece.playerId) {
+                pieceElement.classList.add('cursor-pointer', 'hover:scale-110');
+                pieceElement.addEventListener('click', () => selectPiece(piece));
+            }
+            elements.gameBoard.appendChild(pieceElement);
+        }
+        function updateCurrentPlayerUI() {
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            // Actualizar panel del jugador
+            elements.currentPlayerName.textContent = currentPlayer.name;
+            elements.currentPlayerColor.className = `w-5 h-5 rounded-full mr-2 bg-${currentPlayer.color}-500`;
+            // Contar fichas en juego y en casa
+            const piecesInPlay = currentPlayer.pieces.filter(p => p.position !== 'home' && p.position !== 'final').length;
+            const piecesInHome = currentPlayer.pieces.filter(p => p.position === 'final').length;
+            elements.piecesInPlay.textContent = piecesInPlay;
+            elements.piecesInHome.textContent = piecesInHome;
+            // Actualizar indicador de turno
+            elements.turnIndicator.innerHTML = `
+                <div class="w-3 h-3 rounded-full bg-${currentPlayer.color}-500 mr-2"></div>
+                <span>${currentPlayer.isLocal ? 'Tu turno' : 'Turno de ' + currentPlayer.name}</span>
+            `;
+            // Habilitar/deshabilitar dado
+            if (currentPlayer.isLocal) {
+                elements.diceBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+                elements.diceBtn.classList.add('cursor-pointer', 'hover:scale-105');
+            } else {
+                elements.diceBtn.classList.add('opacity-50', 'cursor-not-allowed');
+                elements.diceBtn.classList.remove('cursor-pointer', 'hover:scale-105');
+            }
+            // Actualizar lista de jugadores
+            elements.playersGameList.innerHTML = '';
+            gameState.players.forEach(player => {
+                const piecesInHome = player.pieces.filter(p => p.position === 'final').length;
+                const playerItem = document.createElement('li');
+                playerItem.className = `flex items-center justify-between p-2 rounded-lg ${player.id === currentPlayer.id ? 'bg-gray-200' : 'bg-gray-50'}`;
+                playerItem.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-${player.color}-500 mr-2"></div>
+                        <span class="font-medium">${player.name}</span>
+                    </div>
+                    <div class="text-sm ${piecesInHome === 4 ? 'text-green-600 font-bold' : 'text-gray-500'}">${piecesInHome}/4</div>
+                `;
+                elements.playersGameList.appendChild(playerItem);
+            });
+        }
+        function rollDice() {
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            if (!currentPlayer.isLocal) return;
+            // Deshabilitar el dado durante el lanzamiento
+            elements.diceBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            elements.diceBtn.classList.remove('cursor-pointer', 'hover:scale-105');
+            // Animación del dado
+            let rolls = 0;
+            const maxRolls = 10;
+            const rollInterval = setInterval(() => {
+                gameState.diceValue = Math.floor(Math.random() * 6) + 1;
+                elements.diceBtn.textContent = getDiceFace(gameState.diceValue);
+                rolls++;
+                if (rolls >= maxRolls) {
+                    clearInterval(rollInterval);
+                    finishDiceRoll();
+                }
+            }, 100);
+        }
+        function getDiceFace(value) {
+            const faces = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
+            return faces[value - 1];
+        }
+        function finishDiceRoll() {
+            // Agregar al historial
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            const historyItem = document.createElement('div');
+            historyItem.className = 'flex items-center justify-between py-1 px-2 bg-gray-100 rounded';
+            historyItem.innerHTML = `
+                <div class="flex items-center">
+                    <div class="w-3 h-3 rounded-full bg-${currentPlayer.color}-500 mr-2"></div>
+                    <span>${currentPlayer.name}</span>
+                </div>
+                <span class="font-bold">${gameState.diceValue}</span>
+            `;
+            elements.diceHistory.insertBefore(historyItem, elements.diceHistory.firstChild);
+            // Verificar si el jugador tiene movimientos posibles
+            const movablePieces = currentPlayer.pieces.filter(piece => {
+                if (piece.position === 'home' && gameState.diceValue === 5) return true;
+                if (piece.position.startsWith('path') || piece.position.startsWith('safe')) return true;
+                return false;
+            });
+            if (movablePieces.length === 0) {
+                showToast('No tienes movimientos posibles. Pasando turno...');
+                setTimeout(nextTurn, 1500);
+            } else {
+                // Resaltar fichas que se pueden mover
+                movablePieces.forEach(piece => {
+                    const pieceElement = document.getElementById(`piece-${piece.id}`);
+                    if (pieceElement) {
+                        pieceElement.classList.add('glow');
+                    }
+                });
+                showToast(`Elige una ficha para mover ${gameState.diceValue} espacios`);
+            }
+        }
+        function selectPiece(piece) {
+            // Solo permitir selección si es el turno del jugador y hay un valor de dado
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            if (!currentPlayer.isLocal || gameState.diceValue === 0 || piece.playerId !== currentPlayer.id) return;
+            // Quitar resaltado de todas las fichas
+            document.querySelectorAll('.piece').forEach(el => el.classList.remove('glow'));
+            // Mover la ficha según las reglas
+            movePiece(piece, gameState.diceValue);
+            // Resetear el valor del dado
+            gameState.diceValue = 0;
+            elements.diceBtn.textContent = '🎲';
+            // Pasar al siguiente turno después de un breve retraso
+            setTimeout(nextTurn, 1000);
+        }
+        function movePiece(piece, spaces) {
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            // Mover ficha desde la base
+            if (piece.position === 'home') {
+                if (spaces === 5) {
+                    piece.position = `path-${currentPlayer.id}-0`; // Posición inicial del jugador
+                    showToast(`¡Ficha ${piece.number} ha salido de la base!`);
+                } else {
+                    showToast('Necesitas un 5 para sacar una ficha de la base');
+                    return;
+                }
+            }
+            // Mover ficha en el camino
+            else if (piece.position.startsWith('path') || piece.position.startsWith('safe')) {
+                // Lógica simplificada de movimiento
+                const currentPath = piece.position;
+                let newPosition;
+                if (currentPath.startsWith('path')) {
+                    const currentPos = parseInt(currentPath.split('-')[1]);
+                    newPosition = `path-${(currentPos + spaces) % (gameState.boardType === 4 ? 68 : 96)}`;
+                } else {
+                    // Para casillas seguras, avanzar en el pasillo final
+                    const parts = currentPath.split('-');
+                    const playerIndex = parseInt(parts[1]);
+                    const spotIndex = parseInt(parts[2]);
+                    if (spotIndex + spaces < 5) {
+                        newPosition = `safe-${playerIndex}-${spotIndex + spaces}`;
+                    } else {
+                        piece.position = 'final';
+                        showToast(`¡Ficha ${piece.number} ha llegado a la meta!`);
+                        // Verificar si el jugador ha ganado
+                        checkWinCondition(currentPlayer);
+                    }
+                }
+                if (newPosition) {
+                    // Verificar si hay una ficha rival en la nueva posición
+                    const targetPieces = gameState.pieces.filter(p => p.position === newPosition && p.playerId !== piece.playerId);
+                    if (targetPieces.length > 0 && !gameState.safeSpots.includes(newPosition)) {
+                        // Capturar la ficha rival
+                        targetPieces.forEach(targetPiece => {
+                            targetPiece.position = 'home';
+                            renderPiece(targetPiece);
+                            showToast(`¡Has capturado una ficha de ${gameState.players.find(p => p.id === targetPiece.playerId).name}!`);
+                        });
+                    }
+                    piece.position = newPosition;
+                }
+            }
+            // Renderizar la ficha en su nueva posición
+            renderPiece(piece);
+            // Si el dado fue 6, permitir otro lanzamiento
+            if (spaces === 6) {
+                showToast('¡Obtuviste un 6! Tira de nuevo');
+                gameState.diceValue = 0;
+                elements.diceBtn.textContent = '🎲';
+                elements.diceBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+                elements.diceBtn.classList.add('cursor-pointer', 'hover:scale-105');
+            }
+        }
+        function checkWinCondition(player) {
+            const piecesInHome = player.pieces.filter(p => p.position === 'final').length;
+            if (piecesInHome === 4) {
+                // Juego terminado
+                showWinnerModal(`${player.name} (${gameState.colorNames[player.color]}) ha ganado!`);
+                // Deshabilitar interacciones
+                elements.diceBtn.classList.add('opacity-50', 'cursor-not-allowed');
+                elements.diceBtn.classList.remove('cursor-pointer', 'hover:scale-105');
+                // Quitar eventos de clic de las fichas
+                document.querySelectorAll('.piece').forEach(p => p.style.pointerEvents = 'none');
+            }
+        }
+        function nextTurn() {
+            gameState.currentPlayerIndex = (gameState.currentPlayerIndex + 1) % gameState.players.length;
+            updateCurrentPlayerUI();
+            // Simular turno de IA si no es el jugador local
+            const currentPlayer = gameState.players[gameState.currentPlayerIndex];
+            if (!currentPlayer.isLocal && gameState.gameStarted) {
+                setTimeout(() => {
+                    rollDice();
+                    // Simular selección de ficha después de un retraso
+                    setTimeout(() => {
+                        const movablePieces = currentPlayer.pieces.filter(piece => {
+                            if (piece.position === 'home' && gameState.diceValue === 5) return true;
+                            if (piece.position.startsWith('path') || piece.position.startsWith('safe')) return true;
+                            return false;
+                        });
+                        if (movablePieces.length > 0) {
+                            const randomPiece = movablePieces[Math.floor(Math.random() * movablePieces.length)];
+                            movePiece(randomPiece, gameState.diceValue);
+                            // Pasar al siguiente turno
+                            setTimeout(nextTurn, 1000);
+                        } else {
+                            nextTurn();
+                        }
+                    }, 1000);
+                }, 1500);
+            }
+        }
+        function exitGame() {
+            if (confirm('¿Estás seguro de que quieres salir de la partida?')) {
+                hideMenuModal();
+                elements.gameScreen.classList.add('hidden');
+                elements.startScreen.classList.remove('hidden');
+                // Resetear estado del juego
+                resetGameState();
+            }
+        }
+        function startRematch() {
+            hideWinnerModal();
+            resetGameState();
+            initializeGame();
+        }
+        function newGame() {
+            hideWinnerModal();
+            elements.gameScreen.classList.add('hidden');
+            elements.startScreen.classList.remove('hidden');
+            resetGameState();
+        }
+        function resetGameState() {
+            gameState = {
+                ...gameState,
+                currentPlayerIndex: 0,
+                diceValue: 0,
+                gameStarted: false,
+                pieces: [],
+                paths: {},
+                players: gameState.players.filter(p => p.isLocal)
+            };
+            // Resetear UI
+            elements.diceHistory.innerHTML = '';
+            elements.diceBtn.textContent = '🎲';
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dommos/parch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>