Spider Solitaire

A beautiful, responsive Spider Solitaire game built with TypeScript and Vite, deployable on Netlify.

Features

• Classic Spider Solitaire gameplay - Build sequences from King to Ace in the same suit
• Drag & Drop Interface - Intuitive card movement with smooth animations
• Responsive Design - Works on different screen sizes
• Modern UI - Beautiful gradient backgrounds and card animations
• Game Statistics - Track moves and time
• Game Controls - New Game, Hint, and Undo functionality

Game Rules

1. Objective: Build 8 complete sequences from King to Ace in the same suit
2. Card Movement: Cards can be placed on other cards of the next higher rank (regardless of suit)
3. Sequence Movement: Only sequences of the same suit can be moved as a group
4. Dealing: Click the stock pile to deal one card to each tableau column
5. Winning: Complete all 8 sequences to win the game

Development

Prerequisites

• Node.js 18+
• npm

Setup

npm install
npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

Deployment on Netlify

1. Connect your repository to Netlify
2. Build settings are automatically configured via netlify.toml:
   • Build command: npm run build
   • Publish directory: dist
3. Deploy - Netlify will automatically build and deploy your game

Manual Deployment

1. Run npm run build
2. Upload the dist folder to Netlify

Project Structure

src/
├── Card.ts              # Card class with game logic
├── SpiderSolitaire.ts   # Main game engine
├── main.ts              # Application entry point
├── style.css            # Game styling and animations
└── vite-env.d.ts        # TypeScript declarations

Technologies Used

• TypeScript - Type-safe JavaScript
• Vite - Fast build tool and dev server
• HTML5 - Semantic markup
• CSS3 - Modern styling with animations
• Netlify - Deployment platform

License

MIT License - feel free to use this project as a base for your own games!