diff --git a/app/components/draft/DraftSummaryView.tsx b/app/components/draft/DraftSummaryView.tsx index fc92dfd..844df3c 100644 --- a/app/components/draft/DraftSummaryView.tsx +++ b/app/components/draft/DraftSummaryView.tsx @@ -6,6 +6,7 @@ interface DraftSummaryViewProps { ownerMap?: Record; picks: DraftPick[]; sports: Array<{ id: string; name: string }>; + totalRounds: number; } export const DraftSummaryView = memo(function DraftSummaryView({ @@ -13,24 +14,42 @@ export const DraftSummaryView = memo(function DraftSummaryView({ ownerMap = {}, picks, sports, + totalRounds, }: DraftSummaryViewProps) { const picksByTeamAndSport = useMemo( () => groupPicksByTeamAndSport(picks), [picks] ); - const totalPicksBySport = useMemo(() => { - const map = new Map(); - sports.forEach((sport) => { - let count = 0; - picksByTeamAndSport.forEach((teamMap) => { - count += teamMap.get(sport.id)?.length ?? 0; + const sportStats = useMemo(() => { + const map = new Map(); + sports.forEach((sport) => map.set(sport.id, { total: 0, teams: 0 })); + picksByTeamAndSport.forEach((teamMap) => { + teamMap.forEach((teamSportPicks, sportId) => { + const stat = map.get(sportId); + if (stat && teamSportPicks.length > 0) { + stat.total += teamSportPicks.length; + stat.teams++; + } }); - map.set(sport.id, count); }); return map; }, [picksByTeamAndSport, sports]); + const flexPicksAvailable = Math.max(0, totalRounds - sports.length); + + const flexPicksUsedByTeam = useMemo(() => { + const map = new Map(); + picksByTeamAndSport.forEach((teamMap, teamId) => { + let used = 0; + teamMap.forEach((teamSportPicks) => { + if (teamSportPicks.length > 1) used += teamSportPicks.length - 1; + }); + map.set(teamId, used); + }); + return map; + }, [picksByTeamAndSport]); + if (sports.length === 0) { return (
@@ -59,6 +78,8 @@ export const DraftSummaryView = memo(function DraftSummaryView({ {draftSlots.map((slot, index) => { const displayName = ownerMap[slot.team.id] || slot.team.name; const isLast = index === draftSlots.length - 1; + const used = flexPicksUsedByTeam.get(slot.team.id) ?? 0; + const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable; return ( {displayName} + {flexPicksAvailable > 0 && ( +
+ {used} of {flexPicksAvailable} flexes +
+ )} ); })} @@ -74,7 +100,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({ {sports.map((sport, sportIndex) => { const isLastRow = sportIndex === sports.length - 1; - const sportTotal = totalPicksBySport.get(sport.id) ?? 0; + const { total: sportTotal, teams: sportTeamCount } = sportStats.get(sport.id) ?? { total: 0, teams: 0 }; return ( - {sportTotal > 0 ? sportTotal : null} + {sportTotal > 0 ? ( + <> +
{sportTotal}
+
+ {sportTeamCount} team{sportTeamCount !== 1 ? "s" : ""} +
+ + ) : null} {draftSlots.map((slot, slotIndex) => { const count = diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx index 6996398..07d807d 100644 --- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx +++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx @@ -1463,6 +1463,7 @@ export default function DraftRoom() { picks, sports: seasonSportsData, ownerMap, + totalRounds: season.draftRounds, }; const rosterViewProps = {