diff --git a/script.js b/script.js index 43cfa50..85a1c48 100644 --- a/script.js +++ b/script.js @@ -20,20 +20,29 @@ let gameState = { let wordBank = []; document.addEventListener('DOMContentLoaded', function() { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + document.body.classList.add('dark'); + const themeIcon = document.querySelector('.theme-icon'); + if (themeIcon) themeIcon.textContent = '☀️'; + } + loadWordBank(); generateKeyboard(); }); function toggleTheme() { + document.body.classList.toggle('dark'); + const themeIcon = document.querySelector('.theme-icon'); - - if (themeIcon.textContent === '🌙') { - themeIcon.textContent = '☀️'; - } else { - themeIcon.textContent = '🌙'; + if (themeIcon) { + themeIcon.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙'; } + + localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light'); } + function switchTab(tabName) { const tabs = document.querySelectorAll('.tab-content'); tabs.forEach(tab => tab.classList.remove('active')); @@ -135,6 +144,12 @@ function generateKeyboard() { function startGame() { const p1Name = document.getElementById('player1Name').value.trim(); const p2Name = document.getElementById('player2Name').value.trim(); + + // ✅ Fix Issue #1: Prevent starting the game if BOTH names are empty + if (!p1Name && !p2Name) { + alert("Player name is required. Please enter at least one player name."); + return; + } gameState.player1.name = p1Name || 'Player 1'; gameState.player2.name = p2Name || 'Player 2'; diff --git a/styles.css b/styles.css index 2d7f786..ee95ac6 100644 --- a/styles.css +++ b/styles.css @@ -527,3 +527,25 @@ body.dark-mode .add-word-form input { body.dark-mode .empty-state { color: #999; } +body.dark { + background: #0f172a; + color: #e2e8f0; +} + +body.dark .container, +body.dark .tab-content, +body.dark .card, +body.dark .game-container, +body.dark .word-bank-container { + background: #111827; + color: #e2e8f0; +} + +body.dark button, +body.dark input, +body.dark textarea, +body.dark select { + background: #1f2937; + color: #e2e8f0; + border-color: #374151; +}