Dasemu
b05a59706c
- Add exit game button in top-left corner (door icon) - Button only visible during active game phases (not in welcome/setup) - Confirmation dialog prevents accidental exits - Clears localStorage state and returns to welcome screen - Fully responsive with mobile-optimized styling - Bilingual support with Spanish/English confirmation messages
174 lines
8.0 KiB
HTML
174 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Juego del Impostor</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" type="image/png" href="logo.png">
|
|
</head>
|
|
<body>
|
|
<button id="theme-toggle" class="theme-toggle" aria-label="Cambiar tema">
|
|
<span class="theme-icon">🌙</span>
|
|
</button>
|
|
|
|
<button id="language-toggle" class="language-toggle" aria-label="Change language">
|
|
<span class="language-icon">🌐</span>
|
|
<span class="language-text">EN</span>
|
|
</button>
|
|
|
|
<button id="exit-game" class="exit-game" onclick="confirmExitGame()">
|
|
<span class="exit-icon">🚪</span>
|
|
<span class="exit-text" data-i18n="exitGame">Salir de la partida</span>
|
|
</button>
|
|
|
|
<div class="container">
|
|
<!-- Welcome screen -->
|
|
<div id="welcome-screen" class="screen active">
|
|
<div class="welcome-content">
|
|
<img src="logo.png" alt="Logo" class="welcome-logo">
|
|
<h1 class="welcome-title">🎭 Juego del Impostor</h1>
|
|
<p class="welcome-subtitle">¿Podrás descubrir quién es el impostor?</p>
|
|
<div class="welcome-buttons">
|
|
<button onclick="showScreen('setup-screen')" class="btn-primary">▶️ Jugar</button>
|
|
<button onclick="showScreen('rules-screen')" class="btn-secondary">📖 Reglas</button>
|
|
</div>
|
|
<p class="welcome-credits">Creado por Darío Sevilla</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rules screen -->
|
|
<div id="rules-screen" class="screen">
|
|
<h1>📖 Reglas del Juego</h1>
|
|
<div class="rules-content">
|
|
<div class="rule-section">
|
|
<h3>🎯 Objetivo</h3>
|
|
<p>Los <strong>civiles</strong> deben identificar a los <strong>impostores</strong> antes de que termine el tiempo.</p>
|
|
</div>
|
|
|
|
<div class="rule-section">
|
|
<h3>🎲 Preparación</h3>
|
|
<p>1. Cada jugador recibe una palabra secreta</p>
|
|
<p>2. Los civiles reciben la misma palabra</p>
|
|
<p>3. Los impostores reciben una palabra diferente pero relacionada</p>
|
|
</div>
|
|
|
|
<div class="rule-section">
|
|
<h3>🗣️ Partida</h3>
|
|
<p>1. Por turnos, cada jugador da un sinónimo o descripción de su palabra</p>
|
|
<p>2. Intenta ser específico pero no revelar tu palabra exacta</p>
|
|
<p>3. Los impostores deben intentar pasar desapercibidos</p>
|
|
</div>
|
|
|
|
<div class="rule-section">
|
|
<h3>🗳️ Votación</h3>
|
|
<p>1. Tras el tiempo de juego y deliberación, vota en secreto</p>
|
|
<p>2. Los más votados son eliminados</p>
|
|
<p>3. Si todos los impostores son eliminados, ganan los civiles</p>
|
|
<p>4. Si queda algún impostor, ellos ganan</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="showScreen('welcome-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Setup screen -->
|
|
<div id="setup-screen" class="screen">
|
|
<h1>⚙️ Configuración</h1>
|
|
<div class="form-group compact">
|
|
<label for="num-players">Jugadores:</label>
|
|
<input type="number" id="num-players" min="3" max="10" value="6">
|
|
</div>
|
|
<div class="form-group compact">
|
|
<label for="num-impostors">Impostores:</label>
|
|
<input type="number" id="num-impostors" min="1" max="5" value="2">
|
|
</div>
|
|
<div class="form-group compact">
|
|
<label for="game-time">Tiempo de partida (seg):</label>
|
|
<input type="number" id="game-time" min="60" max="900" step="30" value="510">
|
|
</div>
|
|
<div class="form-group compact">
|
|
<label for="deliberation-time">Deliberación (seg):</label>
|
|
<input type="number" id="deliberation-time" min="30" max="300" step="10" value="170">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Pools (toca para seleccionar):</label>
|
|
<div class="pool-buttons-wrapper">
|
|
<div id="pool-buttons" class="pool-buttons"></div>
|
|
</div>
|
|
</div>
|
|
<button onclick="goToNames()">Siguiente</button>
|
|
<button class="ghost" onclick="showScreen('welcome-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Player names screen -->
|
|
<div id="names-screen" class="screen">
|
|
<h1>👥 Nombres de jugadores</h1>
|
|
<div class="player-names-list" id="player-names-list"></div>
|
|
<button onclick="startGame()">Comenzar partida</button>
|
|
<button class="ghost" onclick="showScreen('setup-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Pre-reveal screen -->
|
|
<div id="pre-reveal-screen" class="screen">
|
|
<h1>🎲 Listo para revelar</h1>
|
|
<div class="info-text" id="config-summary"></div>
|
|
<p class="info-text">Cada jugador debe ver su rol en secreto. Desliza la cortina hacia arriba para revelar.</p>
|
|
<button onclick="showScreen('reveal-screen'); loadCurrentReveal();">Empezar revelación</button>
|
|
<button class="ghost" onclick="showScreen('names-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Revelation screen -->
|
|
<div id="reveal-screen" class="screen">
|
|
<h1>🔍 Revelación</h1>
|
|
<p class="info-text">Turno de: <strong><span id="current-player-name">Jugador 1</span></strong><br><small>Los demás, no miréis. Mantén levantada la cortina para ver tu rol.</small></p>
|
|
<div class="curtain" id="curtain">
|
|
<div class="curtain-cover" id="curtain-cover">
|
|
<div class="curtain-icon">⬆️</div>
|
|
<div>LEVANTA LA CORTINA</div>
|
|
</div>
|
|
<div class="curtain-content">
|
|
<div class="role" id="role-text"></div>
|
|
<div class="word" id="word-text"></div>
|
|
</div>
|
|
</div>
|
|
<button id="next-player-btn" style="display:none;" onclick="nextReveal()">Siguiente jugador →</button>
|
|
<button id="start-game-btn" style="display:none;" onclick="startGamePhase()">¡Iniciar partida!</button>
|
|
</div>
|
|
|
|
<!-- Game screen -->
|
|
<div id="game-screen" class="screen">
|
|
<h1>🎮 Partida en curso</h1>
|
|
<p class="info-text">A decir sinónimos!</p>
|
|
<div class="timer" id="game-timer">3:00</div>
|
|
<button class="secondary" onclick="skipToDeliberation()">Saltar a deliberación →</button>
|
|
</div>
|
|
|
|
<!-- Deliberation screen -->
|
|
<div id="deliberation-screen" class="screen">
|
|
<h1>🗣️ Deliberación</h1>
|
|
<p class="info-text">Últimos argumentos antes de votar.</p>
|
|
<div class="timer" id="deliberation-timer">1:00</div>
|
|
<button class="secondary" onclick="skipToVoting()">Ir a votación →</button>
|
|
</div>
|
|
|
|
<!-- Voting screen -->
|
|
<div id="voting-screen" class="screen">
|
|
<h1>🗳️ Votación secreta</h1>
|
|
<p class="info-text">Pasa el móvil a <strong id="voter-name">Jugador</strong>. Elige <span id="votes-needed">1</span> sospechoso(s).</p>
|
|
<div class="player-list" id="vote-list"></div>
|
|
<button id="confirm-vote-btn" disabled onclick="confirmCurrentVote()">Confirmar voto</button>
|
|
</div>
|
|
|
|
<!-- Results screen -->
|
|
<div id="results-screen" class="screen">
|
|
<h1>🏆 Resultados</h1>
|
|
<div class="results" id="results-content"></div>
|
|
<button onclick="newMatch()">Nueva partida</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
|