var x = false;


class soundEffects
{
    constructor()
    {
        this.backGroundMusic = new Audio('Sounds/BackGround.mp3');
        this.backGroundMusic.volume=0.5;
        this.backGroundMusic.loop= true;
        this.flipSoundvoice = new Audio('Sounds/flip.wav');
        this.introMusic = new Audio ('Sounds/Intro.mp3');
        this.matchedVoice = new Audio ('Sounds/Matched.mp3');
        this.victoRy= new Audio('Sounds/Victory.mp3');
    }
    flipSound()
    {
        this.flipSoundvoice.play();
    }
    intro()
    {
        this.introMusic.play();
    }
    back()
    {
        this.backGroundMusic.play();
    }
    matchedS()
    {
        this.matchedVoice.play();
    }
    victory()
    {
        this.victoRy.play();
    }
}
function startGame(nOofPairs){

    var cards;
    alert(nOofPairs);
    if (nOofPairs === 36)
    {
        cards= document.querySelectorAll('.memory-card');
        cards.forEach(card => {
            card.classList.remove('flip');
      });

    }

    if (nOofPairs === '64')
    {
        var div = document.createElement('div');
        div.className = 'memory-card';
        div.innerHTML =
            '<img class="front-face" src="2.png" >\
            <img class="back-face" src="back.png">';
        document.getElementById('content').appendChild(div);

        var div2 = document.createElement('div2');
        div2.className = 'memory-card';
        div2.innerHTML =
            '<img class="front-face" src="2.png" >\
            <img class="back-face" src="back.png">';
        document.getElementById('content').appendChild(div2);

        cards= document.querySelectorAll('.memory-card');
        cards.forEach(card => {
            card.classList.remove('flip');
      });


    }



    //let sound = new soundEffects();
    sound.intro();
    //sound.back();
    //const cards= document.querySelectorAll('.memory-card');
 /*cards.forEach(card => {
        card.classList.remove('flip');
  });
 */


let hasFlippedCard=false;
let firstCard, secondCard;
let lockBoard=false;
var flips=0;
var counter=0;
var hit=0;


function flipCard(){
    if(lockBoard){return;}
    if(this===firstCard){return;}

    flips++;
    sound.flipSound();
    document.getElementById('flips').innerText=flips;
    this.classList.toggle('flip');

    if(!hasFlippedCard){

    hasFlippedCard=true;
    firstCard=this;
    }
    else{
        hasFlippedCard=false;
        secondCard=this;

        if(firstCard.dataset.framework===secondCard.dataset.framework){
          firstCard.removeEventListener('click',flipCard);
          secondCard.removeEventListener('click',flipCard);
           hit++;
           sound.matchedS();
        }
        else{
            lockBoard=true;
            setTimeout(() => {
            firstCard.classList.remove('flip');
            secondCard.classList.remove('flip');
            lockBoard=false;
            firstCard= null;
        },1500);
        }
    }
}
/*(function shuffle(){
    cards.forEach(card => {
        let randomPos = Math.floor(Math.random()*36);
        card.style.order = randomPos;
  });
})();*/
cards.forEach(card => card.addEventListener('click',flipCard));

    function time(){
document.getElementById('time-remaining').innerText=counter;
counter++;
if(hit==18){clearInterval(t);
document.getElementById('victory-text').classList.add('visible');
sound.victory();
document.getElementById('flips').innerText=0;
}
}

var t=setInterval(time,1000);

}

    let sound = new soundEffects();

    function updateCards()
    {
        var e = document.getElementById("keke");
        let strUser = e.options[e.selectedIndex].value;
        startGame(strUser);
    }


    //startGame(strUser);


    let overlays = Array.from(document.getElementsByClassName('overlay-text'));
    overlays.forEach( overlay => {
        overlay.addEventListener('click',() => {
            overlay.classList.remove('visible');
            sound.back();
            startGame(36);
        });
    });