diff --git a/app/components/draft/AvailableParticipantsSection.tsx b/app/components/draft/AvailableParticipantsSection.tsx index 8d4f6aa..61dfb6e 100644 --- a/app/components/draft/AvailableParticipantsSection.tsx +++ b/app/components/draft/AvailableParticipantsSection.tsx @@ -153,6 +153,10 @@ interface AvailableParticipantsSectionProps { currentPick: number; currentRound: number; ownerMap?: Record; + onForceAutopick?: (pickNumber: number, teamId: string) => void; + onForceManualPickOpen?: (pickNumber: number, teamId: string) => void; + onReplacePick?: (pickNumber: number, teamId: string) => void; + onRollbackToPick?: (pickNumber: number) => void; }; searchQuery: string; sportFilters: string[]; diff --git a/app/components/draft/DraftGridSection.tsx b/app/components/draft/DraftGridSection.tsx index f46af88..57cee4a 100644 --- a/app/components/draft/DraftGridSection.tsx +++ b/app/components/draft/DraftGridSection.tsx @@ -229,6 +229,7 @@ export const DraftGridSection = memo(function DraftGridSection({ state={cellState} pick={pickData} coronaState={pendingCorona} + className="cursor-context-menu" > {mobileButtons} @@ -267,6 +268,7 @@ export const DraftGridSection = memo(function DraftGridSection({ state={cellState} pick={pickData} coronaState={pendingCorona} + className="cursor-context-menu" > {mobileButtons} diff --git a/app/components/draft/DraftPickCell.tsx b/app/components/draft/DraftPickCell.tsx index b30b411..090e9a8 100644 --- a/app/components/draft/DraftPickCell.tsx +++ b/app/components/draft/DraftPickCell.tsx @@ -1,4 +1,4 @@ -import type { CSSProperties, ReactNode } from "react"; +import { forwardRef, type CSSProperties, type ComponentPropsWithoutRef } from "react"; import { cn } from "~/lib/utils"; export type CoronaState = @@ -13,7 +13,7 @@ type CoronaVariant = | "amber" | "coral"; -interface DraftPickCellProps { +type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & { pickNumber: number; round: number; pickInRound: number; @@ -24,9 +24,7 @@ interface DraftPickCellProps { }; corona?: CoronaVariant; coronaState?: CoronaState; - className?: string; - children?: ReactNode; -} +}; const coronaClasses: Record = { gradient: "[background:linear-gradient(to_bottom,#adf661,#2ce1c1)]", @@ -50,7 +48,8 @@ function getCoronaStyle(cs: CoronaState): CSSProperties { } } -export function DraftPickCell({ +export const DraftPickCell = forwardRef( +function DraftPickCell({ pickNumber, round, pickInRound, @@ -60,16 +59,19 @@ export function DraftPickCell({ coronaState, className, children, -}: DraftPickCellProps) { + ...rest +}, ref) { const showCorona = state === "picked" || (state === "upcoming" && !!coronaState); const isCurrent = state === "current"; return (
{isCurrent ? (
@@ -126,4 +128,4 @@ export function DraftPickCell({
); -} +}); diff --git a/app/components/draft/MiniDraftGrid.tsx b/app/components/draft/MiniDraftGrid.tsx index 50e7356..9d09e8c 100644 --- a/app/components/draft/MiniDraftGrid.tsx +++ b/app/components/draft/MiniDraftGrid.tsx @@ -1,5 +1,11 @@ import { memo, useMemo } from "react"; import { DraftPickCell } from "~/components/draft/DraftPickCell"; +import { + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuTrigger, +} from "~/components/ui/context-menu"; interface MiniDraftGridProps { draftSlots: Array<{ @@ -30,6 +36,10 @@ interface MiniDraftGridProps { currentPick: number; currentRound: number; ownerMap?: Record; + onForceAutopick?: (pickNumber: number, teamId: string) => void; + onForceManualPickOpen?: (pickNumber: number, teamId: string) => void; + onReplacePick?: (pickNumber: number, teamId: string) => void; + onRollbackToPick?: (pickNumber: number) => void; } export const MiniDraftGrid = memo(function MiniDraftGrid({ @@ -38,6 +48,10 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({ currentPick, currentRound, ownerMap = {}, + onForceAutopick, + onForceManualPickOpen, + onReplacePick, + onRollbackToPick, }: MiniDraftGridProps) { const roundsToShow = useMemo(() => { if (currentRound <= 1) return [0, 1]; @@ -82,6 +96,73 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({ : isCurrent ? "current" : "upcoming"; + const pickData = cell.pick + ? { + participant: { name: cell.pick.participant.name }, + sport: { name: cell.pick.sport.name }, + } + : undefined; + + if (!isPicked && isCurrent && (onForceAutopick || onForceManualPickOpen)) { + return ( + + + + + + {onForceAutopick && ( + onForceAutopick(cell.pickNumber, cell.teamId)}> + Force Auto Pick + + )} + {onForceManualPickOpen && ( + onForceManualPickOpen(cell.pickNumber, cell.teamId)}> + Force Manual Pick + + )} + + + ); + } + + if (isPicked && (onReplacePick || onRollbackToPick)) { + return ( + + + + + + {onReplacePick && ( + onReplacePick(cell.pickNumber, cell.teamId)}> + Replace Pick + + )} + {onRollbackToPick && ( + onRollbackToPick(cell.pickNumber)} + className="text-destructive focus:text-destructive" + > + Roll Back to This Pick + + )} + + + ); + } return ( ); diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx index c89cfd3..65971b7 100644 --- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx +++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx @@ -1511,6 +1511,10 @@ export default function DraftRoom() { currentPick, currentRound, ownerMap, + onForceAutopick: isCommissioner ? handleForceAutopick : undefined, + onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined, + onReplacePick: isCommissioner ? handleReplacePickOpen : undefined, + onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined, }, searchQuery, sportFilters,