const sentences = [
    "<Type[TAB]this sentence to play.",
    "Welcome to the game.",
    "Coding is fun.",
    "You're doing great!",
    "Last sentence, you made it."
];
let currentSentence = 0;
let currentPosition = 0;

const sentenceDiv = document.getElementById("sentence");

function loadSentence() {
    sentenceDiv.innerHTML = "";
    const sentenceArray = sentences[currentSentence].split("");

    sentenceArray.forEach((char, index) => {
        const span = document.createElement("span");
        span.id = `char${index}`;
        span.innerText = char;
        sentenceDiv.appendChild(span);
    });

    currentPosition = 0;
}

function checkInput(e) {
    const keyMap = {
        9: "[TAB]",
        36: "[HOME]",
        35: "[END]",
        37: "[LEFT]",
        39: "[RIGHT]"
    };

    const typedChar = String.fromCharCode(e.which);

    // Use this part to capture other keys like Home, End, etc.
    // For example, if(e.which === 36) { console.log("Home key pressed"); }

    if (typedChar === sentences[currentSentence][currentPosition]) {
        const targetSpan = document.getElementById(`char${currentPosition}`);
        targetSpan.className = "correct";
        currentPosition++;

        if (currentPosition === sentences[currentSentence].length) {
            currentSentence++;

            if (currentSentence < sentences.length) {
                loadSentence();
            } else {
                sentenceDiv.innerHTML = "Congratulations, you've completed all the challenges!";
            }
        }
    }
}

document.addEventListener("keypress", checkInput);

loadSentence();