initial commit
This commit is contained in:
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
src/app.html
Normal file
12
src/app.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
181
src/lib/Card.svelte
Normal file
181
src/lib/Card.svelte
Normal file
@ -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>
|
||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
206
src/routes/+page.svelte
Normal file
206
src/routes/+page.svelte
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user