Bridge Bidding Trainer

A minimal but working Bridge Bidding Trainer built with Vite + React + TypeScript. Practice SAYC (Standard American Yellow Card) opening bids and receive instant feedback.

Features

• Graphical Hand Display: See your 13-card hand organized by suit
• Interactive Bidding Pad: Make bids using Pass/X/XX and 1-7 levels across all suits
• Auction History: View bids in N/E/S/W columns
• Real-time Feedback: Get instant validation against simplified SAYC rules
• Zero Backend: Pure client-side application

Local Development

# Install dependencies
npm install

# Start dev server
npm run dev

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

Build for Production

npm run build

The built files will be in the dist/ folder.

Deploy to GitHub Pages

One-time Setup

1. Create a GitHub repository named bridge

2. Push this code to the repository:

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/YOUR_USERNAME/bridge.git
   git push -u origin main

3. Enable GitHub Pages:

   • Go to Settings → Pages
   • Source: GitHub Actions

Automatic Deployment

Every push to main will automatically deploy to GitHub Pages via GitHub Actions.

Your app will be available at: https://YOUR_USERNAME.github.io/bridge/

Manual Deployment (Alternative)

npm run build
npx gh-pages -d dist

Tech Stack

• Vite: Fast build tool and dev server
• React: UI library
• TypeScript: Type safety
• CSS-in-JS: Inline styles for simplicity

SAYC Rules Implemented

Simplified subset for training purposes:

Opening Bids

• Pass: < 12 HCP
• 1NT: 15-17 HCP balanced
• 1-level suits: 12+ HCP, 5+ cards (or 3+ for minors)
• 2NT: 20-21 HCP balanced

Responses (Basic)

• Pass: < 6 HCP
• 2-level: Various meanings (transfers, natural)
• 3NT: 10-14 HCP over 1NT

Project Structure

src/
├── components/
│   ├── Card.tsx          # Individual card display
│   ├── Hand.tsx          # 13-card hand display
│   ├── BiddingPad.tsx    # Interactive bidding interface
│   └── Auction.tsx       # Auction history table
├── logic/
│   ├── deck.ts           # Card generation and shuffling
│   └── bidding.ts        # SAYC validation rules
├── types.ts              # TypeScript type definitions
└── App.tsx               # Main application component

License

MIT