Dasemu
3693804d4e
Features: - Impostor-specific words: Each civilian word now has a related impostor word - 22 word pools total (2 local offline, 20 remote) - Multi-pool selection: Combine multiple categories simultaneously - Descriptive category names based on content analysis Word pools added: - Local: Animales y Naturaleza (88), Objetos Cotidianos (99) - Remote: Marcas y Empresas, Profesiones, Comida y Bebidas, Lugares del Mundo, Deportes, Películas y Series, Escuela, Tecnología, Vehículos, Instrumentos, Videojuegos, Personajes (Anime, Disney, Ficción), Artistas Latinos, Marcas de Lujo, Cuerpo Humano, Playa y Verano, Amor y Romance, Navidad UI improvements: - Mobile-first: No scrolling on main setup screen - Compact layout: Reduced padding, margins, and font sizes - Hidden scrollbar: Pool selector with gradient fade effect - Responsive grid: 2-column pool buttons with smooth touch scrolling - Updated labels: Shortened for better mobile fit Technical changes: - New word format: civilian_word|impostor_word in .txt files - Updated manifest.json with all 22 pools - Enhanced pickWords() to merge multiple selected pools - Improved caching system for remote pools - Cross-browser scrollbar hiding Documentation: - Updated README.md with all 22 pools and new features - Added CHANGELOG.md with detailed changes - Documented impostor word format and usage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
111 lines
5.0 KiB
HTML
111 lines
5.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>
|
|
<div class="container">
|
|
<!-- Pantalla de configuración -->
|
|
<div id="setup-screen" class="screen active">
|
|
<h1>🎭 Juego del Impostor</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="1">
|
|
</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="180">
|
|
</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="60">
|
|
</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: nombres</button>
|
|
</div>
|
|
|
|
<!-- Pantalla de nombres -->
|
|
<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 revelado -->
|
|
<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>
|
|
|
|
<!-- Revelación -->
|
|
<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. Desliza para ver.</small></p>
|
|
<div class="curtain" id="curtain">
|
|
<div class="curtain-cover" id="curtain-cover">
|
|
<div class="curtain-icon">⬆️</div>
|
|
<div>DESLIZA PARA REVELAR</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>
|
|
|
|
<!-- Partida -->
|
|
<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>
|
|
|
|
<!-- Deliberación -->
|
|
<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>
|
|
|
|
<!-- Votación -->
|
|
<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>
|
|
|
|
<!-- Resultados -->
|
|
<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>
|
|
|