feat: add draft API routes and implement draft room pick controls
This commit is contained in:
Chris Parsons
parent
1ad14bfef1
commit
9d41508fd0
11 changed files with 1901 additions and 396 deletions
250
app/components/ui/context-menu.tsx
Normal file
250
app/components/ui/context-menu.tsx
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
import * as React from "react"
|
||||
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "app/lib/utils"
|
||||
|
||||
function ContextMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
|
||||
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
|
||||
}
|
||||
|
||||
function ContextMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
|
||||
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function ContextMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioGroup
|
||||
data-slot="context-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
data-slot="context-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Item
|
||||
data-slot="context-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
data-slot="context-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
data-slot="context-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Label
|
||||
data-slot="context-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Separator
|
||||
data-slot="context-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="context-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
}
|
||||
|
|
@ -16,6 +16,10 @@ export default [
|
|||
route("api/queue/remove", "routes/api/queue.remove.ts"),
|
||||
route("api/queue/clear", "routes/api/queue.clear.ts"),
|
||||
route("api/queue/reorder", "routes/api/queue.reorder.ts"),
|
||||
route("api/draft/make-pick", "routes/api/draft.make-pick.ts"),
|
||||
route("api/draft/start", "routes/api/draft.start.ts"),
|
||||
route("api/draft/force-autopick", "routes/api/draft.force-autopick.ts"),
|
||||
route("api/draft/force-manual-pick", "routes/api/draft.force-manual-pick.ts"),
|
||||
route("user-profile", "routes/user-profile.tsx"),
|
||||
route("how-to-play", "routes/how-to-play.tsx"),
|
||||
route("test-socket", "routes/test-socket.tsx"),
|
||||
|
|
|
|||
217
app/routes/api/draft.force-autopick.ts
Normal file
217
app/routes/api/draft.force-autopick.ts
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
import { getAuth } from "@clerk/react-router/server";
|
||||
import { database } from "~/database/context";
|
||||
import * as schema from "~/database/schema";
|
||||
import { eq, and, notInArray, desc, asc, inArray } from "drizzle-orm";
|
||||
|
||||
export async function action(args: any) {
|
||||
const { request } = args;
|
||||
const auth = await getAuth(args);
|
||||
const userId = (auth as any).userId as string | null;
|
||||
|
||||
if (!userId) {
|
||||
return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const seasonId = formData.get("seasonId") as string;
|
||||
const teamId = formData.get("teamId") as string;
|
||||
const pickNumber = parseInt(formData.get("pickNumber") as string);
|
||||
|
||||
if (!seasonId || !teamId || !pickNumber) {
|
||||
return Response.json({ error: "Missing required fields" }, { status: 400 });
|
||||
}
|
||||
|
||||
const db = database();
|
||||
|
||||
// Get season details
|
||||
const season = await db.query.seasons.findFirst({
|
||||
where: eq(schema.seasons.id, seasonId),
|
||||
with: {
|
||||
league: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!season) {
|
||||
return Response.json({ error: "Season not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Check if user is commissioner
|
||||
if (season.league.createdBy !== userId) {
|
||||
return Response.json({ error: "Only commissioner can force autopick" }, { status: 403 });
|
||||
}
|
||||
|
||||
// Get team's queue
|
||||
const teamQueue = await db.query.draftQueue.findMany({
|
||||
where: eq(schema.draftQueue.teamId, teamId),
|
||||
orderBy: schema.draftQueue.queuePosition,
|
||||
with: {
|
||||
participant: {
|
||||
with: {
|
||||
sportsSeason: {
|
||||
with: {
|
||||
sport: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Get already drafted participant IDs
|
||||
const draftPicks = await db.query.draftPicks.findMany({
|
||||
where: eq(schema.draftPicks.seasonId, seasonId),
|
||||
});
|
||||
const draftedParticipantIds = draftPicks.map((p) => p.participantId);
|
||||
|
||||
let participantToPick = null;
|
||||
|
||||
// 1. Try to pick from queue (first non-drafted participant)
|
||||
for (const queueItem of teamQueue) {
|
||||
if (!draftedParticipantIds.includes(queueItem.participantId)) {
|
||||
participantToPick = queueItem.participant;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. If no valid queue item, pick highest EV available participant
|
||||
if (!participantToPick) {
|
||||
// Get sports seasons for this season
|
||||
const seasonSports = await db.query.seasonSports.findMany({
|
||||
where: eq(schema.seasonSports.seasonId, seasonId),
|
||||
});
|
||||
|
||||
const sportsSeasonIds = seasonSports.map((ss) => ss.sportsSeasonId);
|
||||
|
||||
if (sportsSeasonIds.length > 0) {
|
||||
const availableParticipants = await db
|
||||
.select({
|
||||
id: schema.participants.id,
|
||||
name: schema.participants.name,
|
||||
expectedValue: schema.participants.expectedValue,
|
||||
sportsSeasonId: schema.participants.sportsSeasonId,
|
||||
})
|
||||
.from(schema.participants)
|
||||
.where(
|
||||
and(
|
||||
sportsSeasonIds.length === 1
|
||||
? eq(schema.participants.sportsSeasonId, sportsSeasonIds[0])
|
||||
: inArray(schema.participants.sportsSeasonId, sportsSeasonIds),
|
||||
draftedParticipantIds.length > 0
|
||||
? notInArray(schema.participants.id, draftedParticipantIds)
|
||||
: undefined
|
||||
)
|
||||
)
|
||||
.orderBy(desc(schema.participants.expectedValue), asc(schema.participants.name))
|
||||
.limit(1);
|
||||
|
||||
if (availableParticipants.length > 0) {
|
||||
// Get full participant with sport info
|
||||
participantToPick = await db.query.participants.findFirst({
|
||||
where: eq(schema.participants.id, availableParticipants[0].id),
|
||||
with: {
|
||||
sportsSeason: {
|
||||
with: {
|
||||
sport: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!participantToPick) {
|
||||
return Response.json({ error: "No available participants to pick" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Calculate round and pickInRound
|
||||
const draftSlots = await db.query.draftSlots.findMany({
|
||||
where: eq(schema.draftSlots.seasonId, seasonId),
|
||||
orderBy: schema.draftSlots.draftOrder,
|
||||
with: {
|
||||
team: true,
|
||||
},
|
||||
});
|
||||
|
||||
const totalTeams = draftSlots.length;
|
||||
const currentRound = Math.ceil(pickNumber / totalTeams);
|
||||
const isEvenRound = currentRound % 2 === 0;
|
||||
let pickInRound = ((pickNumber - 1) % totalTeams) + 1;
|
||||
if (isEvenRound) {
|
||||
pickInRound = totalTeams - pickInRound + 1;
|
||||
}
|
||||
|
||||
// Create the draft pick
|
||||
const [draftPick] = await db
|
||||
.insert(schema.draftPicks)
|
||||
.values({
|
||||
seasonId,
|
||||
teamId,
|
||||
participantId: participantToPick.id,
|
||||
pickNumber,
|
||||
round: currentRound,
|
||||
pickInRound,
|
||||
pickedByUserId: userId,
|
||||
pickedByType: "auto",
|
||||
})
|
||||
.returning();
|
||||
|
||||
// Update season's current pick number
|
||||
const nextPickNumber = pickNumber + 1;
|
||||
const totalPicks = totalTeams * season.draftRounds;
|
||||
const isDraftComplete = nextPickNumber > totalPicks;
|
||||
|
||||
await db
|
||||
.update(schema.seasons)
|
||||
.set({
|
||||
currentPickNumber: isDraftComplete ? pickNumber : nextPickNumber,
|
||||
status: isDraftComplete ? "active" : season.status,
|
||||
})
|
||||
.where(eq(schema.seasons.id, seasonId));
|
||||
|
||||
// Remove from queue if it was picked from queue
|
||||
if (teamQueue.some((item) => item.participantId === participantToPick.id)) {
|
||||
await db
|
||||
.delete(schema.draftQueue)
|
||||
.where(
|
||||
and(
|
||||
eq(schema.draftQueue.teamId, teamId),
|
||||
eq(schema.draftQueue.participantId, participantToPick.id)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Emit socket event
|
||||
try {
|
||||
const io = (global as any).__socketIO;
|
||||
const team = draftSlots.find((slot) => slot.team.id === teamId)?.team;
|
||||
|
||||
io.to(`draft-${seasonId}`).emit("pick-made", {
|
||||
pick: {
|
||||
...draftPick,
|
||||
team,
|
||||
participant: {
|
||||
...participantToPick,
|
||||
sport: participantToPick.sportsSeason.sport,
|
||||
},
|
||||
sport: participantToPick.sportsSeason.sport,
|
||||
},
|
||||
nextPickNumber: isDraftComplete ? pickNumber : nextPickNumber,
|
||||
isDraftComplete,
|
||||
});
|
||||
|
||||
if (isDraftComplete) {
|
||||
io.to(`draft-${seasonId}`).emit("draft-completed");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Socket.IO error:", error);
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
pick: draftPick,
|
||||
participant: participantToPick,
|
||||
nextPickNumber: isDraftComplete ? pickNumber : nextPickNumber,
|
||||
isDraftComplete,
|
||||
});
|
||||
}
|
||||
149
app/routes/api/draft.force-manual-pick.ts
Normal file
149
app/routes/api/draft.force-manual-pick.ts
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
import { getAuth } from "@clerk/react-router/server";
|
||||
import { database } from "~/database/context";
|
||||
import * as schema from "~/database/schema";
|
||||
import { eq, and } from "drizzle-orm";
|
||||
|
||||
export async function action(args: any) {
|
||||
const { request } = args;
|
||||
const auth = await getAuth(args);
|
||||
const userId = (auth as any).userId as string | null;
|
||||
|
||||
if (!userId) {
|
||||
return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const seasonId = formData.get("seasonId") as string;
|
||||
const teamId = formData.get("teamId") as string;
|
||||
const participantId = formData.get("participantId") as string;
|
||||
const pickNumber = parseInt(formData.get("pickNumber") as string);
|
||||
|
||||
if (!seasonId || !teamId || !participantId || !pickNumber) {
|
||||
return Response.json({ error: "Missing required fields" }, { status: 400 });
|
||||
}
|
||||
|
||||
const db = database();
|
||||
|
||||
// Get season details
|
||||
const season = await db.query.seasons.findFirst({
|
||||
where: eq(schema.seasons.id, seasonId),
|
||||
with: {
|
||||
league: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!season) {
|
||||
return Response.json({ error: "Season not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Check if user is commissioner
|
||||
if (season.league.createdBy !== userId) {
|
||||
return Response.json({ error: "Only commissioner can force manual pick" }, { status: 403 });
|
||||
}
|
||||
|
||||
// Check if participant is already drafted
|
||||
const existingPick = await db.query.draftPicks.findFirst({
|
||||
where: and(
|
||||
eq(schema.draftPicks.seasonId, seasonId),
|
||||
eq(schema.draftPicks.participantId, participantId)
|
||||
),
|
||||
});
|
||||
|
||||
if (existingPick) {
|
||||
return Response.json({ error: "Participant already drafted" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Get participant details
|
||||
const participant = await db.query.participants.findFirst({
|
||||
where: eq(schema.participants.id, participantId),
|
||||
with: {
|
||||
sportsSeason: {
|
||||
with: {
|
||||
sport: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!participant) {
|
||||
return Response.json({ error: "Participant not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Calculate round and pickInRound
|
||||
const draftSlots = await db.query.draftSlots.findMany({
|
||||
where: eq(schema.draftSlots.seasonId, seasonId),
|
||||
orderBy: schema.draftSlots.draftOrder,
|
||||
with: {
|
||||
team: true,
|
||||
},
|
||||
});
|
||||
|
||||
const totalTeams = draftSlots.length;
|
||||
const currentRound = Math.ceil(pickNumber / totalTeams);
|
||||
const isEvenRound = currentRound % 2 === 0;
|
||||
let pickInRound = ((pickNumber - 1) % totalTeams) + 1;
|
||||
if (isEvenRound) {
|
||||
pickInRound = totalTeams - pickInRound + 1;
|
||||
}
|
||||
|
||||
// Create the draft pick
|
||||
const [draftPick] = await db
|
||||
.insert(schema.draftPicks)
|
||||
.values({
|
||||
seasonId,
|
||||
teamId,
|
||||
participantId,
|
||||
pickNumber,
|
||||
round: currentRound,
|
||||
pickInRound,
|
||||
pickedByUserId: userId,
|
||||
pickedByType: "commissioner",
|
||||
})
|
||||
.returning();
|
||||
|
||||
// Update season's current pick number
|
||||
const nextPickNumber = pickNumber + 1;
|
||||
const totalPicks = totalTeams * season.draftRounds;
|
||||
const isDraftComplete = nextPickNumber > totalPicks;
|
||||
|
||||
await db
|
||||
.update(schema.seasons)
|
||||
.set({
|
||||
currentPickNumber: isDraftComplete ? pickNumber : nextPickNumber,
|
||||
status: isDraftComplete ? "active" : season.status,
|
||||
})
|
||||
.where(eq(schema.seasons.id, seasonId));
|
||||
|
||||
// Emit socket event
|
||||
try {
|
||||
const io = (global as any).__socketIO;
|
||||
const team = draftSlots.find((slot) => slot.team.id === teamId)?.team;
|
||||
|
||||
io.to(`draft-${seasonId}`).emit("pick-made", {
|
||||
pick: {
|
||||
...draftPick,
|
||||
team,
|
||||
participant: {
|
||||
...participant,
|
||||
sport: participant.sportsSeason.sport,
|
||||
},
|
||||
sport: participant.sportsSeason.sport,
|
||||
},
|
||||
nextPickNumber: isDraftComplete ? pickNumber : nextPickNumber,
|
||||
isDraftComplete,
|
||||
});
|
||||
|
||||
if (isDraftComplete) {
|
||||
io.to(`draft-${seasonId}`).emit("draft-completed");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Socket.IO error:", error);
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
pick: draftPick,
|
||||
nextPickNumber: isDraftComplete ? pickNumber : nextPickNumber,
|
||||
isDraftComplete,
|
||||
});
|
||||
}
|
||||
158
app/routes/api/draft.make-pick.ts
Normal file
158
app/routes/api/draft.make-pick.ts
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import { getAuth } from "@clerk/react-router/server";
|
||||
import { database } from "~/database/context";
|
||||
import * as schema from "~/database/schema";
|
||||
import { eq, and } from "drizzle-orm";
|
||||
|
||||
export async function action(args: any) {
|
||||
const { request } = args;
|
||||
const auth = await getAuth(args);
|
||||
const userId = (auth as any).userId as string | null;
|
||||
|
||||
if (!userId) {
|
||||
return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const seasonId = formData.get("seasonId") as string;
|
||||
const participantId = formData.get("participantId") as string;
|
||||
|
||||
if (!seasonId || !participantId) {
|
||||
return Response.json({ error: "Missing required fields" }, { status: 400 });
|
||||
}
|
||||
|
||||
const db = database();
|
||||
|
||||
// Get season details
|
||||
const season = await db.query.seasons.findFirst({
|
||||
where: eq(schema.seasons.id, seasonId),
|
||||
with: {
|
||||
league: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!season) {
|
||||
return Response.json({ error: "Season not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Get current draft slot (who should be picking now)
|
||||
const currentPickNumber = season.currentPickNumber || 1;
|
||||
const draftSlots = await db.query.draftSlots.findMany({
|
||||
where: eq(schema.draftSlots.seasonId, seasonId),
|
||||
orderBy: schema.draftSlots.draftOrder,
|
||||
with: {
|
||||
team: true,
|
||||
},
|
||||
});
|
||||
|
||||
const totalTeams = draftSlots.length;
|
||||
const currentRound = Math.ceil(currentPickNumber / totalTeams);
|
||||
const isSnakeDraft = true; // Assuming snake draft
|
||||
const isEvenRound = currentRound % 2 === 0;
|
||||
|
||||
// Calculate which team should pick
|
||||
let pickInRound = ((currentPickNumber - 1) % totalTeams) + 1;
|
||||
if (isSnakeDraft && isEvenRound) {
|
||||
pickInRound = totalTeams - pickInRound + 1;
|
||||
}
|
||||
|
||||
const currentDraftSlot = draftSlots.find((slot) => slot.draftOrder === pickInRound);
|
||||
|
||||
if (!currentDraftSlot) {
|
||||
return Response.json({ error: "Invalid draft state" }, { status: 500 });
|
||||
}
|
||||
|
||||
// Check permissions: must be team owner or commissioner
|
||||
const isTeamOwner = currentDraftSlot.team.ownerId === userId;
|
||||
const isCommissioner = season.league.createdBy === userId;
|
||||
|
||||
if (!isTeamOwner && !isCommissioner) {
|
||||
return Response.json({ error: "Not your turn to pick" }, { status: 403 });
|
||||
}
|
||||
|
||||
// Check if participant is already drafted
|
||||
const existingPick = await db.query.draftPicks.findFirst({
|
||||
where: and(
|
||||
eq(schema.draftPicks.seasonId, seasonId),
|
||||
eq(schema.draftPicks.participantId, participantId)
|
||||
),
|
||||
});
|
||||
|
||||
if (existingPick) {
|
||||
return Response.json({ error: "Participant already drafted" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Get participant details
|
||||
const participant = await db.query.participants.findFirst({
|
||||
where: eq(schema.participants.id, participantId),
|
||||
with: {
|
||||
sportsSeason: {
|
||||
with: {
|
||||
sport: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!participant) {
|
||||
return Response.json({ error: "Participant not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Create the draft pick
|
||||
const [draftPick] = await db
|
||||
.insert(schema.draftPicks)
|
||||
.values({
|
||||
seasonId,
|
||||
teamId: currentDraftSlot.teamId,
|
||||
participantId,
|
||||
pickNumber: currentPickNumber,
|
||||
round: currentRound,
|
||||
pickInRound,
|
||||
pickedByUserId: userId,
|
||||
pickedByType: isTeamOwner ? "owner" : "commissioner",
|
||||
})
|
||||
.returning();
|
||||
|
||||
// Update season's current pick number
|
||||
const nextPickNumber = currentPickNumber + 1;
|
||||
const totalPicks = totalTeams * season.draftRounds;
|
||||
const isDraftComplete = nextPickNumber > totalPicks;
|
||||
|
||||
await db
|
||||
.update(schema.seasons)
|
||||
.set({
|
||||
currentPickNumber: isDraftComplete ? currentPickNumber : nextPickNumber,
|
||||
status: isDraftComplete ? "active" : season.status,
|
||||
})
|
||||
.where(eq(schema.seasons.id, seasonId));
|
||||
|
||||
// Emit socket event
|
||||
try {
|
||||
const io = (global as any).__socketIO;
|
||||
io.to(`draft-${seasonId}`).emit("pick-made", {
|
||||
pick: {
|
||||
...draftPick,
|
||||
team: currentDraftSlot.team,
|
||||
participant: {
|
||||
...participant,
|
||||
sport: participant.sportsSeason.sport,
|
||||
},
|
||||
sport: participant.sportsSeason.sport,
|
||||
},
|
||||
nextPickNumber: isDraftComplete ? currentPickNumber : nextPickNumber,
|
||||
isDraftComplete,
|
||||
});
|
||||
|
||||
if (isDraftComplete) {
|
||||
io.to(`draft-${seasonId}`).emit("draft-completed");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Socket.IO error:", error);
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
pick: draftPick,
|
||||
nextPickNumber: isDraftComplete ? currentPickNumber : nextPickNumber,
|
||||
isDraftComplete,
|
||||
});
|
||||
}
|
||||
90
app/routes/api/draft.start.ts
Normal file
90
app/routes/api/draft.start.ts
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { getAuth } from "@clerk/react-router/server";
|
||||
import { database } from "~/database/context";
|
||||
import * as schema from "~/database/schema";
|
||||
import { eq } from "drizzle-orm";
|
||||
|
||||
export async function action(args: any) {
|
||||
const { request } = args;
|
||||
const auth = await getAuth(args);
|
||||
const userId = (auth as any).userId as string | null;
|
||||
|
||||
if (!userId) {
|
||||
return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const seasonId = formData.get("seasonId") as string;
|
||||
|
||||
if (!seasonId) {
|
||||
return Response.json({ error: "Missing seasonId" }, { status: 400 });
|
||||
}
|
||||
|
||||
const db = database();
|
||||
|
||||
// Get season details
|
||||
const season = await db.query.seasons.findFirst({
|
||||
where: eq(schema.seasons.id, seasonId),
|
||||
with: {
|
||||
league: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!season) {
|
||||
return Response.json({ error: "Season not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
// Check if user is commissioner
|
||||
if (season.league.createdBy !== userId) {
|
||||
return Response.json({ error: "Only commissioner can start draft" }, { status: 403 });
|
||||
}
|
||||
|
||||
// Check if draft already started
|
||||
if (season.status === "draft" || season.status === "active" || season.status === "completed") {
|
||||
return Response.json({ error: "Draft already started or completed" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Update season status to draft
|
||||
await db
|
||||
.update(schema.seasons)
|
||||
.set({
|
||||
status: "draft",
|
||||
currentPickNumber: 1,
|
||||
})
|
||||
.where(eq(schema.seasons.id, seasonId));
|
||||
|
||||
// Initialize timers for all teams
|
||||
const draftSlots = await db.query.draftSlots.findMany({
|
||||
where: eq(schema.draftSlots.seasonId, seasonId),
|
||||
});
|
||||
|
||||
const initialTime = season.draftInitialTime || 120; // Default 2 minutes
|
||||
|
||||
// Delete existing timers for this season
|
||||
await db
|
||||
.delete(schema.draftTimers)
|
||||
.where(eq(schema.draftTimers.seasonId, seasonId));
|
||||
|
||||
// Insert new timers for all teams
|
||||
for (const slot of draftSlots) {
|
||||
await db
|
||||
.insert(schema.draftTimers)
|
||||
.values({
|
||||
seasonId,
|
||||
teamId: slot.teamId,
|
||||
timeRemaining: initialTime,
|
||||
});
|
||||
}
|
||||
|
||||
// Emit socket event
|
||||
try {
|
||||
const io = (global as any).__socketIO;
|
||||
io.to(`draft-${seasonId}`).emit("draft-started", {
|
||||
seasonId,
|
||||
currentPickNumber: 1,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Socket.IO error:", error);
|
||||
}
|
||||
|
||||
return Response.json({ success: true });
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -342,3 +342,18 @@ export const draftSlotsRelations = relations(draftSlots, ({ one }) => ({
|
|||
references: [teams.id],
|
||||
}),
|
||||
}));
|
||||
|
||||
export const draftQueueRelations = relations(draftQueue, ({ one }) => ({
|
||||
season: one(seasons, {
|
||||
fields: [draftQueue.seasonId],
|
||||
references: [seasons.id],
|
||||
}),
|
||||
team: one(teams, {
|
||||
fields: [draftQueue.teamId],
|
||||
references: [teams.id],
|
||||
}),
|
||||
participant: one(participants, {
|
||||
fields: [draftQueue.participantId],
|
||||
references: [participants.id],
|
||||
}),
|
||||
}));
|
||||
|
|
|
|||
69
package-lock.json
generated
69
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"@clerk/react-router": "^2.1.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||
|
|
@ -1819,6 +1820,34 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-context-menu": {
|
||||
"version": "2.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
|
||||
"integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-menu": "2.1.16",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dialog": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
|
||||
|
|
@ -1978,6 +2007,46 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu": {
|
||||
"version": "2.1.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
|
||||
"integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-navigation-menu": {
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@clerk/react-router": "^2.1.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,43 @@
|
|||
# Draft Room Implementation Plan
|
||||
|
||||
## ✅ IMPLEMENTATION STATUS: 90% COMPLETE
|
||||
|
||||
**Last Updated:** October 18, 2025
|
||||
|
||||
### Quick Summary
|
||||
- ✅ **Phases 1-7**: COMPLETE (Database, Settings, Socket.IO, Draft Room, Grid, Player List, Queue)
|
||||
- 🟡 **Phase 8**: PARTIAL (Timer display done, server-side countdown NOT implemented)
|
||||
- ✅ **Phase 9**: COMPLETE (Draft actions, commissioner controls, force pick)
|
||||
- 🟡 **Phase 10**: PARTIAL (Pick updates work, timer sync not implemented)
|
||||
- ❌ **Phase 11**: NOT STARTED (Mobile polish)
|
||||
|
||||
### What Works Now
|
||||
- Full draft room with snake draft grid
|
||||
- Real-time pick updates via Socket.IO
|
||||
- Team queues with add/remove/clear
|
||||
- Commissioner force pick (auto + manual)
|
||||
- Search, filter, and hide drafted toggle
|
||||
- Start draft functionality
|
||||
- Timer display (client-side only)
|
||||
|
||||
### What's Missing
|
||||
- Server-side timer countdown
|
||||
- Auto-pick when timer expires
|
||||
- Pause/Resume draft
|
||||
- Timer persistence across server restarts
|
||||
- Mobile responsive tweaks
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Build a real-time draft room using Socket.IO for live updates, with snake draft grid, player selection, per-team queue, and chess clock timers.
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Database Schema & Models
|
||||
## Phase 1: Database Schema & Models ✅ COMPLETE
|
||||
|
||||
### 1.1 New Tables
|
||||
### 1.1 New Tables ✅ COMPLETE
|
||||
|
||||
**`draft_picks`**
|
||||
|
||||
|
|
@ -48,7 +77,7 @@ Build a real-time draft room using Socket.IO for live updates, with snake draft
|
|||
- updated_at (timestamp)
|
||||
```
|
||||
|
||||
### 1.2 Schema Updates
|
||||
### 1.2 Schema Updates ✅ COMPLETE
|
||||
|
||||
**Update `seasons` table:**
|
||||
|
||||
|
|
@ -60,25 +89,23 @@ Build a real-time draft room using Socket.IO for live updates, with snake draft
|
|||
- draft_paused (boolean, default false)
|
||||
```
|
||||
|
||||
### 1.3 Model Functions
|
||||
### 1.3 Model Functions 🟡 PARTIAL
|
||||
|
||||
- `createDraftPick()`
|
||||
- `getDraftPicks(seasonId)`
|
||||
- `getCurrentPick(seasonId)`
|
||||
- `addToQueue(teamId, participantId)`
|
||||
- `removeFromQueue(queueId)`
|
||||
- `reorderQueue(teamId, participantIds[])`
|
||||
- `getTeamQueue(teamId)`
|
||||
- `updateTeamTimer(teamId, timeRemaining)`
|
||||
- `getTeamTimers(seasonId)`
|
||||
- `initializeDraftTimers(seasonId)` - set initial time for all teams
|
||||
- `autoPickForTeam(teamId)` - pick from queue or top EV
|
||||
✅ **Implemented:**
|
||||
- `getTeamQueue(teamId)` - in `app/models/draft-queue.ts`
|
||||
- `addToQueue()`, `removeFromQueue()`, `clearTeamQueue()`, `reorderQueueWithSeason()` - in `app/models/draft-queue.ts`
|
||||
- Draft pick creation - in API routes
|
||||
|
||||
❌ **Not Implemented:**
|
||||
- `updateTeamTimer(teamId, timeRemaining)` - not needed yet (no server-side countdown)
|
||||
- `getTeamTimers(seasonId)` - not needed yet
|
||||
- Standalone model functions (using inline queries in API routes instead)
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: League Settings Updates
|
||||
## Phase 2: League Settings Updates ✅ COMPLETE
|
||||
|
||||
### 2.1 Add Timer Configuration to Settings Page
|
||||
### 2.1 Add Timer Configuration to Settings Page ✅ COMPLETE
|
||||
|
||||
- Add fields to "Draft Rounds" card:
|
||||
- Initial Time (seconds) - default 120
|
||||
|
|
@ -88,9 +115,9 @@ Build a real-time draft room using Socket.IO for live updates, with snake draft
|
|||
|
||||
---
|
||||
|
||||
## Phase 3: Socket.IO Setup
|
||||
## Phase 3: Socket.IO Setup ✅ COMPLETE
|
||||
|
||||
### Overview
|
||||
### Overview ✅ COMPLETE
|
||||
|
||||
Socket.IO requires access to the HTTP server instance (not just the Express app). The key pattern is:
|
||||
```javascript
|
||||
|
|
@ -428,9 +455,9 @@ import { getSocketIO } from "~/server/socket.js";
|
|||
|
||||
---
|
||||
|
||||
## Phase 4: Draft Room Route & Layout
|
||||
## Phase 4: Draft Room Route & Layout ✅ COMPLETE
|
||||
|
||||
### 4.1 Route Setup
|
||||
### 4.1 Route Setup ✅ COMPLETE
|
||||
|
||||
- Create `/app/routes/leagues/$leagueId.draft.tsx`
|
||||
- Loader:
|
||||
|
|
@ -480,9 +507,9 @@ import { getSocketIO } from "~/server/socket.js";
|
|||
|
||||
---
|
||||
|
||||
## Phase 5: Draft Grid Component
|
||||
## Phase 5: Draft Grid Component ✅ COMPLETE
|
||||
|
||||
### 5.1 Calculate Snake Order
|
||||
### 5.1 Calculate Snake Order ✅ COMPLETE
|
||||
|
||||
- Use existing draft slots for team order
|
||||
- Generate pick order:
|
||||
|
|
@ -516,9 +543,9 @@ import { getSocketIO } from "~/server/socket.js";
|
|||
|
||||
---
|
||||
|
||||
## Phase 6: Player List Component
|
||||
## Phase 6: Player List Component ✅ COMPLETE
|
||||
|
||||
### 6.1 Player List Features
|
||||
### 6.1 Player List Features ✅ COMPLETE
|
||||
|
||||
- Display all participants from season sports
|
||||
- Show: "Participant Name - Sport"
|
||||
|
|
@ -541,28 +568,34 @@ import { getSocketIO } from "~/server/socket.js";
|
|||
|
||||
---
|
||||
|
||||
## Phase 7: Queue Component
|
||||
## Phase 7: Queue Component ✅ COMPLETE
|
||||
|
||||
### 7.1 Queue Features
|
||||
### 7.1 Queue Features 🟡 MOSTLY COMPLETE
|
||||
|
||||
✅ **Implemented:**
|
||||
- Show only current user's team queue
|
||||
- Display in order (1, 2, 3, ...)
|
||||
- Drag & drop to reorder
|
||||
- Remove button for each item
|
||||
- "Clear Queue" button
|
||||
- Real-time sync via Socket.IO
|
||||
- Queue icon buttons next to Pick button
|
||||
|
||||
### 7.2 Queue Actions
|
||||
❌ **Not Implemented:**
|
||||
- Drag & drop to reorder (API route exists, UI not implemented)
|
||||
- Real-time Socket.IO sync (using HTTP requests + page state instead)
|
||||
|
||||
- Add player → emit `add-to-queue` → update DB → emit `queue-updated` to team
|
||||
- Remove → emit `remove-from-queue` → update DB → emit `queue-updated`
|
||||
- Reorder → emit `reorder-queue` → update DB → emit `queue-updated`
|
||||
### 7.2 Queue Actions ✅ COMPLETE
|
||||
|
||||
✅ **Implemented via API routes:**
|
||||
- `/api/queue/add` - Add player to queue
|
||||
- `/api/queue/remove` - Remove from queue
|
||||
- `/api/queue/clear` - Clear entire queue
|
||||
- `/api/queue/reorder` - Reorder queue (API ready, UI not implemented)
|
||||
|
||||
---
|
||||
|
||||
## Phase 8: Timer System
|
||||
## Phase 8: Timer System 🟡 PARTIAL (50% Complete)
|
||||
|
||||
### 8.1 Timer Display
|
||||
### 8.1 Timer Display ✅ COMPLETE
|
||||
|
||||
- Show under each team name in grid
|
||||
- Format:
|
||||
|
|
@ -574,37 +607,33 @@ import { getSocketIO } from "~/server/socket.js";
|
|||
- Red: < 30s
|
||||
- Flashing red: < 10s
|
||||
|
||||
### 8.2 Timer Logic (Server-Side)
|
||||
### 8.2 Timer Logic (Server-Side) ❌ NOT IMPLEMENTED
|
||||
|
||||
- When draft starts: initialize all timers with `draft_initial_time`
|
||||
- During a team's turn:
|
||||
- Their timer counts down every second
|
||||
- Other teams' timers remain paused
|
||||
- When pick is made:
|
||||
- Stop countdown for current team
|
||||
- Add `draft_increment_time` to current team's timer
|
||||
- Move to next pick
|
||||
- Start next team's timer countdown
|
||||
- Emit `timer-update` every second to all clients
|
||||
- When timer reaches 0: trigger `autoPickForTeam()`
|
||||
**What's Missing:**
|
||||
- Server-side countdown interval
|
||||
- Emit `timer-update` every second
|
||||
- Auto-pick when timer reaches 0
|
||||
- Timer increment after pick
|
||||
- Timer persistence
|
||||
|
||||
### 8.3 Auto-Pick Function
|
||||
**Note:** Timer display shows `--:--` because no server-side countdown is running. This is the main missing piece for a fully functional draft.
|
||||
|
||||
```typescript
|
||||
async function autoPickForTeam(teamId: string, seasonId: string) {
|
||||
// 1. Check queue - pick first item
|
||||
// 2. If queue empty, pick highest EV participant not drafted
|
||||
// 3. Create draft pick with picked_by_type='auto'
|
||||
// 4. Emit pick-made event
|
||||
// 5. Move to next pick
|
||||
}
|
||||
```
|
||||
### 8.3 Auto-Pick Function 🟡 PARTIAL
|
||||
|
||||
✅ **Implemented:**
|
||||
- `/api/draft/force-autopick` - Commissioner can force auto-pick
|
||||
- Checks queue first, then picks highest EV
|
||||
- Creates pick with `picked_by_type='auto'`
|
||||
|
||||
❌ **Not Implemented:**
|
||||
- Automatic trigger when timer reaches 0
|
||||
- Server-side timer countdown to trigger it
|
||||
|
||||
---
|
||||
|
||||
## Phase 9: Draft Actions & Permissions
|
||||
## Phase 9: Draft Actions & Permissions ✅ COMPLETE
|
||||
|
||||
### 9.1 Making a Pick
|
||||
### 9.1 Making a Pick ✅ COMPLETE
|
||||
|
||||
- Only current team owner or commissioner can pick
|
||||
- Click participant in player list (if current turn)
|
||||
|
|
@ -614,33 +643,44 @@ async function autoPickForTeam(teamId: string, seasonId: string) {
|
|||
- Update current pick
|
||||
- Update timers
|
||||
|
||||
### 9.2 Commissioner Controls
|
||||
### 9.2 Commissioner Controls 🟡 MOSTLY COMPLETE
|
||||
|
||||
- Start Draft button (if not started)
|
||||
✅ **Implemented:**
|
||||
- Start Draft button (shows when status is "pre_draft")
|
||||
- Force Auto Pick (right-click context menu on current pick)
|
||||
- Force Manual Pick (right-click context menu, opens participant dialog)
|
||||
- `/api/draft/start` - Starts draft, initializes timers
|
||||
- `/api/draft/make-pick` - Regular pick by team owner
|
||||
- `/api/draft/force-autopick` - Commissioner force auto-pick
|
||||
- `/api/draft/force-manual-pick` - Commissioner manual pick for any team
|
||||
|
||||
❌ **Not Implemented:**
|
||||
- Pause/Resume button
|
||||
- Force Pick button (for current team)
|
||||
- Show in header, only visible to commissioners
|
||||
- Pause/Resume API routes
|
||||
|
||||
### 9.3 Draft Start Logic
|
||||
### 9.3 Draft Start Logic ✅ COMPLETE
|
||||
|
||||
- Can be started manually by commissioner
|
||||
- Or auto-start when `draftDateTime` is reached (background job?)
|
||||
- Change season status to "drafting"
|
||||
- Initialize timers
|
||||
- Emit `draft-started`
|
||||
✅ **Implemented:**
|
||||
- Manual start by commissioner via "Start Draft" button
|
||||
- Changes season status to "draft"
|
||||
- Initializes timers for all teams
|
||||
- Emits `draft-started` socket event
|
||||
|
||||
### 9.4 Draft Completion
|
||||
❌ **Not Implemented:**
|
||||
- Auto-start when `draftDateTime` is reached (would need background job/cron)
|
||||
|
||||
- When all picks made (picks = teams × rounds):
|
||||
- Change season status to "active"
|
||||
- Emit `draft-completed`
|
||||
- Stop timers
|
||||
### 9.4 Draft Completion ✅ COMPLETE
|
||||
|
||||
✅ **Implemented:**
|
||||
- Detects when all picks made
|
||||
- Changes season status to "active"
|
||||
- Emits `draft-completed` socket event
|
||||
|
||||
---
|
||||
|
||||
## Phase 10: Real-Time Updates
|
||||
## Phase 10: Real-Time Updates 🟡 PARTIAL (60% Complete)
|
||||
|
||||
### 10.1 Client State Management
|
||||
### 10.1 Client State Management ✅ COMPLETE
|
||||
|
||||
- Use React state for:
|
||||
- Draft picks array
|
||||
|
|
@ -650,23 +690,35 @@ async function autoPickForTeam(teamId: string, seasonId: string) {
|
|||
- Available participants
|
||||
- Update state when Socket.IO events received
|
||||
|
||||
### 10.2 Optimistic Updates
|
||||
### 10.2 Optimistic Updates 🟡 PARTIAL
|
||||
|
||||
- When user makes pick: update UI immediately
|
||||
- If server rejects: revert and show error
|
||||
- For queue operations: update immediately
|
||||
✅ **Implemented:**
|
||||
- Pick updates broadcast via Socket.IO `pick-made` event
|
||||
- All clients receive and display picks in real-time
|
||||
- Queue operations update local state immediately
|
||||
|
||||
❌ **Not Implemented:**
|
||||
- Timer updates via Socket.IO (no server-side countdown)
|
||||
- Revert on server rejection (currently just shows alert)
|
||||
|
||||
**Note:** Real-time updates work for picks but not for timers since server-side countdown isn't implemented.
|
||||
|
||||
---
|
||||
|
||||
## Phase 11: Mobile Responsiveness
|
||||
## Phase 11: Mobile Responsiveness ❌ NOT STARTED
|
||||
|
||||
### 11.1 Mobile Layout Adjustments
|
||||
### 11.1 Mobile Layout Adjustments ❌ NOT STARTED
|
||||
|
||||
- Draft grid: horizontal scroll
|
||||
- Stack player list and queue vertically
|
||||
**What's Needed:**
|
||||
- Draft grid: horizontal scroll (partially works)
|
||||
- Stack player list and queue vertically on mobile
|
||||
- Collapsible sections for player list/queue
|
||||
- Larger touch targets for buttons
|
||||
- Simplified timer display
|
||||
- Test on actual mobile devices
|
||||
- Responsive breakpoints optimization
|
||||
|
||||
**Current State:** Desktop layout works, mobile usable but not optimized.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -686,13 +738,113 @@ async function autoPickForTeam(teamId: string, seasonId: string) {
|
|||
|
||||
---
|
||||
|
||||
## ✅ IMPLEMENTATION COMPLETION SUMMARY
|
||||
|
||||
### Files Created/Modified
|
||||
|
||||
**API Routes:**
|
||||
- ✅ `/app/routes/api/draft.make-pick.ts` - Team owner makes pick
|
||||
- ✅ `/app/routes/api/draft.start.ts` - Commissioner starts draft
|
||||
- ✅ `/app/routes/api/draft.force-autopick.ts` - Commissioner force auto-pick
|
||||
- ✅ `/app/routes/api/draft.force-manual-pick.ts` - Commissioner manual pick
|
||||
- ✅ `/app/routes/api/queue.add.ts` - Add to queue
|
||||
- ✅ `/app/routes/api/queue.remove.ts` - Remove from queue
|
||||
- ✅ `/app/routes/api/queue.clear.ts` - Clear queue
|
||||
- ✅ `/app/routes/api/queue.reorder.ts` - Reorder queue (API ready, UI not implemented)
|
||||
|
||||
**Models:**
|
||||
- ✅ `/app/models/draft-queue.ts` - Queue management functions
|
||||
|
||||
**Routes:**
|
||||
- ✅ `/app/routes/leagues/$leagueId.draft.$seasonId.tsx` - Main draft room
|
||||
|
||||
**Hooks:**
|
||||
- ✅ `/app/hooks/useDraftSocket.ts` - Socket.IO client hook
|
||||
|
||||
**Server:**
|
||||
- ✅ `/server/socket.js` - Socket.IO server setup
|
||||
- ✅ `server.js` - Modified to use HTTP server for Socket.IO
|
||||
|
||||
**Components:**
|
||||
- ✅ `/app/components/ui/context-menu.tsx` - Added for commissioner controls
|
||||
|
||||
**Database:**
|
||||
- ✅ Schema updated with draft tables and timer fields
|
||||
- ✅ `draftQueueRelations` added to schema
|
||||
|
||||
### What Works Right Now
|
||||
|
||||
1. **Full Draft Flow:**
|
||||
- Commissioner can start draft
|
||||
- Team owners can make picks on their turn
|
||||
- Commissioner can force picks (auto or manual)
|
||||
- Real-time pick updates via Socket.IO
|
||||
- Draft completion detection
|
||||
|
||||
2. **Queue Management:**
|
||||
- Add/remove/clear queue
|
||||
- Queue persists in database
|
||||
- Queue icon buttons next to Pick button
|
||||
- Queue used by force autopick
|
||||
|
||||
3. **UI Features:**
|
||||
- Snake draft grid with pick numbers
|
||||
- Search participants by name
|
||||
- Filter by sport
|
||||
- Hide/show drafted toggle
|
||||
- Context menu for commissioner force pick
|
||||
- Responsive grid (horizontal scroll)
|
||||
|
||||
4. **Real-Time:**
|
||||
- Socket.IO connection indicator
|
||||
- Pick updates broadcast to all users
|
||||
- Room-based isolation (multiple drafts can run simultaneously)
|
||||
|
||||
### What's Missing (10%)
|
||||
|
||||
1. **Server-Side Timer Countdown** (Main Missing Piece):
|
||||
- No interval running on server
|
||||
- No `timer-update` socket events
|
||||
- Timer display shows `--:--`
|
||||
- No automatic trigger for auto-pick
|
||||
|
||||
2. **Pause/Resume:**
|
||||
- No pause/resume buttons
|
||||
- No API routes for pause/resume
|
||||
|
||||
3. **Minor Features:**
|
||||
- Drag & drop queue reorder UI
|
||||
- Mobile optimization
|
||||
- Auto-start at `draftDateTime`
|
||||
|
||||
### To Complete the Draft Room (Remaining 10%)
|
||||
|
||||
**Priority 1: Server-Side Timer (Critical)**
|
||||
1. Add interval in `server/socket.js` to countdown every second
|
||||
2. Emit `timer-update` to draft room
|
||||
3. Trigger auto-pick when timer reaches 0
|
||||
4. Add timer increment after pick
|
||||
|
||||
**Priority 2: Pause/Resume (Nice to Have)**
|
||||
1. Add pause/resume buttons for commissioner
|
||||
2. Create `/api/draft/pause` and `/api/draft/resume` routes
|
||||
3. Update timer logic to respect pause state
|
||||
|
||||
**Priority 3: Polish (Optional)**
|
||||
1. Drag & drop queue reorder UI
|
||||
2. Mobile responsive improvements
|
||||
3. Auto-start background job
|
||||
|
||||
---
|
||||
|
||||
## Open Questions / Future Considerations
|
||||
|
||||
- **Background job for auto-start**: How to trigger draft start at `draftDateTime`? Cron job? Polling?
|
||||
- **Timer persistence**: What if server restarts during draft? Store timer state in DB?
|
||||
- **Timer persistence**: What if server restarts during draft? Store timer state in DB and resume?
|
||||
- **Undo picks**: Not in initial scope, but may want later
|
||||
- **Draft history/log**: Separate view to see all picks in order?
|
||||
- **Notifications**: Alert users when it's their turn? (email, push, etc.)
|
||||
- **Multi-server**: If scaling to multiple servers, need Redis adapter for Socket.IO
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue