412 lines
13 KiB
TypeScript
412 lines
13 KiB
TypeScript
import { data, redirect } from "react-router";
|
|
import type { LoaderFunctionArgs } from "react-router";
|
|
import { getAuth } from "@clerk/react-router/server";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
findLeagueById,
|
|
findCurrentSeason,
|
|
findTeamsBySeasonId,
|
|
isCommissioner,
|
|
findDraftSlotsBySeasonId,
|
|
getDraftPicks,
|
|
getSeasonTimers,
|
|
findSeasonWithSportsSeasons,
|
|
getTeamQueue,
|
|
getTeamForPick,
|
|
} from "~/models";
|
|
import { DraftGrid } from "~/components/draft/DraftGrid";
|
|
import { PlayerList } from "~/components/draft/PlayerList";
|
|
import { DraftQueue } from "~/components/draft/DraftQueue";
|
|
import { CommissionerControls } from "~/components/draft/CommissionerControls";
|
|
import { useDraftSocket } from "~/hooks/useDraftSocket";
|
|
|
|
export async function loader(args: LoaderFunctionArgs) {
|
|
const { userId } = await getAuth(args);
|
|
if (!userId) {
|
|
throw redirect("/");
|
|
}
|
|
|
|
const { leagueId } = args.params;
|
|
if (!leagueId) {
|
|
throw new Response("League ID is required", { status: 400 });
|
|
}
|
|
|
|
// Get league and season
|
|
const league = await findLeagueById(leagueId);
|
|
if (!league) {
|
|
throw new Response("League not found", { status: 404 });
|
|
}
|
|
|
|
const season = await findCurrentSeason(leagueId);
|
|
if (!season) {
|
|
throw new Response("No active season found", { status: 404 });
|
|
}
|
|
|
|
// Get season with sports and participants
|
|
const seasonWithSports = await findSeasonWithSportsSeasons(season.id);
|
|
const participants = seasonWithSports?.seasonSports?.flatMap(
|
|
(ss: any) => {
|
|
const sportName = ss.sportsSeason?.sport?.name || "Unknown";
|
|
return (ss.sportsSeason?.participants || []).map((p: any) => ({
|
|
...p,
|
|
sport: sportName,
|
|
}));
|
|
}
|
|
) || [];
|
|
|
|
// Get teams and draft order
|
|
const teams = await findTeamsBySeasonId(season.id);
|
|
const draftSlots = await findDraftSlotsBySeasonId(season.id);
|
|
|
|
// Sort teams by draft order
|
|
const teamsWithOrder = teams.map((team) => {
|
|
const slot = draftSlots.find((s: { teamId: string }) => s.teamId === team.id);
|
|
return {
|
|
...team,
|
|
draftOrder: slot?.draftOrder || 0,
|
|
};
|
|
}).sort((a, b) => a.draftOrder - b.draftOrder);
|
|
|
|
// Check user permissions
|
|
const isUserCommissioner = await isCommissioner(leagueId, userId);
|
|
const userTeam = teams.find((team) => team.ownerId === userId);
|
|
|
|
// Get draft data
|
|
const draftPicks = await getDraftPicks(season.id);
|
|
let timers = await getSeasonTimers(season.id);
|
|
|
|
// If no timers exist, create default timers for display
|
|
if (timers.length === 0) {
|
|
timers = teams.map((team) => ({
|
|
id: team.id,
|
|
seasonId: season.id,
|
|
teamId: team.id,
|
|
timeRemaining: season.draftInitialTime,
|
|
createdAt: new Date(),
|
|
updatedAt: new Date(),
|
|
}));
|
|
}
|
|
|
|
// Get user's queue if they have a team
|
|
const queueItems = userTeam ? await getTeamQueue(userTeam.id) : [];
|
|
|
|
// Calculate current pick info
|
|
const totalPicks = season.draftRounds * teams.length;
|
|
const currentPickNumber = season.currentPickNumber || 1;
|
|
const isDraftComplete = currentPickNumber > totalPicks;
|
|
|
|
return data({
|
|
league,
|
|
season,
|
|
teams: teamsWithOrder,
|
|
draftSlots,
|
|
isCommissioner: isUserCommissioner,
|
|
userTeam,
|
|
draftPicks,
|
|
participants,
|
|
queueItems,
|
|
timers,
|
|
currentPickNumber,
|
|
totalPicks,
|
|
isDraftComplete,
|
|
userId,
|
|
});
|
|
}
|
|
|
|
export default function DraftRoom({ loaderData }: { loaderData: Awaited<ReturnType<typeof loader>>["data"] }) {
|
|
const {
|
|
league,
|
|
season,
|
|
teams,
|
|
draftPicks: initialDraftPicks,
|
|
participants,
|
|
queueItems: initialQueueItems,
|
|
timers: initialTimers,
|
|
isCommissioner,
|
|
userTeam,
|
|
currentPickNumber: initialPickNumber,
|
|
totalPicks,
|
|
isDraftComplete: initialIsDraftComplete,
|
|
draftSlots,
|
|
} = loaderData;
|
|
|
|
// Local state for real-time updates
|
|
const [draftPicks, setDraftPicks] = useState(initialDraftPicks);
|
|
const [queueItems, setQueueItems] = useState(initialQueueItems);
|
|
const [timers, setTimers] = useState(initialTimers);
|
|
const [currentPickNumber, setCurrentPickNumber] = useState(initialPickNumber);
|
|
const [isDraftComplete, setIsDraftComplete] = useState(initialIsDraftComplete);
|
|
const [isDraftStarted, setIsDraftStarted] = useState(!!season.draftStartedAt);
|
|
const [isDraftPaused, setIsDraftPaused] = useState(season.draftPaused || false);
|
|
|
|
// Socket connection
|
|
const { on, off } = useDraftSocket(season.id);
|
|
|
|
// Calculate current team
|
|
const draftOrder = draftSlots.map((slot: any) => ({
|
|
teamId: slot.teamId,
|
|
draftOrder: slot.draftOrder,
|
|
}));
|
|
const currentTeamId = getTeamForPick(currentPickNumber, draftOrder);
|
|
const currentTeam = teams.find((t: any) => t.id === currentTeamId);
|
|
const currentTeamName = currentTeam?.name || "Unknown";
|
|
|
|
// Socket event handlers
|
|
useEffect(() => {
|
|
// Listen for pick made
|
|
const handlePickMade = (data: any) => {
|
|
setDraftPicks((prev: any) => [...prev, data.pick]);
|
|
setCurrentPickNumber(data.nextPickNumber);
|
|
setIsDraftComplete(data.isDraftComplete);
|
|
};
|
|
|
|
// Listen for draft started
|
|
const handleDraftStarted = (data: any) => {
|
|
setIsDraftStarted(true);
|
|
setIsDraftPaused(false);
|
|
setTimers(data.timers);
|
|
};
|
|
|
|
// Listen for draft paused
|
|
const handleDraftPaused = (data: any) => {
|
|
setIsDraftPaused(data.isPaused);
|
|
};
|
|
|
|
// Listen for draft completed
|
|
const handleDraftCompleted = () => {
|
|
setIsDraftComplete(true);
|
|
};
|
|
|
|
// Listen for queue updates
|
|
const handleQueueUpdated = (data: any) => {
|
|
if (userTeam && data.teamId === userTeam.id) {
|
|
setQueueItems(data.queue);
|
|
}
|
|
};
|
|
|
|
on("pick-made", handlePickMade);
|
|
on("draft-started", handleDraftStarted);
|
|
on("draft-paused", handleDraftPaused);
|
|
on("draft-completed", handleDraftCompleted);
|
|
on("queue-updated", handleQueueUpdated);
|
|
|
|
return () => {
|
|
off("pick-made", handlePickMade);
|
|
off("draft-started", handleDraftStarted);
|
|
off("draft-paused", handleDraftPaused);
|
|
off("draft-completed", handleDraftCompleted);
|
|
off("queue-updated", handleQueueUpdated);
|
|
};
|
|
}, [on, off, userTeam]);
|
|
|
|
// Commissioner action handlers
|
|
const handleStartDraft = async () => {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("action", "start-draft");
|
|
formData.append("seasonId", season.id);
|
|
|
|
const response = await fetch("/api/draft-commissioner", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
console.error("Failed to start draft:", error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error starting draft:", error);
|
|
}
|
|
};
|
|
|
|
const handlePauseDraft = async () => {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("action", "pause-draft");
|
|
formData.append("seasonId", season.id);
|
|
formData.append("pause", "true");
|
|
|
|
const response = await fetch("/api/draft-commissioner", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
console.error("Failed to pause draft:", error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error pausing draft:", error);
|
|
}
|
|
};
|
|
|
|
const handleResumeDraft = async () => {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("action", "pause-draft");
|
|
formData.append("seasonId", season.id);
|
|
formData.append("pause", "false");
|
|
|
|
const response = await fetch("/api/draft-commissioner", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
console.error("Failed to resume draft:", error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error resuming draft:", error);
|
|
}
|
|
};
|
|
|
|
const handleForcePick = async () => {
|
|
if (!currentTeamId) return;
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("action", "force-pick");
|
|
formData.append("seasonId", season.id);
|
|
formData.append("teamId", currentTeamId);
|
|
|
|
const response = await fetch("/api/draft-commissioner", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
console.error("Failed to force pick:", error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error forcing pick:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b bg-card">
|
|
<div className="px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">{league.name} Draft</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
{season.year} Season • Pick {currentPickNumber} of {totalPicks}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{isCommissioner && (
|
|
<span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
|
|
Commissioner
|
|
</span>
|
|
)}
|
|
{userTeam && (
|
|
<span className="rounded-full bg-secondary px-3 py-1 text-xs font-medium">
|
|
{userTeam.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="px-6 py-6">
|
|
{isDraftComplete ? (
|
|
<div className="rounded-lg border bg-card p-8 text-center">
|
|
<h2 className="text-2xl font-bold">Draft Complete!</h2>
|
|
<p className="mt-2 text-muted-foreground">
|
|
All picks have been made. The season is ready to begin.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Draft Board - Full Width */}
|
|
<div className="rounded-lg border bg-card p-6">
|
|
<h2 className="mb-4 text-xl font-bold">Draft Board</h2>
|
|
<DraftGrid
|
|
teams={teams}
|
|
draftPicks={draftPicks}
|
|
participants={participants}
|
|
draftRounds={season.draftRounds}
|
|
currentPickNumber={currentPickNumber}
|
|
userTeamId={userTeam?.id}
|
|
timers={timers}
|
|
/>
|
|
</div>
|
|
|
|
{/* 2x2 Grid Below */}
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{/* Available Players */}
|
|
<div className="rounded-lg border bg-card p-6 flex flex-col" style={{ height: "600px" }}>
|
|
<h2 className="mb-4 text-xl font-bold">Available Players</h2>
|
|
<PlayerList
|
|
participants={participants}
|
|
draftPicks={draftPicks}
|
|
canDraft={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Your Queue */}
|
|
<div className="rounded-lg border bg-card p-6 flex flex-col" style={{ height: "600px" }}>
|
|
<h2 className="mb-4 text-xl font-bold">Your Queue</h2>
|
|
<div className="flex-1 overflow-y-auto">
|
|
<DraftQueue
|
|
queueItems={queueItems}
|
|
participants={participants}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Draft Timer */}
|
|
<div className="rounded-lg border bg-card p-6">
|
|
<h2 className="mb-4 text-xl font-bold">Draft Timer</h2>
|
|
<div className="flex items-center justify-center py-12 text-muted-foreground">
|
|
Timer will be implemented in Phase 8
|
|
</div>
|
|
</div>
|
|
|
|
{/* Commissioner Controls */}
|
|
{isCommissioner ? (
|
|
<div className="rounded-lg border bg-card p-6">
|
|
<h2 className="mb-4 text-xl font-bold">Commissioner Controls</h2>
|
|
<CommissionerControls
|
|
isDraftStarted={isDraftStarted}
|
|
isDraftPaused={isDraftPaused}
|
|
isDraftComplete={isDraftComplete}
|
|
currentTeamName={currentTeamName}
|
|
onStartDraft={handleStartDraft}
|
|
onPauseDraft={handlePauseDraft}
|
|
onResumeDraft={handleResumeDraft}
|
|
onForcePick={handleForcePick}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border bg-card p-6">
|
|
<h2 className="mb-4 text-xl font-bold">Draft Info</h2>
|
|
<div className="space-y-2 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground">Current Pick:</span>
|
|
<span className="ml-2 font-medium">{currentPickNumber} of {totalPicks}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Draft Rounds:</span>
|
|
<span className="ml-2 font-medium">{season.draftRounds}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Current Team:</span>
|
|
<span className="ml-2 font-medium">{currentTeamName}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|