diff --git a/app/app.css b/app/app.css index 8877272..8d5f85f 100644 --- a/app/app.css +++ b/app/app.css @@ -117,6 +117,14 @@ html { animation: pulse-gradient 2s ease-in-out infinite; } +@keyframes rpf-slide-in { + from { transform: translateY(-32px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +.rpf-animate { + animation: rpf-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; +} + /* NProgress theme override */ #nprogress .bar { background: var(--electric) !important; diff --git a/app/components/draft/AvailableParticipantsSection.tsx b/app/components/draft/AvailableParticipantsSection.tsx index 443dce1..94e5781 100644 --- a/app/components/draft/AvailableParticipantsSection.tsx +++ b/app/components/draft/AvailableParticipantsSection.tsx @@ -204,7 +204,7 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS ? "All Sports" : sportFilters.length === 1 ? sportFilters[0] - : `${sportFilters.length} sports`, + : `${sportFilters.length} Sports`, [sportFilters] ); @@ -268,111 +268,115 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS )}
-
- onSearchChange(e.target.value)} - className="flex-1 min-w-0 px-3 py-2 border rounded-md text-base md:text-sm bg-background text-foreground" - /> - -
- - - - - - Filter by sport - - - {hasActiveFilters && ( - - )} - - - - - - -
- -
- - - - - - {hasActiveFilters && ( -
- -
- )} - -
-
-
- -
diff --git a/app/components/draft/MiniDraftGrid.tsx b/app/components/draft/MiniDraftGrid.tsx index 8a16b0a..6646099 100644 --- a/app/components/draft/MiniDraftGrid.tsx +++ b/app/components/draft/MiniDraftGrid.tsx @@ -78,6 +78,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({ const prevRoundRef = useRef(currentRound); const firstRowRef = useRef(null); const [rowHeight, setRowHeight] = useState(0); + const scrollContainerRef = useRef(null); + const currentCellRef = useRef(null); useEffect(() => { if (firstRowRef.current) { @@ -85,6 +87,16 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({ } }, [draftGrid]); + useEffect(() => { + const container = scrollContainerRef.current; + const cell = currentCellRef.current; + if (!container || !cell) return; + const containerRect = container.getBoundingClientRect(); + const cellRect = cell.getBoundingClientRect(); + const scrollLeft = container.scrollLeft + cellRect.left - containerRect.left - (containerRect.width - cellRect.width) / 2; + container.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" }); + }, [currentPick]); + useEffect(() => { const prev = prevRoundRef.current; prevRoundRef.current = currentRound; @@ -132,7 +144,7 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({ : [displayedIndices[0], displayedIndices[1]]; return ( -
+
{/* Team header */}
@@ -191,6 +203,7 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({ (picks.at(-1)?.id); + const [animatingId, setAnimatingId] = useState(undefined); + + useEffect(() => { + const newest = recentPicks[0]; + if (newest && newest.id !== prevNewestIdRef.current) { + prevNewestIdRef.current = newest.id; + setAnimatingId(newest.id); + const t = setTimeout(() => setAnimatingId(undefined), 450); + return () => clearTimeout(t); + } + }, [recentPicks]); + + return ( +
+

Latest Picks

+ {picks.length === 0 ? ( +

No picks yet

+ ) : ( + recentPicks.map((pick, index) => ( +
+ + #{pick.pickNumber} + +
+ + {pick.participant.name} + + + {pick.sport.name} + +
+ + {pick.team.name} + +
+ )) + )} +
+ ); +}); diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx index d439bc5..e9afb7a 100644 --- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx +++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx @@ -18,6 +18,7 @@ import { DraftSummaryView } from "~/components/draft/DraftSummaryView"; import { QueueSection } from "~/components/draft/QueueSection"; import { AvailableParticipantsSection } from "~/components/draft/AvailableParticipantsSection"; import { SidebarRecentPicks } from "~/components/draft/SidebarRecentPicks"; +import { RecentPicksFeed } from "~/components/draft/RecentPicksFeed"; import { DraftGridSection } from "~/components/draft/DraftGridSection"; import { ConnectionOverlay } from "~/components/draft/ConnectionOverlay"; import { AuthRecoveryOverlay } from "~/components/draft/AuthRecoveryOverlay"; @@ -46,7 +47,7 @@ type AutodraftStatusEntry = { }; const MOBILE_TABS_BASE = [ - { id: "available" as const, label: "Available", Icon: Users }, + { id: "available" as const, label: "Participants", Icon: Users }, { id: "board" as const, label: "Board", Icon: LayoutGrid }, { id: "teams" as const, label: "Teams", Icon: ListChecks }, { id: "controls" as const, label: "Controls", Icon: Settings }, @@ -544,6 +545,7 @@ export default function DraftRoom() { !userTeam && isCommissioner ? "board" : "available" ); const [teamsSubTab, setTeamsSubTab] = useState<"rosters" | "summary">("rosters"); + const [boardSubTab, setBoardSubTab] = useState<"board" | "pick-list">("board"); const isMobile = useMediaQuery("(max-width: 767px)"); // Track autodraft status for all teams @@ -1658,7 +1660,7 @@ export default function DraftRoom() { Brackt

- {season.league.name} Draft Room + Draft Room

@@ -1765,7 +1767,14 @@ export default function DraftRoom() { {isMobile ? (
{mobileTab === "available" && ( - +
+
+ +
+
+ +
+
)} {mobileTab === "queue" && (
@@ -1779,7 +1788,39 @@ export default function DraftRoom() {
)} {mobileTab === "board" && ( - +
+
+ + +
+
+ {boardSubTab !== "pick-list" ? ( + + ) : ( +
+ +
+ )} +
+
)} {mobileTab === "teams" && (
@@ -1833,11 +1874,6 @@ export default function DraftRoom() { ) )} -
-

Recent Picks

- -
-