Skip to content
Open
Changes from all commits
Commits
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
191 changes: 82 additions & 109 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,8 @@ 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');
}

function loadWordBank() {
const stored = localStorage.getItem('wordBank');
const stored = localStorage.getItem('devopsWords');
if (stored) {
wordBank = JSON.parse(stored);
} else {
Expand Down Expand Up @@ -91,32 +70,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 deletion, no 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, remove, update count
function deleteWord(index) {
if (confirm('Are you sure you want to delete this word?')) {
wordBank.splice(index, 1);
saveWordBank();
displayWordBank();
}
}

// KEYBOARD GENERATION
function generateKeyboard() {
const keyboard = document.getElementById('keyboard');
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
Expand All @@ -132,6 +144,7 @@ function generateKeyboard() {
}
}

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

// NEXT ROUND: alternates players, random word, resets counters
function nextRound() {
if (wordBank.length === 0) {
alert('No words in the word bank! Add some words first.');
Expand All @@ -157,25 +171,30 @@ function nextRound() {
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();

// Alternate player after round
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 +209,83 @@ function guessLetter(letter) {
checkGameStatus();
}

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

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

if (allLettersGuessed) {
gameWon();
return;
}
const allGuessed = [...gameState.currentWord].every(l => gameState.guessedLetters.includes(l));

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');

// Switch player for next round
gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1;
updateCurrentPlayer();
}