feat: implement snake draft grid visualization with real-time pick tracking
This commit is contained in:
Chris Parsons
parent
269499d584
commit
d440a70ef2
1 changed files with 146 additions and 56 deletions
|
|
@ -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,66 +218,122 @@ 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>
|
||||
{/* 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>
|
||||
|
||||
{/* Recent Picks */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold mb-2">Recent Picks</h3>
|
||||
{picks.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">No picks yet...</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{picks
|
||||
.slice()
|
||||
.reverse()
|
||||
.slice(0, 10)
|
||||
.map((pick: any) => (
|
||||
<div
|
||||
key={pick.id}
|
||||
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline">#{pick.pickNumber}</Badge>
|
||||
<div>
|
||||
<p className="font-semibold">
|
||||
{pick.participant.name}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{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">
|
||||
Round {pick.round}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Recent Picks */}
|
||||
<div>
|
||||
<Card className="p-4">
|
||||
<h2 className="text-xl font-semibold mb-4">Recent Picks</h2>
|
||||
{picks.length === 0 ? (
|
||||
<p className="text-muted-foreground text-sm">No picks yet...</p>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{picks
|
||||
.slice()
|
||||
.reverse()
|
||||
.slice(0, 10)
|
||||
.map((pick: any) => (
|
||||
<div
|
||||
key={pick.id}
|
||||
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>
|
||||
<div>
|
||||
<p className="font-semibold">
|
||||
{pick.participant.name}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{pick.sport.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">{pick.team.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Round {pick.round}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue