diff --git a/index.html b/index.html index 5edc3d1..664d126 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,11 @@ EN + +
diff --git a/script.js b/script.js index 80bc2f4..a8ceb55 100644 --- a/script.js +++ b/script.js @@ -73,7 +73,8 @@ const TRANSLATIONS = { counterclockwise: 'Antihorario', impostorsMustBeLess: 'Impostores debe ser menor que jugadores', animalsNature: 'Animales y Naturaleza', - everydayObjects: 'Objetos Cotidianos' + everydayObjects: 'Objetos Cotidianos', + exitGame: 'Salir de la partida' }, en: { gameTitle: 'The Impostor Game', @@ -140,7 +141,8 @@ const TRANSLATIONS = { counterclockwise: 'Counterclockwise', impostorsMustBeLess: 'Impostors must be less than players', animalsNature: 'Animals and Nature', - everydayObjects: 'Everyday Objects' + everydayObjects: 'Everyday Objects', + exitGame: 'Exit Game' } }; @@ -322,6 +324,10 @@ function updateStaticTexts() { else if (btn.id === 'confirm-vote-btn') btn.textContent = t('confirmVote'); else if (btn.getAttribute('onclick') === 'newMatch()') btn.textContent = t('newMatch'); }); + + // Exit game button + const exitText = document.querySelector('.exit-text'); + if (exitText) exitText.textContent = t('exitGame'); } // Embedded pools with impostor words [civilian_word, impostor_word] @@ -994,6 +1000,7 @@ function showScreen(id) { document.getElementById(id).classList.add('active'); state.phase = id.replace('-screen',''); saveState(); + updateExitButtonVisibility(); } function newMatch() { @@ -1003,6 +1010,26 @@ function newMatch() { showScreen('welcome-screen'); } +function confirmExitGame() { + const confirmMessage = currentLanguage === 'es' + ? '¿Estás seguro de que quieres salir de la partida? Se perderá todo el progreso actual.' + : 'Are you sure you want to exit the game? All current progress will be lost.'; + + if (confirm(confirmMessage)) { + newMatch(); + } +} + +function updateExitButtonVisibility() { + const exitBtn = document.getElementById('exit-game'); + // Show exit button in all phases except welcome and setup + if (state.phase !== 'welcome' && state.phase !== 'setup') { + exitBtn.classList.add('visible'); + } else { + exitBtn.classList.remove('visible'); + } +} + // ---------- Theme system ---------- function getSystemTheme() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; @@ -1099,4 +1126,7 @@ document.addEventListener('DOMContentLoaded', () => { default: showScreen('welcome-screen'); } } + + // Initialize exit button visibility + updateExitButtonVisibility(); })(); diff --git a/styles.css b/styles.css index 62c3b56..499ffa5 100644 --- a/styles.css +++ b/styles.css @@ -377,6 +377,47 @@ button.ghost { background: var(--button-ghost-bg); color: var(--text-primary); f letter-spacing: 0.5px; } +/* Exit game button */ +.exit-game { + position: fixed; + top: 20px; + left: 20px; + width: auto; + height: 50px; + padding: 0 15px; + border-radius: 25px; + border: 2px solid var(--border-color); + background: var(--container-bg); + backdrop-filter: blur(10px); + cursor: pointer; + display: none; + align-items: center; + justify-content: center; + gap: 8px; + font-size: 0.9em; + font-weight: 600; + box-shadow: 0 4px 12px var(--shadow-color); + transition: transform 0.2s ease, background 0.3s ease, border 0.3s ease; + z-index: 1000; + color: var(--text-primary); +} +.exit-game.visible { + display: inline-flex; +} +.exit-game:hover { + transform: scale(1.05); + background: var(--card-hover); +} +.exit-game:active { + transform: scale(0.95); +} +.exit-icon { + font-size: 1.2em; +} +.exit-text { + font-size: 0.85em; +} + /* Mobile optimization */ @media (max-width: 600px) { body { @@ -407,5 +448,21 @@ button.ghost { background: var(--button-ghost-bg); color: var(--text-primary); f .language-text { font-size: 0.85em; } + + .exit-game { + top: 10px; + left: 10px; + height: 45px; + padding: 0 12px; + font-size: 0.85em; + } + + .exit-icon { + font-size: 1.1em; + } + + .exit-text { + font-size: 0.8em; + } }