script.js

const suits = ['♠', '♣', '♥', '♦'];
const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];

const gameBoard = document.querySelector('.game-board');
const stockPile = document.querySelector('.stock-pile');
const wastePile = document.querySelector('.waste-pile');
const foundationPiles = document.querySelectorAll('.foundation-pile');
const tableauPiles = document.querySelectorAll('.tableau-pile');
const restartBtn = document.querySelector('#restart-btn');

restartBtn.addEventListener('click', initGame);

let deck = [];
let stock = [];
let waste = [];
let foundations = [[], [], [], []];
let tableau = [[], [], [], [], [], [], []];
let selectedCard = null;
let sourcePile = null;

// Create a standard 52-card deck
function createDeck() {
  for (const suit of suits) {
    for (const rank of ranks) {
      deck.push({ suit, rank });
    }
  }
}

// Fisher–Yates shuffle
function shuffleDeck() {
  for (let i = deck.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [deck[i], deck[j]] = [deck[j], deck[i]];
  }
}

function dealCards() {
  // Deal to tableau
  for (let i = 0; i < 7; i++) {
    for (let j = i; j < 7; j++) {
      const card = deck.pop();
      card.isFaceUp = i === j;
      tableau[j].push(card);
    }
  }
  stock = deck;
  deck = [];
}

function clearPiles(piles) {
  piles.forEach(p => p.innerHTML = '');
}

function renderCards() {
  selectedCard = null;
  sourcePile = null;

  // Clear all piles
  clearPiles([stockPile, wastePile, ...foundationPiles, ...tableauPiles]);

  // Render waste pile
  if (waste.length) {
    wastePile.appendChild(createCardElement(waste[waste.length - 1]));
  }

  // Render stock pile
  if (stock.length) {
    const cardBack = document.createElement('div');
    cardBack.classList.add('card', 'back');
    stockPile.appendChild(cardBack);
  }

  // Render tableau piles
  tableau.forEach((pile, i) => {
    pile.forEach((card, j) => {
      const e = createCardElement(card);
      e.style.top = `${j * 30}px`;
      if (!card.isFaceUp) e.classList.add('back');
      tableauPiles[i].appendChild(e);
    });
  });

  // Render foundation piles
  foundations.forEach((pile, i) => {
    if (pile.length) foundationPiles[i].appendChild(createCardElement(pile[pile.length - 1]));
  });
}

function createCardElement({ rank, suit }) {
  const el = document.createElement('div');
  el.classList.add('card');
  el.dataset.rank = rank;
  el.dataset.suit = suit;
  el.classList.add(suit === '♥' || suit === '♦' ? 'red' : 'black');
  const r = document.createElement('div');
  r.classList.add('rank');
  r.textContent = rank;
  el.appendChild(r);
  const s = document.createElement('div');
  s.classList.add('suit');
  s.textContent = suit;
  el.appendChild(s);
  return el;
}

stockPile.addEventListener('click', () => {
  if (stock.length) {
    const card = stock.pop();
    card.isFaceUp = true;
    waste.push(card);
  } else if (waste.length) {
    waste.forEach(c => c.isFaceUp = false);
    stock = waste.reverse();
    waste = [];
  }
  renderCards();
});

function initGame() {
  deck = [];
  stock = [];
  waste = [];
  foundations = [[], [], [], []];
  tableau = [[], [], [], [], [], [], []];
  selectedCard = null;
  sourcePile = null;

  createDeck();
  shuffleDeck();
  dealCards();
  renderCards();
}


gameBoard.addEventListener('click', (event) => {
  const clickedCardElement = event.target.closest('.card');

  if (selectedCard) {
    // A card is already selected, so this click is an attempt to move it.

    // Check if the user is re-clicking the selected card to deselect it.
    // We compare the element, not the card object, for simplicity.
    const sourceCardElement = sourcePile.name === 'tableau' ? tableauPiles[sourcePile.index].children[sourcePile.cardIndex] :
                  sourcePile.name === 'waste' ? wastePile.querySelector('.card') :
                  foundationPiles[sourcePile.index].querySelector('.card');

    if (clickedCardElement === sourceCardElement) {
      selectedCard = null;
      sourcePile = null;
      // Optionally, add a visual cue for deselection later
      return;
    }

    const destPileElement = event.target.closest('.tableau-pile, .foundation-pile');
    if (destPileElement) {
      const destPileName = destPileElement.classList.contains('tableau-pile') ? 'tableau' : 'foundations';
      const destPileIndex = destPileElement.classList.contains('tableau-pile')
        ? Array.from(tableauPiles).indexOf(destPileElement)
        : Array.from(foundationPiles).indexOf(destPileElement);

      if (isValidMove(selectedCard, destPileName, destPileIndex)) {
        moveCards(selectedCard, destPileName, destPileIndex);
      }
    }

    // De-select after any move attempt
    selectedCard = null;
    sourcePile = null;

  } else if (clickedCardElement && !clickedCardElement.classList.contains('back')) {
    // No card was selected, so this click is an attempt to select one.
    const pileElement = clickedCardElement.closest('.tableau-pile, .waste-pile, .foundation-pile');
    if (pileElement) {
      const pileName = pileElement.classList.contains('tableau-pile') ? 'tableau' :
               pileElement.classList.contains('waste-pile') ? 'waste' : 'foundations';

      if (pileName === 'tableau') {
        const pileIndex = Array.from(tableauPiles).indexOf(pileElement);
        const cardIndex = Array.from(pileElement.children).indexOf(clickedCardElement);
        selectedCard = tableau[pileIndex].slice(cardIndex);
        sourcePile = { name: 'tableau', index: pileIndex, cardIndex: cardIndex };
      } else if (pileName === 'waste' && waste.length > 0) {
        selectedCard = [waste[waste.length - 1]];
        sourcePile = { name: 'waste' };
      } else if (pileName === 'foundations') {
        const pileIndex = Array.from(foundationPiles).indexOf(pileElement);
        if (foundations[pileIndex].length > 0) {
          selectedCard = [foundations[pileIndex][foundations[pileIndex].length - 1]];
          sourcePile = { name: 'foundations', index: pileIndex };
        }
      }
    }
  }
});

function isValidMove(cards, destPileName, destPileIndex) {
  if (!cards || cards.length === 0) {
    return false;
  }

  const firstCard = cards[0];

  if (destPileName === 'tableau') {
    const destPile = tableau[destPileIndex];
    if (destPile.length === 0) {
      return firstCard.rank === 'K'; // Only Kings can move to an empty tableau pile
    } else {
      const topCard = destPile[destPile.length - 1];
      const isOppositeColor = ( (topCard.suit === '♥' || topCard.suit === '♦') && (firstCard.suit === '♠' || firstCard.suit === '♣') ) ||
                  ( (topCard.suit === '♠' || topCard.suit === '♣') && (firstCard.suit === '♥' || firstCard.suit === '♦') );
      const isLowerRank = ranks.indexOf(firstCard.rank) === ranks.indexOf(topCard.rank) - 1;
      return isOppositeColor && isLowerRank;
    }
  } else if (destPileName === 'foundations') {
    if (cards.length > 1) return false; // Can only move one card at a time to foundations
    const destPile = foundations[destPileIndex];
    if (destPile.length === 0) {
      return firstCard.rank === 'A';
    } else {
      const topCard = destPile[destPile.length - 1];
      const isSameSuit = topCard.suit === firstCard.suit;
      const isHigherRank = ranks.indexOf(firstCard.rank) === ranks.indexOf(topCard.rank) + 1;
      return isSameSuit && isHigherRank;
    }
  }
  return false;
}

function moveCards(cards, destPileName, destPileIndex) {
  // Remove cards from source pile
  if (sourcePile.name === 'tableau') {
    tableau[sourcePile.index].splice(sourcePile.cardIndex);
    // Flip over the new top card if it's face down
    if (sourcePile.cardIndex > 0 && tableau[sourcePile.index].length > 0) {
      tableau[sourcePile.index][sourcePile.cardIndex - 1].isFaceUp = true;
    }
  } else if (sourcePile.name === 'waste') {
    waste.pop();
  } else if (sourcePile.name === 'foundations') {
    foundations[sourcePile.index].pop();
  }

  // Add cards to destination pile
  if (destPileName === 'tableau') {
    tableau[destPileIndex].push(...cards);
  } else if (destPileName === 'foundations') {
    foundations[destPileIndex].push(...cards);
  }

  renderCards();
  checkWinCondition();
}

function checkWinCondition() {
  if (foundations.every(pile => pile.length === 13)) {
    alert('You win!');
  }
}

document.addEventListener('DOMContentLoaded', initGame);