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;
+ }
}