diff --git a/script.js b/script.js index 43cfa50..bcee87d 100644 --- a/script.js +++ b/script.js @@ -19,14 +19,23 @@ let gameState = { let wordBank = []; +const savedWords = localStorage.getItem('devopsWords'); + +if (savedWords) { + wordBank = JSON.parse(savedWords); +} else { + wordBank = [...defaultWords]; + localStorage.setItem('devopsWords', JSON.stringify(wordBank)); +} + document.addEventListener('DOMContentLoaded', function() { - loadWordBank(); + displayWordBank(); generateKeyboard(); }); +// Toggle theme (moon/sun) function toggleTheme() { const themeIcon = document.querySelector('.theme-icon'); - if (themeIcon.textContent === '🌙') { themeIcon.textContent = '☀️'; } else { @@ -34,19 +43,19 @@ function toggleTheme() { } } +// Switch tabs in the UI function switchTab(tabName) { const tabs = document.querySelectorAll('.tab-content'); tabs.forEach(tab => tab.classList.remove('active')); - const tabButtons = document.querySelectorAll('.tab'); tabButtons.forEach(btn => btn.classList.remove('active')); - document.getElementById(tabName).classList.add('active'); event.target.classList.add('active'); } +// Load word bank from localStorage function loadWordBank() { - const stored = localStorage.getItem('wordBank'); + const stored = localStorage.getItem('devopsWords'); if (stored) { wordBank = JSON.parse(stored); } else { @@ -56,16 +65,17 @@ function loadWordBank() { displayWordBank(); } +// Save word bank to localStorage function saveWordBank() { localStorage.setItem('devopsWords', JSON.stringify(wordBank)); } +// Display word bank in UI function displayWordBank() { const wordList = document.getElementById('wordList'); const wordCount = document.getElementById('wordCount'); - wordCount.textContent = wordBank.length; - + if (wordBank.length === 0) { wordList.innerHTML = `
@@ -75,7 +85,7 @@ function displayWordBank() { `; return; } - + wordList.innerHTML = ''; wordBank.forEach((word, index) => { const wordItem = document.createElement('div'); @@ -91,36 +101,68 @@ function displayWordBank() { }); } +// Add a word with validation function addWord() { const input = document.getElementById('newWord'); const word = input.value.trim().toUpperCase(); + if (!word) { + alert('Cannot add empty word!'); + return; + } + if (wordBank.includes(word)) { + alert('Word already exists!'); + return; + } + if (/[^A-Z]/.test(word)) { + alert('Word can only contain letters A-Z!'); + return; + } + wordBank.push(word); input.value = ''; saveWordBank(); displayWordBank(); } +// Edit a word with validation function editWord(index) { const newWord = prompt('Edit word:', wordBank[index]); - if (newWord) { - wordBank.splice(index, 1); - saveWordBank(); - displayWordBank(); + if (!newWord) return; + + const word = newWord.trim().toUpperCase(); + + if (!word) { + alert('Cannot set empty word!'); + return; + } + if (wordBank.includes(word) && word !== wordBank[index]) { + alert('Word already exists!'); + return; + } + if (/[^A-Z]/.test(word)) { + alert('Word can only contain letters A-Z!'); + return; } + + wordBank[index] = word; + saveWordBank(); + displayWordBank(); } +// Delete a word function deleteWord(index) { if (confirm('Are you sure you want to delete this word?')) { + wordBank.splice(index, 1); saveWordBank(); displayWordBank(); } } +// Generate keyboard function generateKeyboard() { const keyboard = document.getElementById('keyboard'); const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; - keyboard.innerHTML = ''; for (let letter of letters) { const button = document.createElement('button'); @@ -132,187 +174,142 @@ function generateKeyboard() { } } +// Start the game function startGame() { const p1Name = document.getElementById('player1Name').value.trim(); const p2Name = document.getElementById('player2Name').value.trim(); - - gameState.player1.name = p1Name || 'Player 1'; - gameState.player2.name = p2Name || 'Player 2'; - + if (!p1Name || !p2Name || p1Name === p2Name) return; + gameState.player1.name = p1Name; + gameState.player2.name = p2Name; document.getElementById('player1Display').textContent = gameState.player1.name; document.getElementById('player2Display').textContent = gameState.player2.name; - document.getElementById('gameArea').style.display = 'block'; - nextRound(); } +// Next round logic function nextRound() { if (wordBank.length === 0) { alert('No words in the word bank! Add some words first.'); return; } - + gameState.guessedLetters = []; gameState.wrongGuesses = 0; gameState.gameActive = true; - - const randomIndex = Math.floor(Math.random() * wordBank.length); + + let randomIndex; + do { + randomIndex = Math.floor(Math.random() * wordBank.length); + } while (gameState.usedWords.includes(randomIndex) && gameState.usedWords.length < wordBank.length); + gameState.currentWord = wordBank[randomIndex]; - - document.getElementById('gameStatus').classList.remove('show'); + gameState.usedWords.push(randomIndex); + if (gameState.usedWords.length === wordBank.length) gameState.usedWords = []; + document.getElementById('gameStatus').className = 'game-status'; resetHangman(); resetKeyboard(); updateWordDisplay(); updateWrongLetters(); updateLives(); + + gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1; updateCurrentPlayer(); } +// Guess a letter function guessLetter(letter) { if (!gameState.gameActive) return; - - if (gameState.guessedLetters.includes(letter)) { - return; - } - + if (gameState.guessedLetters.includes(letter)) return; + gameState.guessedLetters.push(letter); - if (!gameState.currentWord.includes(letter)) { gameState.wrongGuesses++; updateHangman(); } - updateWordDisplay(); updateWrongLetters(); updateLives(); checkGameStatus(); } +// Update display function updateWordDisplay() { const display = document.getElementById('wordDisplay'); - let displayText = ''; - - for (let letter of gameState.currentWord) { - if (gameState.guessedLetters.includes(letter)) { - displayText += letter + ' '; - } else { - displayText += '_ '; - } - } - - display.textContent = displayText.trim(); + display.textContent = [...gameState.currentWord].map(l => gameState.guessedLetters.includes(l) ? l : '_').join(' '); } function updateWrongLetters() { const wrongLettersDiv = document.getElementById('wrongLetters'); - const wrong = gameState.guessedLetters.filter(letter => - !gameState.currentWord.includes(letter) - ); - - if (wrong.length === 0) { - wrongLettersDiv.textContent = 'None yet'; - } else { - wrongLettersDiv.textContent = gameState.guessedLetters.join(', '); - } + const wrong = gameState.guessedLetters.filter(l => !gameState.currentWord.includes(l)); + wrongLettersDiv.textContent = wrong.length ? wrong.join(', ') : 'None yet'; } function updateLives() { - const livesLeft = gameState.maxWrong - gameState.wrongGuesses + 1; + const livesLeft = gameState.maxWrong - gameState.wrongGuesses; document.getElementById('livesLeft').textContent = livesLeft; } function updateHangman() { - const parts = ['head', 'body', 'leftArm', 'rightArm', 'leftLeg', 'rightLeg']; - const wrongOrder = ['head', 'leftArm', 'rightArm', 'body', 'leftLeg', 'rightLeg']; const partIndex = gameState.wrongGuesses - 1; - if (partIndex >= 0 && partIndex < wrongOrder.length) { - const partToShow = wrongOrder[partIndex]; - document.getElementById(partToShow).style.display = 'block'; + document.getElementById(wrongOrder[partIndex]).style.display = 'block'; } } function resetHangman() { - const parts = ['head', 'body', 'leftArm', 'rightArm', 'leftLeg', 'rightLeg']; - parts.forEach(part => { - document.getElementById(part).style.display = 'none'; + ['head','body','leftArm','rightArm','leftLeg','rightLeg'].forEach(id => { + document.getElementById(id).style.display = 'none'; }); } function resetKeyboard() { - const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; - for (let letter of letters) { - const button = document.getElementById('key-' + letter); - if (button) { - button.disabled = false; - } - } + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(letter => { + const btn = document.getElementById('key-' + letter); + if (btn) btn.disabled = false; + }); } function updateCurrentPlayer() { - const player1Div = document.getElementById('player1Score'); - const player2Div = document.getElementById('player2Score'); - - if (gameState.currentPlayer === 1) { - player1Div.classList.add('active'); - player2Div.classList.remove('active'); - } else { - player1Div.classList.remove('active'); - player2Div.classList.add('active'); - } + const p1Div = document.getElementById('player1Score'); + const p2Div = document.getElementById('player2Score'); + + p1Div.classList.toggle('active', gameState.currentPlayer === 1); + p2Div.classList.toggle('active', gameState.currentPlayer === 2); } function checkGameStatus() { - const allLettersGuessed = [...gameState.currentWord].every(letter => - gameState.guessedLetters.includes(letter) - ); - - if (allLettersGuessed) { - gameWon(); - return; - } - - if (gameState.wrongGuesses >= gameState.maxWrong) { - gameLost(); - return; - } + const allGuessed = [...gameState.currentWord].every(l => gameState.guessedLetters.includes(l)); + + if (allGuessed) gameWon(); + else if (gameState.wrongGuesses >= gameState.maxWrong) gameLost(); } function gameWon() { gameState.gameActive = false; - - if (gameState.currentPlayer === 1) { - gameState.player2.score += 10; - document.getElementById('score2').textContent = gameState.player2.score; - } else { - gameState.player1.score += 10; - document.getElementById('score1').textContent = gameState.player1.score; - } - - const statusDiv = document.getElementById('gameStatus'); - const statusMsg = document.getElementById('statusMessage'); - - const winnerName = gameState.currentPlayer === 1 ? - gameState.player2.name : gameState.player1.name; - - statusMsg.textContent = `🎉 ${winnerName} won! The word was: ${gameState.currentWord}`; - statusDiv.classList.add('show', 'winner'); + + const winner = gameState.currentPlayer === 1 ? gameState.player2 : gameState.player1; + winner.score += 10; + document.getElementById('score1').textContent = gameState.player1.score; + document.getElementById('score2').textContent = gameState.player2.score; + + document.getElementById('statusMessage').textContent = `🎉 ${winner.name} won! The word was: ${gameState.currentWord}`; + document.getElementById('gameStatus').classList.add('show', 'winner'); + + gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1; } function gameLost() { gameState.gameActive = false; - + + const currentPlayerName = gameState.currentPlayer === 1 ? gameState.player1.name : gameState.player2.name; const statusDiv = document.getElementById('gameStatus'); - const statusMsg = document.getElementById('statusMessage'); - - const currentPlayerName = gameState.currentPlayer === 1 ? - gameState.player1.name : gameState.player2.name; - - statusMsg.textContent = `😢 ${currentPlayerName} lost! The word was: ${gameState.currentWord}`; + + document.getElementById('statusMessage').textContent = `😢 ${currentPlayerName} lost! The word was: ${gameState.currentWord}`; statusDiv.classList.add('show', 'loser'); - + gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1; + updateCurrentPlayer(); }