# Tschausepp - Jass Card Tracker

Mobile-first React web app for tracking Schaffhauser (Jass) card game rounds using camera and feature matching to detect and assign cards to players.

## Implementation Status

### ✅ Completed Features
- Basic React/TypeScript component structure
- Mobile-friendly UI with responsive design
- Camera access and preview functionality
- Player setup with name management
- Round results display with score calculation
- Game history storage with localStorage
- Export functionality for game history

### 🔧 In Progress Features
- **Detection Component**: TF.js integration for card boundary detection and suit identification
- **Assignment Logic**: Radial sector layout with auto-assignment to players
- **TensorFlow.js Integration**: Proper lite mode usage for feature matching
- **Card Suited Detection**: Recognition of Schellen, Schilten, Eicheln, Rosen

### 🚀 Features in Plan

#### 1. Setup Screen
- Enter 2-10 player names
- Radial sector configuration
- Custom card value mapping (placeholders ready)

#### 2. Camera Screen
- Live camera preview with card detection overlay
- Auto-detect card boundaries (color + edge detection)
- Suit identification (Schellen, Schilten, Eicheln, Rosen)
- Auto-assign based on radial sector + nearest player

#### 3. Results Screen
- Group cards by player
- Calculate round scores
- Show totals & highlight high scorers
- Options: Save Game | Play Next Round

#### 4. History Screen
- Browse last 100 games
- JSON export for backup
- Game date, player count, high score

## Development Plan

### Phase 1: Core Infrastructure
- [x] React components structure
- [x] State management with hooks and localStorage
- [x] Routing between screens

### Phase 2: Camera & Detection
- [x] Camera feed integration
- [x] Card detection framework (Detection component)
- [ ] TensorFlow.js integration for feature matching
- [ ] Card boundary detection with edge detection
- [ ] Suit identification (Schellen/Schilten/Eicheln/Rosen)

### Phase 3: Assignment & Radial Layout
- [x] Basic radial sector concept
- [ ] Complete radial sector implementation
- [ ] Automatic card assignment to closest player
- [ ] Radial visualization for player positioning

### Phase 4: Polishing & Enhancement
- [ ] Improved UI/UX with better visual feedback
- [ ] Performance optimizations
- [ ] Additional game features (multi-round tracking, etc.)

## Tech Stack

- React 18 (lightweight runtime)
- TensorFlow.js (lite mode, CDN-hosted, ~5MB)
- HTML5 Camera API (Mobile-friendly)
- localStorage (JSON format, max 100 games)

## Usage Instructions

1. Enter player names in the setup screen (2-10 players)
2. Configure card point values for each suit
3. Start the game to begin taking photos
4. When round ends, click "SCAN TABLE" 
5. Camera will auto-detect and assign cards to players
6. View results and save game history

## Architecture

The application follows a component-based architecture with:
- Setup screen for initial game configuration
- Camera screen for card detection
- Results screen for score calculation
- History screen for storage management

Data is persisted in localStorage with a maximum of 100 games.

## Development Notes

### TensorFlow.js Integration
The application is configured to use TensorFlow.js with the `@tensorflow/tfjs` package. While full integration is still in development, the framework is in place to properly implement:
- Lightweight model loading for mobile devices
- Feature matching for card detection
- Suit recognition algorithms

### Mobile-first Design
All UI components are built with mobile responsiveness in mind:
- Touch-friendly buttons and controls
- Adaptive layouts for different screen sizes
- Camera access optimized for mobile devices

### Performance Considerations
- Card detection uses sampling for performance
- TensorFlow.js models are optimized for browser execution
- Only last 100 games are stored in local storage

## Project Instructions

This project includes an AGENTS.md file with detailed instructions for working with the codebase. Please refer to that file for:
- Key developer commands
- Architecture notes
- Framework quirks
- Testing conventions
- Setup requirements and environment quirks