🎯 500Score

Professional Card Game Scoring Application

A sleek, modern React application for tracking scores in the classic 500 card game. Built with TypeScript, featuring persistent game state, comprehensive rule references, and a beautiful responsive design.

🚀 Live Demo | 📖 Documentation | 🤝 Contributing

✨ Features

🎮 Core Gameplay ♠️ Suit Selection - Visual emoji-based suit selection with enhanced visibility 🎯 Smart Scoring - Automatic calculation based on official 500 rules 📊 Live Scoreboard - Real-time score tracking with win condition detection ⏱️ Round Timer - Track time spent on each round	🔄 Game Management 💾 Auto-Save - Persistent game state with localStorage ↩️ Undo/Redo - Full game history with action rollback 📤 Export/Import - Save and load complete game states ✏️ Round Editing - Modify any previous round with automatic recalculation
🎨 Modern Design 🌙 Dark Mode - Full light/dark theme support 📱 Mobile-First - Optimized layout and spacing for iPhone and mobile devices 💻 Responsive - Seamless experience across mobile, tablet, and desktop 🎭 Team Icons - Customizable team emojis and player names ✨ Smooth Animations - Polished UI with micro-interactions	📚 Comprehensive Rules 🃏 Joker Rules - Complete joker gameplay mechanics 📢 Bidding Rules - Re-entering and bid modification guidelines 🎲 Misère Rules - Special bid hierarchy and requirements 📋 Scoring Reference - Interactive scoring table with all suit values

🚀 Quick Start

Prerequisites

Node.js 16.0+
pnpm (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/davestanyer/500score.git
cd 500score

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Open http://localhost:5173

Build for Production

# Create optimized production build
pnpm build

# Preview production build locally
pnpm preview

🎯 Game Rules Quick Reference

🎴 Basic Scoring

Suit	♠️ Spades	♣️ Clubs	♦️ Diamonds	♥️ Hearts	No-Trump
6	40	60	80	100	120
7	140	160	180	200	220
8	240	260	280	300	320
9	340	360	380	400	420
10	440	460	480	500	520

Special Bids:

Misère: 250 points (higher than 7, lower than 8)
Open Misère: 500 points

🃏 Joker Rules

Trump Suit Contract:

Joker belongs to trump suit and becomes highest trump card
Must be played if necessary to follow suit

No Trump Contract:

Joker is a suit by itself but wins any trick
Cannot be played if you can follow suit
When leading joker, must specify suit for others to follow

📢 Bidding Rules

Re-entering Bidding:

Can ALWAYS re-enter when someone changes suit
Can ALWAYS re-enter when someone increases bid
Normal bidding rules apply once re-entered

Changing Your Bid:

With competition: Change suit OR increase bid (once each)
Solo bidder: Can only increase, not change suit (once only)
Others get chance to re-enter after changes

🏗️ Architecture

Tech Stack

Frontend: React 18 + TypeScript
Styling: Tailwind CSS with custom design system
Build Tool: Vite
State Management: React Hooks + Context API
Storage: Browser localStorage with schema versioning
Icons: Lucide React + Custom emoji system

Project Structure

src/
├── components/          # React components
│   ├── BidInput.tsx    # Bidding interface
│   ├── Scoreboard.tsx  # Score display
│   ├── RoundHistory.tsx # Game history
│   └── ...
├── types/              # TypeScript definitions
├── utils/              # Business logic & utilities
├── constants/          # Game constants & configuration
└── App.tsx            # Main application component

Key Design Patterns

Component Composition: Modular, reusable components
Custom Hooks: Business logic separation
Type Safety: Comprehensive TypeScript coverage
Responsive Design: Mobile-first approach
Progressive Enhancement: Works without JavaScript for basic features

🧪 Development

Available Scripts

Command	Description
`pnpm dev`	Start development server
`pnpm build`	Build for production
`pnpm preview`	Preview production build
`pnpm lint`	Run ESLint
`pnpm typecheck`	Run TypeScript checks
`pnpm format`	Format code with Prettier

Development Guidelines

🔧 Code Standards

TypeScript: Strict mode enabled, no any types
ESLint: Extended React and TypeScript rules
Prettier: Consistent code formatting
Naming: camelCase for variables, PascalCase for components
Commits: Conventional commit format

🎨 UI Guidelines

Design System: Consistent color palette and spacing
Responsive: Mobile-first breakpoints
Accessibility: ARIA labels and keyboard navigation
Performance: Lazy loading and code splitting
Dark Mode: Full theme support

🛣️ Roadmap

✅ Completed (v2.1)

🚧 In Progress

Enhanced error handling and validation
Performance optimizations (React.memo, useMemo)
Comprehensive test suite
Accessibility improvements (ARIA, keyboard nav)

🔮 Future Features

Multiplayer support with real-time sync
Advanced game statistics and analytics
Tournament mode with bracket management
Progressive Web App (PWA) capabilities
Cloud save synchronization
Customizable house rules

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Quick Contribution Guide

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Setup

# Fork and clone your fork
git clone https://github.com/YOUR_USERNAME/500score.git
cd 500score

# Install dependencies
pnpm install

# Create feature branch
git checkout -b feature/your-feature-name

# Start development server
pnpm dev

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Contributors

_{Dave Stanyer}
🚀 Project Owner

_{Tom Carey}
💻 Core Contributor

_{Claude AI}
🤖 AI Assistant

🙏 Acknowledgments

500 Card Game Community for rules clarification and feedback
React Team for the amazing framework
Tailwind CSS for the utility-first styling approach
Vite Team for the lightning-fast build tool
All Contributors who have helped improve this project

💝 Support the Project

If you find this project helpful, please consider giving it a ⭐️ on GitHub!

Built with ❤️ by the 500Score Team

🔝 Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.bolt		.bolt
src		src
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CLAUDE.md		CLAUDE.md
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Suit	♠️ Spades	♣️ Clubs	♦️ Diamonds	♥️ Hearts	No-Trump
6	40	60	80	100	120
7	140	160	180	200	220
8	240	260	280	300	320
9	340	360	380	400	420
10	440	460	480	500	520

Suit	♠️ Spades	♣️ Clubs	♦️ Diamonds	♥️ Hearts	No-Trump
6	40	60	80	100	120
7	140	160	180	200	220
8	240	260	280	300	320
9	340	360	380	400	420
10	440	460	480	500	520

davestanyer/500score

Folders and files

Latest commit

History

Repository files navigation

🎯 500Score

Professional Card Game Scoring Application

✨ Features

🎮 Core Gameplay

🔄 Game Management

🎨 Modern Design

📚 Comprehensive Rules

🚀 Quick Start

Prerequisites

Installation

Build for Production

🎯 Game Rules Quick Reference

🏗️ Architecture

Tech Stack

Project Structure

Key Design Patterns

🧪 Development

Available Scripts

Development Guidelines

🛣️ Roadmap

✅ Completed (v2.1)

🚧 In Progress

🔮 Future Features

🤝 Contributing

Quick Contribution Guide

Development Setup

📄 License

👥 Contributors

🙏 Acknowledgments

💝 Support the Project

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Uh oh!

Languages

Packages

Suit	♠️ Spades	♣️ Clubs	♦️ Diamonds	♥️ Hearts	No-Trump
6	40	60	80	100	120
7	140	160	180	200	220
8	240	260	280	300	320
9	340	360	380	400	420
10	440	460	480	500	520