Leagues

Overview

The Leagues page manages multi-player, multi-round putting competitions with flexible scheduling and competition modes.

Core Features

League Categories

1. Pending Invitations

• Leagues where player received invitation

• Shows inviter name

• Member count display

• Actions:

  • Accept invitation

  • Decline invitation

2. My Leagues

• Leagues where player is a member

• Full league details table

3. Public Leagues

• Open leagues available to join

• Same table structure as My Leagues

League Table Columns

Core Information:

• Name: League name (clickable to detail page)

• Members: Current player count

• Status: Active, Completed, or Pending

• Start: League start date/time

Competition Configuration:

• Time Limit: Minutes per session (N/A for shoot-out mode)

• Shoot-Out #: Maximum attempts for shoot-out mode (N/A for timed mode)

• Rounds: Total number of rounds

• Round Interval: Duration between rounds (hours or days)

Competition Modes

1. Time Limit Mode

• Players complete sessions within time limit

• Scoring based on makes within time window

• Time limit displayed in minutes

2. Shoot-Out Mode

• Fixed number of attempts

• Best score from limited attempts

• Max attempts displayed instead of time limit

League Creation

Create League Modal (Subscribers Only):

• League name

• Privacy settings (Public/Private)

• Competition mode selection

• Time limit or max attempts configuration

• Number of rounds

• Round duration (1 hour to monthly)

• Start time configuration

• Member invitation system

Free User Experience:

• Can join leagues

• Cannot create leagues

• Notification explains subscription requirement

League Detail Page (Linked)

Clicking a league name navigates to detailed view:

• Full leaderboard

• Round-by-round results

• Member list

• League rules display

• Session submission interface

Key Insights

State Management

• myLeagues: Player's joined leagues

• publicLeagues: Available public leagues

• pendingInvites: Invitation list

• showCreateModal: Modal visibility control

API Integration

• apiListLeagues: Fetch all league categories

• apiRespondToLeagueInvite: Accept/decline invitations

• League creation API (in CreateLeagueModal component)

League Rules Structure

{
  competition_mode: 'time_limit' | 'shoot_out',
  time_limit_minutes: number,
  max_attempts: number,
  num_rounds: number,
  round_duration_hours: number
}

Date Formatting

• Intelligent date display

• Time zone aware

• Fallback to 'N/A' for missing dates

• Localized format using Intl.DateTimeFormat

Round Duration Display

// Hours < 24: "X Hour(s)"
// Hours >= 24: "X Day(s)"
const formatRoundInterval = (hours) => {
  if (hours < 24) return `${hours} Hour${hours > 1 ? 's' : ''}`;
  const days = hours / 24;
  return `${days} Day${days > 1 ? 's' : ''}`;
};

Error Handling

• Defensive programming with default empty arrays

• 404 treated as "no leagues" rather than error

• Graceful degradation when API fails

• User-friendly error messages

Visual Design

• Status badges with color coding

• Column separators for readability

• Centered numeric columns

• Hover effects on clickable elements

• Empty state messages with guidance

---