chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement snake draft grid visualization with real-time pick tracking

Browse source
This commit is contained in:
Chris Parsons 2025-10-17 12:51:47 -07:00
parent 269499d584
commit d440a70ef2
1 changed files with 146 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

202
app/routes/leagues/$leagueId.draft.$seasonId.tsx
View file

@ -142,15 +142,49 @@ export default function DraftRoom() {
}; };
}, [on, off]); }, [on, off]);
// Calculate current team on the clock // Calculate current round
const currentDraftSlot = draftSlots[(currentPick - 1) % draftSlots.length];
const currentRound = Math.ceil(currentPick / draftSlots.length); const currentRound = Math.ceil(currentPick / draftSlots.length);
// Generate snake draft grid structure
const generateDraftGrid = () => {
const teamCount = draftSlots.length;
const rounds = season.draftRounds;
const grid: Array<Array<{ pickNumber: number; round: number; pickInRound: number; teamId: string; pick?: any }>> = [];
for (let round = 1; round <= rounds; round++) {
const roundPicks = [];
const isOddRound = round % 2 === 1;
for (let i = 0; i < teamCount; i++) {
const pickInRound = i + 1;
const teamIndex = isOddRound ? i : teamCount - 1 - i;
const pickNumber = (round - 1) * teamCount + pickInRound;
const teamId = draftSlots[teamIndex]?.team.id;
// Find if this pick has been made
const pick = picks.find((p: any) => p.pickNumber === pickNumber);
roundPicks.push({
pickNumber,
round,
pickInRound,
teamId,
pick,
});
}
grid.push(roundPicks);
}
return grid;
};
const draftGrid = generateDraftGrid();
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
{/* Standalone Header - No Main Nav */} {/* Standalone Header - No Main Nav */}
<div className="border-b bg-card"> <div className="border-b bg-card">
<div className="container mx-auto p-4"> <div className="w-full px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-3xl font-bold"> <h1 className="text-3xl font-bold">
@ -184,66 +218,122 @@ export default function DraftRoom() {
</div> </div>
{/* Main Content */} {/* Main Content */}
<div className="container mx-auto p-4"> <div className="w-full px-4 py-4">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> {/* Draft Grid - Horizontally Scrollable */}
{/* Left Column: Draft Board */} <div className="mb-6">
<div className="lg:col-span-2">
<Card className="p-4"> <Card className="p-4">
<h2 className="text-xl font-semibold mb-4">Draft Board</h2> <h2 className="text-xl font-semibold mb-4">Draft Grid</h2>
<div className="overflow-x-auto">
{/* Current Pick */} <div className="w-full">
{currentDraftSlot && ( {/* Team Headers */}
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-500 rounded-lg"> <div className="flex gap-2 mb-2">
<div className="flex items-center justify-between"> {draftSlots.map((slot) => (
<div> <div
<p className="text-sm text-gray-600">Now Picking:</p> key={slot.id}
<p className="text-2xl font-bold">{currentDraftSlot.team.name}</p> className="flex-1 min-w-32 text-center"
</div> >
<Badge variant="default" className="text-lg px-4 py-2"> <div className="font-semibold text-sm truncate px-2">
Pick #{currentPick} {slot.team.name}
</Badge> </div>
<div className="text-xs text-muted-foreground">
Pick {slot.draftOrder}
</div>
</div>
))}
</div>
{/* Draft Grid Rows */}
<div className="space-y-2">
{draftGrid.map((roundPicks, roundIndex) => {
const round = roundIndex + 1;
const isEvenRound = round % 2 === 0;
const displayPicks = isEvenRound ? [...roundPicks].reverse() : roundPicks;
return (
<div key={roundIndex} className="flex gap-2">
{displayPicks.map((cell) => {
const isCurrent = cell.pickNumber === currentPick;
const isPicked = !!cell.pick;
return (
<div
key={cell.pickNumber}
className={`flex-1 min-w-32 h-20 border-2 rounded-lg p-2 transition-all ${
isCurrent
? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-lg"
: isPicked
? "border-green-500 bg-green-50 dark:bg-green-950"
: "border-gray-300 bg-white dark:bg-gray-900"
}`}
>
<div className="text-xs font-mono text-muted-foreground mb-1">
{cell.round}.{String(cell.pickInRound).padStart(2, "0")}
</div>
{isPicked ? (
<div className="text-xs">
<div className="font-semibold truncate">
{cell.pick.participant.name}
</div>
<div className="text-muted-foreground truncate">
{cell.pick.sport.name}
</div>
</div>
) : isCurrent ? (
<div className="text-xs font-semibold text-blue-600 dark:text-blue-400">
On Clock
</div>
) : null}
</div>
);
})}
</div>
);
})}
</div> </div>
</div> </div>
)} </div>
</Card>
</div>
{/* Recent Picks */} <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="space-y-2"> {/* Recent Picks */}
<h3 className="font-semibold mb-2">Recent Picks</h3> <div>
{picks.length === 0 ? ( <Card className="p-4">
<p className="text-gray-500 text-sm">No picks yet...</p> <h2 className="text-xl font-semibold mb-4">Recent Picks</h2>
) : ( {picks.length === 0 ? (
<div className="space-y-2"> <p className="text-muted-foreground text-sm">No picks yet...</p>
{picks ) : (
.slice() <div className="space-y-2 max-h-96 overflow-y-auto">
.reverse() {picks
.slice(0, 10) .slice()
.map((pick: any) => ( .reverse()
<div .slice(0, 10)
key={pick.id} .map((pick: any) => (
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg" <div
> key={pick.id}
<div className="flex items-center gap-3"> className="flex items-center justify-between p-3 bg-muted rounded-lg"
<Badge variant="outline">#{pick.pickNumber}</Badge> >
<div> <div className="flex items-center gap-3">
<p className="font-semibold"> <Badge variant="outline">#{pick.pickNumber}</Badge>
{pick.participant.name} <div>
</p> <p className="font-semibold">
<p className="text-sm text-gray-600"> {pick.participant.name}
{pick.sport.name} </p>
</p> <p className="text-sm text-muted-foreground">
</div> {pick.sport.name}
</div>
<div className="text-right">
<p className="font-medium">{pick.team.name}</p>
<p className="text-xs text-gray-500">
Round {pick.round}
</p> </p>
</div> </div>
</div> </div>
))} <div className="text-right">
</div> <p className="font-medium">{pick.team.name}</p>
)} <p className="text-xs text-muted-foreground">
</div> Round {pick.round}
</p>
</div>
</div>
))}
</div>
)}
</Card> </Card>
</div> </div>