app.js

let gameSeq=[];
let userSeq=[];
let history=[];

let started = false;
let level = 0;
let lvlhead = document.querySelector(".level");
let btns = document.querySelectorAll(".btn_container div");
let btnsContainer = document.querySelector(".btn_container");
let body = document.querySelector("body");

document.addEventListener("keypress", function(){
    if(started == false){
        console.log("Game started");
        started = true;
        levelup();
    }
});

function gameFlash(btn){
    setTimeout(function(){
        btn.classList.add("flash");
    }, 200);
    setTimeout(function(){
       btn.classList.remove("flash"); 
    }, 550);
}
function userFlash(btn){
    btn.classList.add("userFlash");
    setTimeout(function(){
        btn.classList.remove("userFlash");
    }, 100);
}

function levelup(){
    level++;
    lvlhead.innerText = `Level ${level}`;
    userSeq = []; // Reset userSeq at the start of each level

    // Generate random btn
    let randIdx = Math.floor(Math.random() * 4);
    let randBtn = btns[randIdx];
    let btnClass = randBtn.classList[0]; // Use unique class as identifier
    gameSeq.push(btnClass);

    gameFlash(randBtn);
}

function btnPress(){
    if(started == true){
        let btn = this;
        userFlash(btn);
        let btnClass = btn.classList[0];
        userSeq.push(btnClass);
        check(userSeq.length - 1);
    }
}

for(let btn of btns){
    btn.addEventListener("click", btnPress);
}

function check(idx){
    if(userSeq[idx] === gameSeq[idx]){
        if(userSeq.length === gameSeq.length){
            levelup();
        }
    }else{
        history.push(level);
        lvlhead.innerHTML = `Game Over! <br><b style = "font-size:larger">Your Score: ${level}<br>Your highest score: ${highest()}<br></br></b>  Press any key to start.`;
        body.classList.add("wrong");
        setTimeout(function(){
            body.classList.remove("wrong");
        }, 100);
        started = false;
        gameSeq = [];
        userSeq = [];
        level = 0;
    }
}

function highest(){
        let t = 0;
    for(let i = 0; i < history.length; i++){
        if(history[i] > t){
            t = history[i];
        }
    }
    return t;
}

const aboutBtn = document.querySelector("header button");
const panel = document.querySelector(".panel");

aboutBtn.addEventListener("click", () => {
    panel.classList.toggle("active");
});