RackTracker Frontend

This directory contains the frontend code for the RackTracker pool match scoring system. The frontend is designed to be mobile-friendly and optimized for quick data entry during live tournaments.

Structure

  • index.html - Main HTML template with all UI components
  • index.js - JavaScript for handling UI interactions and API calls

Key Features

Mobile-Optimized Interface

The interface is designed for mobile devices with:

  • Large touch targets (minimum 48x48px)
  • High contrast for visibility in varying lighting conditions
  • Minimal scrolling required during active scoring
  • Portrait orientation optimized for one-handed operation

Quick Data Entry

The scoring interface prioritizes speed with:

  • Two large buttons for recording rack wins
  • Quick toggle buttons for special events (BR, RO, fouls, etc.)
  • Minimal taps required per rack (1-3 taps)
  • Undo functionality for correcting mistakes

Match Management

The app provides:

  • Dashboard view of active and recent matches
  • New match creation with minimal required fields
  • Match completion and statistics summary
  • Export options for sharing match data

Views

  1. Dashboard - Overview of active and recent matches
  2. New Match - Form for creating a new match
  3. Match Scoring - Interface for recording rack results
  4. Match Complete - Summary of match results and export options

Offline Support

The frontend is designed to work offline with:

  • Service worker for caching assets
  • Local storage for pending changes
  • Sync functionality when connection is restored

Export Options

Match data can be exported in various formats:

  • JSON - Complete match data
  • CSV - Tabular data for spreadsheet import
  • Text Summary - Copyable text format for quick sharing
  • FargoRate Format - Structured data for FargoRate integration