initial commit

src/lib/Card.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	interface Props {
+		id: number;
+		frontImage: string;
+		backImage: string;
+		flipped?: boolean;
+		x?: number;
+		y?: number;
+		zIndex?: number;
+		onMove?: (id: number, x: number, y: number) => void;
+		onClick?: (id: number) => void;
+		onDrop?: (id: number, x: number, y: number) => void;
+	}
+
+	let {
+		id,
+		frontImage,
+		backImage,
+		flipped = $bindable(false),
+		x = $bindable(0),
+		y = $bindable(0),
+		zIndex = $bindable(0),
+		onMove,
+		onClick,
+		onDrop
+	}: Props = $props();
+
+	let isDragging = $state(false);
+	let dragOffset = $state({ x: 0, y: 0 });
+	let dragStartPos = $state({ x: 0, y: 0 });
+	let hasMoved = $state(false);
+	let cardElement: HTMLDivElement;
+
+	function handleMouseDown(event: MouseEvent) {
+		if (event.button !== 0) return;
+		
+		isDragging = true;
+		hasMoved = false;
+		const rect = cardElement.getBoundingClientRect();
+		dragOffset = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+		dragStartPos = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		
+		event.preventDefault();
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (!isDragging) return;
+		
+		const deltaX = Math.abs(event.clientX - dragStartPos.x);
+		const deltaY = Math.abs(event.clientY - dragStartPos.y);
+		
+		if (deltaX > 10 || deltaY > 10) {
+			hasMoved = true;
+		}
+		
+		const newX = event.clientX - dragOffset.x;
+		const newY = event.clientY - dragOffset.y;
+		
+		x = newX;
+		y = newY;
+		
+		onMove?.(id, newX, newY);
+	}
+
+	function handleMouseUp() {
+		if (isDragging) {
+			onDrop?.(id, x, y);
+		}
+		isDragging = false;
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (!hasMoved) {
+			flipped = !flipped;
+			onClick?.(id);
+		}
+	}
+
+	$effect(() => {
+		if (isDragging) {
+			document.addEventListener('mousemove', handleMouseMove);
+			document.addEventListener('mouseup', handleMouseUp);
+			return () => {
+				document.removeEventListener('mousemove', handleMouseMove);
+				document.removeEventListener('mouseup', handleMouseUp);
+			};
+		}
+	});
+</script>
+
+<div
+	bind:this={cardElement}
+	class="card"
+	class:flipped
+	class:dragging={isDragging}
+	style="left: {x}px; top: {y}px; z-index: {zIndex};"
+	onmousedown={handleMouseDown}
+	onclick={handleClick}
+	role="button"
+	tabindex="0"
+>
+	<div class="card-inner">
+		<div class="card-front">
+			<img src={frontImage} alt="Card front" />
+		</div>
+		<div class="card-back">
+			<img src={backImage} alt="Card back" />
+		</div>
+	</div>
+</div>
+
+<style>
+	.card {
+		position: absolute;
+		width: 220px;
+		height: 300px;
+		cursor: pointer;
+		perspective: 1000px;
+		user-select: none;
+	}
+
+	.card.dragging {
+		cursor: grabbing;
+		z-index: 1000 !important;
+	}
+
+	.card-inner {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		transition: transform 0.6s;
+		transform-style: preserve-3d;
+	}
+
+	.card.flipped .card-inner {
+		transform: rotateY(180deg);
+	}
+
+	.card-front,
+	.card-back {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		backface-visibility: hidden;
+		border-radius: 27px;
+		overflow: hidden;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+	}
+
+	.card-front {
+		background: white;
+	}
+
+	.card-back {
+		transform: rotateY(180deg);
+		background: white;
+	}
+
+	.card img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 30px;
+	}
+
+	.card:hover {
+		transform: translateY(-2px);
+		transition: transform 0.2s ease;
+	}
+
+	.card.dragging:hover {
+		transform: none;
+	}
+</style>