feat: add bracket visualization for tournament schedule (#8)

Adds a visual bracket display showing rounds as columns with matchup cards.

Changes:
- Created BracketVisualization component with CSS grid layout
- Added 'Bracket' tab to tournament detail page (visible when schedule exists)
- Matchup cards show team names, scores, and winner highlighting
- Current round is highlighted with green styling
- Added BDD feature file with 3 scenarios covering bracket display
- Added step definitions for bracket interaction tests

3 scenarios, 24 steps, all passing.
This commit is contained in:
2026-05-02 03:15:26 -07:00
parent c32239d557
commit 9bfb890143
4 changed files with 264 additions and 0 deletions
+18
View File
@@ -7,6 +7,7 @@ import Navigation from "@/components/Navigation"
import TeamsSection from "@/components/TeamsSection"
import { DeleteTournamentButton } from "@/components/DeleteTournamentButton"
import { ScheduleGenerator } from "@/components/ScheduleGenerator"
import { BracketVisualization } from "@/components/BracketVisualization"
import MatchEditor from "@/components/MatchEditor"
interface PageProps {
@@ -420,6 +421,11 @@ export default function TournamentDetailPage({ params }: PageProps) {
</div>
)
case "bracket":
return (
<BracketVisualization rounds={rounds} />
)
default:
return null
}
@@ -555,6 +561,18 @@ export default function TournamentDetailPage({ params }: PageProps) {
>
Results
</button>
{hasSchedule && (
<button
onClick={() => setActiveTab("bracket")}
className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm ${
activeTab === "bracket"
? "border-green-500 text-green-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
}`}
>
Bracket
</button>
)}
<span className="border-transparent text-gray-400 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-not-allowed">
Analytics
</span>