Skip to content

Fix Add Word persistence issue (fixes #2>) #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Farah3009 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix Add Word persistence issue (fixes #2>) #63

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2bfad8e
Fix Add Word persistence issue (fixes #2>)
Farah3009 Feb 15, 2026
47b68fc
Fix Add Word duplicate issue (fixes #3)
Farah3009 Feb 15, 2026
45a6f52
Merge pull request #7 from Farah3009/bugfix/add-word-duplicates
Farah3009 Feb 15, 2026
0ab7610
Resolve merge conflict in script.js
Farah3009 Feb 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 112 additions & 115 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,43 @@ 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 {
themeIcon.textContent = '🌙';
}
}

// 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 {
Expand All @@ -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 = `
<div class="empty-state">
Expand All @@ -75,7 +85,7 @@ function displayWordBank() {
`;
return;
}

wordList.innerHTML = '';
wordBank.forEach((word, index) => {
const wordItem = document.createElement('div');
Expand All @@ -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');
Expand All @@ -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();
}