script.js

const boardEl = document.getElementById('board');
const movesEl = document.getElementById('moves');
const matchesEl = document.getElementById('matches');
const timerEl = document.getElementById('timer');
const restartBtn = document.getElementById('restartBtn');
const winMessage = document.getElementById('winMessage');
const winStats = document.getElementById('winStats');

const icons = ['fa-rocket', 'fa-heart', 'fa-star', 'fa-bolt', 'fa-moon', 'fa-sun', 'fa-music', 'fa-gem'];
let cards = [];
let flippedCards = [];
let matchedCount = 0;
let moves = 0;
let canFlip = true;
let timer = 0;
let timerInterval = null;
let gameStarted = false;

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

function initGame() {
  cards = shuffle([...icons, ...icons]);
  flippedCards = [];
  matchedCount = 0;
  moves = 0;
  canFlip = true;
  timer = 0;
  gameStarted = false;
  clearInterval(timerInterval);
  movesEl.textContent = '0';
  matchesEl.textContent = '0/8';
  timerEl.textContent = '00:00';
  winMessage.style.display = 'none';

  boardEl.innerHTML = '';
  cards.forEach((icon, index) => {
    const card = document.createElement('div');
    card.className = 'card';
    card.dataset.index = index;
    card.dataset.icon = icon;
    card.innerHTML = `
      <div class="card-inner">
        <div class="card-face card-front"><i class="fa-solid fa-question"></i></div>
        <div class="card-face card-back"><i class="fa-solid ${icon}"></i></div>
      </div>
    `;
    card.addEventListener('click', () => flipCard(card));
    boardEl.appendChild(card);
  });
}

function startTimer() {
  gameStarted = true;
  timerInterval = setInterval(() => {
    timer++;
    const min = String(Math.floor(timer / 60)).padStart(2, '0');
    const sec = String(timer % 60).padStart(2, '0');
    timerEl.textContent = `${min}:${sec}`;
  }, 1000);
}

function flipCard(card) {
  if (!canFlip || card.classList.contains('flipped') || card.classList.contains('matched')) return;
  if (!gameStarted) startTimer();

  card.classList.add('flipped');
  flippedCards.push(card);

  if (flippedCards.length === 2) {
    moves++;
    movesEl.textContent = moves;
    canFlip = false;
    checkMatch();
  }
}

function checkMatch() {
  const [card1, card2] = flippedCards;
  if (card1.dataset.icon === card2.dataset.icon) {
    card1.classList.add('matched');
    card2.classList.add('matched');
    matchedCount++;
    matchesEl.textContent = `${matchedCount}/8`;
    flippedCards = [];
    canFlip = true;
    if (matchedCount === 8) endGame();
  } else {
    setTimeout(() => {
      card1.classList.remove('flipped');
      card2.classList.remove('flipped');
      flippedCards = [];
      canFlip = true;
    }, 800);
  }
}

function endGame() {
  clearInterval(timerInterval);
  const min = String(Math.floor(timer / 60)).padStart(2, '0');
  const sec = String(timer % 60).padStart(2, '0');
  winStats.textContent = `Completed in ${moves} moves and ${min}:${sec}!`;
  winMessage.style.display = 'flex';
}

restartBtn.addEventListener('click', initGame);
initGame();