lingo/js/index.js

const submitForm = document.getElementById('submitForm');
const guessForm = document.getElementById('guessForm');
const guessesList = document.getElementById('guesses');
const wordElement = document.getElementById('word');
const resultElement = document.getElementById('result');

var word;
var wordArray;
var audio = {
    correctPlace: new Audio('../assets/goede letter goede plek.wav'),
    correctLetter: new Audio('../assets/goede letter foute plek.wav'),
    incorrect: new Audio('../assets/foute letter.wav'),
    allCorrect: new Audio('../assets/alle letters goed.wav'),
    submitWord: new Audio('../assets/send word keyboard.wav'),
    giveUp: new Audio('../assets/woord niet geraden.wav'),
    error: new Audio('../assets/keyboard delete letter.wav')
}

function countInstances(array, value) {
    var instances = 0;
    for (let index = 0; index < array.length; index++) {
        if (array[index] == value) {
            instances = instances + 1;
        }
    }
    return instances;
}

function checkWord(guessArray, wordArray) {
    var processedLetters = [];
    var result = [];
    for (let index = 0; index < wordArray.length; index++) {
        if (countInstances(processedLetters, guessArray[index]) < countInstances(wordArray, guessArray[index])) {
            if (wordArray[index] == guessArray[index]) {
                result.push('blue');
            } else if (wordArray.indexOf(guessArray[index]) != -1) {
                result.push('orange');
            } else {
                result.push('red');
            }
        } else {
            result.push('red');
        }
        processedLetters.push(guessArray[index]);
    }
    return result;
}

submitForm.addEventListener('submit', function(event) {
    event.preventDefault();
    word = submitForm.children[0].value;
    if (word.split('').length > 0) {
        word = word.toUpperCase();
        wordArray = word.split('');
        resultElement.innerHTML = '';
    
        if (wordArray.includes(' ')) {
            audio.error.play();
            resultElement.innerHTML = "JP: Er mogen geen spaties in een Lingowoord.";
        } else {
            audio.submitWord.play();
            submitForm.style.display = 'none';
            guessForm.style.display = 'block';
            document.getElementById('letterCount').innerHTML = wordArray.length + " letter Lingo";
            for (let index = 0; index < wordArray.length; index++) {
                if (index == 0) {
                    wordElement.innerHTML += `<span class="letter blue">${wordArray[index]}</span>`;
                } else {
                    wordElement.innerHTML += `<span class="letter grey">-</span>`;
                }
            }
        }
    } else {
        audio.error.play();
        resultElement.innerHTML = "JP: Dat woord is wel erg kort.";
    }
});

guessForm.addEventListener('submit', function(event) {
    event.preventDefault();
    var guess = guessForm.children[0].value;
    guess = guess.toUpperCase();
    var guessArray = guess.split('');
    guessForm.children[0].value = '';
    resultElement.innerHTML = '';

    if (wordArray != undefined) {
        if (guess.length == word.length) {
            var result = checkWord(guessArray, wordArray);
            if (guessesList.innerHTML != '') {
                guessesList.innerHTML += '<br>'; 
            }
            let index = 0;
            function showLetter() {
                const color = result[index];
                guessesList.innerHTML += `<span class="letter ${color}">${guessArray[index]}</span>`;
                if (color == 'blue') { 
                    audio.correctPlace.currentTime = 0;
                    audio.correctPlace.play(); 
                }
                else if (color == 'orange') { 
                    audio.correctLetter.currentTime = 0;
                    audio.correctLetter.play(); 
                }
                else if (color == 'red') { 
                    audio.incorrect.currentTime = 0;
                    audio.incorrect.play(); 
                }
                index++;
                if(index < guessArray.length){
                    setTimeout(showLetter, 200);
                } else if (guess == word) {
                    audio.allCorrect.play();
                    resultElement.innerHTML = "JP: Gefeliciteerd, u heeft gewonnen";
                    guessForm.style.display = 'none';
                }
            }
            showLetter();
        } else {
            audio.error.play();
            resultElement.innerHTML = "JP: Dit woord is niet de goede lengte.";
        }
    }
});

document.getElementById('giveUp').addEventListener('click', function () {
    audio.giveUp.play();
});

document.getElementById('restart').addEventListener('click', function () {
   location.reload(); 
});