Multi-Sport Team Rotation Manager

A React TypeScript application built with Vite and Material-UI for managing team rotations across different sports.

Features

• Tabbed Interface: Clean separation between rotations and settings
• Full-Screen Team Management: Dedicated dialog for adding/managing team members
• Multi-Sport Support: Configure for Basketball (5), Volleyball (6), Water Polo (7), or any custom sport (1-7 players)
• Game Settings: Configure rotation length, total game time, and number of players on field
• Smart Team Overview: Visual summary showing team members and starters at a glance
• Rotation Generation: Automatically generates fair rotations with equal playing time
• Play Time Tracking: Shows total minutes played for each player
• Local Storage: All settings and team data are automatically saved to your browser
• Responsive Design: Full-width layout that adapts to any screen size
• Material-UI Design: Modern, responsive interface using MUI components

Supported Sports

The app automatically suggests the sport based on your configuration:

• Basketball: 5 players on court, 3 on bench
• Volleyball: 6 players on court, 2 on bench
• Water Polo: 7 players in pool, 1 on bench
• 3v3 Basketball: 3 players on court, 5 on bench
• Doubles Tennis: 4 players on court, 4 on bench
• Beach Volleyball: 2 players on court, 6 on bench
• Singles Tennis: 1 player on court, 7 on bench
• Custom Sports: Any configuration from 1-7 players on field

How to Use

1. Configure Game Settings (Settings Tab):

   • Set rotation length (1-30 minutes per rotation)
   • Set total game time (1-120 minutes)
   • Set number of players on field (1-7 players) - the app will suggest the sport
   • See live preview of how many rotation periods will be generated

2. Manage Your Team (Rotations Tab):

   • Click "Add Team Members" to open the full-screen team management dialog
   • Enter player names one by one using the intuitive interface
   • You need exactly 8 players to generate rotations
   • Remove players by clicking the delete icon on their chips
   • Select the right number of starters based on your sport configuration

3. View Team Overview (Rotations Tab):

   • See all team members with starters highlighted
   • Quick status showing completion progress
   • Access team management anytime with "Manage Team" button

4. View Rotations (Rotations Tab):

   • Once you have 8 players and the correct number of starters, rotations automatically generate
   • See which players are on field vs bench for each rotation period
   • View total playing time for each player

5. Persistent Settings:

   • All your settings, team members, and preferences are automatically saved
   • Data persists between browser sessions and across tabs
   • Use "Reset All" button to clear all saved data

Algorithm

The rotation algorithm ensures:

• Configurable rotation length (default: 6 minutes)
• Configurable total game time (default: 60 minutes)
• 5 players are on field, 3 on bench at any time
• Players with the most playing time are rotated out first
• Fair distribution of playing time across all players
• Alphabetical tie-breaking for equal playing times

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Sample Teams

For testing different sports, try these configurations:

Basketball (5 on court):

• Players: Alice, Bob, Charlie, Diana, Eve, Frank, Grace, Henry
• Starters: Any 5 players

Volleyball (6 on court):

• Players: Alice, Bob, Charlie, Diana, Eve, Frank, Grace, Henry
• Starters: Any 6 players

Water Polo (7 in pool):

• Players: Alice, Bob, Charlie, Diana, Eve, Frank, Grace, Henry
• Starters: Any 7 players

3v3 Basketball (3 on court):

• Players: Alice, Bob, Charlie, Diana, Eve, Frank, Grace, Henry
• Starters: Any 3 players

Then configure the appropriate number of "Players on Field" to see the sport-specific rotation system in action!

---

Original Vite Template Info

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])