Update README with AGENTS.md reference and project instructions
This commit is contained in:
10x Developer
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