wordle.js

// window.addEventListener("load", function() {
//     const header = document.querySelector("#header")
//     header.classList.add("test")
// })

let guessWord = "";
let letterIndex = 0;
let answerWord = ""
let pastGuesses = []
let storageWords = ""
let onProcess = true
let pauseProcess = false

function clearCurrentGuess(){
    guessWord = "";
    letterIndex = 0;
    let boxes = document.querySelectorAll(".guessBox")
    boxes.forEach(b =>{
        b.innerHTML="";
    })
    unableEntter()
}

function clearAll(){
    clearCurrentGuess()
    pastGuesses=[];
    storageWords=""
    let guessBoxes = document.querySelectorAll(".pastGuessBox")
    guessBoxes.forEach(box =>{
        box.innerText="";
        box.classList.remove("rightLetter");
        box.classList.remove("noneThisLetter")
        box.classList.remove("wrongPosition")
    })
    let buttonBoxes = document.querySelectorAll(".keyboard-letter");
    buttonBoxes.forEach(box => {
        box.classList.remove("rightLetter");
        box.classList.remove("noneThisLetter")
        box.classList.remove("wrongPosition")
    })
}

function newgame() {
    // console.log("newgame() :: clicked")
    // clearAll()
    // getNewAnswer()
    if(!onProcess){
        return
    }
    let ifPlaying = document.querySelector(".ifPlaying")
    ifPlaying.style.display="block"
    ifPlaying.style.zIndex=1

}

function unableEntter(){
    let enterButton = document.querySelector(`#enter`)
    enterButton.style.backgroundColor = "lightgrey";
}

function letterPressed(key){
    // console.log(`letterPressed(${key}) :: clicked`)
    if(!onProcess || pauseProcess){
        return;
    }
    if(letterIndex === 6){
        return
    }
    let row = document.querySelectorAll(".guessBox");
    let currentBox = row[letterIndex];
    currentBox.innerText=`${key}`;
    guessWord = guessWord + (`${key}`)
    letterIndex += 1;

    localStorage.setItem("CurrentGuess", guessWord)

    if (letterIndex === 6){
        let enterButton = document.querySelector(`#enter`)
        enterButton.style.backgroundColor = "lightgreen";
    }

}

function backspace() {
    // console.log("backspace() :: clicked")
    if(!onProcess || pauseProcess){
        return;
    }
    if(letterIndex < 1){
        return;
    }
    else{
        guessWord=guessWord.slice(0,(guessWord.length-1));
        letterIndex -= 1;
        let row = document.querySelectorAll(".guessBox");
        let currentBox = row[letterIndex];
        currentBox.innerText = "";
        unableEntter()
    }
}


//check if the guess string is a word that's contained in the linked word library
async function isWordValid(word) {
    // TODO: fix
    let resp = await fetch(`https://words.trex-sandwich.com/${word}`);
    let json = await resp.json()
    console.log("isValid "+word)
    return json.valid;
}

async function submit() {
    // console.log("submit() :: clicked")
    if(!onProcess || pauseProcess){
        return;
    }
    if(answerWord === ""){
        return;
    }
    if(letterIndex < 6){
        alert("Not enough letters")
        return
    }

    if ( await isWordValid(guessWord)) {
        // Submit the guessWord into the past guesses
        // Reset guessWord to ""
        // Determine if it is game over
        checkWord()
        // console.log(storageWords)
        storageWords = storageWords + guessWord + " "
        // console.log(storageWords)
        localStorage.setItem("history",storageWords)
        // localStorage.removeItem("CurrentGuess")
        // console.log(pastGuesses)
        clearCurrentGuess()
    } else {
        document.querySelector("#currentGuess").classList.add("animate__headShake");
        document.querySelector("#currentGuess").classList.add("animate__animated");
        unableEntter()
    }
}

function checkWord(){
    if(pastGuesses.length === 6){
        return
    }
    let rows = document.querySelectorAll(".pastGuessRow")
    let row = rows[pastGuesses.length]
    let boxes = row.querySelectorAll(".pastGuessBox")
    // console.log(boxes)
    for (let i = 0; i < guessWord.length; i++){
        let currentBox = boxes[i];

        let thisLetter = guessWord.toLowerCase()[i];
        currentBox.innerText = `${thisLetter}`
        let buttonLetter = document.querySelector(`#${thisLetter}`)
        let letterPosition = answerWord.toLowerCase().indexOf(thisLetter);
        if(letterPosition === -1){
            currentBox.classList.add("noneThisLetter")
            buttonLetter.classList.add("noneThisLetter")
        }
        else if(guessWord.toLowerCase()[i] == answerWord.toLowerCase()[i]){
            currentBox.classList.add("rightLetter");
            buttonLetter.classList.add("rightLetter");
            currentBox.classList.remove("wrongPosition")
            buttonLetter.classList.remove("wrongPosition")
        }
        else if (!buttonLetter.classList.contains("rightLetter")){
            currentBox.classList.add("wrongPosition");
            buttonLetter.classList.add("wrongPosition");
        }
        else {
            currentBox.classList.add("wrongPosition");
            // buttonLetter.classList.add("wrongPosition");
        }
    }
    pastGuesses.push(guessWord)
    if(guessWord.toLowerCase() === answerWord){
        pauseProcess=true;
        // setTimeout(newgame,1000)
        newgame();
    }
}

async function getNewAnswer(){
    let rep = await fetch(`https://words.trex-sandwich.com/?count=1&length=6`)
    let repJson = await rep.json();
    answerWord = repJson[0];
    console.log(answerWord);
    localStorage.setItem("TargetWord",answerWord)
    let enterButton = document.querySelector(`#enter`)
    enterButton.style.backgroundColor = "lightgrey";
    // console.log(answerWord.toUpperCase()[0])
}

function iniPastArea(){
    let area = document.querySelector("#pastGuessArea");
    for (let i = 0; i < 6; i++){
        let row = document.createElement("div");
        row.className="pastGuessRow";

        for (let j=0; j < 6; j++){
            let box = document.createElement("div")
            box.className = "pastGuessBox";
            row.append(box)
        }
        area.append(row)
    }
}

window.addEventListener("keydown", key =>{
    if(key.key.match(/^[a-zA-Z]$/)){
        letterPressed(key.key.toLowerCase())
        let letter = document.querySelector(`#${key.key.toLowerCase()}`)
        letter.classList.add("makeBigger")
    } else if (key.key.toLowerCase() === "backspace") {
        backspace();
    } else if (key.key.toLowerCase() === "enter") {
        submit();
    } else if (key.key.toLowerCase() === "escape") {
        newgame();
    } else {
        console.log("Unrecognised key press: ");
        console.log(key);
    }
})

function restoreStage(){
    if (localStorage.getItem("history") == null){
        return;
    }
    answerWord = localStorage.getItem("TargetWord");
    let words = localStorage.getItem("history").split(" ")
    words=words.slice(0,words.length-1)
    words.forEach(word =>{
        guessWord = word;
        checkWord()
    })
    if(localStorage.getItem("CurrentGuess") != null) {
        guessWord = localStorage.getItem("CurrentGuess")
        if(guessWord.length !== 6) {
            let row = document.querySelectorAll(".guessBox");
            letterIndex = 0;
            for (let i = 0; i < guessWord.length; i++) {
                let currentBox = row[letterIndex];
                currentBox.innerText = guessWord.charAt(i);
                letterIndex += 1;
            }
        }
        else {guessWord=""}
        // if (letterIndex === 6) {
        //     let enterButton = document.querySelector(`#enter`)
        //     enterButton.style.backgroundColor = "lightgreen";
        // }
    }
    console.log(pastGuesses)
}

window.addEventListener("DOMContentLoaded",()=>{
    // let word = localStorage.getItem("TargetWord")
    // console.log(word.charAt(0))
    iniPastArea()
    // localStorage.clear()
    // getNewAnswer()
    if(localStorage.getItem("history") != null){
        console.log(localStorage)
        console.log(storageWords)
        storageWords = localStorage.getItem("history")
        console.log(storageWords)
        restoreStage();
    }
    else {getNewAnswer()}
    const buttons = document.querySelectorAll(".keyboard-letter")
    buttons.forEach(key => {
        key.addEventListener("click",()=>{
            letterPressed(key.id.toLowerCase());
            key.classList.add("makeBigger");
        })
    });

    document.querySelector("#new-game").addEventListener("click", newgame);
    document.querySelector("#delete").addEventListener("click",backspace);
    document.querySelector("#enter").addEventListener("click",submit)

    document.querySelector("#yes").addEventListener("click",evt=>{
        console.log("yes")
        onProcess=true;
        pauseProcess = false;
        clearAll()
        localStorage.clear();
        getNewAnswer()
        let ifPlaying = document.querySelector(".ifPlaying")
        ifPlaying.style.display="none";
        ifPlaying.style.zIndex = "-1";
    })

    document.querySelector("#no").addEventListener("click", evt =>{
        console.log("no");
        if(!pauseProcess){
            onProcess=false;
        }
        let ifPlaying = document.querySelector(".ifPlaying")
        ifPlaying.style.display="none";
        ifPlaying.style.zIndex = "-1";
        localStorage.clear()
    })

    buttons.forEach(key =>{
        key.addEventListener("animationend",()=>{
            key.classList.remove("makeBigger")
        })
    })
    // setup

    window.addEventListener("animationend", (elem) => {
        if (elem.target.id === "currentGuess") {
            elem.target.classList.remove("animate__headShake");
            elem.target.classList.remove("animate__animated");

        }
    })
})