Duels

Overview

The Duels page manages one-on-one putting competitions, allowing players to challenge friends, track active matches, and review completed duels.

Core Features

Duel Categories

1. Invitations Received

• Duels where current user is the invited player

• Status: Pending

• Actions:

  • Accept invitation

  • Decline invitation

2. Invitations Sent

• Duels created by current user

• Status: Pending or Pending_new_player

• Actions:

  • Cancel invitation

3. Active Duels

• Ongoing competitions

• Real-time score display

  • Your Score (from session data)

  • Opponent's score

• Expiration date countdown

• Time limit display

• Actions:

  • Details button (copies parameters for desktop app)

4. Completed Duels

• Finished competitions

• Displays:

  • Your final score

  • Opponent's final score

  • Result (Won/Lost/Draw)

  • Completion date

• Actions:

  • Rematch button (creates new duel with same opponent)

Duel Creation

Create Duel Modal includes:

• Opponent selection (existing players or new invites via email/phone)

• Time limit configuration

• Expiration date setting (default 72 hours)

• Competition mode selection

• Putting distance configuration

Duel Management

Desktop App Integration:

• Parameter string generation: duel={id},time_limit={mins},scoring=total_makes

• One-click copy to clipboard

• Manual parameter entry fallback

• Toast notification with instructions

Scoring System:

• API-calculated scores for accuracy

• Real-time score updates from submitted sessions

• Score display perspective (always shows "Your Score" first)

Rematch Feature:

• Pre-fills opponent information

• Copies previous duel configuration

• Opens Create Duel Modal with defaults

• Notification confirms rematch setup

Table Features

Sortable Columns

• Opponent name

• Status

• Created date

• Completed date

• Customizable sort order (ascending/descending)

Responsive Layout

• Desktop: Full table with all columns

• Tablet: Adjusted column widths

• Mobile: Stacked card layout

Empty States

Each category shows friendly messages when no duels exist:

• "No duels in this category."

• Clear call-to-action to create first duel

Key Insights

State Management

• duels: Array of all duel objects

• rematchData: Stores opponent info for rematch flow

• showCreateModal: Controls modal visibility

• sortConfig: Manages table sorting

• Memoized categorization with useMemo for performance

API Integration

• apiListDuels: Fetch all duels for player

• apiRespondToDuel: Accept/decline invitations

• apiSubmitSessionToDuel: Submit session results

• apiCancelDuel: Cancel pending invitations

Score Calculation

// Perspective-based scoring
const isCreator = duel.creator_id === currentUserId;
const yourScore = isCreator ? duel.creator_score : duel.invited_player_score;
const opponentScore = isCreator ? duel.invited_player_score : duel.creator_score;

User Experience

• Color-coded status badges

• Hover effects on interactive elements

• Loading states during data fetching

• Error handling with user-friendly messages

• Optimistic UI updates

Desktop App Workflow

1. User clicks "Details" on active duel

2. System generates parameter string

3. Parameters copied to clipboard

4. Toast notification with instructions

5. User pastes into desktop app

6. Desktop app auto-configures duel session

---