UI Component Library

The BBX platform utilizes a specialized set of UI components designed to handle tournament logic, match reporting, and bracket visualization. These components are built with React, Tailwind CSS, and Lucide React icons to ensure a responsive and consistent user experience.

Display Components

MatchCard

The MatchCard is the primary display unit for match information. It is used extensively in the Bracket and Admin views to show participant pairings, current scores, and the match status.

Props/Interface:

• match: The match object containing participant_a_id, participant_b_id, score_a, score_b, and status.
• isFinals: A boolean that applies specific "Grand Finals" styling (e.g., gold borders or trophy icons).

Usage Example:

import { MatchCard } from "@/components/match-card";

// Within a bracket round map
<MatchCard 
  key={match.id} 
  match={match} 
  isFinals={roundNum === maxRound} 
/>

BracketConnector

An internal utility component used to render the SVG or CSS-based paths between bracket rounds. It visually connects a match in one round to its resulting match in the next.

Role:

• Calculates heights and vertical offsets to align lines with the MatchCard nodes.
• Primarily used within the BracketPage.

Interaction Modals

MatchScoringModal

A high-priority component used by tournament organizers to input scores and determine match winners. It handles the state for points (e.g., Spin Finish, Over Finish) and communicates with the server-side reportMatchAction.

Props/Interface:

• isOpen: Boolean controlling visibility.
• onClose: Callback function to clear the selection.
• match: The specific match object being edited.
• onRefresh: Callback to trigger a data re-fetch after a successful report.

Usage Example:

<MatchScoringModal
    isOpen={!!selectedMatch}
    onClose={() => setSelectedMatch(null)}
    match={selectedMatch}
    onRefresh={fetchData}
/>

ConfirmationModal

A reusable dialog for destructive or critical actions, such as advancing to the next round, deleting a participant, or resetting a match.

Props/Interface:

• isOpen: Boolean controlling visibility.
• onConfirm: The async function to execute upon user confirmation.
• title: String for the modal header.
• description: String for the warning message.

Usage Example:

<ConfirmationModal
    isOpen={confirmState.isOpen}
    title="Advance Bracket?"
    description="This will lock current scores and generate matches for the next round."
    onConfirm={handleAdvance}
    onClose={() => setConfirmState({ isOpen: false })}
/>

VictoryModal

A celebratory overlay triggered when the final match of the "Top Cut" stage is completed. It displays the champion's name and tournament statistics.

Props/Interface:

• isOpen: Boolean controlling visibility.
• winner: The participant object of the tournament champion.

Usage Example:

<VictoryModal 
    isOpen={showVictoryModal} 
    winner={championData} 
/>

Administrative Components

AdvanceRoundButton

A specialized button component found in the Admin Console. It manages the loading state and confirmation flow for transitioning the tournament from Swiss rounds to the Top Cut, or moving between bracket stages.

Usage Example:

// Located in the "Dangerous Zone" of the Admin Console
<AdvanceRoundButton 
    onSuccess={() => window.location.reload()} 
/>

RegistrationToggle

A toggle switch used by organizers to open or close tournament sign-ups. It interacts with the toggleRegistrationAction to update the tournament status in real-time.

Shared Layouts & Icons

The library standardizes certain visual cues using Lucide icons:

• Trophy (Trophy): Used for champions and tournament status.
• Users (Users): Used for participant lists and registration counts.
• Rocket (Rocket): Used for the tournament creation flow.
• Alert (AlertCircle): Used for pending matches or errors.