diff --git a/app/app.css b/app/app.css index e27fd40..8877272 100644 --- a/app/app.css +++ b/app/app.css @@ -105,6 +105,18 @@ html { } } +@keyframes pulse-gradient { + 0%, 100% { + opacity: 0.35; + } + 50% { + opacity: 1; + } +} +.animate-pulse-gradient { + animation: pulse-gradient 2s ease-in-out infinite; +} + /* NProgress theme override */ #nprogress .bar { background: var(--electric) !important; diff --git a/app/components/draft/DraftGridSection.tsx b/app/components/draft/DraftGridSection.tsx index 3505dfe..f46af88 100644 --- a/app/components/draft/DraftGridSection.tsx +++ b/app/components/draft/DraftGridSection.tsx @@ -195,6 +195,7 @@ export const DraftGridSection = memo(function DraftGridSection({ const pickData = cell.pick ? { participant: { name: cell.pick.participant.name }, sport: { name: cell.pick.sport.name } } : undefined; + const pendingCorona = cellState === "upcoming" ? { type: "pending" as const } : undefined; const mobileButtons = isCommissioner && ( <> @@ -227,6 +228,7 @@ export const DraftGridSection = memo(function DraftGridSection({ pickInRound={cell.pickInRound} state={cellState} pick={pickData} + coronaState={pendingCorona} > {mobileButtons} @@ -264,6 +266,7 @@ export const DraftGridSection = memo(function DraftGridSection({ pickInRound={cell.pickInRound} state={cellState} pick={pickData} + coronaState={pendingCorona} > {mobileButtons} @@ -299,6 +302,7 @@ export const DraftGridSection = memo(function DraftGridSection({ pickInRound={cell.pickInRound} state={cellState} pick={pickData} + coronaState={pendingCorona} > {mobileButtons} diff --git a/app/components/draft/DraftPickCell.tsx b/app/components/draft/DraftPickCell.tsx index 35a6af8..b30b411 100644 --- a/app/components/draft/DraftPickCell.tsx +++ b/app/components/draft/DraftPickCell.tsx @@ -61,7 +61,8 @@ export function DraftPickCell({ className, children, }: DraftPickCellProps) { - const showCorona = state === "picked"; + const showCorona = state === "picked" || (state === "upcoming" && !!coronaState); + const isCurrent = state === "current"; return (
- {showCorona && coronaState ? ( + {isCurrent ? ( +
+ ) : showCorona && coronaState ? (
-
+
{state === "picked" && pick ? (
{pick.participant.name}
@@ -103,19 +106,21 @@ export function DraftPickCell({ {pick.sport.name}
- ) : state === "current" ? ( -
On Clock
+ ) : isCurrent ? ( +
On The Clock
) : null} -
-
- {round}.{String(pickInRound).padStart(2, "0")} + {!isCurrent && ( +
+
+ {round}.{String(pickInRound).padStart(2, "0")} +
+ {coronaState && coronaState.type !== "pending" && ( + + {coronaState.type === "scored" && "▲"}{coronaState.points} + + )}
- {coronaState && coronaState.type !== "pending" && ( - - {coronaState.type === "scored" && "▲"}{coronaState.points} - - )} -
+ )}
{children &&
{children}
}