Solitaire Svelte

A classic Klondike Solitaire card game built with Svelte 5, Tailwind CSS v4, and Vite.

Features

• 🃏 Classic Klondike (Patience) solitaire rules
• ⏱️ Timer and move counter
• 🎯 Auto-complete when possible
• ✨ Smooth card animations
• 📱 Responsive design (desktop & mobile)
• ♿ Accessible with keyboard navigation
• 🧪 Comprehensive test suite (TDD)

Tech Stack

• Framework: Svelte 5
• Styling: Tailwind CSS v3
• Build Tool: Vite
• Unit Testing: Vitest
• E2E Testing: Playwright
• Deployment: Cloudflare Pages

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

# Clone the repository
git clone https://github.com/lingster/solitaire-svelte.git
cd solitaire-svelte

# Install dependencies
npm install --legacy-peer-deps

# Start development server
npm run dev

Testing

# Run unit tests
npm run test

# Run unit tests in watch mode
npm run test:watch

# Run E2E tests
npm run test:e2e

# Run E2E tests with UI
npm run test:e2e:ui

# Run all tests
npm run test:all

Building

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

solitaire-svelte/
├── src/
│   ├── lib/
│   │   ├── types.ts        # TypeScript types
│   │   ├── game.ts         # Game logic
│   │   ├── game.test.ts    # Unit tests (TDD)
│   │   ├── store.ts        # Svelte stores
│   │   ├── Card.svelte     # Card component
│   │   ├── Pile.svelte     # Pile component
│   │   └── Board.svelte    # Game board
│   ├── App.svelte          # Main app
│   ├── main.ts             # Entry point
│   └── app.css             # Tailwind styles
├── e2e/
│   └── solitaire.spec.ts   # Playwright E2E tests
├── public/                  # Static assets
├── playwright.config.ts     # Playwright config
├── vite.config.ts          # Vite config
└── wrangler.toml           # Cloudflare config

Game Rules (Klondike)

Objective

Move all 52 cards to the four foundation piles, building each from Ace to King by suit.

Setup

• 28 cards dealt to 7 tableau piles (1-7 cards each)
• Top card of each tableau pile is face up
• Remaining 24 cards form the stock pile

Rules

• Foundations: Build up by suit from Ace to King
• Tableau: Build down by alternating colors (red/black)
• Stock: Click to draw cards to waste pile
• Empty tableau: Only Kings can be placed
• Move stacks: Can move properly sequenced card stacks between tableau piles

Deployment

Cloudflare Pages

1. Fork/clone this repository
2. Connect to Cloudflare Pages
3. Set build command: npm run build
4. Set output directory: dist
5. Add environment variables if needed

Or deploy via CLI:

npm run build
npx wrangler pages deploy dist --project-name=solitaire-svelte

GitHub Actions

The repository includes a CI/CD workflow that:

1. Runs unit tests
2. Builds the project
3. Runs E2E tests
4. Deploys to Cloudflare Pages (on main branch)

Set these secrets in your GitHub repository:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Development

TDD Workflow

This project was built using Test-Driven Development:

1. Write failing tests for game logic
2. Implement minimal code to pass tests
3. Refactor while keeping tests green
4. Add E2E tests for UI interactions

Adding Features

1. Write tests first in game.test.ts
2. Implement in game.ts
3. Update UI components
4. Add E2E tests in e2e/

License

MIT