Hugging Face's logo

Spaces:
Dommos
/
parch
Running

App Files Community
parch / index.html
Dommos's picture
Dommos
Add 2 files
a5bdb47 verified
raw
history blame contribute delete
71.7 kB
 <!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>