Spaces:

mrwhy06
/

solitaire

Running

App Files Files Community

solitaire / index.html

mrwhy06

Add 2 files

3200b3e verified about 1 year ago

raw

history blame contribute delete

31.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Solitaire</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	}

	body {
	font-family: 'Roboto', sans-serif;
	background: linear-gradient(135deg, #1e5799, #207cca, #2989d8, #7db9e8);
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #333;
	overflow: hidden;
	}

	.game-container {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 100px);
	}

	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	margin-bottom: 10px;
	color: white;
	}

	.score {
	font-size: 1.2rem;
	font-weight: bold;
	}

	.restart-btn {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	padding: 8px 15px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	transition: background 0.3s;
	}

	.restart-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	}

	.game-board {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	}

	.top-section {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	}

	.deck {
	width: 70px;
	height: 100px;
	position: relative;
	}

	.stock {
	cursor: pointer;
	position: relative;
	}

	.waste {
	position: relative;
	margin-left: 10px;
	}

	.foundations {
	display: flex;
	gap: 10px;
	}

	.foundation {
	width: 70px;
	height: 100px;
	border: 2px dashed rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	}

	.tableau-section {
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
	}

	.pile {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 100px;
	position: relative;
	}

	.pile.bottom {
	margin-top: 30px;
	}

	.card {
	width: 70px;
	height: 100px;
	background: white;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	position: absolute;
	transition: transform 0.2s;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 5px;
	font-weight: bold;
	font-size: 1.2rem;
	overflow: hidden;
	}

	.card.red {
	color: red;
	}

	.card.black {
	color: black;
	}

	.card.hidden {
	background: linear-gradient(135deg, #3498db, #2980b9);
	color: transparent;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.2);
	}

	.card.hidden .card-value,
	.card.hidden .card-suit {
	display: none;
	}

	.card-suit {
	text-align: center;
	font-size: 30px;
	}

	.card-bottom-suit {
	transform: rotate(180deg);
	}

	.card-placeholder {
	border: 2px dashed rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	}

	.card.dragging {
	opacity: 0.8;
	z-index: 100;
	transform: rotate(2deg);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	}

	.card.selected {
	transform: translateY(-10px);
	}

	.win-message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	color: white;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
	}

	.win-message.show {
	opacity: 1;
	pointer-events: all;
	}

	.win-text {
	font-size: 3rem;
	margin-bottom: 20px;
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	}

	.win-details {
	font-size: 1.2rem;
	margin-bottom: 30px;
	}

	.move-counter {
	font-size: 1.1rem;
	margin-bottom: 5px;
	color: rgba(255, 255, 255, 0.8);
	}

	@media (max-width: 768px) {
	.game-container {
	transform: scale(0.8);
	transform-origin: top center;
	}
	}

	@media (max-width: 480px) {
	.game-container {
	transform: scale(0.6);
	}
	}
	</style>
	</head>
	<body>
	<div class="game-container">
	<div class="header">
	<div class="score">Score: <span id="score">0</span></div>
	<div class="move-counter">Moves: <span id="moves">0</span></div>
	<button class="restart-btn" id="restart">New Game</button>
	</div>

	<div class="game-board">
	<div class="top-section">
	<div class="deck">
	<div class="card-placeholder stock" id="stock"></div>
	<div class="card-placeholder waste" id="waste"></div>
	</div>
	<div class="foundations">
	<div class="card-placeholder foundation" id="foundation-1"></div>
	<div class="card-placeholder foundation" id="foundation-2"></div>
	<div class="card-placeholder foundation" id="foundation-3"></div>
	<div class="card-placeholder foundation" id="foundation-4"></div>
	</div>
	</div>

	<div class="tableau-section">
	<div class="pile" id="pile-1"></div>
	<div class="pile" id="pile-2"></div>
	<div class="pile" id="pile-3"></div>
	<div class="pile" id="pile-4"></div>
	<div class="pile" id="pile-5"></div>
	<div class="pile" id="pile-6"></div>
	<div class="pile" id="pile-7"></div>
	</div>
	</div>
	</div>

	<div class="win-message" id="win-message">
	<div class="win-text">You Won!</div>
	<div class="win-details">Congratulations on completing Solitaire!</div>
	<div>Final Score: <span id="final-score">0</span></div>
	<div>Total Moves: <span id="final-moves">0</span></div>
	<button class="restart-btn" style="margin-top: 20px;">Play Again</button>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	// Game state
	const game = {
	deck: [],
	stock: [],
	waste: [],
	foundations: [[], [], [], []],
	piles: [[], [], [], [], [], [], []],
	score: 0,
	moves: 0,
	draggingCards: [],
	dragSource: null,
	gameStarted: false
	};

	// DOM elements
	const elements = {
	stock: document.getElementById('stock'),
	waste: document.getElementById('waste'),
	foundations: [
	document.getElementById('foundation-1'),
	document.getElementById('foundation-2'),
	document.getElementById('foundation-3'),
	document.getElementById('foundation-4')
	],
	piles: [
	document.getElementById('pile-1'),
	document.getElementById('pile-2'),
	document.getElementById('pile-3'),
	document.getElementById('pile-4'),
	document.getElementById('pile-5'),
	document.getElementById('pile-6'),
	document.getElementById('pile-7')
	],
	scoreDisplay: document.getElementById('score'),
	movesDisplay: document.getElementById('moves'),
	restartBtn: document.getElementById('restart'),
	winMessage: document.getElementById('win-message'),
	finalScore: document.getElementById('final-score'),
	finalMoves: document.getElementById('final-moves')
	};

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

	// Initialize game
	function initGame() {
	resetGame();
	createDeck();
	shuffleDeck();
	dealCards();
	updateUI();
	game.gameStarted = true;
	}

	// Reset game state
	function resetGame() {
	game.deck = [];
	game.stock = [];
	game.waste = [];
	game.foundations = [[], [], [], []];
	game.piles = [[], [], [], [], [], [], []];
	game.score = 0;
	game.moves = 0;
	game.draggingCards = [];
	game.dragSource = null;
	game.gameStarted = false;

	// Clear all piles and foundations
	elements.piles.forEach(pile => pile.innerHTML = '');
	elements.foundations.forEach(foundation => foundation.innerHTML = '');
	elements.waste.innerHTML = '';
	}

	// Create a standard deck of 52 cards
	function createDeck() {
	game.deck = [];
	for (let suitIndex = 0; suitIndex < suits.length; suitIndex++) {
	for (let valueIndex = 0; valueIndex < values.length; valueIndex++) {
	const card = {
	suit: suits[suitIndex],
	value: values[valueIndex],
	color: (suitIndex < 2) ? 'red' : 'black', // Hearts and diamonds are red
	rank: valueIndex + 1, // A=1, K=13
	hidden: true
	};
	game.deck.push(card);
	}
	}
	}

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

	// Deal cards to piles
	function dealCards() {
	let cardIndex = 0;

	// Deal to each pile
	for (let pileIndex = 0; pileIndex < game.piles.length; pileIndex++) {
	const pile = game.piles[pileIndex];

	// Number of cards to deal to this pile is pileIndex + 1
	for (let i = 0; i <= pileIndex; i++) {
	const card = game.deck[cardIndex++];

	// Only the last card in each pile is face up
	card.hidden = i !== pileIndex;
	pile.push(card);
	}
	}

	// Remaining cards go to stock
	game.stock = game.deck.slice(cardIndex);
	}

	// Update the UI based on game state
	function updateUI() {
	updateStock();
	updateWaste();
	updateFoundations();
	updatePiles();
	updateScore();
	checkWin();
	}

	// Update stock display
	function updateStock() {
	elements.stock.innerHTML = '';

	if (game.stock.length > 0) {
	const cardBack = document.createElement('div');
	cardBack.className = 'card hidden';
	elements.stock.appendChild(cardBack);
	} else {
	elements.stock.classList.add('empty');
	}
	}

	// Update waste display
	function updateWaste() {
	elements.waste.innerHTML = '';

	if (game.waste.length > 0) {
	const lastCard = game.waste[game.waste.length - 1];
	const cardEl = createCardElement(lastCard);
	cardEl.style.left = '0';
	cardEl.style.top = '0';
	elements.waste.appendChild(cardEl);
	}
	}

	// Update foundations display
	function updateFoundations() {
	game.foundations.forEach((foundation, index) => {
	elements.foundations[index].innerHTML = '';

	if (foundation.length > 0) {
	const lastCard = foundation[foundation.length - 1];
	const cardEl = createCardElement(lastCard);
	elements.foundations[index].appendChild(cardEl);
	}
	});
	}

	// Update tableaux (piles) display
	function updatePiles() {
	game.piles.forEach((pile, pileIndex) => {
	elements.piles[pileIndex].innerHTML = '';

	pile.forEach((card, cardIndex) => {
	const cardEl = createCardElement(card);
	cardEl.style.top = `${cardIndex * 25}px`; // Stack cards vertically
	cardEl.setAttribute('data-pile-index', pileIndex);
	cardEl.setAttribute('data-card-index', cardIndex);
	elements.piles[pileIndex].appendChild(cardEl);
	});
	});
	}

	// Create a card DOM element
	function createCardElement(card) {
	const cardEl = document.createElement('div');
	cardEl.className = `card ${card.color}`;
	cardEl.innerHTML = `
	<div class="card-value">${card.value}</div>
	<div class="card-suit">${card.suit}</div>
	<div class="card-suit card-bottom-suit">${card.suit}</div>
	`;

	if (card.hidden) {
	cardEl.classList.add('hidden');
	}

	// Add drag event listeners
	cardEl.draggable = true;
	cardEl.addEventListener('dragstart', handleDragStart);
	cardEl.addEventListener('mouseup', handleCardClick);

	return cardEl;
	}

	// Update score display
	function updateScore() {
	elements.scoreDisplay.textContent = game.score;
	elements.movesDisplay.textContent = game.moves;
	}

	// Draw card from stock to waste
	function drawCard() {
	if (!game.gameStarted) return;

	if (game.stock.length === 0) {
	// If stock is empty, return all waste cards to stock
	game.waste.reverse().forEach(card => {
	card.hidden = true;
	});
	game.stock = [...game.waste];
	game.waste = [];
	game.score = Math.max(0, game.score - 100); // Penalty for recycling waste
	} else {
	// Draw the top card from stock
	const card = game.stock.pop();
	card.hidden = false;
	game.waste.push(card);
	game.score += 5; // Small points for drawing
	}

	game.moves++;
	updateUI();
	}

	// Handle drag start
	function handleDragStart(e) {
	if (!game.gameStarted) return;

	const cardEl = e.target.closest('.card');
	if (!cardEl \|\| cardEl.classList.contains('hidden')) {
	e.preventDefault();
	return;
	}

	const pileIndex = parseInt(cardEl.getAttribute('data-pile-index'));
	const cardIndex = parseInt(cardEl.getAttribute('data-card-index'));

	// Get all cards from this one to the end of the pile
	game.draggingCards = game.piles[pileIndex].slice(cardIndex);
	game.dragSource = { type: 'pile', index: pileIndex };

	// For foundation or waste, just move the top card
	if (isNaN(pileIndex)) {
	if (cardEl.parentElement === elements.waste) {
	game.draggingCards = [game.waste[game.waste.length - 1]];
	game.dragSource = { type: 'waste' };
	} else {
	const foundationIndex = elements.foundations.findIndex(f => cardEl.parentElement === f);
	if (foundationIndex !== -1) {
	game.draggingCards = [game.foundations[foundationIndex][game.foundations[foundationIndex].length - 1]];
	game.dragSource = { type: 'foundation', index: foundationIndex };
	}
	}
	}

	// Set drag image
	const dragImage = cardEl.cloneNode(true);
	dragImage.style.position = 'fixed';
	dragImage.style.left = '-1000px';
	dragImage.style.top = '0';
	dragImage.style.zIndex = '10000';
	document.body.appendChild(dragImage);
	e.dataTransfer.setDragImage(dragImage, 35, 50);
	setTimeout(() => document.body.removeChild(dragImage), 0);

	// Set effect allowed
	e.dataTransfer.effectAllowed = 'move';

	// Add dragging class
	setTimeout(() => cardEl.classList.add('dragging'), 0);
	}

	// Handle drop on a pile or foundation
	function handleDrop(target, e) {
	e.preventDefault();
	if (!game.draggingCards.length) return;

	const card = game.draggingCards[0];

	// Determine target type
	let targetType, targetIndex;
	if (target === elements.waste) {
	return; // Can't drop on waste
	} else if (target === elements.stock) {
	return; // Can't drop on stock
	} else if (elements.foundations.includes(target)) {
	targetType = 'foundation';
	targetIndex = elements.foundations.indexOf(target);
	} else if (elements.piles.includes(target)) {
	targetType = 'pile';
	targetIndex = elements.piles.indexOf(target);
	} else {
	return;
	}

	// Check if move is valid
	let isValid = false;

	if (targetType === 'foundation') {
	isValid = canMoveToFoundation(card, targetIndex);
	} else if (targetType === 'pile') {
	isValid = canMoveToPile(card, targetIndex);
	}

	if (isValid) {
	// Remove cards from source
	if (game.dragSource.type === 'pile') {
	game.piles[game.dragSource.index].splice(
	game.piles[game.dragSource.index].length - game.draggingCards.length,
	game.draggingCards.length
	);

	// Reveal next card in source pile if needed
	const sourcePile = game.piles[game.dragSource.index];
	if (sourcePile.length > 0 && sourcePile[sourcePile.length - 1].hidden) {
	sourcePile[sourcePile.length - 1].hidden = false;
	game.score += 5; // Points for revealing a card
	}
	} else if (game.dragSource.type === 'waste') {
	game.waste.pop();
	} else if (game.dragSource.type === 'foundation') {
	game.foundations[game.dragSource.index].pop();
	}

	// Add cards to target
	if (targetType === 'foundation') {
	game.foundations[targetIndex].push(card);
	game.score += 10; // Points for moving to foundation
	} else if (targetType === 'pile') {
	game.piles[targetIndex].push(...game.draggingCards);

	// Points for moving from waste or another pile
	game.score += (game.draggingCards.length === 1) ? 5 : 0;
	}

	game.moves++;
	game.draggingCards = [];
	game.dragSource = null;
	updateUI();
	}
	}

	// Check if card can be moved to foundation
	function canMoveToFoundation(card, foundationIndex) {
	const foundation = game.foundations[foundationIndex];

	if (foundation.length === 0) {
	// Only Aces can start a foundation
	return card.value === 'A';
	} else {
	const topCard = foundation[foundation.length - 1];
	// Must be same suit and next in sequence
	return topCard.suit === card.suit && card.rank === topCard.rank + 1;
	}
	}

	// Check if card can be moved to a pile
	function canMoveToPile(card, pileIndex) {
	const pile = game.piles[pileIndex];

	if (pile.length === 0) {
	// Only Kings can be placed on empty pile
	return card.value === 'K';
	} else {
	const topCard = pile[pile.length - 1];
	// Must be opposite color and one rank lower
	return topCard.color !== card.color && card.rank === topCard.rank - 1;
	}
	}

	// Handle card click
	function handleCardClick(e) {
	if (!game.gameStarted) return;

	const cardEl = e.target.closest('.card');
	if (!cardEl \|\| cardEl.classList.contains('hidden')) return;

	// If clicked on waste, try to auto-move to foundation
	if (cardEl.parentElement === elements.waste && game.waste.length > 0) {
	const card = game.waste[game.waste.length - 1];

	// Check all foundations for possible moves
	for (let i = 0; i < game.foundations.length; i++) {
	if (canMoveToFoundation(card, i)) {
	game.foundations[i].push(game.waste.pop());
	game.score += 10;
	game.moves++;
	updateUI();
	return;
	}
	}
	}

	// If clicked on pile card, try to auto-move to foundation if it's the top card
	const pileIndex = parseInt(cardEl.getAttribute('data-pile-index'));
	const cardIndex = parseInt(cardEl.getAttribute('data-card-index'));

	if (!isNaN(pileIndex) && cardIndex === game.piles[pileIndex].length - 1) {
	const card = game.piles[pileIndex][cardIndex];

	for (let i = 0; i < game.foundations.length; i++) {
	if (canMoveToFoundation(card, i)) {
	game.foundations[i].push(game.piles[pileIndex].pop());
	game.score += 10;
	game.moves++;

	// Reveal next card if needed
	if (game.piles[pileIndex].length > 0 && game.piles[pileIndex][game.piles[pileIndex].length - 1].hidden) {
	game.piles[pileIndex][game.piles[pileIndex].length - 1].hidden = false;
	game.score += 5;
	}

	updateUI();
	return;
	}
	}
	}
	}

	// Check if player has won
	function checkWin() {
	const allCardsInFoundations = game.foundations.every(foundation => foundation.length === 13);

	if (allCardsInFoundations) {
	showWinMessage();
	}
	}

	// Show win message
	function showWinMessage() {
	elements.finalScore.textContent = game.score;
	elements.finalMoves.textContent = game.moves;
	elements.winMessage.classList.add('show');
	}

	// Setup event listeners
	function setupEventListeners() {
	// Stock click to draw card
	elements.stock.addEventListener('click', drawCard);

	// Restart button
	elements.restartBtn.addEventListener('click', initGame);
	elements.winMessage.querySelector('.restart-btn').addEventListener('click', () => {
	elements.winMessage.classList.remove('show');
	initGame();
	});

	// Drag and drop setup
	document.addEventListener('dragover', e => {
	e.preventDefault();
	const target = document.elementFromPoint(e.clientX, e.clientY)?.closest('.pile, .foundation, .waste, .stock');
	if (target) {
	const rect = target.getBoundingClientRect();
	const isOver = e.clientX > rect.left && e.clientX < rect.right &&
	e.clientY > rect.top && e.clientY < rect.bottom;
	if (isOver) {
	if (target === elements.stock \|\| target === elements.waste) return;
	target.classList.add('highlight');
	}
	}
	});

	document.addEventListener('dragleave', e => {
	const target = document.elementFromPoint(e.clientX, e.clientY)?.closest('.pile, .foundation');
	if (!target \|\| e.target !== target) {
	elements.piles.forEach(pile => pile.classList.remove('highlight'));
	elements.foundations.forEach(foundation => foundation.classList.remove('highlight'));
	}
	});

	document.addEventListener('drop', e => {
	e.preventDefault();
	elements.piles.forEach(pile => pile.classList.remove('highlight'));
	elements.foundations.forEach(foundation => foundation.classList.remove('highlight'));

	const target = document.elementFromPoint(e.clientX, e.clientY)?.closest('.pile, .foundation, .waste, .stock');
	if (target && game.draggingCards.length) {
	handleDrop(target, e);
	}
	});

	document.addEventListener('dragend', () => {
	document.querySelectorAll('.card').forEach(card => card.classList.remove('dragging'));
	elements.piles.forEach(pile => pile.classList.remove('highlight'));
	elements.foundations.forEach(foundation => foundation.classList.remove('highlight'));
	});

	// Keyboard shortcuts
	document.addEventListener('keydown', e => {
	if (e.code === 'Space' && !e.target.matches('button, input, textarea')) {
	e.preventDefault();
	drawCard();
	} else if (e.code === 'KeyR' && !e.target.matches('button, input, textarea')) {
	e.preventDefault();
	initGame();
	}
	});
	}

	// Initialize the game
	setupEventListeners();
	initGame();
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
	</html>