tschau-sepp/AGENTS.md

Tschausepp - Jass Card Tracker

Project Overview

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

Tech Stack

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

Key Implementation Details

Architecture

• Component-based structure with 5 main screens:
  1. Setup Screen - Player management and game configuration
  2. Camera Screen - Live preview with card detection overlay
  3. Detection Component - Card boundary detection using image processing
  4. Assignment Component - Radial sector layout with auto-assignment
  5. Results Screen - Score calculation and game results
  6. History Screen - Game storage and export functionality

Development Commands

• npm run build - Build production version
• npm run preview - Preview production build
• npm run typecheck - Run TypeScript type checking

Development Server

• A development server is always guaranteed to be running on localhost:5173
• Do not start the development server manually under any circumstances

Camera & Detection

• Uses HTML5 Camera API with environment-facing camera preference
• Card detection implemented with custom image processing techniques
• Suit identification (Schellen, Schilten, Eicheln, Rosen) via color analysis
• Auto-assignment based on radial sector + nearest player calculation

Data Storage

• Games stored in localStorage with maximum of 100 games
• Data structure follows: games → rounds → cards with player assignments
• JSON format for export functionality

Mobile-First Design

• Responsive UI optimized for mobile devices
• Touch-friendly controls and interfaces
• Camera access optimized for mobile environment