Solitaire

A browser-based Klondike Solitaire game built with plain HTML, CSS, and vanilla JavaScript.

Overview

This project is a self-contained solitaire app that runs directly in the browser. The game logic, UI, styling, accessibility hooks, and mobile interactions live in index.html, with a small manifest and service worker for installable offline play.

Features

• Classic Klondike Solitaire rules
• Drag and drop card movement
• Double-click auto-move to foundations
• Draw 1 and Draw 3 modes
• Undo support
• Move counter and in-game timer
• Pause and resume
• Hint highlighting and optional hint button
• Auto-complete for safe endgame moves
• Saved game progress and saved settings via localStorage
• Touch-friendly play for phones and tablets
• Keyboard-accessible controls and screen reader announcements
• Theme controls, card back choices, high-contrast mode, and sound effects
• Installable PWA with offline caching
• Win animation with confetti

Run Locally

Open index.html in a browser for a quick start.

If you want the service worker and installability behavior to work reliably, serve the folder over HTTP:

npm install
npm run dev

Then open the local URL printed by serve.

How To Play

1. Move all cards to the four foundation piles.
2. Build foundations up by suit from Ace to King.
3. Build tableau piles down in alternating colors.
4. Move only Kings, or stacks led by Kings, into empty tableau columns.
5. Draw from the stock pile when no better moves are available.

Controls

• Click the stock pile to draw cards or recycle the waste pile
• Drag cards between tableau and foundation piles
• Double-click a face-up card to auto-move it to a foundation when legal
• Use New Game, Undo, Pause, Hint, and Settings from the header

Keyboard Shortcuts

• N: Start a new game
• P: Pause or resume
• U: Undo
• H: Show hint
• Esc: Clear keyboard selection or close overlays
• Enter / Space: Activate focused interactive piles and controls

Persistence

The game stores the following in localStorage:

• Current game state
• Move history for undo
• Player settings such as draw mode, theme, card back, contrast, and sound

Project Structure

• index.html: Main app, styles, and game logic
• manifest.json: PWA metadata
• sw.js: Offline asset caching
• icon.svg: App icon
• package.json: Local dev scripts

Tech Stack

• HTML
• CSS
• Vanilla JavaScript
• Web Audio API
• Service Worker + Web App Manifest

Improvement Ideas

Gameplay

• Add a scoring system such as standard or Vegas scoring
• Offer a choice between winnable deals and fully random shuffles
• Add difficulty presets

Visual And Audio

• Introduce smoother movement and foundation animations
• Expand sound design with optional music and richer card effects

Statistics And Progress

• Track wins, losses, streaks, best time, and fewest moves
• Add a post-game summary screen
• Save long-term player stats separately from the current game state

Accessibility And Controls

• Expand keyboard navigation guidance in the UI
• Add larger-card and reduced-motion options
• Improve touch feedback for drag targets on small screens

License

LGPL