initial commit

src/routes/+page.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import Card from '$lib/Card.svelte';
+
+	interface CardData {
+		id: number;
+		frontImage: string;
+		flipped: boolean;
+		x: number;
+		y: number;
+		zIndex: number;
+		inDeck: boolean;
+	}
+
+	const cardImages = Array.from({ length: 14 }, (_, i) => `front${i + 1}.png`);
+	const backImage = 'back.png';
+
+	let deckPosition = $state({ x: 50, y: 300 });
+
+	let cards = $state<CardData[]>(
+		cardImages.map((image, index) => ({
+			id: index + 1,
+			frontImage: image,
+			flipped: true,
+			x: deckPosition.x + index * 2,
+			y: deckPosition.y + index * 2,
+			zIndex: index,
+			inDeck: true
+		}))
+	);
+	let maxZIndex = $state(cards.length);
+
+	function handleCardMove(id: number, x: number, y: number) {
+		const card = cards.find(c => c.id === id);
+		if (card) {
+			card.x = x;
+			card.y = y;
+			card.zIndex = ++maxZIndex;
+		}
+	}
+
+	function handleCardDrop(id: number, x: number, y: number) {
+		const card = cards.find(c => c.id === id);
+		if (card) {
+			// Check if card is dropped on deck area
+			if (
+				x >= deckPosition.x && 
+				x <= deckPosition.x + 220 && 
+				y >= deckPosition.y && 
+				y <= deckPosition.y + 300 &&
+				!card.inDeck
+			) {
+				// Move card to top of deck
+				const deckCards = cards.filter(c => c.inDeck);
+				const topZ = deckCards.length > 0 ? Math.max(...deckCards.map(c => c.zIndex)) + 1 : 0;
+				
+				card.x = deckPosition.x + topZ * 2;
+				card.y = deckPosition.y + topZ * 2;
+				card.zIndex = topZ;
+				card.flipped = true;
+				card.inDeck = true;
+			} else if (card.inDeck) {
+				// Card was moved out of deck
+				card.inDeck = false;
+			}
+		}
+	}
+
+	function handleCardClick(id: number) {
+		const card = cards.find(c => c.id === id);
+		if (card) {
+			card.zIndex = ++maxZIndex;
+		}
+	}
+
+	function shuffleDeck() {
+		const deckCards = cards.filter(card => card.inDeck);
+		if (deckCards.length === 0) return;
+		
+		for (let i = deckCards.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[deckCards[i], deckCards[j]] = [deckCards[j], deckCards[i]];
+		}
+
+		deckCards.forEach((card, index) => {
+			card.x = deckPosition.x + index * 2;
+			card.y = deckPosition.y + index * 2;
+			card.zIndex = index;
+			card.flipped = true;
+		});
+	}
+
+	function collectToDeck() {
+		cards.forEach((card, index) => {
+			card.x = deckPosition.x + index * 2;
+			card.y = deckPosition.y + index * 2;
+			card.zIndex = index;
+			card.flipped = true;
+			card.inDeck = true;
+		});
+	}
+
+	function dealCards() {
+		cards.forEach((card, index) => {
+			card.x = 50 + (index % 6) * 240;
+			card.y = 50 + Math.floor(index / 6) * 320;
+			card.zIndex = index;
+			card.flipped = false;
+			card.inDeck = false;
+		});
+	}
+
+	function flipAllCards() {
+		cards.forEach(card => {
+			card.flipped = !card.flipped;
+		});
+	}
+</script>
+
+<div class="game-container">
+	<div class="controls">
+		<button onclick={collectToDeck}>Collect to Deck</button>
+		<button onclick={shuffleDeck}>Shuffle Deck</button>
+		<button onclick={dealCards}>Deal Cards</button>
+		<button onclick={flipAllCards}>Flip All</button>
+	</div>
+
+	<div class="game-area">
+		{#each cards as card (card.id)}
+			<Card
+				{...card}
+				backImage={backImage}
+				bind:flipped={card.flipped}
+				bind:x={card.x}
+				bind:y={card.y}
+				bind:zIndex={card.zIndex}
+				onMove={handleCardMove}
+				onClick={handleCardClick}
+				onDrop={handleCardDrop}
+			/>
+		{/each}
+
+		<div 
+			class="deck-area" 
+			style="left: {deckPosition.x}px; top: {deckPosition.y}px;"
+		>
+			Deck
+		</div>
+	</div>
+</div>
+
+<style>
+	.game-container {
+		width: 100vw;
+		height: 100vh;
+		overflow: hidden;
+		background: #161616;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+
+	.controls {
+		position: fixed;
+		top: 20px;
+		right: 20px;
+		display: flex;
+		gap: 10px;
+		z-index: 2000;
+	}
+
+	.controls button {
+		padding: 10px 15px;
+		background: rgba(255, 255, 255, 0.9);
+		border: none;
+		border-radius: 27px;
+		cursor: pointer;
+		font-weight: 600;
+		transition: all 0.2s ease;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.controls button:hover {
+		background: white;
+		transform: translateY(-1px);
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+	}
+
+	.game-area {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.deck-area {
+		position: absolute;
+		width: 220px;
+		height: 300px;
+		border: 3px dashed rgba(255, 255, 255, 0.5);
+		border-radius: 25px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgba(255, 255, 255, 0.7);
+		font-weight: bold;
+		background: rgba(255, 255, 255, 0.1);
+		backdrop-filter: blur(10px);
+	}
+</style>