const game = document.getElementById("game");
const movesText = document.getElementById("moves");
const scoreText = document.getElementById("score");

let moves = 0;
let score = 0;
let firstCard = null;
let lock = false;

let icons = ["🍎", "🍌", "🍇", "🍓", "🍒", "🍑", "🍍", "🥝"]; // 8 pairs
let cards = [...icons, ...icons];
cards.sort(() => Math.random() - 0.5);

cards.forEach(icon => {
    const div = document.createElement("div");
    div.className = "card";
    div.dataset.icon = icon;
    div.textContent = "?";
    game.appendChild(div);
});

game.querySelectorAll(".card").forEach(card => {
    card.addEventListener("click", () => {
        if(lock || card.classList.contains("open") || card.classList.contains("matched")) return;

        card.classList.add("open");
        card.textContent = card.dataset.icon;

        if(!firstCard){
            firstCard = card;
            return;
        }

        moves++;
        movesText.textContent = moves;
        lock = true;

        if(firstCard.dataset.icon === card.dataset.icon){
            score += 100;
            scoreText.textContent = score;

            firstCard.classList.add("matched");
            card.classList.add("matched");

            firstCard = null;
            lock = false;

            saveScore(score);
        } else {
            score -= 20;
            scoreText.textContent = score;
            
            setTimeout(() => {
                firstCard.classList.remove("open");
                firstCard.textContent = "?";
                card.classList.remove("open");
                card.textContent = "?";

                firstCard = null;
                lock = false;
            }, 700);
        }
    });
});

function saveScore(score){
    fetch("save_score.php", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: "score=" + score
    });
}