score-sheet

An app to keep score while playing various board and card games.

Development Roadmap

Phase 1: Project Setup & Foundation

• Initialize project as a Single Page Application (SPA) using Vue.js
• Set up basic routing
• Basic styling framework/layout (Mobile-first approach)

Phase 2: Core Data Management

• Player Management
  • List existing players
  • Add new players
  • Edit/Delete players
• Game Templates Management
  • List game templates
  • Create/Edit game templates:
    • Game Name
    • Scoring type (Normal vs. Reverse)

Phase 3: Persistence & Offline Support

• Implement local data persistence (LocalStorage)
• PWA Setup
  • Web Manifest for "Add to Home Screen" (with mobile icons and splash screens)
  • Service Worker for offline availability

Phase 4: Scoring Interface (The Score Sheet)

• Game Initialization
  • Select a game template
  • Select players for the session
• Score Entry Table
  • Table layout: Players across top, rounds down the side
  • Input cells: Large touch-friendly targets
  • Keyboard support: Numeric keyboard triggered by default on mobile
  • Navigation: Pressing 'Enter' moves focus to the next cell
• Real-time Feedback
  • Sticky footer showing total scores per player
  • Responsive horizontal scrolling for many players
  • High contrast for outdoor/bright light visibility
• Game Lifecycle
  • "Keep screen awake" functionality
  • Option to finish game and view final results

Phase 5: Dashboard & Polish

• Home Screen Dashboard
  • Last 5 games played (Name, date, winner)
  • Quick-start most recent game settings
  • Top 5 players (by games played)
  • Dashboad refinements (New game/player links)
  • Full game history page
• UI/UX Polish
  • Convert top menu to bottom tab navigation with Material Icons
  • Final UI/UX refinements (Mobile-first optimization)

Phase 6: Deployment

• Configure for Firebase Hosting
• Final production build and deploy