Dasemu
fd06e2fe83
- Migrate web assets from root to www/ directory - Add Android native project with Capacitor 8 - Add GitHub Actions workflow for automated APK builds - Configure app identity and splash screens
199 lines
9.4 KiB
HTML
199 lines
9.4 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, viewport-fit=cover">
|
|
<title>Juego del Impostor</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600;700&family=Courier+Prime:wght@400;700&family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" type="image/png" href="logo.png">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<meta name="theme-color" content="#ff4444">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Impostor">
|
|
<link rel="apple-touch-icon" href="logo.png">
|
|
<script defer src="https://analytics.dariosevilla.es/script.js" data-website-id="0520a008-d309-477f-9742-b4a674ac42eb"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Cinematic overlays -->
|
|
<div class="vignette-overlay"></div>
|
|
<div class="vhs-line"></div>
|
|
|
|
<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="screen-lock-toggle" class="screen-lock-toggle" aria-label="Screen lock" title="Bloqueo de pantalla">
|
|
<span class="screen-lock-icon">🔓</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 1 -->
|
|
<div id="rules-screen" class="screen">
|
|
<h1>Reglas del Juego</h1>
|
|
<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</p>
|
|
</div>
|
|
<button onclick="showScreen('rules-screen-2')">Siguiente →</button>
|
|
<button class="ghost" onclick="showScreen('welcome-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Rules screen 2 -->
|
|
<div id="rules-screen-2" class="screen">
|
|
<h1>Reglas del Juego</h1>
|
|
<div class="rule-section">
|
|
<h3>Partida</h3>
|
|
<p>1. Por turnos, da un sinónimo de tu palabra</p>
|
|
<p>2. Sé específico pero no reveles tu palabra</p>
|
|
<p>3. Los impostores deben pasar desapercibidos</p>
|
|
</div>
|
|
<div class="rule-section">
|
|
<h3>Votación</h3>
|
|
<p>1. Tras deliberar, vota en secreto</p>
|
|
<p>2. Los más votados son eliminados</p>
|
|
<p>3. Civiles ganan si eliminan a todos los impostores</p>
|
|
</div>
|
|
<button onclick="showScreen('welcome-screen')">Entendido ✓</button>
|
|
<button class="ghost" onclick="showScreen('rules-screen')">← Atrás</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>
|
|
<button onclick="goToPools()">Siguiente</button>
|
|
<button class="ghost" onclick="showScreen('welcome-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Pools selection screen -->
|
|
<div id="pools-screen" class="screen">
|
|
<h1>Selección de Pools</h1>
|
|
<p class="info-text">Toca para seleccionar las categorías de palabras que quieres usar en la partida.</p>
|
|
<div class="pool-buttons-wrapper">
|
|
<div id="pool-buttons" class="pool-buttons"></div>
|
|
</div>
|
|
<button onclick="goToNames()">Siguiente</button>
|
|
<button class="ghost" onclick="showScreen('setup-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('pools-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>
|
|
|