Modern Solitaire

Okay, let's build a modern Solitaire game. We'll start with the HTML structure, CSS styling, and the basic JavaScript setup for the deck and initial layout. Modern Solitaire

:root { --card-width: 80px; --card-height: calc(var(--card-width) * 1.4); --gap: 15px; --border-radius: 6px; --card-back-color: #2c3e50; --card-front-color: #ffffff; --pile-bg: rgba(0, 0, 0, 0.1); --board-bg: #27ae60; /* Green felt color */ --red-suit: #c0392b; --black-suit: #2c3e50; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: flex-start; /* Align board to top */ min-height: 100vh; margin: 0; padding-top: 20px; /* Add some space at the top */ user-select: none; /* Prevent text selection during drag */ } .game-board { background-color: var(--board-bg); padding: var(--gap); border-radius: var(--border-radius); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: var(--gap); min-width: calc(7 * var(--card-width) + 8 * var(--gap)); /* Ensure minimum width */ } .top-area { display: flex; justify-content: space-between; gap: var(--gap); } .stock-waste, .foundations, .tableau { display: flex; gap: var(--gap); } .pile { width: var(--card-width); height: var(--card-height); background-color: var(--pile-bg); border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: var(--border-radius); position: relative; /* For card stacking */ } .tableau-pile { min-height: var(--card-height); /* Allow pile to grow */ height: auto; /* Override fixed height */ } .card { width: var(--card-width); height: var(--card-height); border-radius: var(--border-radius); background-color: var(--card-front-color); border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: absolute; cursor: grab; display: flex; flex-direction: column; justify-content: space-between; padding: 5px; box-sizing: border-box; font-size: 16px; font-weight: bold; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, top 0.15s ease-out; background-size: contain; /* For potential background images */ background-repeat: no-repeat; background-position: center; } .card.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); z-index: 1000; /* Ensure dragged card is on top */ } .card.hidden { background-color: var(--card-back-color); background-image: linear-gradient(135deg, #34495e 25%, transparent 25%), linear-gradient(225deg, #34495e 25%, transparent 25%), linear-gradient(45deg, #34495e 25%, transparent 25%), linear-gradient(315deg, #34495e 25%, var(--card-back-color) 25%); background-size: 10px 10px; color: transparent; /* Hide text */ border: 1px solid #2c3e50; } .card[data-suit="♥"], .card[data-suit="♦"] { color: var(--red-suit); } .card[data-suit="♠"], .card[data-suit="♣"] { color: var(--black-suit); } .card .rank { align-self: flex-start; } .card .suit { align-self: center; font-size: 24px; /* Larger suit symbol in center */ } .card .rank.bottom { align-self: flex-end; transform: rotate(180deg); } /* Stacked card offset in tableau */ .tableau-pile .card { position: relative; /* Change from absolute for stacking */ margin-bottom: -100px; /* Overlap cards significantly */ } .tableau-pile .card:not(.hidden) { margin-bottom: -60px; /* Less overlap for face-up cards */ } .tableau-pile .card:last-child { margin-bottom: 0; /* No negative margin for the last card */ } /* Style for empty piles to show the dashed border */ .pile:empty { background-color: var(--pile-bg); border: 1px dashed rgba(255, 255, 255, 0.3); } /* Style for stock pile reset indicator */ .stock.empty-indicator::after { content: '↺'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: rgba(255, 255, 255, 0.5); cursor: pointer; } #reset-button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: var(--border-radius); background-color: #3498db; color: white; transition: background-color 0.2s ease; } #reset-button:hover { background-color: #2980b9; } #win-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 30px 50px; border-radius: 10px; font-size: 2em; z-index: 2000; text-align: center; } .hidden { display: none; } import { createDeck, shuffleDeck, SUITS, RANKS } from './deck.js'; import { setupUI, renderGame, getCardElementData, getPileElementData, showWinMessage, hideWinMessage } from './ui.js'; import { isValidTableauMove, isValidFoundationMove } from './rules.js'; let deck = []; let stock = []; let waste = []; let foundations = [[], [], [], []]; // 4 foundation piles let tableau = [[], [], [], [], [], [], []]; // 7 tableau piles let draggedCardData = null; // { card, element, sourcePile, sourceIndex } function startGame() { hideWinMessage(); deck = createDeck(); shuffleDeck(deck); dealCards(); setupUI({ onStockClick: handleStockClick, onWasteClick: handleWasteClick, onCardDoubleClick: handleCardDoubleClick, onResetClick: startGame, // Pass startGame directly onCardDragStart: handleCardDragStart, onPileDragOver: handlePileDragOver, onPileDrop: handlePileDrop, onCardDragEnd: handleCardDragEnd }); renderGame({ stock, waste, foundations, tableau }); } function dealCards() { stock = [...deck]; waste = []; foundations = [[], [], [], []]; tableau = [[], [], [], [], [], [], []]; // Deal to tableau for (let i = 0; i < 7; i++) { for (let j = i; j < 7; j++) { const card = stock.pop(); if (card) { card.isFaceUp = (i === j); // Only the last card in each pile is face up tableau[j].push(card); } } } } function handleStockClick() { if (stock.length > 0) { // Move one card from stock to waste const card = stock.pop(); if (card) { card.isFaceUp = true; waste.push(card); } } else if (waste.length > 0) { // Reset stock from waste stock = waste.reverse().map(card => ({ ...card, isFaceUp: false })); waste = []; } renderGame({ stock, waste, foundations, tableau }); } function handleWasteClick(event) { // Initiating drag from waste is handled by handleCardDragStart // No specific action needed on simple click for now console.log("Waste pile clicked"); } function handleCardDoubleClick(event) { const cardElement = event.target.closest('.card'); if (!cardElement || cardElement.classList.contains('hidden')) return; const cardData = getCardElementData(cardElement); if (!cardData) return; const { card, sourcePileType, sourceIndex } = cardData; // Try moving to foundation for (let i = 0; i < foundations.length; i++) { if (isValidFoundationMove(card, foundations[i])) { moveCardToFoundation(card, sourcePileType, sourceIndex, i); checkWinCondition(); return; // Move successful } } } function moveCardToFoundation(card, sourcePileType, sourceIndex, foundationIndex) { let sourcePile; if (sourcePileType === 'tableau') { sourcePile = tableau[sourceIndex]; sourcePile.pop(); // Remove from tableau // Flip the new last card if it exists and is hidden if (sourcePile.length > 0 && !sourcePile[sourcePile.length - 1].isFaceUp) { sourcePile[sourcePile.length - 1].isFaceUp = true; } } else if (sourcePileType === 'waste') { sourcePile = waste; sourcePile.pop(); // Remove from waste } else { return; // Cannot move from stock or foundation directly } foundations[foundationIndex].push(card); renderGame({ stock, waste, foundations, tableau }); } // --- Drag and Drop Handlers --- function handleCardDragStart(event) { const cardElement = event.target.closest('.card'); if (!cardElement || cardElement.classList.contains('hidden')) { event.preventDefault(); // Prevent dragging hidden cards return; } const cardData = getCardElementData(cardElement); if (!cardData) return; // Check if dragging multiple cards from tableau let cardsToDrag = []; if (cardData.sourcePileType === 'tableau') { const pile = tableau[cardData.sourceIndex]; const cardIndexInPile = pile.findIndex(c => c.suit === cardData.card.suit && c.rank === cardData.card.rank); if (cardIndexInPile !== -1) { cardsToDrag = pile.slice(cardIndexInPile); } } else { cardsToDrag.push(cardData.card); // Only one card from waste or foundation (though foundation drag isn't typical) } draggedCardData = { cards: cardsToDrag, // Store array of cards being dragged element: cardElement, // The specific element drag started on sourcePileType: cardData.sourcePileType, sourceIndex: cardData.sourceIndex // Index of the pile (tableau or foundation) or null for waste/stock }; event.dataTransfer.effectAllowed = 'move'; // Optional: Set drag image (can be tricky with multiple cards) // event.dataTransfer.setData('text/plain', ''); // Necessary for Firefox // Add dragging class after a short delay to allow the browser to capture the drag image setTimeout(() => { // Add dragging class to all elements being dragged const pileElement = cardElement.closest('.pile'); if (pileElement && cardData.sourcePileType === 'tableau') { const pileCards = Array.from(pileElement.querySelectorAll('.card')); const startIndex = pileCards.indexOf(cardElement); if (startIndex !== -1) { for (let i = startIndex; i < pileCards.length; i++) { pileCards[i].classList.add('dragging'); } } } else { cardElement.classList.add('dragging'); } }, 0); } function handlePileDragOver(event) { event.preventDefault(); // Necessary to allow dropping event.dataTransfer.dropEffect = 'move'; // Optional: Add visual feedback (e.g., highlight pile) const pileElement = event.target.closest('.pile'); if (pileElement) { pileElement.classList.add('drag-over'); // Add a class for styling } } // Remove visual feedback when dragging leaves a pile document.addEventListener('dragleave', (event) => { const pileElement = event.target.closest('.pile'); if (pileElement) { pileElement.classList.remove('drag-over'); } }, false); function handlePileDrop(event) { event.preventDefault(); const pileElement = event.target.closest('.pile'); if (!pileElement || !draggedCardData) return; pileElement.classList.remove('drag-over'); // Remove highlight on drop const targetPileData = getPileElementData(pileElement); if (!targetPileData) return; const { pileType: targetPileType, index: targetIndex } = targetPileData; const { cards: draggedCards, sourcePileType, sourceIndex } = draggedCardData; const topDraggedCard = draggedCards[0]; // The card that needs to satisfy the move condition let moveSuccessful = false; // --- Move Logic --- if (targetPileType === 'tableau') { const targetPile = tableau[targetIndex]; if (isValidTableauMove(topDraggedCard, targetPile)) { // Remove cards from source let sourcePile; if (sourcePileType === 'tableau') { sourcePile = tableau[sourceIndex]; sourcePile.splice(-draggedCards.length); // Remove last N cards // Flip new last card if needed if (sourcePile.length > 0 && !sourcePile[sourcePile.length - 1].isFaceUp) { sourcePile[sourcePile.length - 1].isFaceUp = true; } } else if (sourcePileType === 'waste') { waste.pop(); // Only one card from waste } else if (sourcePileType === 'foundation') { foundations[sourceIndex].pop(); // Allow moving King back? (optional rule) } // Add cards to target tableau[targetIndex].push(...draggedCards); moveSuccessful = true; } } else if (targetPileType === 'foundation' && draggedCards.length === 1) { // Only single cards to foundation const targetPile = foundations[targetIndex]; if (isValidFoundationMove(topDraggedCard, targetPile)) { // Remove card from source if (sourcePileType === 'tableau') { const sourcePile = tableau[sourceIndex]; sourcePile.pop(); // Flip new last card if needed if (sourcePile.length > 0 && !sourcePile[sourcePile.length - 1].isFaceUp) { sourcePile[sourcePile.length - 1].isFaceUp = true; } } else if (sourcePileType === 'waste') { waste.pop(); } // Cannot drag from stock, cannot drag from other foundations (usually) // Add card to target foundations[targetIndex].push(topDraggedCard); moveSuccessful = true; } } // --- Cleanup and Render --- if (moveSuccessful) { renderGame({ stock, waste, foundations, tableau }); checkWinCondition(); } // Clear dragging state regardless of success handleCardDragEnd(); // Call drag end logic } function handleCardDragEnd() { // Remove dragging class from all potentially dragged elements document.querySelectorAll('.card.dragging').forEach(el => el.classList.remove('dragging')); document.querySelectorAll('.pile.drag-over').forEach(el => el.classList.remove('drag-over')); // Clean up highlight just in case draggedCardData = null; // Clear dragged data } function checkWinCondition() { // Win if all cards are in the foundation piles const totalFoundationCards = foundations.reduce((sum, pile) => sum + pile.length, 0); if (totalFoundationCards === 52) { showWinMessage(); } } // --- Start the game --- startGame(); export const SUITS = ["♥", "♦", "♣", "♠"]; export const RANKS = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; // Map ranks to values for comparison export const RANK_VALUES = { "A": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, "J": 11, "Q": 12, "K": 13 }; export function createDeck() { const deck = []; for (const suit of SUITS) { for (const rank of RANKS) { deck.push({ suit, rank, isFaceUp: false, color: (suit === "♥" || suit === "♦") ? 'red' : 'black' }); } } return deck; } // Fisher-Yates (Knuth) Shuffle Algorithm export function shuffleDeck(deck) { 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]]; // Swap elements } } const stockElement = document.querySelector('.stock'); const wasteElement = document.querySelector('.waste'); const foundationElements = document.querySelectorAll('.foundation'); const tableauElements = document.querySelectorAll('.tableau-pile'); const resetButton = document.getElementById('reset-button'); const winMessageElement = document.getElementById('win-message'); let eventHandlers = {}; // Store registered handlers export function setupUI(handlers) { eventHandlers = handlers; // Store the handlers passed from script.js // Clear previous listeners before adding new ones stockElement.removeEventListener('click', eventHandlers.onStockClick); wasteElement.removeEventListener('click', eventHandlers.onWasteClick); resetButton.removeEventListener('click', eventHandlers.onResetClick); // Remove existing card/pile listeners before adding new ones document.querySelectorAll('.card').forEach(card => { card.removeEventListener('dblclick', eventHandlers.onCardDoubleClick); card.removeEventListener('dragstart', eventHandlers.onCardDragStart); card.removeEventListener('dragend', eventHandlers.onCardDragEnd); }); document.querySelectorAll('.pile').forEach(pile => { pile.removeEventListener('dragover', eventHandlers.onPileDragOver); pile.removeEventListener('drop', eventHandlers.onPileDrop); // Remove dragleave listener added directly in script.js if needed }); // Add new listeners stockElement.addEventListener('click', eventHandlers.onStockClick); wasteElement.addEventListener('click', eventHandlers.onWasteClick); // Can be used later if needed resetButton.addEventListener('click', eventHandlers.onResetClick); // Drag/Drop listeners on piles (needed for dropping onto empty piles too) document.querySelectorAll('.pile').forEach(pile => { pile.addEventListener('dragover', eventHandlers.onPileDragOver); pile.addEventListener('drop', eventHandlers.onPileDrop); }); // Add dragleave listener to the document to handle leaving any pile document.removeEventListener('dragleave', handleDragLeave); // Remove previous if exists document.addEventListener('dragleave', handleDragLeave); } function handleDragLeave(event) { // Check if the related target (where the mouse is going) is outside the current pile const pileElement = event.target.closest('.pile'); if (pileElement && !pileElement.contains(event.relatedTarget)) { pileElement.classList.remove('drag-over'); } // If leaving the window or dropping elsewhere, ensure all highlights are removed if (!event.relatedTarget) { document.querySelectorAll('.pile.drag-over').forEach(el => el.classList.remove('drag-over')); } } export function renderGame(gameState) { const { stock, waste, foundations, tableau } = gameState; // Render Stock renderPile(stockElement, stock, 'stock'); stockElement.classList.toggle('empty-indicator', stock.length === 0 && waste.length > 0); // Render Waste renderPile(wasteElement, waste, 'waste'); // Render Foundations foundations.forEach((pile, index) => { renderPile(foundationElements[index], pile, 'foundation', index); }); // Render Tableau tableau.forEach((pile, index) => { renderPile(tableauElements[index], pile, 'tableau', index); }); // Add event listeners AFTER rendering cards addCardEventListeners(); } function renderPile(pileElement, pileCards, pileType, pileIndex = null) { pileElement.innerHTML = ''; // Clear previous cards pileElement.dataset.pileType = pileType; // Store pile type if (pileIndex !== null) { pileElement.dataset.pileIndex = pileIndex; // Store index for tableau/foundation } else { delete pileElement.dataset.pileIndex; } if (pileCards.length === 0 && pileType !== 'stock' && pileType !== 'waste') { // Keep pile visible even when empty (except stock/waste maybe) // CSS handles the empty pile style return; } // For stock, waste, and foundations, only show the top card (or placeholder) if (pileType === 'stock') { if (pileCards.length > 0) { const topCard = pileCards[pileCards.length - 1]; const cardElement = createCardElement(topCard, pileType, pileIndex); cardElement.classList.add('hidden'); // Stock cards are always face down visually pileElement.appendChild(cardElement); } } else if (pileType === 'waste' || pileType === 'foundation') { if (pileCards.length > 0) { const topCard = pileCards[pileCards.length - 1]; const cardElement = createCardElement(topCard, pileType, pileIndex); pileElement.appendChild(cardElement); } } else if (pileType === 'tableau') { // For tableau, stack cards with offset pileCards.forEach((card, cardIndex) => { const cardElement = createCardElement(card, pileType, pileIndex, cardIndex); // Apply offset based on position (handled by CSS margin-bottom) pileElement.appendChild(cardElement); }); } } function createCardElement(card, pileType, pileIndex, cardIndexInPile = null) { const cardElement = document.createElement('div'); cardElement.classList.add('card'); cardElement.dataset.rank = card.rank; cardElement.dataset.suit = card.suit; cardElement.dataset.color = card.color; cardElement.dataset.sourcePileType = pileType; // Where the card currently is if (pileIndex !== null) { cardElement.dataset.sourceIndex = pileIndex; // Index of the pile if applicable } if (cardIndexInPile !== null) { cardElement.dataset.cardIndexInPile = cardIndexInPile; // Index within the pile } if (card.isFaceUp) { cardElement.innerHTML = ` ${card.rank} ${card.suit} ${card.rank} `; cardElement.draggable = true; // Only face-up cards are draggable } else { cardElement.classList.add('hidden'); cardElement.draggable = false; // Hidden cards are not draggable } return cardElement; } function addCardEventListeners() { document.querySelectorAll('.card:not(.hidden)').forEach(card => { // Prevent adding duplicate listeners card.removeEventListener('dblclick', eventHandlers.onCardDoubleClick); card.removeEventListener('dragstart', eventHandlers.onCardDragStart); card.removeEventListener('dragend', eventHandlers.onCardDragEnd); card.addEventListener('dblclick', eventHandlers.onCardDoubleClick); card.addEventListener('dragstart', eventHandlers.onCardDragStart); card.addEventListener('dragend', eventHandlers.onCardDragEnd); }); } // --- Helper functions to get data from elements --- export function getCardElementData(cardElement) { if (!cardElement) return null; const { rank, suit, color, sourcePileType, sourceIndex, cardIndexInPile } = cardElement.dataset; if (!rank || !suit) return null; // Not a valid card element const card = { rank, suit, color, // isFaceUp is determined by presence/absence of 'hidden' class during interaction logic if needed isFaceUp: !cardElement.classList.contains('hidden') }; return { card, sourcePileType, sourceIndex: sourceIndex !== undefined ? parseInt(sourceIndex, 10) : null, cardIndexInPile: cardIndexInPile !== undefined ? parseInt(cardIndexInPile, 10) : null, }; } export function getPileElementData(pileElement) { if (!pileElement) return null; const { pileType, pileIndex } = pileElement.dataset; if (!pileType) return null; // Not a valid pile element return { pileType, index: pileIndex !== undefined ? parseInt(pileIndex, 10) : null }; } // --- Win Message --- export function showWinMessage() { winMessageElement.classList.remove('hidden'); } export function hideWinMessage() { winMessageElement.classList.add('hidden'); } import { RANK_VALUES } from './deck.js'; /** * Checks if moving a card (or stack) onto a tableau pile is valid. * @param {object} cardToMove - The card being moved (top card of a stack if multiple). * @param {array} targetPile - The tableau pile array to move to. * @returns {boolean} - True if the move is valid, false otherwise. */ export function isValidTableauMove(cardToMove, targetPile) { const targetCard = targetPile.length > 0 ? targetPile[targetPile.length - 1] : null; if (!targetCard) { // Can only move a King onto an empty tableau pile return cardToMove.rank === 'K'; } else { // Must be descending rank and alternating color const targetValue = RANK_VALUES[targetCard.rank]; const movedValue = RANK_VALUES[cardToMove.rank]; const targetColor = targetCard.color; const movedColor = cardToMove.color; return movedValue === targetValue - 1 && movedColor !== targetColor; } } /** * Checks if moving a card onto a foundation pile is valid. * @param {object} cardToMove - The card being moved. * @param {array} targetPile - The foundation pile array to move to. * @returns {boolean} - True if the move is valid, false otherwise. */ export function isValidFoundationMove(cardToMove, targetPile) { const targetCard = targetPile.length > 0 ? targetPile[targetPile.length - 1] : null; if (!targetCard) { // Can only move an Ace onto an empty foundation pile return cardToMove.rank === 'A'; } else { // Must be the same suit and ascending rank const targetValue = RANK_VALUES[targetCard.rank]; const movedValue = RANK_VALUES[cardToMove.rank]; return cardToMove.suit === targetCard.suit && movedValue === targetValue + 1; } } This sets up the basic structure, styling, deck creation, shuffling, dealing, and the core UI rendering logic. It also includes the fundamental rules for moving cards to the tableau and foundation piles, along with drag-and-drop handlers. You can now open the `index.html` file. You should see the initial Solitaire layout. You can click the stock pile to deal cards to the waste, reset the stock when empty, drag face-up cards between tableau piles (following the rules), drag cards to the foundation piles, and double-click cards to auto-move them to the foundation if possible. A "New Game" button and a win message are also included.