diff --git a/src/pages/cl/ko/index.tsx b/src/pages/cl/ko/index.tsx index 797c7f49..1b75b73c 100644 --- a/src/pages/cl/ko/index.tsx +++ b/src/pages/cl/ko/index.tsx @@ -1,5 +1,5 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { orderBy, random, shuffle } from 'lodash' +import { random, shuffle, without } from 'lodash' import { type FixedArray } from 'model/types' import type Team from 'model/team/KnockoutTeam' @@ -98,9 +98,7 @@ function CLKO({ season, pots: initialPots }: Props) { selectedTeam, }), ) - return orderBy( - allPossibleGroups.map(i => newGwPot.indexOf(groups[i][0])), - ) + return allPossibleGroups.map(i => newGwPot.indexOf(groups[i][0])) } catch (err) { setPopup({ error: 'Could not determine possible pairings', @@ -111,16 +109,22 @@ function CLKO({ season, pots: initialPots }: Props) { [season, initialPots, getPossiblePairingsResponse], ) + const potsToDisplay = useMemo(() => { + const gwPot = possiblePairings + ? pots[0].filter((team, i) => possiblePairings.includes(i)) + : null + return [gwPot, pots[1]] as const + }, [possiblePairings, pots]) + const handleBallPick = useCallback( async (i: number) => { - const currentPot = pots[currentPotNum] - const index = possiblePairings ? possiblePairings[i] : i - const selectedTeam = currentPot[index] + const currentPot = potsToDisplay[currentPotNum]! + const selectedTeam = currentPot[i] - const newPots = pots.slice() as typeof pots - newPots[currentPotNum] = newPots[currentPotNum].filter( - (_, idx) => idx !== index, - ) + const newPots = pots.with( + currentPotNum, + without(pots[currentPotNum], selectedTeam), + ) as typeof pots const newMatchups = matchups.slice() // @ts-expect-error @@ -164,18 +168,11 @@ function CLKO({ season, pots: initialPots }: Props) { setTimeout(autoPickIfOneBall, 250) }, [currentPotNum]) - const teamBowlPot = useMemo( - () => - possiblePairings && - pots[0].filter((team, i) => possiblePairings.includes(i)), - [possiblePairings, pots], - ) - const completed = currentMatchupNum >= initialPots[0].length useEffect(() => { if (isFastDraw) { - const teams = teamBowlPot ?? pots[1] + const teams = potsToDisplay[currentPotNum]! const numTeams = teams.length if (numTeams > 0) { const index = random(numTeams - 1) @@ -211,17 +208,17 @@ function CLKO({ season, pots: initialPots }: Props) { display={!completed} displayTeams={isXRay} selectedTeam={null} - pot={pots[1]} + pot={potsToDisplay[1]} onPick={handleBallPick} /> {!completed && Group Winners} - {teamBowlPot && ( + {potsToDisplay[0] && ( )} diff --git a/src/pages/el/ko/index.tsx b/src/pages/el/ko/index.tsx index d4e7c2e5..57998edd 100644 --- a/src/pages/el/ko/index.tsx +++ b/src/pages/el/ko/index.tsx @@ -1,5 +1,5 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { orderBy, random, shuffle } from 'lodash' +import { random, shuffle, without } from 'lodash' import { type FixedArray } from 'model/types' import type Team from 'model/team/KnockoutTeam' @@ -103,9 +103,7 @@ function ELKO({ season, pots: initialPots }: Props) { selectedTeam, }), ) - return orderBy( - allPossibleGroups.map(i => newGwPot.indexOf(groups[i][0])), - ) + return allPossibleGroups.map(i => newGwPot.indexOf(groups[i][0])) } catch (err) { setPopup({ error: 'Could not determine possible pairings', @@ -116,16 +114,22 @@ function ELKO({ season, pots: initialPots }: Props) { [season, initialPots, getPossiblePairingsResponse], ) + const potsToDisplay = useMemo(() => { + const gwPot = possiblePairings + ? pots[0].filter((team, i) => possiblePairings.includes(i)) + : null + return [gwPot, pots[1]] as const + }, [possiblePairings, pots]) + const handleBallPick = useCallback( async (i: number) => { - const currentPot = pots[currentPotNum] - const index = possiblePairings ? possiblePairings[i] : i - const selectedTeam = currentPot[index] + const currentPot = potsToDisplay[currentPotNum]! + const selectedTeam = currentPot[i] - const newPots = pots.slice() as typeof pots - newPots[currentPotNum] = newPots[currentPotNum].filter( - (_, idx) => idx !== index, - ) + const newPots = pots.with( + currentPotNum, + without(pots[currentPotNum], selectedTeam), + ) as typeof pots const newMatchups = matchups.slice() // @ts-expect-error @@ -169,18 +173,11 @@ function ELKO({ season, pots: initialPots }: Props) { setTimeout(autoPickIfOneBall, 250) }, [currentPotNum]) - const teamBowlPot = useMemo( - () => - possiblePairings && - pots[0].filter((team, i) => possiblePairings.includes(i)), - [possiblePairings, pots], - ) - const completed = currentMatchupNum >= initialPots[0].length useEffect(() => { if (isFastDraw) { - const teams = teamBowlPot ?? pots[1] + const teams = potsToDisplay[currentPotNum]! const numTeams = teams.length if (numTeams > 0) { const index = random(numTeams - 1) @@ -217,17 +214,17 @@ function ELKO({ season, pots: initialPots }: Props) { display={!completed} displayTeams={isXRay} selectedTeam={null} - pot={pots[1]} + pot={potsToDisplay[1]} onPick={handleBallPick} /> {!completed && Group Winners} - {teamBowlPot && ( + {potsToDisplay[0] && ( )}