143 lines
4.4 KiB
TypeScript
143 lines
4.4 KiB
TypeScript
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 }
|
|
| { type: "pending" }
|
|
| { type: "scored"; brightness: number; points: number };
|
|
|
|
type CoronaVariant =
|
|
| "gradient"
|
|
| "electric"
|
|
| "emerald"
|
|
| "amber"
|
|
| "coral";
|
|
|
|
type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & {
|
|
pickNumber: number;
|
|
round: number;
|
|
pickInRound: number;
|
|
state: "picked" | "current" | "upcoming";
|
|
pick?: {
|
|
participant: { name: string };
|
|
sport: { name: string };
|
|
};
|
|
corona?: CoronaVariant;
|
|
coronaState?: CoronaState;
|
|
seasonStatus?: SeasonStatus;
|
|
draftPaused?: boolean;
|
|
};
|
|
|
|
const coronaClasses: Record<CoronaVariant, string> = {
|
|
gradient: "[background:linear-gradient(to_bottom,#adf661,#2ce1c1)]",
|
|
electric: "bg-electric",
|
|
emerald: "bg-emerald-500",
|
|
amber: "bg-amber-accent",
|
|
coral: "bg-coral-accent",
|
|
};
|
|
|
|
function getCoronaStyle(cs: CoronaState): CSSProperties {
|
|
switch (cs.type) {
|
|
case "eliminated":
|
|
return { background: "oklch(0.45 0.20 25)" };
|
|
case "pending":
|
|
return { background: "rgba(255, 255, 255, 0.08)" };
|
|
case "scored":
|
|
return {
|
|
background: "linear-gradient(to bottom, #adf661, #2ce1c1)",
|
|
opacity: cs.brightness,
|
|
};
|
|
}
|
|
}
|
|
|
|
export const DraftPickCell = forwardRef<HTMLDivElement, DraftPickCellProps>(
|
|
function DraftPickCell({
|
|
pickNumber,
|
|
round,
|
|
pickInRound,
|
|
state,
|
|
pick,
|
|
corona = "gradient",
|
|
coronaState,
|
|
seasonStatus,
|
|
draftPaused,
|
|
className,
|
|
children,
|
|
...rest
|
|
}, ref) {
|
|
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-20 overflow-hidden",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{isCurrent ? (
|
|
<div className="absolute inset-0 rounded-lg [background:linear-gradient(to_bottom,#adf661,#2ce1c1)] animate-pulse-gradient" />
|
|
) : showCorona && coronaState ? (
|
|
<div
|
|
className="absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg"
|
|
style={getCoronaStyle(coronaState)}
|
|
/>
|
|
) : showCorona ? (
|
|
<div
|
|
className={cn(
|
|
"absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg",
|
|
coronaClasses[corona],
|
|
)}
|
|
/>
|
|
) : null}
|
|
<div
|
|
className={cn(
|
|
"relative z-10 h-14 border-2 rounded-lg p-1.5 transition-all",
|
|
(showCorona || isCurrent) && "mr-1",
|
|
isCurrent
|
|
? "bg-muted/80 border-transparent"
|
|
: state === "picked" || (state === "upcoming" && showCorona)
|
|
? "bg-muted border-transparent"
|
|
: "border-border bg-card",
|
|
)}
|
|
title={`Overall Pick #${pickNumber}`}
|
|
>
|
|
<div className={cn("flex flex-col", isCurrent ? "items-center justify-center h-full" : "gap-0.5")}>
|
|
{!isCurrent && (
|
|
<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-[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>
|
|
</div>
|
|
);
|
|
});
|