Sequence Card Game

A React implementation of the Sequence card game with TypeScript, Zustand state management, and Tailwind CSS.

Features

• 10×10 game board with 2 decks of cards (no jacks)
• 4 corner JOKER wild card positions
• Two teams: Red vs Blue
• Simple interaction: Click cards to cycle: White → Red → Blue → White
• Automatic save: Game state persists in browser localStorage
• Mobile responsive: Works on desktop and mobile devices
• Shuffle functionality: Randomize board before game starts
• Turn tracking: Visual indicator for current player's turn
• Score tracking: Basic score display for both teams

Game Rules (Simplified)

1. Board: 10×10 grid with 96 cards (2 decks, no jacks) + 4 corner JOKERs
2. Teams: Red vs Blue only
3. Claiming cards: Click any card to claim it for your team
4. Sequences: 5 cards in a row (horizontal, vertical, diagonal) scores 1 point
5. Corner JOKERs: Count as wild cards - only 4 cards + corner needed for sequence
6. Game flow: Teams alternate turns when cards are claimed

Project Structure

sequence/
├── src/
│   ├── components/          # React components
│   │   ├── GameBoard.tsx    # 10×10 grid container
│   │   ├── BoardCell.tsx    # Individual cell with click handler
│   │   ├── Card.tsx         # Card display component
│   │   ├── ScoreBoard.tsx   # Red/Blue scores display
│   │   ├── TurnIndicator.tsx # Turn indicator component
│   │   └── Controls.tsx     # Game control buttons
│   ├── hooks/
│   │   └── useGameStore.ts  # Zustand store with persistence
│   ├── lib/
│   │   ├── gameState.ts     # TypeScript type definitions
│   │   ├── boardGenerator.ts # Board generation & shuffling
│   │   ├── sequenceCheck.ts # Sequence detection logic
│   │   └── constants.ts     # Game constants
│   ├── App.tsx              # Main app layout
│   └── main.tsx             # App entry point
├── public/                  # Static assets
├── dist/                    # Production build output
└── deploy.sh               # Deployment script

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Navigate to the project directory:

   cd /home/sam/home_network/web_sites/sequence
   

2. Install dependencies:

   npm install
   

Development

Start the development server:

npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build

Preview the production build:

npm run preview

Deployment

Use the deployment script to build and deploy to the remote server:

./deploy.sh

Or manually:

# Build the project
npm run build

# Deploy to remote server
rsync -avz --delete dist/ sam@192.168.20.13:/var/www/sequence/

# Or for local testing deployment
rsync -avz --delete dist/ /var/www/sequence/

Implementation Details

State Management

• Uses Zustand with localStorage persistence
• Single source of truth for game state
• Automatic state restoration on page reload

Game Logic

• Board generation: Creates 2 full decks (no jacks), shuffles, places on 10×10 grid
• Sequence detection: Checks for 5-in-a-row patterns (4 with corner JOKER)
• Turn management: Enforces alternating turns between teams

Styling

• Tailwind CSS for utility-first styling
• Responsive design: Works on mobile and desktop
• Visual feedback: Clear color coding for teams and game state

Next Features to Implement

1. Sequence detection & automatic scoring (logic ready, needs integration)
2. Game completion logic (win conditions)
3. Historical game tracking in localStorage
4. Advanced rules (jack cards, dead cards)
5. Multiplayer support (online or local network)
6. AI opponent for single-player mode
7. Sound effects and animations
8. Game statistics and leaderboards

Technology Stack

• React 18 with TypeScript
• Vite for fast development and building
• Zustand for state management
• Tailwind CSS for styling

Current Status

✅ Phase 1 Complete (Basic Board & Interaction):

• 10×10 board with 4 JOKER corners
• Card display with suits and ranks
• Click cycle: white → red → blue → white
• Shuffle functionality
• Score and turn tracking
• Game state persistence
• Responsive design

🔄 Phase 2 In Progress (Game Logic):

• Sequence detection ready (needs integration)
• Score automation on sequence completion
• Game completion detection

Testing the Application

1. Local development:

   npm run dev
   

   Visit: http://localhost:5173

2. Production preview:

   npm run build
   npm run preview
   

   Visit: http://localhost:4173

3. Local deployment test:

   ./deploy.sh
   

License

MIT

Acknowledgments

Based on the classic Sequence card game by Jax Ltd.