Super-Memory/script.js

const cardsArray = [
    { name: 'v1', img: 'img/v1.jpg' },
    { name: 'v2', img: 'img/v2.jpg' },
    { name: 'v3', img: 'img/v3.jpg' },
    { name: 'v4', img: 'img/v4.jpg' },
    { name: 'v5', img: 'img/v5.jpg' },
    { name: 'v6', img: 'img/v6.jpg' },
    { name: 'v7', img: 'img/v7.jpg' },
    { name: 'v8', img: 'img/v8.jpg' }
];

let gameGrid = cardsArray.concat(cardsArray).sort(() => 0.5 - Math.random());

const game = document.querySelector('.memory-game');

gameGrid.forEach(item => {
    const card = document.createElement('div');
    card.classList.add('memory-card');
    card.dataset.name = item.name;

    const frontFace = document.createElement('img');
    frontFace.classList.add('front-face');
    frontFace.src = item.img;

    const backFace = document.createElement('div');
    backFace.classList.add('back-face');

    card.appendChild(frontFace);
    card.appendChild(backFace);
    game.appendChild(card);
});

const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let matchCount = 0;
let attempts = 0;
const maxAttempts = 15;

const popup = document.getElementById('popup');
const popupMessage = document.getElementById('popup-message');
const restartButton = document.getElementById('restart-button');
const attemptsDisplay = document.getElementById('attempts');
const confettiDiv = document.getElementById('confetti');

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

    this.classList.add('flip');

    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;
        return;
    }

    secondCard = this;
    checkForMatch();
}

function checkForMatch() {
    let isMatch = firstCard.dataset.name === secondCard.dataset.name;
    if (isMatch) {
        matchCount++;
        disableCards();
        if (matchCount === cardsArray.length) {
            showPopup('Du hast gewonnen, Glückwunsch');
            startConfetti(); // Start confetti
        }
    } else {
        attempts++;
        attemptsDisplay.textContent = maxAttempts - attempts;
        if (attempts >= maxAttempts) {
            showPopup('Du hast leider verloren, spiel neustarten?');
        } else {
            unflipCards();
        }
    }
}

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    resetBoard();
}

function unflipCards() {
    lockBoard = true;

    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        resetBoard();
    }, 1500);
}

function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

function showPopup(message) {
    popupMessage.textContent = message;
    popup.classList.remove('hidden');
    if (message.includes('gewonnen')) {
        confettiDiv.classList.remove('hidden'); // Zeige die confetti div
    }
}

function hidePopup() {
    popup.classList.add('hidden');
    confettiDiv.classList.add('hidden'); // Verstecke confetti div
    stopConfetti(); // Stopt confetti effect
    resetGame();
}

function resetGame() {
    matchCount = 0;
    attempts = 0;
    attemptsDisplay.textContent = maxAttempts;
    game.innerHTML = '';
    gameGrid = cardsArray.concat(cardsArray).sort(() => 0.5 - Math.random());
    gameGrid.forEach(item => {
        const card = document.createElement('div');
        card.classList.add('memory-card');
        card.dataset.name = item.name;

        const frontFace = document.createElement('img');
        frontFace.classList.add('front-face');
        frontFace.src = item.img;

        const backFace = document.createElement('div');
        backFace.classList.add('back-face');

        card.appendChild(frontFace);
        card.appendChild(backFace);
        game.appendChild(card);
    });
    document.querySelectorAll('.memory-card').forEach(card => card.addEventListener('click', flipCard));
}

function startConfetti() {
    if (!confetti.instance) {
        confetti.instance = new confetti.Context('confetti');
    }
    confetti.instance.start();
}

function stopConfetti() {
    if (confetti.instance) {
        confetti.instance.stop();
    }
}

cards.forEach(card => card.addEventListener('click', flipCard));
restartButton.addEventListener('click', hidePopup);