Update README with AGENTS.md reference and project instructions
This commit is contained in:
parent
b69cb75db2
commit
d46d0a5b54
1 changed files with 123 additions and 0 deletions
123
README.md
Normal file
123
README.md
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
# 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue