125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { GripVertical, X } from "lucide-react";
|
|
|
|
interface Participant {
|
|
id: string;
|
|
name: string;
|
|
sport: string;
|
|
expectedValue: number;
|
|
}
|
|
|
|
interface QueueItem {
|
|
id: string;
|
|
participantId: string;
|
|
queuePosition: number;
|
|
}
|
|
|
|
interface DraftQueueProps {
|
|
queueItems: QueueItem[];
|
|
participants: Participant[];
|
|
onReorder?: (participantIds: string[]) => void;
|
|
onRemove?: (queueItemId: string) => void;
|
|
}
|
|
|
|
export function DraftQueue({
|
|
queueItems,
|
|
participants,
|
|
onReorder,
|
|
onRemove,
|
|
}: DraftQueueProps) {
|
|
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
|
|
|
// Create a map for quick participant lookup
|
|
const participantMap = new Map(participants.map((p) => [p.id, p]));
|
|
|
|
// Sort queue items by position
|
|
const sortedQueue = [...queueItems].sort((a, b) => a.queuePosition - b.queuePosition);
|
|
|
|
const handleDragStart = (index: number) => {
|
|
setDraggedIndex(index);
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent, index: number) => {
|
|
e.preventDefault();
|
|
if (draggedIndex === null || draggedIndex === index) return;
|
|
|
|
// Reorder the items
|
|
const newQueue = [...sortedQueue];
|
|
const draggedItem = newQueue[draggedIndex];
|
|
newQueue.splice(draggedIndex, 1);
|
|
newQueue.splice(index, 0, draggedItem);
|
|
|
|
// Update positions and notify parent
|
|
const participantIds = newQueue.map((item) => item.participantId);
|
|
onReorder?.(participantIds);
|
|
setDraggedIndex(index);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
setDraggedIndex(null);
|
|
};
|
|
|
|
if (sortedQueue.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<p>Your queue is empty</p>
|
|
<p className="text-sm mt-2">Add players from the Available Players list</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{sortedQueue.map((item, index) => {
|
|
const participant = participantMap.get(item.participantId);
|
|
if (!participant) return null;
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
draggable
|
|
onDragStart={() => handleDragStart(index)}
|
|
onDragOver={(e) => handleDragOver(e, index)}
|
|
onDragEnd={handleDragEnd}
|
|
className={`flex items-center gap-2 p-3 rounded-lg border bg-card transition-all ${
|
|
draggedIndex === index ? "opacity-50" : "hover:bg-accent cursor-move"
|
|
}`}
|
|
>
|
|
{/* Drag Handle */}
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<GripVertical className="h-4 w-4" />
|
|
<span className="text-sm font-semibold w-6">{index + 1}</span>
|
|
</div>
|
|
|
|
{/* Player Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-medium truncate">{participant.name}</div>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant="secondary" className="text-xs">
|
|
{participant.sport}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground">
|
|
EV: {participant.expectedValue.toFixed(1)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Remove Button */}
|
|
{onRemove && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onRemove(item.id)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|