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

• React components structure
• State management with hooks and localStorage
• Routing between screens

Phase 2: Camera & Detection

• Camera feed integration
• 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

• 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