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

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

@ -142,15 +142,49 @@ export default function DraftRoom() {
};
}, [on, off]);
// Calculate current team on the clock
const currentDraftSlot = draftSlots[(currentPick - 1) % draftSlots.length];
// Calculate current round
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 (
<div className="min-h-screen bg-background">
{/* Standalone Header - No Main Nav */}
<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>
<h1 className="text-3xl font-bold">
@ -184,35 +218,92 @@ export default function DraftRoom() {
</div>
{/* Main Content */}
<div className="container mx-auto p-4">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Left Column: Draft Board */}
<div className="lg:col-span-2">
<div className="w-full px-4 py-4">
{/* Draft Grid - Horizontally Scrollable */}
<div className="mb-6">
<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">
<div className="w-full">
{/* Team Headers */}
<div className="flex gap-2 mb-2">
{draftSlots.map((slot) => (
<div
key={slot.id}
className="flex-1 min-w-32 text-center"
>
<div className="font-semibold text-sm truncate px-2">
{slot.team.name}
</div>
<div className="text-xs text-muted-foreground">
Pick {slot.draftOrder}
</div>
</div>
))}
</div>
{/* Current Pick */}
{currentDraftSlot && (
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-500 rounded-lg">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Now Picking:</p>
<p className="text-2xl font-bold">{currentDraftSlot.team.name}</p>
</div>
<Badge variant="default" className="text-lg px-4 py-2">
Pick #{currentPick}
</Badge>
</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>
</Card>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Recent Picks */}
<div className="space-y-2">
<h3 className="font-semibold mb-2">Recent Picks</h3>
<div>
<Card className="p-4">
<h2 className="text-xl font-semibold mb-4">Recent Picks</h2>
{picks.length === 0 ? (
<p className="text-gray-500 text-sm">No picks yet...</p>
<p className="text-muted-foreground text-sm">No picks yet...</p>
) : (
<div className="space-y-2">
<div className="space-y-2 max-h-96 overflow-y-auto">
{picks
.slice()
.reverse()
@ -220,7 +311,7 @@ export default function DraftRoom() {
.map((pick: any) => (
<div
key={pick.id}
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
className="flex items-center justify-between p-3 bg-muted rounded-lg"
>
<div className="flex items-center gap-3">
<Badge variant="outline">#{pick.pickNumber}</Badge>
@ -228,14 +319,14 @@ export default function DraftRoom() {
<p className="font-semibold">
{pick.participant.name}
</p>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
{pick.sport.name}
</p>
</div>
</div>
<div className="text-right">
<p className="font-medium">{pick.team.name}</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-muted-foreground">
Round {pick.round}
</p>
</div>
@ -243,7 +334,6 @@ export default function DraftRoom() {
))}
</div>
)}
</div>
</Card>
</div>