112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import { memo, useMemo } from "react";
|
|
import { DraftPickCell } from "~/components/draft/DraftPickCell";
|
|
|
|
interface MiniDraftGridProps {
|
|
draftSlots: Array<{
|
|
id: string;
|
|
draftOrder: number;
|
|
team: {
|
|
id: string;
|
|
name: string;
|
|
logoUrl?: string | null;
|
|
};
|
|
}>;
|
|
draftGrid: Array<
|
|
Array<{
|
|
pickNumber: number;
|
|
round: number;
|
|
pickInRound: number;
|
|
teamId: string;
|
|
pick?: {
|
|
participant: {
|
|
name: string;
|
|
};
|
|
sport: {
|
|
name: string;
|
|
};
|
|
};
|
|
}>
|
|
>;
|
|
currentPick: number;
|
|
currentRound: number;
|
|
ownerMap?: Record<string, string>;
|
|
}
|
|
|
|
export const MiniDraftGrid = memo(function MiniDraftGrid({
|
|
draftSlots,
|
|
draftGrid,
|
|
currentPick,
|
|
currentRound,
|
|
ownerMap = {},
|
|
}: MiniDraftGridProps) {
|
|
const roundsToShow = useMemo(() => {
|
|
if (currentRound <= 1) return [0, 1];
|
|
return [currentRound - 2, currentRound - 1];
|
|
}, [currentRound]);
|
|
|
|
if (draftGrid.length === 0) return null;
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<div className="inline-block min-w-full">
|
|
<div className="flex gap-1.5 mb-1.5">
|
|
<div className="w-7 flex-shrink-0" />
|
|
{draftSlots.map((slot) => (
|
|
<div key={slot.id} className="flex-1 min-w-20 text-center">
|
|
<div className="text-xs font-medium truncate px-1 text-muted-foreground">
|
|
{ownerMap[slot.team.id] || slot.team.name}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{roundsToShow.map((roundIndex) => {
|
|
if (roundIndex >= draftGrid.length) return null;
|
|
const roundPicks = draftGrid[roundIndex];
|
|
const round = roundIndex + 1;
|
|
const isEvenRound = round % 2 === 0;
|
|
const displayPicks = isEvenRound
|
|
? [...roundPicks].toReversed()
|
|
: roundPicks;
|
|
|
|
return (
|
|
<div key={round} className="flex gap-1.5 items-stretch">
|
|
<div className="w-7 flex-shrink-0 flex items-center justify-center">
|
|
<span className="text-xs font-mono text-muted-foreground">R{round}</span>
|
|
</div>
|
|
{displayPicks.map((cell) => {
|
|
const isCurrent = cell.pickNumber === currentPick;
|
|
const isPicked = !!cell.pick;
|
|
const cellState = isPicked
|
|
? "picked"
|
|
: isCurrent
|
|
? "current"
|
|
: "upcoming";
|
|
|
|
return (
|
|
<DraftPickCell
|
|
key={cell.pickNumber}
|
|
pickNumber={cell.pickNumber}
|
|
round={cell.round}
|
|
pickInRound={cell.pickInRound}
|
|
state={cellState}
|
|
pick={
|
|
cell.pick
|
|
? {
|
|
participant: { name: cell.pick.participant.name },
|
|
sport: { name: cell.pick.sport.name },
|
|
}
|
|
: undefined
|
|
}
|
|
className="[&>div]:h-10"
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|