const imageList = [
    "alpukat.jpg",
    "anggur.jpg",
    "apel.jpg",
    "buah naga.jpg",
    "jambu.jpg",
    "jeruk.jpg",
    "lemon.jpg",
    "nanas.jpg",
    "pisang.jpg",
    "semangka.jpg"
];

let images = [...imageList, ...imageList];


function shuffle(array) {
    let currentIndex = array.length, randomIndex;

    while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
    }
    return array;
}

let time = 60;
let timerElement = document.getElementById("timer");
let movesElement = document.getElementById("moves");
let scoreElement = document.getElementById("score");
let timerStarted = false;
let countdown;
let moves = 0;
let score = 0;


let flippedCards = [];

function startTimer() {
    if (timerStarted) return;
    timerStarted = true;

    countdown = setInterval(() => {
        time--;
        timerElement.textContent = time;

        if (time <= 0) {
            clearInterval(countdown);
            alert("Waktu Habis");
        }
    }, 1000);
}


function flipCard(card, img) {
    if (!timerStarted) startTimer();

    if (flippedCards.length >= 2 || card.classList.contains("matched") || flippedCards.includes(card)) return;

    card.querySelector(".front").style.display = "none";
    card.querySelector(".back").style.display = "block";
    flippedCards.push(card);

    if (flippedCards.length === 2) {
        moves++;
        movesElement.textContent = moves;

        const firstImg = flippedCards[0].querySelector(".back img").src;
        const secondImg = flippedCards[1].querySelector(".back img").src;

        if (firstImg === secondImg) {
            flippedCards[0].classList.add("matched");
            flippedCards[1].classList.add("matched");
            score += 10;
            scoreElement.textContent = score;
            flippedCards = [];
        } else {
            setTimeout(() => {
                flippedCards[0].querySelector(".front").style.display = "block";
                flippedCards[0].querySelector(".back").style.display = "none";
                flippedCards[1].querySelector(".front").style.display = "block";
                flippedCards[1].querySelector(".back").style.display = "none";
                flippedCards = [];
            }, 800);
        }
    }
}


function startGame() {
    const board = document.getElementById("game-board");
    board.innerHTML = "";

    const shuffled = shuffle([...images]);

    shuffled.forEach(img => {
        const card = document.createElement("div");
        card.classList.add("card");

        card.innerHTML = `
            <div class="inner">
                <div class="front">?</div>
                <div class="back" style="display:none;"><img src="${img}"></div>
            </div>
        `;

        card.onclick = () => flipCard(card, img);
        board.appendChild(card);
    });


    time = 60;
    timerElement.textContent = time;
    timerStarted = false;
    moves = 0;
    score = 0;
    movesElement.textContent = moves;
    scoreElement.textContent = score;
}


startGame();