wordle.js

const rows = document.querySelectorAll('.rows'); // Nodelist qui représente les lignes ou niveaux
const rowsArray = Array.from(rows); //  on crée un tableau à partir de rows, ils sont 6 et sont indexés de 0 à 5
let msg = ""; // on crée un message vide
let wordBuffer = ""; // on crée un buffer pour stocker les lettres saisies
let isInputValidated = false; // on crée un booléen pour vérifier si le mot saisi est valide
let isWordOfTheDay = false; // on crée un booléen pour vérifier si le mot saisi est le mot du jour
let currentRowIndex = 0; // on crée un index pour savoir sur quelle ligne on se trouve

init(); // on initialise le jeu

document.querySelector('#switch').addEventListener('click', darkMode); // on ajoute un listener sur le bouton pour changer de thème
document.addEventListener('keyup', fillRow); // on ajoute un listener sur le document pour remplir les lignes

// Fonction appelée à chaque fois qu'une touche est tapée
async function fillRow(e){ // à chaque fois qu'une touche est tapée

    const letterBuffer = e.key; //cette touche est gardée dans letterBuffer
    if(isLetter(letterBuffer) && wordBuffer.length < 5) { // on vérifie si cette touche est une lettre et que la longueur du mot ne dépasse pas 5 lettres
        wordBuffer += letterBuffer.toLowerCase() // si oui on le concaténe à l'ancienne valeur de word buffer
        rowsArray[currentRowIndex].children[wordBuffer.length - 1].textContent = letterBuffer.toUpperCase(); // on remplit en même temps la colonne correspondante
    }
    if (letterBuffer === 'Backspace') { // on vérifie si la touche tapée est 'Backspace'
        wordBuffer = clearLast(wordBuffer); // alors on efface la dernière lettre saise
    }
    if (letterBuffer === 'Enter') { // si la touche saisie est 'Enter' alors on vérifie la réponse donnée
        const data = await fetch('https://words.dev-apis.com/validate-word', { // on vérifie si le mot saisi est valide
            method: 'POST',
            body : JSON.stringify({ word: wordBuffer })
        }); 
        const validate = await data.json(); // on récupère le résultat de la vérification
        const isValidWord = validate.validWord; // on récupère la valeur de validWord
        isInputValidated = checkRow(wordBuffer, isInputValidated); // on donne la valeur de retour qui est un booléen a isInputValidated
        if (isInputValidated && isValidWord) { // si le input est validé alors
            const promise = await fetch('https://words.dev-apis.com/word-of-the-day'); // on récupère le mot du jour
            const wordObject = await promise.json(); 
            const word = wordObject.word;
            const wordMatch = checkWord(wordBuffer, word); // on passe a 'wordMatch' le booléen de retour de checkWord() qui vérifie si c'est le bon mot
            const columns = Array.from(rowsArray[currentRowIndex].children) // Crée un tableau à partir des colonnes de chaque ligne pour changer la couleur selon la validité de la réponse
            if (wordMatch){ // si c'est le bon mot alors
                document.removeEventListener('keyup', fillRow); // on supprime le listener
                columns.forEach(column => { // on update le background en vert si on trouve
                    changeStyle(column, "#538d4e", "white", "none"); // on update le style de la colonne avec une couleur verte
                });
                setTimeout(() => { // on attend 1 secondes
                    msg = `Good job, the word of the day was, ${word.toUpperCase()} 🎉🎉🎉`; // on crée un message de succès
                    alert(msg); // on affiche une alerte contenant le message de succès
                    init(); // on réinitialise le jeu
                }, 1000);
            } else { // si ce n'est pas le bon mot alors
                const temp = word.split(""); // on crée un tableau temporaire avec les lettres du mot du jour
                for (let i = 0; i < wordBuffer.length; i++) { // on parcours le mot saisi
                    for (let j = 0; j < word.length; j++) { // on parcours en même temps le mot du jour
                        if (wordBuffer[i] === temp[j]) { // si on trouve des caractères se ressemblant alors
                            
                            changeStyle(columns[i], "#b59f3b", "white", "none"); // on update le style de la colonne avec une couleur orange
                            
                            if (i === j) { // si en plus de se ressembler ils sont à la même position
                                changeStyle(columns[i], "#538d4e", "white", "none"); // on update le style de la colonne avec une couleur verte
                            }
            
                            temp[j] = ""; // on supprime la colonne pour ne pas la reprendre dans la boucle

                            break; // sans le break, toutes les réponse seront coloriés en rouge il attend que j se termine pour changer le background alors que nous on veut un update à chaque itération
                        } else { 
                            changeStyle(columns[i], "#3a3a3c", "white", "none"); // on update le style de la colonne avec une couleur grise foncée
                        }
                        
                    }
                }
                wordBuffer = ""; // on vide le buffer
                currentRowIndex++; // et on passe à la ligne suivante
                
                if (currentRowIndex === 6) { // si on est à la dernière ligne alors
                    document.removeEventListener('keyup', fillRow); // on supprime le listener
                    setTimeout(() => { // on attend 1 secondes
                        msg = `You lose, the word of the day was, ${word.toUpperCase()} 😡😡😡`; // on crée un message d'erreur
                        alert(msg); // on affiche une alerte contenant le message d'erreur
                        init(); // on réinitialise le jeu
                    }, 1000);
                }
            }
        } else {
            msg = "not a word 😡😡"; // on crée un message d'erreur
            alert(msg); // si la réponse n'est pas valide, on affiche une alerte contenant le message d'erreur
        }
    }

}

// Contrôle de saisie: vérifie si la touche saisie est une lettre
function isLetter(letter) {

    return /^[a-zA-Z]$/.test(letter); // on vérifie si la touche 'letter' appartient à l'alphabet, majuscule ou minuscule puis on la retourne

}

// Contrôle de saisie: efface la dernière lettre saisie
function clearLast(word) {

    rowsArray[currentRowIndex].children[wordBuffer.length - 1].textContent = ""; // on vide la dernière colonne remplie
    return word.slice(0, -1); // on efface la dernière lettre du mot

}

// Contrôle de saisie: vérifie si le mot fait 5 lettres et existe sinon il renvoie une erreur.
function checkRow(wordTemp, validateInput){

    if (wordTemp.length < 5) { // on vérifie si il a remplie tous les colones, si non
        alert('not enough letters'); // on renvoie une alerte notifiant qu le nombre de lettre saisies est incomplet
        validateInput = false; // et on infirme la validation
    } else { // si on a 5 lettres alors
        validateInput = true; // on valide
    }
    return validateInput; // on retourne la valeur de isInputValidated

}

// Validation du mot de 5 caractère saisi
function checkWord(wordTemp, word) {

    isWordOfTheDay = (wordTemp === word)? true : false; // si le mot saisi et le mot à deviner sont les mêmes, alors isValidated est vraie sinon elle est fausse 
    return isWordOfTheDay; // on retourne la valeur de isValidated

}

// Fonction qui permet de réinitialiser le jeu
function init() {

    wordBuffer = ""; // on vide le buffer
    currentRowIndex = 0; // on remet l'index de la ligne à 0
    isInputValidated = false; // on remet la validation de la saisie à false
    isWordOfTheDay = false;  // on remet la validation du mot à false

}

// Fonction qui permet de changer le thème
function darkMode() {

    const columns = document.querySelectorAll('.columns'); // on récupère les colonnes pour le thème sombre
    document.querySelector('#main').classList.toggle('dark'); // on ajoute ou on supprime la classe 'dark' à l'élément 'main'
    const input = document.querySelector('.input'); // on récupère l'input pour le thème sombre
    input.classList.toggle('dark'); // on ajoute ou on supprime la classe 'dark' à l'élément 'input'
    if (input.classList.contains('dark')) { // si l'input contient la classe 'dark' alors
        columns.forEach(column => { // on parcours les colonnes pour changer la couleur de la bordure
            column.style.border = '1px solid var(--dark-theme-border)';
        })
    } else { // sinon on remet la couleur de la bordure par défaut
        columns.forEach(column => {
            column.style.border = '1px solid var(--light-theme-border)';
        })
    }
}

// Fonction qui permet de changer le style d'un élément
function changeStyle(element, backgroundColor, color, border) {
    element.style.backgroundColor = backgroundColor;
    element.style.color = color;
    element.style.border = border;
}

// petit bonus pour ouvrir le clavier mobile

// ouvrir directement le clavier mobile
function openKeyboard() {
    const input = document.querySelector('.for_keyboard');
    input.focus();
}
openKeyboard();