123 lines
No EOL
4.1 KiB
Markdown
123 lines
No EOL
4.1 KiB
Markdown
# 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 |