chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Update draft room UI.

Browse source
This commit is contained in:
Chris Parsons 2026-04-17 23:06:45 -07:00
parent e3bc3c1ce2
commit 44ad954dfe
9 changed files with 125 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/components/AutodraftSettings.tsx
View file

@ -3,7 +3,6 @@ import { Check, Info, ChevronDown } from "lucide-react";
import { toast } from "sonner";
import { Label } from "~/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
import { Button } from "~/components/ui/button";
type AutodraftMode = "next_pick" | "while_on";

29
app/components/DraftGrid.tsx
View file

@ -6,6 +6,7 @@ import {
} from "~/components/ui/context-menu";
import { DraftPickCell, type CoronaState } from "~/components/draft/DraftPickCell";
import { TeamAvatar } from "~/components/TeamAvatar";
import type { SeasonStatus } from "~/models/season";
interface DraftCell {
pickNumber: number;
@ -36,6 +37,8 @@ interface DraftGridProps {
connectedTeams?: Set<string>;
ownerMap?: Record<string, string>;
coronaStates?: Record<string, CoronaState>;
seasonStatus?: SeasonStatus;
draftPaused?: boolean;
}
export function DraftGrid({
@ -52,6 +55,8 @@ export function DraftGrid({
connectedTeams = new Set(),
ownerMap = {},
coronaStates = {},
seasonStatus,
draftPaused,
}: DraftGridProps) {
const totalTeams = draftSlots.length;
@ -61,30 +66,33 @@ export function DraftGrid({
<div className="w-full overflow-x-auto">
<div className="min-w-max">
{/* Team Headers */}
<div className="flex gap-2 mb-2">
<div className="flex gap-1.5 mb-1.5">
{draftSlots.map((slot) => {
const teamTime = teamTimers?.[slot.team.id];
const isAutodraft = autodraftStatus[slot.team.id] || false;
const isConnected = connectedTeams.has(slot.team.id);
return (
<div key={slot.id} className="flex-1 min-w-32 text-center">
<div key={slot.id} className="flex-1 min-w-20 text-center">
<div className="flex justify-center mb-1">
<TeamAvatar
teamId={slot.team.id}
teamName={ownerMap[slot.team.id] || slot.team.name}
logoUrl={slot.team.logoUrl}
size="md"
size="lg"
/>
</div>
<div
className={`font-semibold text-sm truncate px-2 ${!isConnected ? "italic text-muted-foreground" : ""}`}
className={`font-semibold text-xs truncate px-1 flex items-center justify-center ${!isConnected ? "italic text-muted-foreground" : ""}`}
>
{ownerMap[slot.team.id] || slot.team.name}
{isAutodraft && (
<span className="mr-1 inline-flex items-center justify-center h-4 w-4 text-[10px] font-bold text-white bg-black shrink-0">A</span>
)}
<span className="truncate">{ownerMap[slot.team.id] || slot.team.name}</span>
</div>
{teamTimers && formatTime && (
<div
className={`text-xs font-mono ${
className={`text-sm font-mono ${
teamTime === undefined
? "text-muted-foreground"
: teamTime > 60
@ -95,9 +103,6 @@ export function DraftGrid({
}`}
>
{formatTime(teamTime)}
{isAutodraft && (
<span className="ml-1 text-muted-foreground">(auto)</span>
)}
</div>
)}
</div>
@ -106,7 +111,7 @@ export function DraftGrid({
</div>
{/* Draft Grid Rows */}
<div className="space-y-2.5">
<div className="space-y-1.5">
{draftGrid.map((roundPicks, roundIndex) => {
const round = roundIndex + 1;
const isEvenRound = round % 2 === 0;
@ -115,7 +120,7 @@ export function DraftGrid({
: roundPicks;
return (
<div key={round} className="flex gap-2">
<div key={round} className="flex gap-1.5">
{displayPicks.map((cell, index) => {
const actualIndex = isEvenRound
? roundPicks.length - 1 - index
@ -144,6 +149,8 @@ export function DraftGrid({
coronaState={
cell ? coronaStates[cell.participant.id] : undefined
}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
/>
);

41
app/components/__tests__/DraftGrid.test.tsx
View file

@ -67,16 +67,45 @@ describe('DraftGrid Component', () => {
});
describe('Current Pick Highlighting', () => {
it('should highlight current pick with "On Clock" text', () => {
it('should show "Up Next" when draft is pre_draft', () => {
render(
<DraftGrid
draftSlots={mockDraftSlots}
draftGrid={mockGrid}
currentPick={2}
seasonStatus="pre_draft"
/>
);
expect(screen.getByText('On Clock')).toBeInTheDocument();
expect(screen.getByText('Up Next')).toBeInTheDocument();
});
it('should show "Paused Draft" when draft is paused', () => {
render(
<DraftGrid
draftSlots={mockDraftSlots}
draftGrid={mockGrid}
currentPick={2}
seasonStatus="draft"
draftPaused={true}
/>
);
expect(screen.getByText('Paused Draft')).toBeInTheDocument();
});
it('should show "On The Clock" when draft is active', () => {
render(
<DraftGrid
draftSlots={mockDraftSlots}
draftGrid={mockGrid}
currentPick={2}
seasonStatus="draft"
draftPaused={false}
/>
);
expect(screen.getByText('On The Clock')).toBeInTheDocument();
});
it('should apply correct styling to current pick', () => {
@ -85,12 +114,14 @@ describe('DraftGrid Component', () => {
draftSlots={mockDraftSlots}
draftGrid={mockGrid}
currentPick={2}
seasonStatus="draft"
draftPaused={false}
/>
);
const currentPickCell = screen.getByText('On Clock').closest('[class*="border-electric"]');
expect(currentPickCell).toHaveClass('border-electric');
expect(currentPickCell).toHaveClass('bg-electric/20');
const currentPickCell = screen.getByText('On The Clock').closest('.border-transparent');
expect(currentPickCell).toHaveClass('bg-muted/80');
expect(currentPickCell).toHaveClass('border-transparent');
});
});

45
app/components/draft/DraftGridSection.tsx
View file

@ -16,6 +16,7 @@ import { Button } from "~/components/ui/button";
import { MoreVertical } from "lucide-react";
import { formatClockTime, getTimerColorClass } from "~/lib/draft-timer";
import { DraftPickCell } from "~/components/draft/DraftPickCell";
import type { SeasonStatus } from "~/models/season";
type MobileSheetData =
| { type: "team"; teamId: string }
@ -53,6 +54,8 @@ interface DraftGridSectionProps {
autodraftStatus: Record<string, { isEnabled: boolean; mode: "next_pick" | "while_on"; queueOnly: boolean }>;
connectedTeams: Set<string>;
isCommissioner: boolean;
seasonStatus?: SeasonStatus;
draftPaused?: boolean;
onAdjustTimeBankOpen?: (teamId: string) => void;
onSetAutodraftOpen?: (teamId: string) => void;
onForceAutopick: (pickNumber: number, teamId: string) => void;
@ -70,6 +73,8 @@ export const DraftGridSection = memo(function DraftGridSection({
autodraftStatus,
connectedTeams,
isCommissioner,
seasonStatus,
draftPaused,
onAdjustTimeBankOpen,
onSetAutodraftOpen,
onForceAutopick,
@ -91,9 +96,7 @@ export const DraftGridSection = memo(function DraftGridSection({
<div className="flex-1 overflow-auto">
<div className="inline-block min-w-full min-h-full">
{/* Team Headers */}
<div className="flex gap-2 mb-2 sticky top-0 z-10 bg-background/95 backdrop-blur-sm py-1">
{/* Spacer for round column — sticky so it covers the corner when scrolling both axes */}
<div className="w-8 flex-shrink-0 sticky left-0 z-[6] bg-background/95" />
<div className="flex gap-1.5 mb-1.5 sticky top-0 z-10 bg-background/95 backdrop-blur-sm py-1">
{draftSlots.map((slot) => {
const teamTime = teamTimers[slot.team.id];
const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled || false;
@ -106,29 +109,27 @@ export const DraftGridSection = memo(function DraftGridSection({
teamId={slot.team.id}
teamName={ownerMap[slot.team.id] || slot.team.name}
logoUrl={slot.team.logoUrl}
size="sm"
size="md"
/>
</div>
<div
className={`font-semibold text-sm truncate px-2 ${
className={`font-semibold text-xs px-1 flex items-center justify-center ${
slot.team.id === currentTeamId
? "text-electric font-bold"
: !isConnected
? "italic text-muted-foreground"
: ""
}`}
>
{ownerMap[slot.team.id] || slot.team.name}
>
{isAutodraft && (
<span className="mr-1 inline-flex items-center justify-center h-4 w-4 text-[10px] font-bold text-white bg-black shrink-0">A</span>
)}
<span className="truncate">{ownerMap[slot.team.id] || slot.team.name}</span>
</div>
<div
className={`text-xs font-mono px-2 ${getTimerColorClass(teamTime)}`}
className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}
>
{formatClockTime(teamTime)}
{isAutodraft && (
<span className="ml-1 text-muted-foreground">
(auto)
</span>
)}
</div>
{isCommissioner && (onAdjustTimeBankOpen || onSetAutodraftOpen) && (
<button
@ -145,7 +146,7 @@ export const DraftGridSection = memo(function DraftGridSection({
return (
<ContextMenu key={slot.id}>
<ContextMenuTrigger asChild>
<div className="flex-1 min-w-32 text-center cursor-context-menu">
<div className="flex-1 min-w-20 text-center cursor-context-menu">
{headerInner}
</div>
</ContextMenuTrigger>
@ -166,7 +167,7 @@ export const DraftGridSection = memo(function DraftGridSection({
}
return (
<div key={slot.id} className="flex-1 min-w-32 text-center">
<div key={slot.id} className="flex-1 min-w-20 text-center">
{headerInner}
</div>
);
@ -174,7 +175,7 @@ export const DraftGridSection = memo(function DraftGridSection({
</div>
{/* Draft Grid Rows */}
<div className="space-y-2.5">
<div className="space-y-1.5">
{draftGrid.map((roundPicks, roundIndex) => {
const round = roundIndex + 1;
const isEvenRound = round % 2 === 0;
@ -183,11 +184,7 @@ export const DraftGridSection = memo(function DraftGridSection({
: roundPicks;
return (
<div key={round} className="flex gap-2 items-stretch">
{/* Round label */}
<div className="w-8 flex-shrink-0 sticky left-0 z-[5] bg-background/95 flex items-center justify-center">
<span className="text-xs font-mono text-muted-foreground">R{round}</span>
</div>
<div key={round} className="flex gap-1.5 items-stretch">
{displayPicks.map((cell) => {
const isCurrent = cell.pickNumber === currentPick;
const isPicked = !!cell.pick;
@ -229,6 +226,8 @@ export const DraftGridSection = memo(function DraftGridSection({
state={cellState}
pick={pickData}
coronaState={pendingCorona}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
className="cursor-context-menu"
>
{mobileButtons}
@ -268,6 +267,8 @@ export const DraftGridSection = memo(function DraftGridSection({
state={cellState}
pick={pickData}
coronaState={pendingCorona}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
className="cursor-context-menu"
>
{mobileButtons}
@ -305,6 +306,8 @@ export const DraftGridSection = memo(function DraftGridSection({
state={cellState}
pick={pickData}
coronaState={pendingCorona}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
>
{mobileButtons}
</DraftPickCell>

44
app/components/draft/DraftPickCell.tsx
View file

@ -1,5 +1,6 @@
import { forwardRef, type CSSProperties, type ComponentPropsWithoutRef } from "react";
import { cn } from "~/lib/utils";
import type { SeasonStatus } from "~/models/season";
export type CoronaState =
| { type: "eliminated"; points: 0 }
@ -24,6 +25,8 @@ type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & {
};
corona?: CoronaVariant;
coronaState?: CoronaState;
seasonStatus?: SeasonStatus;
draftPaused?: boolean;
};
const coronaClasses: Record<CoronaVariant, string> = {
@ -57,6 +60,8 @@ function DraftPickCell({
pick,
corona = "gradient",
coronaState,
seasonStatus,
draftPaused,
className,
children,
...rest
@ -64,11 +69,18 @@ function DraftPickCell({
const showCorona = state === "picked" || (state === "upcoming" && !!coronaState);
const isCurrent = state === "current";
let currentLabel = "On The Clock";
if (seasonStatus === "pre_draft") {
currentLabel = "Up Next";
} else if (seasonStatus === "draft" && draftPaused) {
currentLabel = "Paused Draft";
}
return (
<div
ref={ref}
className={cn(
"relative flex-1 min-w-32 overflow-hidden",
"relative flex-1 min-w-20 overflow-hidden",
className,
)}
{...rest}
@ -90,7 +102,7 @@ function DraftPickCell({
) : null}
<div
className={cn(
"relative z-10 h-14 border-2 rounded-lg p-2 transition-all",
"relative z-10 h-14 border-2 rounded-lg p-1.5 transition-all",
(showCorona || isCurrent) && "mr-1",
isCurrent
? "bg-muted/80 border-transparent"
@ -100,29 +112,29 @@ function DraftPickCell({
)}
title={`Overall Pick #${pickNumber}`}
>
<div className={cn("flex", isCurrent ? "items-center justify-center h-full" : "gap-1 items-start")}>
{state === "picked" && pick ? (
<div className="text-sm min-w-0 flex-1">
<div className="font-semibold truncate text-sm">{pick.participant.name}</div>
<div className="text-muted-foreground truncate text-xs">
{pick.sport.name}
</div>
</div>
) : isCurrent ? (
<div className="text-sm font-bold text-white">On The Clock</div>
) : null}
<div className={cn("flex flex-col", isCurrent ? "items-center justify-center h-full" : "gap-0.5")}>
{!isCurrent && (
<div className="flex flex-col items-end shrink-0">
<div className="text-xs font-mono text-muted-foreground leading-5">
<div className="flex items-center justify-between">
<div className="text-[10px] font-mono text-muted-foreground leading-3">
{round}.{String(pickInRound).padStart(2, "0")}
</div>
{coronaState && coronaState.type !== "pending" && (
<span className={`text-xs font-mono font-bold mt-0.5 ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
<span className={`text-[10px] font-mono font-bold ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
{coronaState.type === "scored" && "▲"}{coronaState.points}
</span>
)}
</div>
)}
{state === "picked" && pick ? (
<>
<div className="font-semibold truncate text-xs leading-4">{pick.participant.name}</div>
<div className="text-muted-foreground truncate text-[10px] leading-3">
{pick.sport.name}
</div>
</>
) : isCurrent ? (
<div className="text-sm font-bold text-white">{currentLabel}</div>
) : null}
</div>
{children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}
</div>

11
app/components/draft/MiniDraftGrid.tsx
View file

@ -1,5 +1,6 @@
import { memo, useMemo } from "react";
import { DraftPickCell } from "~/components/draft/DraftPickCell";
import type { SeasonStatus } from "~/models/season";
import {
ContextMenu,
ContextMenuContent,
@ -36,6 +37,8 @@ interface MiniDraftGridProps {
currentPick: number;
currentRound: number;
ownerMap?: Record<string, string>;
seasonStatus?: SeasonStatus;
draftPaused?: boolean;
onForceAutopick?: (pickNumber: number, teamId: string) => void;
onForceManualPickOpen?: (pickNumber: number, teamId: string) => void;
onReplacePick?: (pickNumber: number, teamId: string) => void;
@ -48,6 +51,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
currentPick,
currentRound,
ownerMap = {},
seasonStatus,
draftPaused,
onForceAutopick,
onForceManualPickOpen,
onReplacePick,
@ -113,6 +118,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
pickInRound={cell.pickInRound}
state={cellState}
pick={pickData}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
className="[&>div]:h-10 cursor-context-menu"
/>
</ContextMenuTrigger>
@ -142,6 +149,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
pickInRound={cell.pickInRound}
state={cellState}
pick={pickData}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
className="[&>div]:h-10 cursor-context-menu"
/>
</ContextMenuTrigger>
@ -172,6 +181,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
pickInRound={cell.pickInRound}
state={cellState}
pick={pickData}
seasonStatus={seasonStatus}
draftPaused={draftPaused}
className="[&>div]:h-10"
/>
);

2
app/components/draft/QueueSection.tsx
View file

@ -30,7 +30,6 @@ interface QueueSectionProps {
name: string;
sport: { name: string };
}>;
isMyTurn: boolean;
canPick: boolean;
onRemoveFromQueue: (queueId: string) => void;
onReorder: (participantIds: string[]) => void;
@ -122,7 +121,6 @@ const SortableQueueItem = memo(function SortableQueueItem({
export const QueueSection = memo(function QueueSection({
queue,
availableParticipants,
isMyTurn,
canPick,
onRemoveFromQueue,
onReorder,

2
app/routes/leagues/$leagueId.draft-board.$seasonId.tsx
View file

@ -311,6 +311,8 @@ export default function DraftBoard() {
currentPick={currentPick}
ownerMap={ownerMap}
coronaStates={coronaStates}
seasonStatus={season.status}
draftPaused={season.draftPaused}
/>
</div>
</div>

9
app/routes/leagues/$leagueId.draft.$seasonId.tsx
View file

@ -7,7 +7,7 @@ import { useDraftSocket } from "~/hooks/useDraftSocket";
import { logger } from "~/lib/logger";
import { useCallback, useEffect, useState, useMemo, useRef } from "react";
import { Button } from "~/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
import { getAuth } from "@clerk/react-router/server";
import { getTeamQueue } from "~/models/draft-queue";
@ -1509,11 +1509,13 @@ export default function DraftRoom() {
currentPick,
currentRound,
ownerMap,
seasonStatus: season.status,
draftPaused: isPaused,
onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
}), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, isCommissioner, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
}), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, season.status, isPaused, isCommissioner, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
const availableParticipantsSectionProps = useMemo(() => ({
participants: filteredParticipants,
@ -1550,6 +1552,8 @@ export default function DraftRoom() {
connectedTeams,
isCommissioner,
ownerMap,
seasonStatus: season.status,
draftPaused: isPaused,
onAdjustTimeBankOpen: isCommissioner ? handleAdjustTimeBankOpen : undefined,
onSetAutodraftOpen: isCommissioner ? handleSetAutodraftOpen : undefined,
onForceAutopick: handleForceAutopick,
@ -1584,7 +1588,6 @@ export default function DraftRoom() {
? {
queue,
availableParticipants,
isMyTurn,
canPick,
onRemoveFromQueue: handleRemoveFromQueue,
onReorder: handleReorderQueue,