Skip to content

Bugfix/delete word #72

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 8 commits into
base: main
Choose a base branch
from
Open

Bugfix/delete word #72

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
47b68fc
Fix Add Word duplicate issue (fixes #3)
Farah3009 Feb 15, 2026
8f91d5c
Fix Edit Word issues (deletion, duplicates, invalid chars) (fixes #<4>)
Farah3009 Feb 15, 2026
4eb747e
Fix Delete Word not removing / count not updating (fixes #5>)
Farah3009 Feb 15, 2026
7f2e048
Fix player turn alternation and current player highlighting (fixes #6>)
Farah3009 Feb 15, 2026
45a6f52
Merge pull request #7 from Farah3009/bugfix/add-word-duplicates
Farah3009 Feb 15, 2026
e9c8b36
Fix player turn switching and update game logic
Farah3009 Feb 15, 2026
062d59a
Merge pull request #11 from Farah3009/bugfix/player-turns
Farah3009 Feb 15, 2026
65a2056
Fix Delete Word and Add Word persistence functionality
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
199 changes: 87 additions & 112 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,9 @@ document.addEventListener('DOMContentLoaded', function() {
generateKeyboard();
});

function toggleTheme() {
const themeIcon = document.querySelector('.theme-icon');

if (themeIcon.textContent === '🌙') {
themeIcon.textContent = '☀️';
} else {
themeIcon.textContent = '🌙';
}
}

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 words from localStorage or default
function loadWordBank() {
const stored = localStorage.getItem('wordBank');
const stored = localStorage.getItem('devopsWords');
if (stored) {
wordBank = JSON.parse(stored);
} else {
Expand All @@ -56,10 +36,12 @@ function loadWordBank() {
displayWordBank();
}

// Save wordBank to localStorage
function saveWordBank() {
localStorage.setItem('devopsWords', JSON.stringify(wordBank));
}

// Display the word bank
function displayWordBank() {
const wordList = document.getElementById('wordList');
const wordCount = document.getElementById('wordCount');
Expand Down Expand Up @@ -91,32 +73,65 @@ function displayWordBank() {
});
}

// ADD WORD: validate, reject duplicates, invalid chars
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 WORD: validate, prevent duplicates, valid letters only
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 WORD: confirm deletion, update localStorage
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';
Expand All @@ -132,6 +147,7 @@ function generateKeyboard() {
}
}

// START GAME
function startGame() {
const p1Name = document.getElementById('player1Name').value.trim();
const p2Name = document.getElementById('player2Name').value.trim();
Expand All @@ -147,35 +163,40 @@ function startGame() {
nextRound();
}

// NEXT ROUND: alternate players, pick random word
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 (wordBank[randomIndex] === gameState.currentWord && wordBank.length > 1);

gameState.currentWord = wordBank[randomIndex];

document.getElementById('gameStatus').classList.remove('show');

document.getElementById('gameStatus').className = 'game-status';
resetHangman();
resetKeyboard();
updateWordDisplay();
updateWrongLetters();
updateLives();

gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1;
updateCurrentPlayer();
}

// GUESS LETTER
function guessLetter(letter) {
if (!gameState.gameActive) return;

if (gameState.guessedLetters.includes(letter)) {
return;
}
if (gameState.guessedLetters.includes(letter)) return;

gameState.guessedLetters.push(letter);

Expand All @@ -190,129 +211,83 @@ function guessLetter(letter) {
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;
}

// HANGMAN
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;
});
}

// PLAYER DISPLAY
function updateCurrentPlayer() {
const player1Div = document.getElementById('player1Score');
const player2Div = document.getElementById('player2Score');
const p1Div = document.getElementById('player1Score');
const p2Div = document.getElementById('player2Score');

if (gameState.currentPlayer === 1) {
player1Div.classList.add('active');
player2Div.classList.remove('active');
} else {
player1Div.classList.remove('active');
player2Div.classList.add('active');
}
p1Div.classList.toggle('active', gameState.currentPlayer === 1);
p2Div.classList.toggle('active', gameState.currentPlayer === 2);
}

// GAME STATUS
function checkGameStatus() {
const allLettersGuessed = [...gameState.currentWord].every(letter =>
gameState.guessedLetters.includes(letter)
);
const allGuessed = [...gameState.currentWord].every(l => gameState.guessedLetters.includes(l));

if (allLettersGuessed) {
gameWon();
return;
}

if (gameState.wrongGuesses >= gameState.maxWrong) {
gameLost();
return;
}
if (allGuessed) gameWon();
else if (gameState.wrongGuesses >= gameState.maxWrong) gameLost();
}

function gameWon() {
gameState.gameActive = false;
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;

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 winnerName = winner.name;
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}`;
document.getElementById('statusMessage').textContent = `🎉 ${winnerName} won! The word was: ${gameState.currentWord}`;
statusDiv.classList.add('show', 'winner');
}

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();
}