{t(\"entryHistory.title\", \"Entry History\")}

{t(\"elementDialog.tabs.schedule.date\", \"Date\")}	\n {t(\"elementDialog.tabs.schedule.roundShort\", \"RD\")}\n	\n {t(\n \"elementDialog.tabs.schedule.opponent\",\n \"Opponent\"\n )}\n
\n {fixture.kickoff_time ? (\n \n {formatRawAsLocalI18n(\n fixture.kickoff_time,\n dateLocales[i18n.language]\n )}\n \n ) : (\n \n \n \n {t(\n \"elementDialog.tabs.schedule.tbcShort\",\n \"TBC\"\n )}\n \n \n \n )}\n	{fixture.event}	\n \n
	{fixture.event}	\n {t(\"elementDialog.tabs.schedule.none\", \"None\")}\n

RD	GP	PB	GR	TM	TC	OP	OR	M SAR	#
\n \n RD{eh.event}\n \n	{eh.points}	{eh.points_on_bench}	{eh.rank ? eh.rank.toLocaleString() : \"-\"}	{eh.event_transfers}	{eh.event_transfers_cost}	{eh.total_points}	\n {eh.overall_rank\n ? eh.overall_rank.toLocaleString()\n : \"-\"}\n	{integerToMoney(eh.value, 10)}	{movementFromIndex(i)}

M SAR

\n \n RD{eh.event}\n \n

{eh.points}

{eh.points_on_bench}

{eh.rank ? eh.rank.toLocaleString() : \"-\"}

{eh.event_transfers}

{eh.event_transfers_cost}

{eh.total_points}

\n {eh.overall_rank\n ? eh.overall_rank.toLocaleString()\n : \"-\"}\n

{integerToMoney(eh.value, 10)}

{movementFromIndex(i)}

{t(\"entryHistory.date\", \"Date\")}	{t(\"entryHistory.name\", \"Name\")}	{t(\"entryHistory.active\", \"Active\")}
\n {formatRawAsLocalI18n(\n ch.time,\n dateLocales[i18n.language]\n )}\n	{getChipName(ch.name as ChipName, t)}	\n \n RD{ch.event}\n \n

{t(\"entryHistory.date\", \"Date\")}

{t(\"entryHistory.name\", \"Name\")}

{t(\"entryHistory.active\", \"Active\")}

\n {formatRawAsLocalI18n(\n ch.time,\n dateLocales[i18n.language]\n )}\n

{getChipName(ch.name as ChipName, t)}

\n \n RD{ch.event}\n \n

{t(\"entryHistory.season\", \"Season\")}	{t(\"entryHistory.points\", \"Points\")}	{t(\"entryHistory.Rank\", \"Rank\")}
{sh.season_name}	{sh.total_points}	{sh.rank}

{t(\"entryHistory.season\", \"Season\")}

{t(\"entryHistory.points\", \"Points\")}

{t(\"entryHistory.Rank\", \"Rank\")}

{sh.season_name}

{sh.total_points}

{sh.rank}

{t(\"elementExplainDialog.stat\", \"Statistic\")}	{t(\"elementExplainDialog.value\", \"Value\")}	{t(\"elementExplainDialog.points\", \"Points\")}
{statsByIdentifier[stat.identifier].label}	{stat.value}	{stat.points}

{t(\"elementExplainDialog.stat\", \"Statistic\")}

{t(\"elementExplainDialog.value\", \"Value\")}

{t(\"elementExplainDialog.points\", \"Points\")}

{statsByIdentifier[stat.identifier].label}

{stat.value}

{stat.points}

{t(\"transfersHistory.time\", \"Time\")}	{t(\"transfersHistory.in\", \"In\")}	{t(\"transfersHistory.out\", \"Out\")}	{t(\"transfersHistory.active\", \"Active\")}
{moment(t.time).format(\"D MMM HH:mm\")}	\n \n dispatch(\n showElementSummary(\n elementsById[t.element_in].id\n )\n )\n }\n >\n {elementsById[t.element_in].web_name}\n \n	\n \n dispatch(\n showElementSummary(\n elementsById[t.element_out].id\n )\n )\n }\n >\n {elementsById[t.element_out].web_name}\n \n	{`RD${t.event}`}

{t(\"transfersHistory.time\", \"Time\")}

{t(\"transfersHistory.in\", \"In\")}

{t(\"transfersHistory.out\", \"Out\")}

{t(\"transfersHistory.active\", \"Active\")}

{moment(t.time).format(\"D MMM HH:mm\")}

\n \n dispatch(\n showElementSummary(\n elementsById[t.element_in].id\n )\n )\n }\n >\n {elementsById[t.element_in].web_name}\n \n

\n \n dispatch(\n showElementSummary(\n elementsById[t.element_out].id\n )\n )\n }\n >\n {elementsById[t.element_out].web_name}\n \n

{`RD${t.event}`}

;\n};\n\nexport default AutoJoin;\n","import { Link } from \"@reach/router\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Box } from \"rebass/styled-components\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\n\nconst Create: React.FC = () => {\n const { t } = useTranslation();\n return (\n \n

\n \n \n {t(\"createLeagues.title\", \"Choose a league type to create\")}\n \n \n \n {t(\"createLeagues.classic.title\", \"Classic scoring\")}\n \n

\n {t(\n \"createLeagues.classic.p1\",\n \"In a league with classic scoring, teams are ranked based on their total points in the game. You can join or leave a league with classic scoring at any point during the season.\"\n )}\n

\n }\n to=\"classic\"\n >\n {t(\"createLeagues.classic.button\", \"Create classic league & cup\")}\n \n \n \n \n {t(\"createLeagues.h2H.title\", \"Head-to-Head scoring\")}\n \n

\n {t(\n \"createLeagues.h2H.p1\",\n \"In a league with head-to-head scoring, every team plays a match against another team in the league each Round. The match result is based on the Round score of each team minus any transfer points spent preparing for the Round.\"\n )}\n

\n {t(\n \"createLeagues.h2H.p2\",\n \"The Head-to-Head schedule is generated at the start of the league's first Round. Once the schedule has been generated the league is locked and teams will not be able to join or leave.\"\n )}\n

\n \n \n }\n to=\"h2h\"\n >\n {t(\"createLeagues.h2H.button\", \"Create head-to-head league\")}\n \n \n \n

\n \n );\n};\n\nexport default Create;\n","import React, { useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { getEvents } from \"../../core/store/events/reducers\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { getCreateClassicLeagueError } from \"../../core/store/leagues/reducers\";\nimport { createClassicLeague } from \"../../core/store/leagues/thunks\";\nimport { ICreateClassicLeagueData } from \"../../core/store/leagues/types\";\nimport Button from \"../Button\";\nimport Collapsible from \"../Collapsible\";\nimport Copy from \"../Copy\";\nimport { FieldWrap, InputField, SelectField } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\n\ninterface IState {\n name: string;\n startEvent: number;\n}\n\ntype Props = WithTranslation;\n\nconst CreateClassic: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n const [state, setState] = useState({\n name: \"\",\n startEvent: 1,\n });\n\n const error = useSelector(getCreateClassicLeagueError);\n const events = useSelector(getEvents);\n const settings = useSelector(getSettings);\n\n const requiredFields: Array = [\"name\", \"startEvent\"];\n\n const apiDataFromState = (): ICreateClassicLeagueData => ({\n name: state.name,\n start_event: state.startEvent,\n });\n\n const handleNameChange = (e: React.FormEvent) =>\n setState({ ...state, name: e.currentTarget.value });\n\n const handleStartEventChange = (e: React.FormEvent) =>\n setState({ ...state, startEvent: parseInt(e.currentTarget.value, 10) });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n dispatch(createClassicLeague(apiDataFromState()));\n };\n\n const disabled = requiredFields.some((e) => !state[e]);\n return (\n \n

\n \n \n {t(\"createClassic.title\", \"Create a new classic league & cup\")}\n \n {error ? (\n error.badRequest &&\n error.badRequest.non_field_errors &&\n error.badRequest.non_field_errors[0].code ===\n \"max_private_entries\" ? (\n

\n {t(\n \"createClassic.error\",\n \"You may only enter {{ maxPrivateEntries }} private leagues\",\n {\n maxPrivateEntries:\n settings && settings.league_join_private_max,\n }\n )}\n

\n ) : (\n

{JSON.stringify(error)}

\n )\n ) : (\n \"\"\n )}\n \n \n \n \n \n \n {events.map((e) => (\n \n {e.name}\n \n ))}\n \n \n \n \n \n {t(\"createClassic.theCup\", \"The Cup\")}\n

\n {t(\n \"createClassic.theCupExplain\",\n \"League cups are now included in Private Classic Leagues. The League Cups will start in the second half of the season dependent on the size of your league and will conclude in Round 30.\"\n )}\n

\n \n

\n {t(\n \"createClassic.theCupHowExplain\",\n \"In the first round of the cup each qualifying team will be randomly drawn against another. The winner (the team with the highest Round score minus any transfer points), will progress to the second round of the cup and another random draw. The loser will be eliminated from the cup. This process continues until the final round of the cup when there will only be two teams remaining.\"\n )}\n

\n {t(\n \"createClassic.theCupHowExplain1\",\n \"In the case of a draw, then the following tie-breaks will be applied until a winner is found:\"\n )}\n

\n {t(\n \"createClassic.theCupHowExplain2\",\n \"Most goals scored in the round\"\n )}\n
\n {t(\n \"createClassic.theCupHowExplain3\",\n \"Fewest goals conceded in the round\"\n )}\n
\n {t(\"createClassic.theCupHowExplain4\", \"Virtual coin toss\")}\n

\n \n \n \n

\n \n );\n};\n\nexport { CreateClassic as CreateClassicTest };\n\nexport default withTranslation()(CreateClassic);\n","import range from \"lodash/range\";\nimport React, { useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { getFutureEvents } from \"../../core/store/events/reducers\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport { getCreateH2HLeagueError } from \"../../core/store/leagues/reducers\";\nimport { createH2HLeague } from \"../../core/store/leagues/thunks\";\nimport { ICreateH2HLeagueData } from \"../../core/store/leagues/types\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { FieldWrap, InputField, SelectField } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\n\ninterface IState {\n koRounds: number;\n maxEntries: number;\n name: string;\n startEvent: number;\n}\n\ntype Props = WithTranslation;\n\nconst CreateH2H: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n const error = useSelector(getCreateH2HLeagueError);\n const events = useSelector(getFutureEvents);\n const settings = useSelector(getSettings) as ISettings;\n\n const requiredFields: Array = [\"name\", \"startEvent\"];\n\n const [state, setState] = useState({\n koRounds: 0,\n maxEntries: 0,\n name: \"\",\n startEvent: events.length ? events[0].id : 1,\n });\n\n const maximumKoRounds = () => {\n const remainingEvents = events.length;\n if (remainingEvents <= 1) {\n return 0;\n }\n return Math.min(\n settings.league_max_ko_rounds_private_h2h,\n remainingEvents - 1\n );\n };\n\n const minimumSize = (koRounds: number) =>\n state.koRounds ? Math.pow(2, koRounds) : 2;\n\n const validStartingEvents = (koRounds: number) =>\n koRounds ? events.slice(0, -koRounds) : events;\n\n const apiDataFromState = (): ICreateH2HLeagueData => ({\n ko_rounds: state.koRounds || null,\n max_entries: state.maxEntries || null,\n name: state.name,\n start_event: state.startEvent,\n });\n\n const handleNameChange = (e: React.FormEvent) =>\n setState({ ...state, name: e.currentTarget.value });\n\n const handleStartEventChange = (e: React.FormEvent) =>\n setState({ ...state, startEvent: parseInt(e.currentTarget.value, 10) });\n\n const handleMaxEntriesChange = (e: React.FormEvent) =>\n setState({ ...state, maxEntries: parseInt(e.currentTarget.value, 10) });\n\n const handleKoRoundsChange = (e: React.FormEvent) => {\n const koRounds = parseInt(e.currentTarget.value, 10);\n const minimumSizeKoRounds = minimumSize(koRounds);\n const events = validStartingEvents(koRounds);\n setState({\n ...state,\n koRounds,\n maxEntries: state.maxEntries\n ? Math.max(minimumSizeKoRounds, state.maxEntries)\n : 0,\n startEvent: Math.min(events[events.length - 1].id, state.startEvent),\n });\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n dispatch(createH2HLeague(apiDataFromState()));\n };\n\n if (!events.length) {\n return null;\n }\n const disabled = requiredFields.some((e) => !state[e]);\n return (\n \n

\n \n \n {t(\"createH2H.title\", \"Create a new head-to-head league\")}\n \n {error ? (\n error.badRequest &&\n error.badRequest.non_field_errors &&\n error.badRequest.non_field_errors[0].code ===\n \"max_private_entries\" ? (\n

\n {t(\n \"createH2H.errors.maxPrivateEntry\",\n \"You may only enter {{ maxPrivateEntries }} private leagues\",\n {\n maxPrivateEntries:\n settings && settings.league_join_private_max,\n }\n )}\n

\n ) : (\n

{JSON.stringify(error)}

\n )\n ) : (\n \"\"\n )}\n

\n \n \n \n \n \n {validStartingEvents(state.koRounds).map((e) => (\n \n {e.name}\n \n ))}\n \n \n \n \n \n {range(\n minimumSize(state.koRounds),\n settings.league_max_size_private_h2h + 1\n ).map((num) => (\n \n {num}\n \n ))}\n \n \n {maximumKoRounds() > 0 && (\n \n \n \n {range(1, maximumKoRounds() + 1).map((num) => (\n \n {num}\n \n ))}\n \n \n )}\n \n \n \n

\n \n

\n \n );\n};\n\nexport { CreateH2H as CreateH2HTest };\n\nexport default withTranslation()(CreateH2H);\n","import { rgba } from \"polished\";\nimport styled from \"styled-components/macro\";\n\nconst TextDivider = styled.div`\n margin: ${({ theme }) => theme.space[4]} ${({ theme }) => theme.space[2]};\n font-size: ${({ theme }) => theme.fontSizes[0]};\n text-align: center;\n text-transform: lowercase;\n overflow: hidden;\n\n ::before,\n ::after {\n content: \"\";\n position: relative;\n display: inline-block;\n width: 50%;\n height: 1px;\n background-color: ${rgba(\"black\", 0.1)};\n vertical-align: middle;\n }\n\n ::before {\n right: ${({ theme }) => theme.space[2]};\n margin-inline-start: -50%;\n }\n\n ::after {\n left: ${({ theme }) => theme.space[2]};\n margin-inline-end: -50%;\n }\n`;\n\nexport default TextDivider;\n","import { Link } from \"@reach/router\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Box } from \"rebass\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport TextDivider from \"../TextDivider\";\nimport Title from \"../Title\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\n\nconst CreateJoin: React.FC = () => {\n const { t } = useTranslation();\n return (\n \n

\n \n \n {t(\"createJoin.title\", \"Create and join leagues\")}\n \n {t(\"createJoin.joinLeague.title\", \"Join a League & cup\")}\n \n

\n {t(\n \"createJoin.joinLeague.p1\",\n \"Join a private or public league to compete against friends and other game players.\"\n )}\n

\n }\n to=\"../join\"\n >\n {t(\"createJoin.joinLeague.button\", \"Join a league & cup\")}\n \n {t(\"createJoin.or\", \"or\")}\n \n {t(\"createJoin.createLeague.title\", \"Create a new league & cup\")}\n \n

\n {t(\n \"createJoin.createLeague.p1\",\n \"Create a private league to compete against friends.\"\n )}\n

\n }\n to=\"../create\"\n >\n {t(\"createJoin.createLeague.button\", \"Create a league & cup\")}\n \n \n \n

\n \n );\n};\n\nexport default CreateJoin;\n","import { RouteComponentProps } from \"@reach/router\";\nimport React, { useEffect } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getEventsById } from \"../../core/store/events/reducers\";\nimport { getLeagueCupStatus } from \"../../core/store/leagues/reducers\";\nimport { fetchLeagueCupStatus } from \"../../core/store/leagues/thunks\";\nimport { getIdFromEventName } from \"../../utils/events\";\nimport BoldLink from \"../BoldLink\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\n\nconst StyledMain = styled(Main)`\n width: 100%;\n padding: ${({ theme }) => `${theme.space[4]} ${theme.space[2]}`};\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding: ${({ theme }) => `${theme.space[8]} ${theme.space[4]}`};\n }\n`;\n\nconst StyledSubheading = styled(SubHeading)`\n margin: ${({ theme }) => `${theme.space[8]} ${theme.space[0]}`};\n`;\n\nconst StyledParagraph = styled.p`\n padding-top: ${({ theme }) => theme.space[4]};\n`;\n\ntype OwnProps = RouteComponentProps<{ leagueId: string }>;\n\nconst CupNotStarted: React.FC = ({ leagueId }) => {\n const leagueNumber = Number(leagueId!) || 0;\n const { t } = useTranslation();\n\n const cupStatus = useSelector((state: RootState) =>\n leagueNumber ? getLeagueCupStatus(state, leagueNumber) : null\n );\n const eventsById = useSelector(getEventsById);\n\n const cupEventNameId = useSelector((state: RootState) =>\n cupStatus?.qualification_event\n ? getIdFromEventName(eventsById[cupStatus.qualification_event].name)\n : null\n );\n const cupEventNameIdPlus = useSelector((state: RootState) =>\n cupStatus?.qualification_event\n ? getIdFromEventName(eventsById[cupStatus.qualification_event + 1].name)\n : null\n );\n\n const reduxDispatch = useDispatch();\n\n useEffect(() => {\n leagueNumber &&\n !cupStatus &&\n reduxDispatch(fetchLeagueCupStatus(leagueNumber));\n }, [leagueNumber, cupStatus, reduxDispatch]);\n\n if (!cupStatus) {\n return null;\n }\n\n return (\n \n \n \n {cupStatus.name}\n\n \n \n {t(\"cupNotStarted.standings\", \"View league standings\")}\n \n \n\n {cupStatus.qualification_event ? (\n <>\n \n {t(\n \"cupNotStarted.starts\",\n \"The Cup is scheduled to start in RD {{ round }}\",\n { round: cupEventNameIdPlus }\n )}\n \n {cupStatus.has_byes ? (\n <>\n

\n {t(\n \"cupNotStarted.fixtures\",\n \"Fixtures will be determined at the end of Round {{ round }}\",\n { round: cupEventNameId }\n )}{\" \"}\n {cupStatus.qualification_numbers > 2 && (\n <>\n {t(\n \"cupNotStarted.qualify1\",\n \"If there are {{ qualification_numbers }} teams in the associated league, then each team will have an opponent in Round {{ qualification_event }}.\",\n {\n qualification_numbers:\n cupStatus.qualification_numbers,\n qualification_event: cupEventNameIdPlus,\n }\n )}\n {cupStatus.qualification_numbers === 4 &&\n t(\n \"cupNotStarted.qualify2\",\n \"If there are 3 teams in the league, 1 team will receive a bye in Round {{ qualification_event_plus }} based on their score in Round {{ qualification_event_plus }}\",\n {\n qualification_event_plus: cupEventNameIdPlus,\n qualification_event: cupEventNameId,\n }\n )}{\" \"}\n {t(\n \"cupNotStarted.qualify3\",\n \"If there are between {{ qualification_numbers_div }} and {{ qualification_numbers_min }} teams in the league, some teams will receive a bye in Round {{ qualification_numbers_plus }} based on their score in Round {{ qualification_event }}\",\n {\n qualification_numbers_div:\n cupStatus.qualification_numbers / 2 + 1,\n qualification_numbers_min:\n cupStatus.qualification_numbers - 1,\n qualification_numbers_plus: cupEventNameIdPlus,\n qualification_event: cupEventNameId,\n }\n )}\n \n )}\n

\n\n

\n {t(\n \"cupNotStarted.qualify4\",\n \"The starting round of the cup is determined by the number of teams in the associated league and the final will be contested in Round 30.\"\n )}\n

\n {t(\n \"cupNotStarted.qualify5\",\n \"You will not be entered into the cup if you have joined the league after the Round prior to the cup starting.\"\n )}\n

\n\n \n {t(\"cupNotStarted.qualify6\", \"How the cup works\")}\n \n

\n {t(\n \"cupNotStarted.qualify7\",\n \"Each team will be randomly drawn against another unless they have received a bye. The winner (the team with the highest Round score minus any transfer points), will progress to the process continues until the final round when the two remaining teams contest the cup final. If a cup match is drawn, then the following tie-breaks will be applied until a winner is found:\"\n )}\n

\n {t(\n \"cupNotStarted.qualify8\",\n \"Most goals scored in the Round\"\n )}\n
\n {t(\n \"cupNotStarted.qualify9\",\n \"Fewest goals conceded in the Round\"\n )}\n
{t(\"cupNotStarted.qualify10\", \"Virtual coin toss\")}

\n \n ) : (\n <>\n

\n {t(\n \"cupNotStarted.qualify11\",\n \"The top {{qualification_numbers}} ranked managers in Round {{qualification_event}} will be entered into the first round of the cup in Round {{qualification_numbers_plus}}. The final will be contested in Round 30.\",\n {\n qualification_numbers: cupStatus.qualification_numbers,\n qualification_event: cupEventNameId,\n qualification_numbers_plus: cupEventNameIdPlus,\n }\n )}\n

\n\n \n {t(\"cupNotStarted.qualify12\", \"How the cup works\")}\n \n

\n {t(\n \"cupNotStarted.qualify13\",\n \"Each qualifying team will be randomly drawn against another in the first round. The winner (the team with the highest Round score minus any transfer points), will progress to the second round and another random draw, the losers are out! This process continues until the final round when the two remaining teams contest the cup final. If a cup match is drawn, then the following tie-breaks will be applied until a winner is found:\"\n )}\n

\n {t(\n \"cupNotStarted.qualify14\",\n \"Most goals scored in the Round\"\n )}\n
\n {t(\n \"cupNotStarted.qualify15\",\n \"Fewest goals conceded in the Round\"\n )}\n
{t(\"cupNotStarted.qualify16\", \"Virtual coin toss\")}

\n \n )}\n \n ) : (\n \n {t(\n \"cupNotStarted.qualify17\",\n \"There is no information available for this cup yet.\"\n )}\n \n )}\n \n \n \n );\n};\n\nexport default CupNotStarted;\n","import { RouteComponentProps } from \"@reach/router\";\nimport { TFunction } from \"i18next\";\nimport React, { useEffect } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport useClipboard from \"react-use-clipboard\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getLeagueForEntry } from \"../../core/store/entries/reducers\";\nimport { fetchEntrySummary } from \"../../core/store/entries/thunks\";\nimport { ILeagueEntry } from \"../../core/store/entries/types\";\nimport { getCode } from \"../../core/store/leagues/reducers\";\nimport { fetchLeagueCode } from \"../../core/store/leagues/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { ILoggedInPlayer } from \"../../core/store/player/types\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\n\nconst LeagueInvite = styled.div`\n margin-bottom: ${({ theme }) => theme.space[4]};\n padding: ${({ theme }) => theme.space[2]};\n background-color: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.white};\n font-size: ${({ theme }) => theme.space[3]};\n text-align: center;\n`;\n\nconst LeagueInviteCode = styled.strong`\n margin-inline-start: ${({ theme }) => theme.space[1]};\n color: ${({ theme }) => theme.colors.yellow};\n`;\n\nconst Hr = styled.hr`\n border: 0;\n height: 1px;\n margin-top: 23px;\n margin-bottom: 23px;\n background-color: ${({ theme }) => theme.colors.grey};\n`;\n\nconst inviteMessage = (code: string, leagueName: string, t: TFunction) => [\n t(\"invite.inviteMsg1\", \"Hi\"),\n t(\"invite.inviteMsg2\", \"I've created a league called {{leagueName}}.\", {\n leagueName: leagueName,\n }),\n `${window.location.origin}/leagues/auto-join/${code}`,\n t(\n \"invite.inviteMsg3\",\n \"You shouldn't need the league code, but just in case here it is: {{code}}\",\n {\n code: code,\n }\n ),\n t(\"invite.inviteMsg4\", \"Enjoy the game!\"),\n];\n\ntype OwnProps = RouteComponentProps<{ leagueId: string }>;\n\ninterface IPropsFromState {\n code: string | null;\n entryId: number;\n leagueNumber: number;\n league: ILeagueEntry | null;\n}\n\ninterface IPropsFromDispatch {\n fetchCode: (leagueId: number) => void;\n fetchEntrySummary: (entryId: number) => void;\n}\n\ntype Props = OwnProps & IPropsFromState & IPropsFromDispatch;\n\nconst Invite: React.FC = ({\n code,\n league,\n leagueNumber,\n entryId,\n fetchCode,\n fetchEntrySummary,\n}) => {\n const { t } = useTranslation();\n const codeToCopy = code ? code : \"\";\n const leagueName = league ? league.name : \"\";\n const message = inviteMessage(codeToCopy, leagueName, t);\n const emailText = message ? message.join(\"\\n\\n\") : \"\";\n const emailBody = encodeURIComponent(emailText);\n const emailSubject = t(\"invite.emailSubject\", \"Play RSL Fantasy\");\n const encodedEmailSubject = encodeURI(emailSubject);\n const joinUrl = `${window.location.origin}/leagues/auto-join/${code}`;\n const [isCopied, setCopied] = useClipboard(codeToCopy, {\n successDuration: 500,\n });\n const [isCopiedUrl, setCopiedUrl] = useClipboard(joinUrl, {\n successDuration: 500,\n });\n const [isCopiedEmail, setCopiedEmail] = useClipboard(emailText, {\n successDuration: 500,\n });\n\n useEffect(() => {\n if (leagueNumber) {\n fetchCode(leagueNumber);\n }\n\n fetchEntrySummary(entryId);\n }, [leagueNumber, entryId, fetchCode, fetchEntrySummary]);\n\n if (!codeToCopy || !leagueNumber || !league) {\n return null;\n }\n\n return (\n \n

\n \n \n \n {t(\"invite.title\", \"Invite players to join\")} {leagueName}\n \n \n \n {t(\"invite.codeToJoin\", \"Code to join this league\")}:\n \n {isCopied ? t(\"invite.copied\", \"Copied!\") : codeToCopy}\n \n \n\n \n\n

\n\n

\n {t(\n \"invite.description1\",\n \"When you click the link below, the link will attempt to open your default email program and start a new email.\"\n )}\n

\n\n

\n {t(\n \"invite.description2\",\n \"If you do not have a default email program, like Outlook or Mail, enabled on your computer, clicking the link may not result in any action or you may be prompted to set up an email program.\"\n )}\n

\n\n \n (window.location.href = `mailto:?to=&subject=${encodedEmailSubject}&body=${emailBody}`)\n }\n >\n {t(\"invite.byEmailButton\", \"Share league code by email\")}{\" \"}\n \n \n\n

\n\n

\n {t(\n \"invite.description3\",\n \"If you use a browser based webmail application, like Gmail or Yahoo!, you can copy and paste the text below:\"\n )}\n

\n\n \n {message.map((line) => (\n

{line}

\n ))}\n \n \n \n \n \n

\n \n );\n};\n\nexport { Invite as InviteTest };\n\nconst mapStateToProps = (\n state: RootState,\n ownProps: OwnProps\n): IPropsFromState => {\n const player = getPlayerData(state) as ILoggedInPlayer; // enforced by EntryRoute\n const entry = player.entry;\n const leagueNumber =\n ownProps.leagueId && parseInt(ownProps.leagueId, 10)\n ? parseInt(ownProps.leagueId, 10)\n : 0;\n return {\n code: leagueNumber ? getCode(state, leagueNumber) : null,\n league: leagueNumber ? getLeagueForEntry(state, entry, leagueNumber) : null,\n leagueNumber,\n entryId: entry,\n };\n};\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n fetchCode: (leagueId: number) => dispatch(fetchLeagueCode(leagueId)),\n fetchEntrySummary: (entryId: number) => dispatch(fetchEntrySummary(entryId)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Invite);\n","import { Link } from \"@reach/router\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { RootState } from \"../../core/store\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\n\ninterface IPropsFromState {\n settings: ISettings | null;\n}\n\nconst Join: React.FC = ({ settings }) => {\n const { t } = useTranslation();\n if (!settings) {\n return null;\n }\n return (\n \n

\n \n {t(\"join.title\", \"Choose a league type to join\")}\n

\n {t(\n \"join.p1\",\n \"You can join up to {{ maxPrivateLeagues }} private leagues and {{ maxPublicLeagues }} public leagues.\",\n {\n maxPrivateLeagues: settings.league_join_private_max,\n maxPublicLeagues: settings.league_join_public_max,\n }\n )}\n

\n \n \n {t(\"join.private.title\", \"Private leagues & cups\")}\n \n

\n {t(\n \"join.private.p1\",\n \"Join a private league if somebody has given you a league code to enter.\"\n )}\n

\n\n }\n to=\"private\"\n >\n {t(\"join.private.button\", \"Join private league & cup\")}\n \n \n {t(\"join.public.title\", \"Public leagues\")}\n

\n {t(\n \"join.public.p1\",\n \"Join a public league to play against a small, randomly selected group of other game players.\"\n )}\n

\n \n }\n to=\"public\"\n >\n {t(\"join.public.button\", \"Join public league\")}\n \n \n \n

\n \n );\n};\n\nexport { Join as JoinTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n settings: getSettings(state),\n});\n\nexport default connect(mapStateToProps)(Join);\n","import { TFunction } from \"i18next\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ISettings } from \"../../core/store/game/types\";\n\ninterface IProps {\n error: string;\n settings: ISettings;\n}\n\nconst JoinLeagueError: React.FC = ({ error, settings }) => {\n const { t } = useTranslation();\n const getErrorMessage = (\n error: string,\n settings: ISettings,\n t: TFunction\n ) => {\n switch (error) {\n case \"max_length\": {\n return t(\n \"joinPrivate.errors.maxLength\",\n \"Invalid code entered. Please check the code.\"\n );\n }\n case \"invalid\": {\n return t(\n \"joinPrivate.errors.invalid\",\n \"Invalid code entered. Please check the code and confirm with the league administrator if you are still having problems.\"\n );\n }\n case \"league_closed\": {\n return t(\n \"joinPrivate.errors.leagueClosed\",\n \"This league is closed to new entries.\"\n );\n }\n case \"already_joined\": {\n return t(\n \"joinPrivate.errors.alreadyJoined\",\n \"You are already entered in this league.\"\n );\n }\n case \"entry_banned\": {\n return t(\n \"joinPrivate.errors.entryBanned\",\n \"The creator of this league has banned you from entering.\"\n );\n }\n case \"max_private_entries\": {\n return t(\n \"joinPrivate.errors.maxPrivate\",\n \"You are in the maximum number of {{ maxPrivateEntries }} private leagues. Before you can join a new league you will need to leave one of these leagues.\",\n {\n maxPrivateEntries: settings.league_join_private_max,\n }\n );\n }\n case \"public_league_max_exceeded\": {\n return `You may only enter ${settings.league_join_public_max} public leagues`;\n }\n default:\n return error;\n }\n };\n return

{getErrorMessage(error, settings, t)}

;\n};\n\nexport default JoinLeagueError;\n","import { IError } from \"../../core/store\";\n\nexport const getErrorType = (errors: IError | null) => {\n if (errors) {\n if (errors.badRequest) {\n if (errors.badRequest.non_field_errors) {\n return errors.badRequest.non_field_errors[0].code;\n }\n if (errors.badRequest.code) {\n return errors.badRequest.code[0].code;\n }\n }\n return JSON.stringify(errors);\n }\n return \"\";\n};\n","import { navigate } from \"@reach/router\";\nimport React, { useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport {\n getJoinPrivateLeagueError,\n getJoinPrivateLeagueSuccess,\n} from \"../../core/store/leagues/reducers\";\nimport { joinPrivateLeague } from \"../../core/store/leagues/thunks\";\nimport { IJoinPrivateLeagueData } from \"../../core/store/leagues/types\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { FieldWrap, InputField } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\nimport JoinLeagueError from \"./JoinLeagueError\";\nimport { getErrorType } from \"./errors\";\n\ntype Props = WithTranslation;\n\nconst JoinPrivate: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n const [code, setCode] = useState(\"\");\n\n const error = getErrorType(useSelector(getJoinPrivateLeagueError));\n const hasJoinedPrivate = useSelector(getJoinPrivateLeagueSuccess);\n const settings = useSelector(getSettings) as ISettings;\n\n const apiDataFromState = (): IJoinPrivateLeagueData => ({\n code,\n });\n\n const handleCodeChange = (e: React.FormEvent) =>\n setCode(e.currentTarget.value);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n dispatch(joinPrivateLeague(apiDataFromState()));\n };\n\n const disabled = !code;\n\n if (hasJoinedPrivate) {\n navigate(\"/leagues\");\n return null;\n }\n\n return (\n \n

\n \n {t(\"joinPrivate.title\", \"Join private league & cup\")}\n {error && (\n \n \n {settings && (\n \n )}\n \n \n )}\n \n \n \n \n

\n \n );\n};\n\nexport { JoinPrivate as JoinPrivateTest };\n\nexport default withTranslation()(JoinPrivate);\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { IError, RootState, ThunkDispatch } from \"../../core/store\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport { getJoinPublicLeagueError } from \"../../core/store/leagues/reducers\";\nimport { joinPublicLeague } from \"../../core/store/leagues/thunks\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\n\ninterface IPropsFromState {\n error: IError | null;\n settings: ISettings;\n}\n\ninterface IPropsFromDispatch {\n joinPublicLeagueClassic: () => void;\n joinPublicLeagueH2H: () => void;\n}\n\ntype Props = IPropsFromState & IPropsFromDispatch;\n\nconst JoinPublic: React.FC = ({\n error,\n joinPublicLeagueClassic,\n joinPublicLeagueH2H,\n settings,\n}) => {\n const { t } = useTranslation();\n return (\n \n

\n \n {t(\"joinPublic.title\", \"Join public league\")}\n {error ? (\n error.badRequest &&\n error.badRequest.non_field_errors &&\n error.badRequest.non_field_errors[0].code ===\n \"public_league_max_exceeded\" ? (\n \n \n {t(\n \"joinPublic.error\",\n \"You may only enter {{ publicLeagueMax }} public leagues\",\n { publicLeagueMax: settings.league_join_public_max }\n )}\n \n \n ) : (\n

{JSON.stringify(error)}

\n )\n ) : (\n \"\"\n )}\n \n

\n {t(\n \"joinPublic.p1\",\n \"Public leagues allow you to compete against {{ maxSizePublicClassic }} randomly assigned game players in a classic league and up to {{ maxSizePublicH2H }} in head-to-head leagues. You can join up to {{ leagueJoinPublicMax }} public leagues.\",\n {\n maxSizePublicClassic: settings.league_max_size_public_classic,\n maxSizePublicH2H: settings.league_max_size_public_h2h,\n leagueJoinPublicMax: settings.league_join_public_max,\n }\n )}\n

\n \n {t(\n \"joinPublic.p2\",\n \"Note, you can't remove your team from a public league after the league has started, once the challenge is on there's no quitting.\"\n )}\n \n

\n \n\n \n \n {t(\"joinPublic.classic.title\", \"Classic scoring\")}\n \n

\n {t(\n \"joinPublic.classic.p1\",\n \"In a league with classic scoring, teams are ranked based on their total points in the game. You can join or leave a league with classic scoring at any point during the season\"\n )}\n

\n \n \n \n {t(\"joinPublic.h2H.button\", \"Head-to-Head scoring\")}\n \n

\n {t(\n \"joinPublic.h2H.p1\",\n \"In a league with head-to-head scoring, every team plays a match against another team in the league each Round. The match result is based on the Round score of each team minus any transfer points spent preparing for the Round.\"\n )}\n

\n \n \n \n \n

\n \n );\n};\n\nexport { JoinPublic as JoinPublicTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n error: getJoinPublicLeagueError(state),\n settings: getSettings(state) as ISettings,\n});\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n joinPublicLeagueClassic: () => dispatch(joinPublicLeague({ scoring: \"c\" })),\n joinPublicLeagueH2H: () => dispatch(joinPublicLeague({ scoring: \"h\" })),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(JoinPublic);\n","import { Link } from \"@reach/router\";\nimport * as React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\n\ninterface IArrowProps {\n variant?: string;\n disabled?: boolean;\n justifyContent?: string;\n}\n\nconst ButtonLinkStyles = css`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n gap: ${({ theme }) => theme.space[1]};\n padding: ${({ theme }) => theme.space[3]};\n border: 0;\n border-radius: 4px;\n font-size: ${({ theme }) => theme.fontSizes[2]};\n background-color: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.green};\n text-decoration: none;\n\n ${(props) =>\n props.variant === \"secondary\" &&\n css`\n background: ${({ theme }) => theme.colors.green};\n color: ${({ theme }) => theme.colors.primary};\n text-transform: uppercase;\n `}\n ${(props) =>\n props.justifyContent === \"flexStart\" &&\n css`\n justify-content: flex-start;\n `}\n ${(props) =>\n props.justifyContent === \"flexEnd\" &&\n css`\n justify-content: flex-end;\n `};\n`;\n\nexport const ButtonHyperlink = styled.a`\n ${ButtonLinkStyles}\n`;\n\nconst StyledButtonLink = styled(Link)`\n ${ButtonLinkStyles}\n`;\n\nexport const ButtonLinkCenter = styled.span`\n flex: 1;\n text-align: center;\n`;\n\ninterface IProps {\n onClick?: () => void;\n to: string;\n children: React.ReactNode;\n variant?: string;\n disabled?: boolean;\n justifyContent?: string;\n}\n\ntype Props = IProps;\n\nconst ButtonLink: React.FC = ({\n children,\n onClick,\n to,\n variant = \"primary\",\n disabled = false,\n justifyContent,\n}) => (\n \n {children}\n \n);\n\nexport default ButtonLink;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { IEntryInLeague } from \"../../core/store/leagues/types\";\nimport { SelectField } from \"../FieldRenderers\";\nimport { SelectBox } from \"./Styles\";\n\ninterface IProps {\n entryId: number;\n handleFilterChange: (e: React.ChangeEvent) => void;\n leagueEntries: IEntryInLeague[];\n}\n\nconst H2HEntryFilter: React.FC = ({\n entryId,\n handleFilterChange,\n leagueEntries,\n}) => {\n const { t } = useTranslation();\n return (\n \n \n \n {leagueEntries\n .sort((a, b) => a.entry_name.localeCompare(b.entry_name))\n .map((e) => (\n \n ))}\n \n \n );\n};\n\nexport default H2HEntryFilter;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport { getEvents } from \"../../core/store/events/reducers\";\nimport { SelectField } from \"../FieldRenderers\";\nimport { SelectBox } from \"./Styles\";\n\ninterface IProps {\n eventId: number;\n handleFilterChange: (e: React.ChangeEvent) => void;\n startEvent: number | null;\n}\n\nconst H2HEventFilter: React.FC = ({\n eventId,\n handleFilterChange,\n startEvent,\n}) => {\n const { t } = useTranslation();\n const events = useSelector(getEvents);\n\n if (!startEvent) {\n return null;\n }\n return (\n \n \n \n {events\n .filter((e) => e.id >= startEvent)\n .map((e) => (\n \n ))}\n \n \n );\n};\n\nexport default H2HEventFilter;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCup(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 16,\n height: 14,\n viewBox: \"0 0 16 14\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13 2V0H3v2H0v2a3 3 0 0 0 3.9 2.862A5 5 0 0 0 7 8.899v3.1H6a2 2 0 0 0-2 2h8a2 2 0 0 0-2-2H9v-3.1a5.003 5.003 0 0 0 3.1-2.037A3 3 0 0 0 16 4V2h-3ZM3 5.813A1.815 1.815 0 0 1 1.187 4V3H3v1c0 .628.116 1.229.327 1.782-.106.019-.216.03-.327.03v.001ZM14.813 4a1.815 1.815 0 0 1-2.14 1.783A4.994 4.994 0 0 0 13 4.001v-1h1.813v1V4Z\",\n fill: \"currentColor\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCup);\nexport default __webpack_public_path__ + \"static/media/cup.57c1dacc.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport styled, { css } from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n getCurrentEvent,\n getEventsById,\n} from \"../../core/store/events/reducers\";\nimport { IH2HMatch } from \"../../core/store/leagues/types\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { ReactComponent as CupBase } from \"../../img/icons/cup.svg\";\nimport { getIdFromEventName } from \"../../utils/events\";\nimport Alert from \"../Alert\";\nimport Link from \"../Link\";\n\nconst CupWinner = styled.span`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst StyledCup = styled(CupBase)`\n color: #dbaf13;\n margin-inline-end: 0.6rem;\n`;\n\ninterface IStyledMatchRow {\n inProgress: boolean;\n mine: boolean;\n}\n\ninterface IMatchesScore {\n inProgress: boolean;\n}\n\nconst MatchesScore = styled.div`\n display: flex;\n border: 1px solid #efebf0;\n border-radius: ${({ theme }) => theme.radii[0]};\n background-color: white;\n color: ${({ theme }) => theme.colors.primary};\n\n ${(props) =>\n props.inProgress &&\n css`\n border: 0;\n background-color: ${({ theme }) => theme.colors.blueDarker2};\n color: white;\n\n td {\n > a {\n color: inherit;\n }\n }\n `}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 80%;\n margin: auto;\n }\n`;\n\nconst MatchesScoreTeam = styled.span`\n width: 50%;\n padding: 0.2rem;\n font-family: ${({ theme }) => theme.fonts.base};\n font-size: 1.3rem;\n line-height: 1;\n text-align: center;\n\n :first-child {\n border-right: 1px solid #e2e2e2;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding: ${({ theme }) => theme.space[1]};\n font-size: 1.8rem;\n }\n`;\n\nconst StyledStatusRow = styled.tr`\n td {\n padding-top: 0;\n border-top: 0 !important;\n }\n`;\n\nconst StyledMatchRow = styled.tr`\n ~ ${StyledStatusRow} td {\n border-top: 0;\n }\n\n ${(props) =>\n props.mine &&\n css`\n td {\n background-color: ${({ theme }) => theme.colors.primary};\n color: white;\n > a {\n color: inherit;\n }\n }\n `}\n`;\n\nconst MatchesEntryStyles = css`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n`;\n\nconst MatchesEntry1 = styled.td`\n ${MatchesEntryStyles}\n text-align: end;\n`;\n\nconst MatchesEntry2 = styled.td`\n ${MatchesEntryStyles}\n`;\n\nconst StatusCell = styled.td`\n white-space: normal;\n text-align: center;\n`;\n\nconst MatchesScoreWrap = styled.td`\n text-align: center;\n white-space: nowrap;\n`;\n\nconst ByeScore = styled.div`\n display: inline-block;\n padding: 0.3rem;\n background-color: ${({ theme }) => theme.colors.grey};\n color: white;\n font-family: ${({ theme }) => theme.fonts.base};\n font-size: ${({ theme }) => theme.fontSizes[0]};\n text-transform: uppercase;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n padding: 0.4rem 1.7rem;\n font-size: ${({ theme }) => theme.fontSizes[4]};\n }\n`;\n\nconst KONameRow = styled.tr`\n td {\n padding-bottom: 0;\n }\n + tr td {\n border-top: 0;\n }\n`;\n\nconst KONameCell = styled.td`\n text-align: center;\n`;\n\ninterface IStyledKONameCell {\n isFinal: boolean;\n}\n\nconst KOName = styled.span`\n font-size: 1.1rem;\n\n ${(props) =>\n props.isFinal &&\n css`\n font-family: ${({ theme }) => theme.fonts.base};\n `}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n font-size: 1.3rem;\n }\n`;\n\nconst WinnerStatus: React.FC<{ isCup: boolean; match: IH2HMatch }> = ({\n isCup,\n match,\n}) => {\n const { t } = useTranslation();\n const eventsById = useSelector(getEventsById);\n const cupEventNameId = match.event\n ? getIdFromEventName(eventsById[match.event].name)\n : 0;\n if (!match.winner) {\n return null;\n }\n const winnerName =\n match.winner === match.entry_1_entry\n ? match.entry_1_name\n : match.entry_2_name;\n\n return (\n <>\n {match.tiebreak && (\n \n \n {t(\"h2hMatch.tie\", \"Tie-break - {{winnerName}} progressed\", {\n winnerName: winnerName,\n })}{\" \"}\n {match.tiebreak === \"goals_scored\" &&\n t(\"h2hMatch.tie1\", \"on most goals scored\")}\n {match.tiebreak === \"goals_conceded\" &&\n t(\"h2hMatch.tie2\", \"on fewest goals conceded\")}\n {match.tiebreak === \"default\" &&\n t(\"h2hMatch.tie3\", \"by virtual coin toss\")}\n \n \n )}\n {isCup && cupEventNameId === 34 && (\n \n \n \n {winnerName}\n \n \n )}\n \n );\n};\n\nconst StatusRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n \n \n {children}\n \n);\n\ninterface IH2HMatchRow {\n selectedEntry: number;\n isCup: boolean;\n showEvent?: boolean;\n started?: boolean;\n match: IH2HMatch;\n isAllMine: boolean;\n}\n\nconst H2HMatch: React.FC = ({\n selectedEntry,\n showEvent = false,\n started = false,\n match,\n isAllMine = false,\n isCup,\n}) => {\n const { t } = useTranslation();\n const player = useSelector(getPlayerData);\n const now = useSelector(getCurrentEvent);\n const inProgress = now?.id === match.event && !match.winner ? true : false;\n const eventsById = useSelector(getEventsById);\n const cupEventNameId = useSelector((state: RootState) =>\n match.event ? getIdFromEventName(eventsById[match.event].name) : null\n );\n const cupEventNameIdMinus = cupEventNameId ? cupEventNameId - 1 : 0;\n\n return (\n <>\n {match.knockout_name ? (\n \n \n \n \n {match.knockout_name}\n \n \n \n ) : null}\n \n {showEvent && {cupEventNameId}}\n {/* Lots of duplication here but can't think of a clean way around it */}\n {selectedEntry === match.entry_2_entry ? (\n <>\n \n {match.entry_2_entry && started ? (\n \n {match.entry_2_name}\n
\n {match.entry_2_player_name}\n \n ) : (\n \n {match.entry_2_name}\n
\n {match.entry_2_player_name}\n \n )}\n \n \n {match.is_bye ? (\n {t(\"h2hEventFilter.score\", \"N/A\")}\n ) : (\n \n {started ? (\n <>\n \n {match.entry_2_points}\n \n \n {match.entry_1_points}\n \n \n ) : (\n <>\n -\n -\n \n )}\n \n )}\n \n \n {match.entry_1_entry ? (\n started ? (\n \n {match.entry_1_name}\n
\n {match.entry_1_player_name}\n \n ) : (\n \n {match.entry_1_name}\n
\n {match.entry_1_player_name}\n \n )\n ) : (\n <> \n )}\n \n \n ) : (\n <>\n \n {match.entry_1_entry && started ? (\n \n {match.entry_1_name}\n
\n {match.entry_1_player_name}\n \n ) : (\n \n {match.entry_1_name}\n
\n {match.entry_1_player_name}\n \n )}\n \n \n {match.is_bye ? (\n {t(\"h2hEventFilter.score2\", \"N/A\")}\n ) : (\n \n {started ? (\n <>\n \n {match.entry_1_points}\n \n \n {match.entry_2_points}\n \n \n ) : (\n <>\n -\n -\n \n )}\n \n )}\n \n \n {match.entry_2_entry ? (\n started ? (\n \n {match.entry_2_name}\n
\n {match.entry_2_player_name}\n \n ) : (\n \n {match.entry_2_name}\n
\n {match.entry_2_player_name}\n \n )\n ) : (\n <> \n )}\n \n \n )}\n \n {match.is_bye && (\n \n \n {t(\n \"h2hEventFilter.isbye\",\n \"{{matchEntry}} progressed with a bye due to their Round {{matchEvent}} score\",\n {\n matchEntry: match.entry_1_name,\n matchEvent: cupEventNameIdMinus,\n }\n )}\n \n \n )}\n {match.winner && }\n \n );\n};\n\nexport default H2HMatch;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { getCurrentEvent } from \"../../core/store/events/reducers\";\nimport { IH2HMatch } from \"../../core/store/leagues/types\";\nimport Table from \"../Table\";\nimport H2HMatch from \"./H2HMatch\";\n\nconst StyledMatchesTable = styled(Table)`\n table-layout: fixed;\n white-space: nowrap;\n\n /* Have to override Table td border to include tiebrake inside match border-bottom */\n td {\n border-top: 1px solid ${({ theme }) => theme.colors.grey};\n border-bottom: 0;\n }\n\n tr:last-child td {\n border-bottom: 1px solid ${({ theme }) => theme.colors.grey};\n }\n`;\n\nconst MatchesRoundColRound = styled.th`\n width: 10%;\n`;\n\nconst MatchesRoundColEntry = styled.th`\n width: 32%;\n`;\n\nconst MatchesRoundColEntry1 = styled.th`\n width: 32%;\n\n ${StyledMatchesTable} & {\n text-align: end;\n }\n`;\n\nexport const MatchesRoundColScore = styled.th`\n width: 21%;\n`;\n\ninterface IProps {\n selectedEntry: number;\n isCup?: boolean;\n isAllMine?: boolean;\n matches: IH2HMatch[] | null;\n}\n\nconst MatchesTable: React.FC = ({\n selectedEntry,\n isAllMine = false,\n isCup = false,\n matches,\n}) => {\n const { t } = useTranslation();\n const now = useSelector(getCurrentEvent);\n\n if (!matches) {\n return null;\n }\n\n return (\n \n \n \n \n {t(\"matchesTable.rd\", \"RD\")}\n \n \n {t(\"matchesTable.team1\", \"Team\")}\n \n \n \n {t(\"matchesTable.team2\", \"Team\")}\n \n \n \n \n {matches.map((m) => (\n \n ))}\n \n \n );\n};\n\nexport default MatchesTable;\n","import { RouteComponentProps, navigate } from \"@reach/router\";\nimport React, { useEffect } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { connect, useDispatch } from \"react-redux\";\nimport { Flex } from \"rebass\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport {\n getActiveEntryInLeague,\n getCode,\n} from \"../../core/store/leagues/reducers\";\nimport {\n fetchLeagueCode,\n joinPrivateLeague,\n setCode,\n} from \"../../core/store/leagues/thunks\";\nimport {\n IJoinPrivateLeagueData,\n ILeague,\n} from \"../../core/store/leagues/types\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { IPlayer } from \"../../core/store/player/types\";\nimport Button from \"../Button\";\nimport ButtonLink from \"../ButtonLink\";\nimport Title from \"../Title\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\n\nconst StyledHeader = styled.div`\n padding-inline-start: ${({ theme }) => theme.space[2]};\n padding-inline-end: ${({ theme }) => theme.space[2]};\n`;\n\nconst StyledFlex = styled(Flex)`\n flex-direction: column;\n gap: 2rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n flex-direction: row;\n }\n`;\n\nconst ButtonWrapper = styled.div``;\n\ntype OwnProps = RouteComponentProps<{\n type: string;\n league: ILeague | null;\n leagueNumber: number;\n}>;\n\ninterface IPropsFromState {\n entryInLeague: any | null;\n leagueNumber: number;\n code: string | null;\n player: IPlayer | null;\n}\n\ninterface IPropsFromDispatch {\n fetchCode: (leagueId: number) => void;\n joinPrivateLeague: (data: IJoinPrivateLeagueData) => void;\n}\n\ntype Props = OwnProps & IPropsFromState & IPropsFromDispatch;\n\nconst StandingsHeading: React.FC = ({\n code,\n player,\n fetchCode,\n league,\n leagueNumber,\n entryInLeague,\n}) => {\n const { t } = useTranslation();\n const isAdmin =\n entryInLeague &&\n entryInLeague.league &&\n entryInLeague.league.entry_can_admin;\n const isEntryInLeague = entryInLeague && entryInLeague.league;\n const reduxDispatch = useDispatch();\n\n useEffect(() => {\n if (\n !isEntryInLeague &&\n league &&\n league.code_privacy === \"a\" &&\n leagueNumber\n ) {\n fetchCode(leagueNumber);\n }\n }, [league, isAdmin, isEntryInLeague, leagueNumber, fetchCode]);\n\n let showInviteBtn = false;\n let showJoinBtn = false;\n\n if (league && !league.closed) {\n if (isAdmin) {\n showInviteBtn = true;\n } else {\n if (league) {\n if (isEntryInLeague) {\n if (league.code_privacy === \"a\") {\n showInviteBtn = true;\n }\n if (league.code_privacy === \"l\") {\n showInviteBtn = true;\n }\n }\n\n if (!isEntryInLeague) {\n if (league.code_privacy === \"a\") {\n showJoinBtn = true;\n }\n }\n }\n }\n }\n\n return (\n \n \n {league && league.name}\n \n {showInviteBtn && (\n \n {t(\n \"standingsHeading.inviteButton\",\n \"Invite people to join this league\"\n )}\n \n \n )}\n\n {code && showJoinBtn && (\n \n player && player.entry\n ? reduxDispatch(setCode(code))\n : navigate(`/leagues/auto-join/${code}`)\n }\n >\n {t(\"standingsHeading.joinButton\", \"Join this league\")}\n \n )}\n \n \n \n );\n};\n\nconst mapStateToProps = (\n state: RootState,\n ownProps: OwnProps\n): IPropsFromState => {\n const leagueNumber = ownProps.leagueNumber || 0;\n const entryInLeague = getActiveEntryInLeague(\n state,\n leagueNumber,\n ownProps.type === \"classic\" ? \"classic\" : \"h2h\"\n );\n\n return {\n leagueNumber,\n entryInLeague: entryInLeague,\n player: getPlayerData(state),\n code: leagueNumber ? getCode(state, leagueNumber) : null,\n };\n};\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n fetchCode: (leagueNumber: number) => dispatch(fetchLeagueCode(leagueNumber)),\n joinPrivateLeague: (data: IJoinPrivateLeagueData) => {\n dispatch(joinPrivateLeague(data));\n },\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(StandingsHeading);\n","import { navigate, RouteComponentProps } from \"@reach/router\";\nimport qs from \"qs\";\nimport React, { useEffect } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getEntry, getLeagueForEntry } from \"../../core/store/entries/reducers\";\nimport { fetchEntrySummary } from \"../../core/store/entries/thunks\";\nimport {\n getCurrentEvent,\n getEventsById,\n} from \"../../core/store/events/reducers\";\nimport {\n getClassicLeague,\n getH2HMatches,\n getLeagueCupStatus,\n getLeagueEntries,\n} from \"../../core/store/leagues/reducers\";\nimport {\n fetchClassicLeagueStandings,\n fetchH2HLeagueMatches,\n fetchLeagueCupStatus,\n fetchLeagueEntries,\n} from \"../../core/store/leagues/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { getIdFromEventName } from \"../../utils/events\";\nimport Alert from \"../Alert\";\nimport BoldLink from \"../BoldLink\";\nimport ButtonLink from \"../ButtonLink\";\nimport Copy from \"../Copy\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport { Pager, PagerItem, PagerItemNext } from \"../Pager\";\nimport SubHeading from \"../SubHeading\";\nimport H2HEntryFilter from \"./H2HEntryFilter\";\nimport H2HEventFilter from \"./H2HEventFilter\";\nimport MatchesTable from \"./MatchesTable\";\nimport StandingsHeading from \"./StandingsHeading\";\nimport { SelectWrap } from \"./Styles\";\nimport { getLeagueUrl } from \"./utils\";\n\ntype OwnProps = RouteComponentProps<{ leagueId: string }>;\n\nconst MatchesCup: React.FC = ({ location, leagueId }) => {\n const { t } = useTranslation();\n const leagueNumber = Number(leagueId!) || 0;\n const query = qs.parse(location!.search, {\n ignoreQueryPrefix: true,\n });\n const entryNumber = Number(query.entry) || 0;\n const eventNumber = Number(query.event) || 0;\n const pageMatches = Number(query.page_matches) || 1;\n\n const buildMatchesUrl = (\n leagueNumber: number,\n eventNumber: number,\n entryNumber: number,\n pageMatches: number\n ) => {\n let url = `/leagues/${leagueNumber}/cup?page_matches=${pageMatches}`;\n if (entryNumber) {\n url += `&entry=${entryNumber}`;\n }\n if (eventNumber) {\n url += `&event=${eventNumber}`;\n }\n return url;\n };\n\n const player = useSelector(getPlayerData);\n const eventsById = useSelector(getEventsById);\n\n const cupStatus = useSelector((state: RootState) =>\n leagueNumber ? getLeagueCupStatus(state, leagueNumber) : null\n );\n\n const entry = useSelector((state: RootState) =>\n entryNumber ? getEntry(state, entryNumber) : null\n );\n\n const leagueEntry = useSelector((state: RootState) =>\n entry ? getLeagueForEntry(state, entry.id, leagueNumber) : null\n );\n\n const myLeagueEntry = useSelector((state: RootState) =>\n player?.entry ? getLeagueForEntry(state, player.entry, leagueNumber) : null\n );\n\n const now = useSelector(getCurrentEvent);\n\n const league = useSelector((state: RootState) =>\n leagueNumber ? getClassicLeague(state, leagueNumber) : null\n );\n\n const matches = useSelector((state: RootState) =>\n cupStatus?.league\n ? getH2HMatches(\n state,\n cupStatus.league,\n entryNumber,\n eventNumber,\n pageMatches\n )\n : null\n );\n\n const leagueEntries = useSelector((state: RootState) =>\n cupStatus?.league ? getLeagueEntries(state, cupStatus.league) : null\n );\n\n const didNotQualify = leagueEntry && leagueEntry.cup_qualified === false;\n const notStarted = leagueEntry && leagueEntry.cup_qualified === null;\n // Event where we can show entries for large cups\n const largeCupEvent = 24;\n\n const reduxDispatch = useDispatch();\n\n // Can we fetch matches?\n const canFetchMatches = () => {\n if (!cupStatus) {\n return false;\n }\n // Asking for a specific entry is fine as long as qualified\n if (entryNumber) {\n return leagueEntry?.cup_qualified;\n }\n // Can always request a cup that isn't large\n if (!cupStatus.is_large) {\n return true;\n }\n // Asking for a late event in a large league is fine\n if (eventNumber >= largeCupEvent) {\n return true;\n }\n // We are able to show the current round or first round draw\n if (now && now.id >= largeCupEvent && cupStatus.qualification_event) {\n navigate(\n buildMatchesUrl(\n leagueNumber,\n Math.max(now.id, cupStatus.qualification_event + 1),\n 0,\n 1\n ),\n {\n replace: true,\n }\n );\n }\n // We are able to show the logged in entry. We are safe to use non null\n // assertion on player.entry if myLeagueEntry\n else if (myLeagueEntry && myLeagueEntry?.cup_qualified) {\n navigate(buildMatchesUrl(leagueNumber, 0, player!.entry!, 1), {\n replace: true,\n });\n }\n return false;\n };\n const fetchMatches = canFetchMatches();\n\n // API calls ...\n\n // This is currently the 'best' way to get a league which is needed by\n // child components for things like name\n useEffect(() => {\n leagueNumber &&\n !league &&\n reduxDispatch(fetchClassicLeagueStandings(leagueNumber, 1, 1, 1));\n }, [league, leagueNumber, reduxDispatch]);\n\n // Get any requested entry if different to the logged in entry as there\n // is a chance we won't have it\n useEffect(() => {\n entryNumber &&\n player?.entry !== entryNumber &&\n reduxDispatch(fetchEntrySummary(entryNumber));\n }, [entryNumber, player, reduxDispatch]);\n\n // Get the cup status for the parent league\n useEffect(() => {\n leagueNumber && reduxDispatch(fetchLeagueCupStatus(leagueNumber));\n }, [leagueNumber, reduxDispatch]);\n\n // Get a list of league entries for filtering. We need to know the cup\n // status before we can do this\n useEffect(() => {\n cupStatus &&\n cupStatus.league &&\n !cupStatus.is_large &&\n reduxDispatch(fetchLeagueEntries(cupStatus.league));\n }, [cupStatus, reduxDispatch]);\n\n const cupEventNameIdPlus = cupStatus?.qualification_event\n ? getIdFromEventName(eventsById[cupStatus.qualification_event + 1].name)\n : 0;\n\n // Get the list of matches.\n useEffect(() => {\n cupStatus &&\n cupStatus.league &&\n fetchMatches &&\n reduxDispatch(\n fetchH2HLeagueMatches(\n cupStatus.league,\n entryNumber,\n eventNumber,\n pageMatches\n )\n );\n }, [\n cupStatus,\n fetchMatches,\n entryNumber,\n eventNumber,\n pageMatches,\n reduxDispatch,\n ]);\n\n // We are still waiting for required data so delay rendering ...\n if (!cupStatus || !now || !league || (entryNumber && !entry)) {\n return null;\n }\n\n const cupStartText =\n now.id === cupStatus.qualification_event\n ? t(\"matchesCup.willStart\", \"will start\")\n : t(\"matchesCup.started\", \"started\");\n\n // This function wil be called if there are no matches, it attempts to\n // work out why!\n const getNoMatchesMessage = () => {\n if (eventNumber && eventNumber > now.id) {\n return t(\n \"matchesCup.cupMatches.end\",\n \"Cup matches for round {{ eventNumber }} will be available at the end of round {{eventNumberMinus}}\",\n {\n eventNumber: eventNumber,\n eventNumberMinus: eventNumber - 1,\n }\n );\n }\n if (cupStatus.is_large && now.id < largeCupEvent) {\n return t(\n \"matchesCup.cupMatches.after\",\n \"Cup matches will be available after round {{largeCupEvent}}\",\n {\n largeCupEvent: largeCupEvent,\n }\n );\n }\n if (notStarted || cupStatus.qualification_event === now.id) {\n return t(\n \"matchesCup.cupMatches.draw\",\n \"The draw for the first round is yet to be made\"\n );\n }\n if (entryNumber && eventNumber) {\n return t(\n \"matchesCup.cupMatches.eliminated\",\n \"This team has been eliminated\"\n );\n }\n return \"\";\n };\n\n const handleEntryFilterChange = (e: React.ChangeEvent) =>\n navigate(\n buildMatchesUrl(\n leagueNumber,\n eventNumber,\n Number(e.currentTarget.value),\n 1\n )\n );\n\n const handleEventFilterChange = (e: React.ChangeEvent) => {\n if (e.currentTarget.value) {\n return navigate(\n buildMatchesUrl(\n leagueNumber,\n Number(e.currentTarget.value),\n entryNumber,\n 1\n )\n );\n }\n return navigate(buildMatchesUrl(leagueNumber, 0, entryNumber, 1));\n };\n\n return (\n \n

\n \n \n \n {t(\"matchesCup.leagueLink\", \"View league standings\")}\n \n \n {didNotQualify ? (\n \n \n {t(\"matchesCup.notQf\", \"This team did not qualify for the cup.\")}{\" \"}\n \n {t(\"matchesCup.viewMatches\", \"View cup matches\")}\n \n \n \n ) : (\n <>\n \n {!cupStatus.is_large && leagueEntries && (\n \n )}\n {cupStatus.qualification_event &&\n cupEventNameIdPlus &&\n !notStarted &&\n (!cupStatus.is_large || now.id >= largeCupEvent) && (\n \n )}\n \n {matches && matches.results.length ? (\n \n ) : (\n \n {getNoMatchesMessage()}\n \n )}\n \n )}\n {cupStatus.qualification_event && (\n \n {t(\n \"matchesCup.cupStart\",\n \"The cup {{ cupStartText }} in RD {{cupStatus}}\",\n {\n cupStartText: cupStartText,\n cupStatus: cupEventNameIdPlus,\n }\n )}\n \n )}\n \n \n {t(\"matchesCup.how\", \"How the cup works\")}\n

\n {t(\n \"matchesCup.explain1\",\n \"Each qualifying team will be randomly drawn against another in the first round. The winner (the team with the highest Round score minus any transfer points), will progress to the second round and another random draw, the losers are out! This process continues until the final round when the two remaining teams contest the cup final.\"\n )}\n

\n {t(\n \"matchesCup.explain2\",\n \"If a cup match is drawn, then the following tie-breaks will be applied until a winner is found:\"\n )}\n

\n {t(\"matchesCup.explain3\", \"Most goals scored in the Round\")}\n
\n {t(\"matchesCup.explain4\", \"Fewest goals conceded in the Round\")}\n
{t(\"matchesCup.explain5\", \"Virtual coin toss\")}

\n \n \n {matches && (\n \n \n \n {pageMatches > 1 && (\n \n {t(\"matchesCup.previews\", \"Previous\")}\n \n )}\n \n \n {matches.has_next && (\n \n {t(\"matchesCup.next\", \"Next\")}\n \n )}\n \n \n \n )}\n

\n \n <>\n \n \n );\n};\n\nexport default MatchesCup;\n","import { Link } from \"@reach/router\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\n\nconst NavList = styled.ul`\n margin: ${({ theme }) => theme.space[2]};\n display: flex;\n background-color: ${({ theme }) => theme.colors.primary};\n border: 2px solid ${({ theme }) => theme.colors.primary};\n border-radius: 3px;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n margin-inline-end: 20%;\n margin-inline-start: 20%;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[5]}) {\n margin-inline-end: 30%;\n margin-inline-start: 30%;\n }\n`;\n\nconst NavItem = styled.li`\n flex: 1;\n :not(:last-child) {\n border-right: 2px solid white;\n }\n`;\n\n// TODO - This stops isCurrent being passed to Link but doesn't have\n// any type checking\nconst NavLink = styled(({ isCurrent, ...rest }) => )`\n display: block;\n padding: ${({ theme }) => theme.space[2]};\n color: white;\n font-family: ${({ theme }) => theme.fonts.bold};\n text-decoration: none;\n text-align: center;\n\n ${(props) =>\n props.isCurrent &&\n css`\n background-color: white;\n color: ${({ theme }) => theme.colors.black};\n `}\n`;\n\ninterface IProps {\n defaultEntry?: number;\n leagueId: number;\n eventId: number;\n}\n\nconst H2HNav: React.FC = ({ eventId, leagueId, defaultEntry }) => {\n const defaultEntryParam = defaultEntry ? `default_entry=${defaultEntry}` : \"\";\n const links = [\n {\n href: `/leagues/${leagueId}/matches/h`,\n qs: `?event=${eventId}` + (defaultEntryParam && `&${defaultEntryParam}`),\n text: \"Matches\",\n },\n {\n href: `/leagues/${leagueId}/standings/h`,\n qs: defaultEntryParam && `?${defaultEntryParam}`,\n text: \"Standings\",\n },\n ];\n return (\n \n );\n};\n\nexport default H2HNav;\n","import { navigate, RouteComponentProps, useLocation } from \"@reach/router\";\nimport qs from \"qs\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { RootState } from \"../../core/store\";\nimport { getCurrentEvent } from \"../../core/store/events/reducers\";\nimport {\n getActiveEntryInLeague,\n getH2HLeague,\n getH2HMatches,\n getH2HNewEntries,\n getH2HStandings,\n getLeagueEntries,\n getLeagueEntriesError,\n} from \"../../core/store/leagues/reducers\";\nimport {\n fetchH2HLeagueMatches,\n fetchH2HLeagueStandings,\n fetchLeagueEntries,\n} from \"../../core/store/leagues/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport Alert from \"../Alert\";\nimport ButtonLink from \"../ButtonLink\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport { Pager, PagerItem, PagerItemNext } from \"../Pager\";\nimport H2HEntryFilter from \"./H2HEntryFilter\";\nimport H2HEventFilter from \"./H2HEventFilter\";\nimport H2HNav from \"./H2HNav\";\nimport MatchesTable from \"./MatchesTable\";\nimport StandingsHeading from \"./StandingsHeading\";\nimport { SelectWrap } from \"./Styles\";\n\ntype Props = RouteComponentProps<{\n leagueId: string;\n}> &\n WithTranslation;\n\nconst MatchesH2H: React.FC = ({ leagueId, t }) => {\n const dispatch = useDispatch();\n const location = useLocation();\n\n // Get league id from path\n const leagueNumber = parseInt(leagueId!, 10) || 0;\n // Get entry id from query string\n const query = qs.parse(location.search, {\n ignoreQueryPrefix: true,\n });\n\n const defaultEntryNumber = parseInt(query.default_entry as string, 10) || 0;\n const entryNumber = parseInt(query.entry as string, 10) || 0;\n const now = useSelector(getCurrentEvent);\n const eventNumber = query.event\n ? parseInt(query.event as string, 10)\n : now?.id || 0;\n const pageMatches = parseInt(query.page_matches as string, 10) || 1;\n const isPlayerInLeague = Boolean(\n useSelector((state: RootState) =>\n getActiveEntryInLeague(state, leagueNumber, \"h2h\")\n )\n );\n const league = useSelector((state: RootState) =>\n getH2HLeague(state, leagueNumber)\n );\n const leagueEntries = useSelector((state: RootState) =>\n getLeagueEntries(state, leagueNumber)\n );\n const leagueEntriesError = useSelector((state: RootState) =>\n getLeagueEntriesError(state, leagueNumber)\n );\n const matches = useSelector((state: RootState) =>\n leagueNumber\n ? getH2HMatches(\n state,\n leagueNumber,\n entryNumber,\n eventNumber,\n pageMatches\n )\n : null\n );\n const newEntries = useSelector((state: RootState) =>\n getH2HNewEntries(state, leagueNumber, 1)\n );\n const player = useSelector(getPlayerData);\n const standings = useSelector((state: RootState) =>\n getH2HStandings(state, leagueNumber, 1)\n );\n\n const isLargeLeague = useMemo(() => {\n return (\n leagueEntriesError?.badRequest?.non_field_errors[0]?.code ===\n \"large_leagues_forbidden\"\n );\n }, [leagueEntriesError]);\n\n const buildMatchesUrl = useCallback(\n (\n leagueNumber: number,\n eventNumber: number,\n entryNumber: number,\n pageMatches: number\n ) => {\n let url = `/leagues/${leagueNumber}/matches/h?page_matches=${pageMatches}`;\n if (entryNumber) url += `&entry=${entryNumber}`;\n if (now?.id && eventNumber !== now.id) url += `&event=${eventNumber}`;\n return url;\n },\n [now]\n );\n\n useEffect(() => {\n if (leagueNumber) {\n // Have to fetch standings to get league\n dispatch(fetchH2HLeagueStandings(leagueNumber, 1, 1));\n // We could look at delaying these calls as they are pointless for\n // unstarted h2h leagues at the cost of some complexity as we may have\n // to wait for league to be available. As a 'good enough' we don't do\n // them before the season starts ...\n if (now) {\n dispatch(fetchLeagueEntries(leagueNumber));\n dispatch(\n fetchH2HLeagueMatches(\n leagueNumber,\n entryNumber,\n eventNumber,\n pageMatches\n )\n );\n }\n }\n }, [leagueNumber, now, entryNumber, eventNumber, pageMatches, dispatch]);\n\n useEffect(() => {\n if (isLargeLeague) {\n // As isPlayerInLeague we must have a player and an entry\n const showEntry =\n defaultEntryNumber || (isPlayerInLeague ? player!.entry! : 0);\n navigate(buildMatchesUrl(leagueNumber, 0, showEntry, pageMatches), {\n replace: true,\n });\n }\n }, [\n isLargeLeague,\n leagueEntriesError,\n defaultEntryNumber,\n isPlayerInLeague,\n player,\n leagueNumber,\n pageMatches,\n buildMatchesUrl,\n ]);\n\n const handleEntryFilterChange = (e: React.ChangeEvent) =>\n navigate(\n buildMatchesUrl(\n leagueNumber,\n eventNumber,\n parseInt(e.currentTarget.value, 10),\n 1\n )\n );\n\n const handleEventFilterChange = (e: React.ChangeEvent) =>\n navigate(\n buildMatchesUrl(\n leagueNumber,\n parseInt(e.currentTarget.value, 10),\n entryNumber,\n 1\n )\n );\n\n if (!league || !newEntries) {\n return null;\n }\n // If we have new entries then switch to dedicated page\n if (!now || newEntries.results.length) {\n navigate(`/leagues/${league.id}/new-entries/h`, { replace: true });\n }\n if (!matches) {\n return null;\n }\n // Handle the edge case between rollover and matches being created ...\n if (\n now &&\n now.id === league.start_event &&\n standings &&\n !standings.results.length\n ) {\n return (\n \n

\n \n \n

\n {t(\n \"matchesH2h.explain1\",\n \"Matches are currently being generated, please check back later.\"\n )}\n

\n \n

\n \n );\n }\n\n return (\n \n

\n \n \n <>\n {now && (\n \n )}\n {leagueEntries && (\n \n \n \n \n )}\n {isLargeLeague && (\n \n \n {t(\n \"matchesH2h.explain2\",\n \"In head-to-head leagues with more than 512 teams only matches for a single team can be viewed.\"\n )}\n \n \n )}\n {now && (\n \n )}\n \n \n \n {pageMatches > 1 && (\n \n {t(\"matchesH2h.previews\", \"Previous\")}\n \n )}\n \n \n {matches.has_next && (\n \n {t(\"matchesH2h.next\", \"Next\")}\n \n )}\n \n \n \n \n \n

\n \n <>\n \n \n );\n};\n\nexport default withTranslation()(MatchesH2H);\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n getCupMatchesByLeagueId,\n getEntry,\n} from \"../../core/store/entries/reducers\";\nimport {\n CupMatchesByLeagueId,\n ILeagueEntry,\n} from \"../../core/store/entries/types\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport Panel from \"../Panel\";\nimport Table from \"../Table\";\nimport { VisuallyHidden } from \"../Utils\";\nimport CupTypeRow from \"./CupTypeRow\";\n\nconst CupCol = styled.th`\n width: 56%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 72%;\n }\n`;\n\nconst RoundCol = styled.th`\n width: 22%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 12%;\n }\n`;\n\nconst StatusCol = styled.th`\n width: 22%;\n text-align: center;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 16%;\n }\n`;\n\nconst MyCupsTable = styled(Table)`\n table-layout: fixed;\n\n th,\n td {\n padding-inline-start: 0.5rem;\n padding-inline-end: 0.5rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding-inline-start: 1rem;\n padding-inline-end: 1rem;\n }\n }\n\n /* Have to do this because of Table td specificity */\n ${StatusCol} {\n text-align: center;\n }\n`;\n\ninterface IProps {\n leagues: ILeagueEntry[] | null;\n title: string;\n}\n\nconst CupTypeTable: React.FC = ({ leagues, title }) => {\n const { t } = useTranslation();\n const player = useSelector(getPlayerData);\n const entry = useSelector((state: RootState) =>\n player?.entry ? getEntry(state, player.entry) : null\n );\n\n const cupMatches: CupMatchesByLeagueId | null = useSelector(\n (state: RootState) =>\n entry ? getCupMatchesByLeagueId(state, entry.id) : null\n );\n\n if (!leagues || !entry) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n {t(\"cupTypeTable.cup\", \"Cup\")}\n \n \n {t(\"cupTypeTable.round\", \"Round\")}\n \n \n \n \n {t(\"cupTypeTable.status\", \"Status\")}\n \n \n \n \n \n {leagues.map((l) => (\n \n ))}\n \n \n \n \n );\n};\n\nexport default CupTypeTable;\n","import { Link } from \"@reach/router\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\n\nconst NavList = styled.ul`\n display: flex;\n margin: ${({ theme }) => theme.space[2]};\n padding-inline-start: 0;\n padding: 0.2rem;\n border: 2px solid ${({ theme }) => theme.colors.blue};\n border-radius: 3px;\n background-color: ${({ theme }) => theme.colors.white};\n list-style-type: none;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n margin-inline-end: 20%;\n margin-inline-start: 20%;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[5]}) {\n margin-inline-end: 30%;\n margin-inline-start: 30%;\n }\n`;\n\nconst NavItem = styled.li`\n flex: 1;\n`;\n\n// TODO - This stops isCurrent being passed to Link but doesn't have\n// any type checking\nconst NavLink = styled(({ isCurrent, ...rest }) => )`\n display: block;\n padding: ${({ theme }) => theme.space[2]};\n color: ${({ theme }) => theme.colors.primary};\n font-size: 1.5rem;\n text-decoration: none;\n text-align: center;\n\n ${(props) =>\n props.isCurrent &&\n css`\n border-radius: ${({ theme }) => theme.radii[0]};\n background-color: ${({ theme }) => theme.colors.blue};\n color: ${({ theme }) => theme.colors.white};\n font-weight: bold;\n `}\n`;\n\ninterface ILinks {\n href: string;\n text: string;\n}\n\ninterface ISubNav {\n links: ILinks[];\n}\n\nconst SubNav: React.FC = ({ links }) => (\n \n);\n\nexport default SubNav;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport SubNav from \"../SubNav\";\n\nconst LeaguesNav: React.FC = () => {\n const { t } = useTranslation();\n const links = [\n { href: \"/leagues\", text: t(\"leaguesNav.news\", \"Leagues\") },\n { href: \"/leagues/cups\", text: t(\"leaguesNav.cups\", \"Cups\") },\n ];\n return ;\n};\n\nexport default LeaguesNav;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n getEntry,\n getPrivateClassicCupLeaguesForEntry,\n getPublicClassicCupLeaguesForEntry,\n getSystemClassicCupLeaguesForEntry,\n} from \"../../core/store/entries/reducers\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport ButtonLink from \"../ButtonLink\";\nimport Copy from \"../Copy\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\nimport CupTypeTable from \"./CupTypeTable\";\nimport LeaguesNav from \"./LeaguesNav\";\nimport {\n getBroadcasterLeagues,\n getFilteredSystemClassicLeagues,\n} from \"./utils\";\n\nconst NavContainer = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n width: calc(100% / 3 * 2);\n }\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: calc(100% / 4 * 3);\n }\n`;\n\nconst ButtonWrap = styled(Box)`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n width: 50%;\n }\n`;\n\nconst MyCups: React.FC = () => {\n const player = useSelector(getPlayerData);\n const entry = useSelector((state: RootState) =>\n player?.entry ? getEntry(state, player.entry) : null\n );\n const privateClassicLeagues = useSelector((state: RootState) =>\n entry ? getPrivateClassicCupLeaguesForEntry(state, entry.id) : []\n );\n const publicClassicLeagues = useSelector((state: RootState) =>\n entry ? getPublicClassicCupLeaguesForEntry(state, entry.id) : []\n );\n const systemClassicLeagues = useSelector((state: RootState) =>\n entry ? getSystemClassicCupLeaguesForEntry(state, entry.id) : []\n );\n\n const { t } = useTranslation();\n\n if (!entry) {\n return null;\n }\n\n const hasCupLeagues =\n privateClassicLeagues.length > 0 ||\n publicClassicLeagues.length > 0 ||\n systemClassicLeagues.length > 0;\n\n const broadcasterLeagues = getBroadcasterLeagues(systemClassicLeagues);\n const filteredSystemClassicLeagues = getFilteredSystemClassicLeagues(\n systemClassicLeagues,\n broadcasterLeagues\n );\n\n return (\n <>\n \n \n \n {t(\"myCups.title\", \"Leagues & Cups - {{ entryName }}\", {\n entryName: entry.name,\n })}\n \n \n \n \n \n \n \n

\n {hasCupLeagues ? (\n <>\n {privateClassicLeagues.length > 0 && (\n \n \n \n )}\n {publicClassicLeagues.length > 0 && (\n \n \n \n )}\n {filteredSystemClassicLeagues.length > 0 && (\n \n \n \n )}\n {broadcasterLeagues.length > 0 && (\n \n \n \n )}\n \n ) : (\n \n

\n {t(\"myCups.noCups\", \"None of your leagues have a cup yet.\")}\n

\n \n \n \n {t(\"myCups.button\", \"Create and Join New Leagues & Cups\")}\n \n \n \n \n \n )}\n

\n \n \n \n );\n};\n\nexport default MyCups;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCog(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M24,10.295858 L24,13.7651471 C24,13.8898242 23.9583351,14.0095008 23.8750052,14.124177 C23.7916753,14.2388532 23.6873464,14.3065255 23.5620182,14.3271939 L20.6711387,14.7652304 C20.473147,15.327944 20.2701554,15.8019835 20.0621641,16.1873489 C20.4268155,16.708059 20.9841257,17.4267856 21.7340944,18.3435286 C21.8380901,18.4682057 21.8900879,18.5985499 21.8900879,18.7345612 C21.8900879,18.8705725 21.8430899,18.9902492 21.7490938,19.0935911 C21.4677722,19.4789566 20.952127,20.0413368 20.2021582,20.7807317 C19.4521895,21.5201267 18.9625432,21.8898242 18.7332194,21.8898242 C18.608558,21.8898242 18.4732303,21.8428202 18.3272364,21.7488124 L16.1713262,20.0616718 C15.7126786,20.3010251 15.2386984,20.4990416 14.7493854,20.6557213 C14.5827257,22.072506 14.431732,23.0412534 14.2964043,23.5619635 C14.2237407,23.8539878 14.0364151,24 13.7344277,24 L10.2655723,24 C10.1195784,24 9.991917,23.955663 9.88258823,23.8669889 C9.77325945,23.7783149 9.71326195,23.6663055 9.70259573,23.5309609 L9.26461397,20.6557213 C8.75396858,20.4890408 8.28532144,20.296358 7.85867256,20.0776731 L5.65576434,21.7498125 C5.55176868,21.8438203 5.42144077,21.8908242 5.26478063,21.8908242 C5.11878672,21.8908242 4.98845881,21.8334861 4.87379693,21.7188099 C3.56118495,20.5313776 2.70188742,19.6563047 2.29590434,19.0935911 C2.2232407,18.9895825 2.18690888,18.8699058 2.18690888,18.7345612 C2.18690888,18.6098842 2.22857381,18.4902075 2.31190367,18.3755313 C2.46789717,18.1568464 2.73355277,17.8104842 3.10887046,17.3364447 C3.48418816,16.8624052 3.76550977,16.4950413 3.9528353,16.2343529 C3.67151369,15.7136428 3.45785592,15.1979332 3.31186201,14.6872239 L0.452981126,14.2651888 C0.317653431,14.2445204 0.208324653,14.179515 0.124994792,14.0701725 C0.0416649306,13.9608301 0,13.8384865 0,13.7031419 L0,10.2338528 C0,10.1091758 0.0416649306,9.98949912 0.124994792,9.8748229 C0.208324653,9.76014668 0.307320528,9.69247437 0.421982417,9.67180598 L3.32786134,9.23376948 C3.47385526,8.7543962 3.6768468,8.27535628 3.93683597,7.79664972 C3.52018666,7.20260022 2.96287655,6.48387366 2.26490563,5.64047004 C2.16090996,5.51579298 2.10891213,5.39078257 2.10891213,5.26543879 C2.10891213,5.16143012 2.15591017,5.04175348 2.24990625,4.90640887 C2.52056164,4.53171098 3.03354027,3.97166431 3.78884213,3.22626886 C4.54414399,2.48087341 5.03645681,2.10850904 5.26578059,2.10917576 C5.40110829,2.10917576 5.53643598,2.1611801 5.67176368,2.26518877 L7.82767385,3.93732811 C8.2863214,3.69797483 8.76030165,3.49995833 9.2496146,3.34327861 C9.41627432,1.92649387 9.56726803,0.957746479 9.70259573,0.43703642 C9.77525936,0.145678807 9.96258489,0 10.2645723,0 L13.7334278,0 C13.8794217,0 14.007083,0.0443370281 14.1164118,0.133011084 C14.2257406,0.22168514 14.2857381,0.333694475 14.2964043,0.469039087 L14.7343861,3.34427869 C15.2450315,3.51095925 15.7136786,3.70364197 16.1403275,3.92232686 L18.359235,2.25018752 C18.4532311,2.15617968 18.5782259,2.10917576 18.7342194,2.10917576 C18.8695471,2.10917576 18.999875,2.1611801 19.1252031,2.26518877 C20.4691471,3.50462539 21.3284446,4.3900325 21.7030957,4.92141012 C21.7757593,5.0047504 21.8120912,5.11942662 21.8120912,5.26543879 C21.8120912,5.39011584 21.7704262,5.50979248 21.6870964,5.62446871 C21.5311029,5.8431536 21.2654473,6.18951579 20.8901296,6.6635553 C20.5148119,7.1375948 20.2334903,7.50495875 20.0461647,7.76564714 C20.3168201,8.2863572 20.5304779,8.79673306 20.687138,9.29677473 L23.5460189,9.73481123 C23.6813466,9.75547962 23.7906754,9.82048504 23.8740052,9.92982749 C23.9573351,10.0391699 23.999,10.1615135 23.999,10.2968581 L24,10.295858 Z M16,12 C16,10.896 15.6093333,9.95333333 14.828,9.172 C14.0466667,8.39066667 13.104,8 12,8 C10.896,8 9.95333333,8.39066667 9.172,9.172 C8.39066667,9.95333333 8,10.896 8,12 C8,13.104 8.39066667,14.0466667 9.172,14.828 C9.95333333,15.6093333 10.896,16 12,16 C13.104,16 14.0466667,15.6093333 14.828,14.828 C15.6093333,14.0466667 16,13.104 16,12 Z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCog);\nexport default __webpack_public_path__ + \"static/media/cog.47b424f1.svg\";\nexport { ForwardRef as ReactComponent };","import * as React from \"react\";\n\ninterface IDialogProps {\n render: (\n showDialog: boolean,\n handleHide: () => void,\n handleShow: () => void\n ) => React.ReactNode;\n}\n\ninterface IDialogState {\n readonly showDialog: boolean;\n}\n\nclass DialogManager extends React.Component {\n public readonly state: Readonly = { showDialog: false };\n\n public handleShow = () => {\n this.setState({ showDialog: true });\n };\n\n public handleHide = () => {\n this.setState({ showDialog: false });\n };\n\n public render() {\n return (\n <>\n {this.props.render(\n this.state.showDialog,\n this.handleShow,\n this.handleHide\n )}\n \n );\n }\n}\n\nexport default DialogManager;\n","import styled from \"styled-components/macro\";\n\nconst LinkButton = styled.button`\n display: inline-flex;\n align-items: center;\n padding: 0;\n border: 0;\n background-color: transparent;\n color: ${({ theme }) => theme.colors.blueDarker3};\n font-family: inherit;\n font-size: inherit;\n text-align: start;\n cursor: pointer;\n\n :hover {\n text-decoration: underline;\n }\n`;\n\nexport default LinkButton;\n","import { Link as RouterLink } from \"@reach/router\";\nimport { hideVisually, size } from \"polished\";\nimport React, { useEffect } from \"react\";\nimport {\n useTranslation,\n WithTranslation,\n withTranslation,\n} from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n getEntry,\n getPrivateClassicLeaguesForEntry,\n getPrivateH2HLeaguesForEntry,\n getPublicClassicLeaguesForEntry,\n getPublicH2HLeaguesForEntry,\n getSystemClassicLeaguesForEntry,\n} from \"../../core/store/entries/reducers\";\nimport { fetchEntrySummary } from \"../../core/store/entries/thunks\";\nimport { ILeagueEntry } from \"../../core/store/entries/types\";\nimport { leaveLeague } from \"../../core/store/leagues/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { ILoggedInPlayer } from \"../../core/store/player/types\";\nimport { ReactComponent as BaseCog } from \"../../img/icons/cog.svg\";\nimport Button from \"../Button\";\nimport Dialog, { DialogButtonItem } from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport DialogManager from \"../DialogManager\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Link from \"../Link\";\nimport LinkButton from \"../LinkButton\";\nimport Panel from \"../Panel\";\nimport SubHeading from \"../SubHeading\";\nimport Table from \"../Table\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\nimport LeaguesNav from \"./LeaguesNav\";\nimport Movement from \"./Movement\";\n\nconst ActionBar = styled.ul`\n list-style-type: none;\n padding: 0;\n margin: 0;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n display: flex;\n flex-direction: row-reverse; // remove when we reinstate the Renew Leagues btn (#4850)\n }\n`;\n\nconst ActionBarItem = styled.li`\n padding: ${({ theme }) => theme.space[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n flex: 1;\n }\n`;\n\nconst ActionList = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: center;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n margin: 0 auto;\n }\n`;\n\nconst MyLeaguesTable = styled(Table)`\n table-layout: fixed;\n\n th,\n td {\n padding-inline-start: 0.5rem;\n padding-inline-end: 0.5rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding-inline-start: 1rem;\n padding-inline-end: 1rem;\n }\n }\n`;\n\nconst LeagueCol = styled.th`\n width: 40%;\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 36%;\n }\n`;\n\nconst MovementCol = styled.th`\n width: 8%;\n`;\n\nconst RankCol = styled.th`\n width: 24%;\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 18%;\n }\n`;\n\nconst OptionsCol = styled.th`\n width: 10%;\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: 20%;\n }\n`;\n\nconst MenuCopy = styled.span`\n margin-inline-start: ${({ theme }) => theme.space[1]};\n\n @media (max-width: ${({ theme }) => theme.breakpoints[2]}) {\n ${hideVisually}\n }\n`;\n\nconst Cog = styled(BaseCog)`\n ${size(14)};\n`;\n\ntype Props = WithTranslation;\n\nconst MyLeagues: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n\n const player = useSelector(getPlayerData) as ILoggedInPlayer;\n const entry = useSelector((state: RootState) =>\n getEntry(state, player.entry)\n );\n const privateClassicLeagues = useSelector((state: RootState) =>\n getPrivateClassicLeaguesForEntry(state, player.entry)\n );\n const privateH2HLeagues = useSelector((state: RootState) =>\n getPrivateH2HLeaguesForEntry(state, player.entry)\n );\n const publicClassicLeagues = useSelector((state: RootState) =>\n getPublicClassicLeaguesForEntry(state, player.entry)\n );\n const publicH2HLeagues = useSelector((state: RootState) =>\n getPublicH2HLeaguesForEntry(state, player.entry)\n );\n const systemClassicLeagues = useSelector((state: RootState) =>\n getSystemClassicLeaguesForEntry(state, player.entry)\n );\n\n const leave = (leagueId: number) => {\n if (\n window.confirm(\n t(\n \"myLeagues.confirmLeave\",\n \"Are you sure you want to leave this league?\"\n )\n )\n ) {\n dispatch(leaveLeague(leagueId));\n }\n };\n\n useEffect(() => {\n dispatch(fetchEntrySummary(player.entry));\n }, [dispatch, player.entry]);\n\n if (!entry) {\n return null;\n }\n return (\n \n

\n \n \n \n \n \n {entry.name}\n \n \n \n \n }\n >\n {t(\n \"myLeagues.createJoinButton\",\n \"Create and join new leagues & cups\"\n )}\n \n \n\n \n }\n >\n {t(\"myLeagues.renewButton\", \"Renew your leagues\")}\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n );\n};\n\nexport { MyLeagues as MyLeaguesTest };\n\nexport default withTranslation()(MyLeagues);\n\ninterface ILeagueTypeTableProps {\n leagues: ILeagueEntry[];\n leave: (leagueId: number) => void;\n title: React.ReactNode;\n}\n\nconst LeagueTypeTable: React.FC = ({\n leagues,\n leave,\n title,\n}) => {\n const { t } = useTranslation();\n return (\n \n \n \n \n \n \n {t(\"myLeagues.th.league\", \"League\")}\n \n {t(\"myLeagues.th.currentRank\", \"Current Rank\")}\n {t(\"myLeagues.th.lastRank\", \"Last Rank\")}\n \n \n \n \n {leagues.map((l) => (\n \n \n \n {l.name}\n \n \n \n \n \n {l.entry_rank ? l.entry_rank.toLocaleString() : \"-\"}\n \n {l.entry_last_rank ? l.entry_last_rank.toLocaleString() : \"-\"}\n \n \n (\n <>\n \n \n \n {t(\"myLeagues.optionsLink\", \"Options\")}\n \n \n {showDialog && (\n \n )}\n \n )}\n />\n \n \n ))}\n \n \n \n \n );\n};\n\ninterface ILeagueMenuDialogProps {\n handleHide: () => void;\n leagueEntry: ILeagueEntry;\n leave: (leagueId: number) => void;\n}\n\nconst LeagueMenuDialog: React.FC = ({\n handleHide,\n leagueEntry,\n leave,\n}) => {\n const { t } = useTranslation();\n return (\n \n );\n};\n","import React, { useEffect } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box, Flex } from \"rebass/styled-components\";\nimport { getRenewableLeagues } from \"../../core/store/leagues/reducers\";\nimport {\n deleteRenewableLeague,\n fetchRenewableLeagues,\n renewRenewableLeague,\n} from \"../../core/store/leagues/thunks\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\n\ntype Props = WithTranslation;\n\nconst Renew: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n\n const leagues = useSelector(getRenewableLeagues);\n\n const destroy = async (id: number) => dispatch(deleteRenewableLeague(id));\n const renew = async (id: number) => dispatch(renewRenewableLeague(id));\n\n useEffect(() => {\n dispatch(fetchRenewableLeagues());\n }, [dispatch]);\n\n return (\n \n

\n \n {t(\"renew.title\", \"Renew your leagues\")}\n

\n {t(\n \"renew.p1\",\n \"Choose whether you wish to renew or delete last season's private leagues.\"\n )}\n

\n {t(\n \"renew.p2\",\n \"All players from last season will automatically be entered into the renewed league(s) when they join the game.\"\n )}\n

\n\n {leagues.length ? (\n

\n {l.name}\n \n \n \n \n \n \n \n \n

\n ) : (\n \n {t(\"renew.none\", \"You have no leagues to renew.\")}\n \n )}\n \n

\n \n );\n};\n\nexport { Renew as RenewTest };\n\nexport default withTranslation()(Renew);\n","import React from \"react\";\nimport { Helmet } from \"react-helmet\";\n\ninterface IProps {\n description: string;\n title: string;\n}\n\nconst HelmetHead: React.FC = ({ description, title }) => {\n return (\n \n {title}\n \n \n );\n};\n\nexport default HelmetHead;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport HelmetHead from \"../HelmetHead\";\n\nconst HelmetHeadLeagues: React.FC = () => {\n const { t } = useTranslation();\n return (\n <>\n \n \n );\n};\n\nexport default HelmetHeadLeagues;\n","import styled, { css } from \"styled-components/macro\";\n\ninterface IProps {\n mine: boolean;\n}\n\nconst StandingsRow = styled.tr`\n ${(props) =>\n props.mine &&\n css`\n td {\n background-color: ${({ theme }) => theme.colors.green};\n color: ${({ theme }) => theme.colors.primary};\n > a {\n color: ${({ theme }) => theme.colors.blue};\n }\n }\n `}\n`;\nexport default StandingsRow;\n","import { navigate, RouteComponentProps, useLocation } from \"@reach/router\";\nimport qs from \"qs\";\nimport React, { useEffect } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box, Flex } from \"rebass/styled-components\";\nimport styled from \"styled-components\";\nimport { RootState } from \"../../core/store\";\nimport {\n getCurrentEvent,\n getEventsById,\n} from \"../../core/store/events/reducers\";\nimport {\n getClassicLeague,\n getClassicNewEntries,\n getClassicStandings,\n} from \"../../core/store/leagues/reducers\";\nimport { fetchClassicLeagueStandings } from \"../../core/store/leagues/thunks\";\nimport { getStartedPhases } from \"../../core/store/phases/reducers\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { formatRawAsLocalI18n } from \"../../core/utils/datetime\";\nimport { dateLocales } from \"../../i18n\";\nimport Alert from \"../Alert\";\nimport BoldLink from \"../BoldLink\";\nimport ButtonLink from \"../ButtonLink\";\nimport { InlineSelectField } from \"../FieldRenderers\";\nimport { ControlArrowLeft, ControlArrowRight } from \"../icons/Arrows\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Link from \"../Link\";\nimport { Pager, PagerItem, PagerItemNext } from \"../Pager\";\nimport Panel from \"../Panel\";\nimport SubHeading from \"../SubHeading\";\nimport Table from \"../Table\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\nimport HelmetHeadLeagues from \"./HelmetHeadLeagues\";\nimport Movement from \"./Movement\";\nimport StandingsHeading from \"./StandingsHeading\";\nimport StandingsRow from \"./StandingsRow\";\nimport { getCupUrl } from \"./utils\";\n\nconst StyledBox = styled(Box)`\n margin-inline-end: 0.5rem;\n`;\n\ntype Props = RouteComponentProps<{ leagueId: string }> & WithTranslation;\n\nconst StandingsClassic: React.FC = ({ i18n, leagueId, t }) => {\n const dispatch = useDispatch();\n const location = useLocation();\n\n // Get league id from path\n const leagueNumber = parseInt(leagueId!, 10) || 0;\n\n // Get phase and page numbers from query string\n const query = qs.parse(location!.search, {\n ignoreQueryPrefix: true,\n });\n const pageNewEntries = parseInt(query.page_new_entries as string, 10) || 1;\n const pageStandings = parseInt(query.page_standings as string, 10) || 1;\n\n const now = useSelector(getCurrentEvent);\n const league = useSelector((state: RootState) =>\n getClassicLeague(state, leagueNumber)\n );\n const newEntries = useSelector((state: RootState) =>\n getClassicNewEntries(state, leagueNumber, pageNewEntries)\n );\n const phase = parseInt(query.phase as string, 10) || 1;\n const phases = useSelector(getStartedPhases);\n const player = useSelector(getPlayerData);\n const eventsById = useSelector(getEventsById);\n const standings = useSelector((state: RootState) =>\n getClassicStandings(state, leagueNumber, phase, pageStandings)\n );\n\n useEffect(() => {\n if (leagueNumber) {\n dispatch(\n fetchClassicLeagueStandings(\n leagueNumber,\n pageNewEntries,\n pageStandings,\n phase\n )\n );\n }\n }, [dispatch, leagueNumber, phase, pageNewEntries, pageStandings]);\n\n const buildLink = (\n phase: number,\n pageNewEntries: number,\n pageStandings: number\n ) => {\n return `/leagues/${\n league!.id\n }/standings/c?phase=${phase}&page_new_entries=${pageNewEntries}&page_standings=${pageStandings}`;\n };\n\n const handleChange = (e: React.FormEvent) =>\n navigate(buildLink(parseInt(e.currentTarget.value, 10), 1, 1));\n\n if (!league) {\n return null;\n }\n\n const started = now && league.start_event <= now.id;\n return (\n <>\n \n \n

\n \n {league.has_cup && (\n \n \n {league.cup_league\n ? t(\"standingClassic.matches\", \"View cup matches\")\n : t(\"standingClassic.info\", \"View cup info\")}\n \n \n )}\n {league.start_event > 1 && (\n \n \n {started\n ? t(\n \"standingClassic.started\",\n \"League scoring started in {{startEvent}}\",\n { startEvent: eventsById[league.start_event].name }\n )\n : t(\n \"standingClassic.starting\",\n \"League scoring will start in {{startEvent}}\",\n { startEvent: eventsById[league.start_event].name }\n )}\n \n \n )}\n \n \n {standings && standings.lastUpdatedData && (\n \n {t(\n \"standingClassic.lastUpdate\",\n \"Last updated: {{ lastUpdatedData }} (local time)\",\n {\n lastUpdatedData: formatRawAsLocalI18n(\n standings.lastUpdatedData,\n dateLocales[i18n.language]\n ),\n }\n )}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n {standings &&\n standings.results.map((ls) => (\n \n \n \n \n \n \n ))}\n \n

{t(\"standingClassic.rank\", \"Rank\")}	\n {t(\"standingClassic.team\", \"Team & Manager\")}\n	\n \n \n {t(\"standingClassic.rd\", \"RD\")}\n \n \n	\n \n \n {t(\"standingClassic.tot\", \"TOT\")}\n \n \n
\n \n {ls.rank}\n \n \n	\n {now ? (\n \n {ls.entry_name}\n \n ) : (\n {ls.entry_name}\n )}\n \n {ls.player_name}\n	{ls.event_total}	{ls.total}

\n \n \n {standings && (\n \n \n {pageStandings > 1 && (\n \n {t(\"standingClassic.previews\", \"Previous\")}\n \n )}\n \n \n {standings.has_next && (\n \n {t(\"standingClassic.next\", \"Next\")}\n \n )}\n \n \n )}\n {newEntries && newEntries.results.length > 0 && (\n <>\n \n \n {t(\"standingClassic.new\", \"New entries\")}\n \n \n \n \n \n \n \n \n \n \n \n \n {newEntries.results.map((ne) => (\n \n \n \n \n ))}\n \n

\n {t(\"standingClassic.team1\", \"Team\")}\n	\n {t(\"standingClassic.manager1\", \"Manager\")}\n
{ne.entry_name}	\n \n {ne.player_first_name} {ne.player_last_name}\n \n

\n \n \n \n \n {pageNewEntries > 1 && (\n \n \n {t(\"standingClassic.previews1\", \"Previous\")}\n \n )}\n \n \n {newEntries.has_next && (\n \n \n {t(\"standingClassic.next1\", \"Next\")}\n \n \n \n )}\n \n \n \n )}\n

\n \n <>\n \n \n \n );\n};\n\nexport { StandingsClassic as StandingClassicTest };\n\nexport default withTranslation()(StandingsClassic);\n","import { RouteComponentProps, useLocation } from \"@reach/router\";\nimport qs from \"qs\";\nimport React, { useEffect } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box, Flex } from \"rebass/styled-components\";\nimport { RootState } from \"../../core/store\";\nimport { getCurrentEvent } from \"../../core/store/events/reducers\";\nimport {\n getH2HLeague,\n getH2HStandings,\n} from \"../../core/store/leagues/reducers\";\nimport { fetchH2HLeagueStandings } from \"../../core/store/leagues/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport ButtonLink from \"../ButtonLink\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Link from \"../Link\";\nimport { Pager, PagerItem, PagerItemNext } from \"../Pager\";\nimport Panel from \"../Panel\";\nimport Table, { ScrollTable } from \"../Table\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\nimport { ControlArrowLeft, ControlArrowRight } from \"../icons/Arrows\";\nimport H2HNav from \"./H2HNav\";\nimport HelmetHeadLeagues from \"./HelmetHeadLeagues\";\nimport Movement from \"./Movement\";\nimport StandingsHeading from \"./StandingsHeading\";\nimport StandingsRow from \"./StandingsRow\";\n\ntype Props = RouteComponentProps<{ leagueId: string }> & WithTranslation;\n\nconst StandingsH2H: React.FC = ({ leagueId, t }) => {\n const dispatch = useDispatch();\n const location = useLocation();\n\n // Get league id from path\n const leagueNumber = parseInt(leagueId!, 10) || 0;\n // Get page numbers from query string\n const query = qs.parse(location!.search, {\n ignoreQueryPrefix: true,\n });\n\n const defaultEntryNumber = parseInt(query.default_entry as string, 10) || 0;\n const league = useSelector((state: RootState) =>\n getH2HLeague(state, leagueNumber)\n );\n\n const pageNewEntries = parseInt(query.page_new_entries as string, 10) || 1;\n const pageStandings = parseInt(query.page_standings as string, 10) || 1;\n const now = useSelector(getCurrentEvent);\n const player = useSelector(getPlayerData);\n const standings = useSelector((state: RootState) =>\n getH2HStandings(state, leagueNumber, pageStandings)\n );\n\n useEffect(() => {\n if (leagueNumber) {\n dispatch(\n fetchH2HLeagueStandings(leagueNumber, pageNewEntries, pageStandings)\n );\n }\n }, [dispatch, leagueNumber, pageNewEntries, pageStandings]);\n\n const buildLink = (pageStandings: number) => {\n return `/leagues/${league!.id}/standings/h?page_standings=${pageStandings}`;\n };\n\n if (!league) {\n return null;\n }\n return (\n \n \n

\n \n {standings && standings.results[0] && now && (\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {standings &&\n standings.results.map((ls) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

{t(\"standingH2h.rank\", \"Rank\")}	\n {t(\"standingH2h.team\", \"Team & Manager\")}\n	\n \n {t(\"standingH2h.win\", \"W\")}\n \n	\n \n \n {t(\"standingH2h.draw\", \"D\")}\n \n \n	\n \n \n {t(\"standingH2h.loose\", \"L\")}\n \n \n	{t(\"standingH2h.score\", \"Score\")}	\n \n \n {t(\"standingH2h.pts\", \"Pts\")}\n \n \n
\n \n {ls.rank}\n \n \n	\n {ls.entry ? (\n \n {ls.entry_name}\n \n ) : (\n {ls.entry_name}\n )}\n \n {ls.player_name}\n	{ls.matches_won}	{ls.matches_drawn}	{ls.matches_lost}	{ls.points_for}	{ls.total}

\n \n \n \n {standings && standings.results.length > 0 && (\n \n \n \n {pageStandings > 1 && (\n \n \n {t(\"standingH2h.previews\", \"Previous\")}\n \n )}\n \n \n {standings.has_next && (\n \n {t(\"standingH2h.next\", \"Next\")}\n \n \n )}\n \n \n \n )}\n

\n \n <>\n \n \n );\n};\n\nexport { StandingsH2H as StandingH2HTest };\n\nexport default withTranslation()(StandingsH2H);\n","import React from \"react\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { useSelector } from \"react-redux\";\nimport { Redirect, RouteComponentProps } from \"@reach/router\";\n\nconst LoggedIn: React.FC = () => {\n const player = useSelector(getPlayerData);\n if (!player) {\n return ;\n } else if (!player.entry) {\n return ;\n }\n return ;\n};\n\nexport default LoggedIn;\n","import { RouteComponentProps } from \"@reach/router\";\nimport React, { useEffect } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { logout } from \"../../core/store/player/thunks\";\nimport { getIsWebView } from \"../../utils/webView\";\n\nconst Logout: React.FC = () => {\n const dispatch = useDispatch();\n\n const handleLogout = async () => dispatch(logout());\n\n useEffect(() => {\n (async () => {\n if (getIsWebView()) {\n await handleLogout().then(() => window.location.replace(\"/?webview=1\"));\n } else {\n await handleLogout().then(() => window.location.replace(\"/\"));\n }\n })();\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n return

;\n};\n\nexport default Logout;\n","import { RouteComponentProps } from \"@reach/router\";\nimport React, { useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useDispatch } from \"react-redux\";\nimport { Box } from \"rebass\";\nimport { ThunkDispatch } from \"../../core/store\";\nimport { passwordReset } from \"../../core/store/player/thunks\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { InputField } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\n\nconst PasswordReset: React.FC = () => {\n const reduxDispatch = useDispatch();\n const { t } = useTranslation();\n const [email, setEmail] = useState(\"\");\n const [submitted, setSumbitted] = useState(false);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n try {\n await reduxDispatch(passwordReset({ email }));\n } catch (e) {\n return;\n }\n setSumbitted(true);\n }\n\n if (submitted) {\n return (\n \n

\n \n {t(\"passwordReset.sentTitle\", \"Password reset sent\")}\n \n \n

\n {t(\n \"passwordReset.sentExplain\",\n \"We've emailed you instructions for setting your password to the email address you submitted. You should receive it shortly.\"\n )}\n

\n \n

\n \n );\n }\n\n return (\n \n

\n \n {t(\"passwordReset.title\", \"Password reset\")}\n \n \n

\n {t(\n \"passwordReset.explain\",\n \"Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one.\"\n )}\n

\n \n \n

\n \n );\n};\n\nexport default PasswordReset;\n","import { RouteComponentProps } from \"@reach/router\";\nimport values from \"lodash/values\";\nimport React, { useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass\";\nimport { ThunkDispatch } from \"../../core/store\";\nimport { getPasswordSetError } from \"../../core/store/player/reducers\";\nimport { passwordSet } from \"../../core/store/player/thunks\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport ButtonLink from \"../ButtonLink\";\nimport Copy from \"../Copy\";\nimport { FieldFeedback, InputField } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\n\ninterface IErrors {\n newPassword1: string;\n newPassword2: string;\n}\n\nconst PasswordSet: React.FC<\n RouteComponentProps<{\n uidb64: string;\n token: string;\n }>\n> = ({ uidb64, token }) => {\n const passwordSetErrors = useSelector(getPasswordSetError);\n const reduxDispatch = useDispatch();\n const { t } = useTranslation();\n const [initialToken] = useState(token);\n const [newPassword1, setNewPassword1] = useState(\"\");\n const [newPassword2, setNewPassword2] = useState(\"\");\n const [submitted, setSumbitted] = useState(false);\n const [errors, setErrors] = useState({\n newPassword1: \"\",\n newPassword2: \"\",\n });\n\n if (submitted) {\n return (\n \n

\n \n \n {t(\"passwordReset.completeTitle\", \"Password reset sent\")}\n \n \n \n

\n {t(\n \"passwordReset.completeText\",\n \"Your password has been set. You may go ahead and log in now.\"\n )}\n

\n \n \n {t(\"passwordSet.completeLogin\", \"Log in\")}\n \n \n \n

\n \n );\n }\n\n if (!initialToken || !uidb64) {\n return (\n \n

\n \n \n {t(\"passwordReset.errorMissingTitle\", \"Error validating link\")}\n \n \n \n

\n {t(\n \"passwordReset.errorMissingText\",\n \"There was a problem with the password reset URL. Please try clicking the link again or cut and paste it from your email application.\"\n )}\n

\n \n

\n \n );\n }\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n try {\n await reduxDispatch(\n passwordSet({\n new_password1: newPassword1,\n new_password2: newPassword2,\n uidb64: uidb64 as string,\n token: initialToken as string,\n })\n );\n } catch (e) {\n return;\n }\n setSumbitted(true);\n }\n\n // Errors which can be picked up by the UI\n const validate = () => {\n const errors: IErrors = {\n newPassword1: \"\",\n newPassword2: \"\",\n };\n if (newPassword1.length <= 6) {\n errors.newPassword1 = t(\n \"passwordSet.hintPassword1\",\n \"Minimum 6 characters\"\n );\n }\n if (newPassword2.length && newPassword1 !== newPassword2) {\n errors.newPassword2 = t(\n \"passwordSet.errorMatch\",\n \"Please make sure the passwords match.\"\n );\n }\n setErrors(errors);\n };\n\n // Obvious errors should be picked up by the UI but just in case we should\n // show them. Better en errors than none ...\n const serverErrors =\n passwordSetErrors && passwordSetErrors.badRequest\n ? values(passwordSetErrors.badRequest).map((e) => e[0].message)\n : [];\n\n const disabled = newPassword1.length < 6 || newPassword1 !== newPassword2;\n\n return (\n \n

\n \n {t(\"passwordSet.title\", \"Enter new password\")}\n \n {serverErrors.length > 0 && (\n \n {values(serverErrors).map((r) => (\n

{r}

\n ))}\n \n )}\n \n

\n {t(\n \"passwordSet.explain\",\n \"Please enter your new password twice so we can verify you typed it in correctly.\"\n )}\n

\n \n \n

\n \n );\n};\n\nexport default PasswordSet;\n","import { createAsyncAction } from \"typesafe-actions\";\nimport { IError } from \"..\";\nimport { IRegion } from \"./types\";\n\n// Action Creators\nexport const addRegions = createAsyncAction(\n \"ADD_REGIONS_START\",\n \"ADD_REGIONS_SUCCESS\",\n \"ADD_REGIONS_FAILURE\"\n)();\n","import { combineReducers } from \"redux\";\nimport { getType } from \"typesafe-actions\";\nimport { RootAction, RootState } from \"../\";\nimport * as actions from \"./actions\";\nimport { IRegion, IState } from \"./types\";\n\n// State Reducer\nexport default combineReducers({\n byId: (state = {}, action: RootAction) => {\n switch (action.type) {\n case getType(actions.addRegions.success):\n const newState: { [key: string]: IRegion } = {};\n action.payload.forEach((team) => {\n newState[team.id] = team;\n });\n return newState;\n default:\n return state;\n }\n },\n});\n\n// State Selectors\nexport const getRegionsById = (state: RootState) => state.regions.byId;\n\nexport const getRegions = (state: RootState) =>\n Object.keys(state.regions.byId).map((r) => state.regions.byId[r]);\n","async function _fetch(url: string) {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n return await response.json();\n}\nexport interface IResidence {\n code: number;\n id: number;\n name: string;\n iso_code_short: string;\n iso_code_long: string;\n}\n\n// Residences\nexport async function fetchResidences(): Promise {\n const textUrl = \"api/residences/\";\n return _fetch(textUrl);\n}\n","import { navigate } from \"@reach/router\";\nimport React, { useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass\";\nimport { ThunkDispatch } from \"../../core/store\";\nimport { bootstrap } from \"../../core/store/bootstrap/thunks\";\nimport { getPasswordChangeError } from \"../../core/store/player/reducers\";\nimport { passwordChange } from \"../../core/store/player/thunks\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { FieldFeedback, InputField } from \"../FieldRenderers\";\nimport { Main } from \"../Layout\";\nimport Title from \"../Title\";\n\ninterface IErrors {\n oldPassword: string;\n password: string;\n}\n\nconst PasswordChange: React.FC = () => {\n const passwordChangeErrors = useSelector(getPasswordChangeError);\n const reduxDispatch = useDispatch();\n const { t } = useTranslation();\n const [oldPassword, setOldPassword] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [errors, setErrors] = useState({\n password: \"\",\n oldPassword: \"\",\n });\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n try {\n await reduxDispatch(\n passwordChange({\n old_password: oldPassword,\n password,\n })\n );\n } catch (e) {\n return;\n }\n await reduxDispatch(bootstrap());\n navigate(\"/\");\n }\n\n // Errors which can be picked up by the UI\n const validate = () => {\n if (password.length <= 6) {\n errors.password = t(\n \"passwordChange.hintPassword\",\n \"Minimum 6 characters\"\n );\n }\n setErrors(errors);\n };\n\n const disabled = password.length < 6 || !oldPassword.length;\n\n return (\n

\n \n {t(\"passwordChange.title\", \"Change password\")}\n \n {passwordChangeErrors && (\n \n {t(\"passwordChange.error\", \"Error updating password.\")}\n \n )}\n \n \n \n

\n );\n};\n\nexport default PasswordChange;\n","import { navigate, RouteComponentProps } from \"@reach/router\";\nimport range from \"lodash/range\";\nimport sortBy from \"lodash/sortBy\";\nimport values from \"lodash/values\";\nimport moment from \"moment\";\nimport React, { useEffect, useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { bootstrap } from \"../../core/store/bootstrap/thunks\";\nimport {\n getPlayerData,\n getPlayerUpdateError,\n getRegisterError,\n} from \"../../core/store/player/reducers\";\nimport { playerUpdate, register } from \"../../core/store/player/thunks\";\nimport { getRegions } from \"../../core/store/regions/reducers\";\nimport { fetchRegions } from \"../../core/store/regions/thunks\";\nimport { IPlayer } from \"../../types\";\n\nimport TagManager from \"@sooro-io/react-gtm-module\";\nimport { fetchResidences, IResidence } from \"../../utils/residence\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport {\n CheckboxField,\n FieldFeedback,\n InputField,\n RadioGroup,\n SelectField,\n} from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\nimport DeleteAccountBox from \"./DeleteAccountBox\";\nimport PasswordChange from \"./PasswordChange\";\n\nconst DOBFieldset = styled.fieldset`\n margin: 0;\n padding: 0;\n border: 0;\n`;\n\nconst DOBFieldsetInner = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-top: ${({ theme }) => theme.space[2]};\n margin-left: -${({ theme }) => theme.space[2]};\n margin-right: -${({ theme }) => theme.space[2]};\n }\n`;\n\nconst DOBLegend = styled.legend`\n display: block;\n padding: 0;\n margin-bottom: ${({ theme }) => theme.space[1]};\n color: ${({ theme }) => theme.colors.white};\n font-size: 1.5rem;\n font-weight: bold;\n cursor: pointer;\n`;\n\nconst DOBCol = styled.div`\n margin-top: ${({ theme }) => theme.space[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n width: calc(100% / 3);\n margin-top: 0;\n padding-left: ${({ theme }) => theme.space[2]};\n padding-right: ${({ theme }) => theme.space[2]};\n }\n`;\ninterface IState {\n email: string;\n firstName: string;\n lastName: string;\n password: string;\n errorEmail: string;\n errorFName: string;\n errorLName: string;\n errorPass: string;\n region: number;\n residences: any | null;\n residenceData: any | null;\n residenceCity: number | null;\n emailSPL: boolean;\n errorRegion: string;\n gender: string;\n errorGender: string;\n formDisabled: boolean;\n errorDob: string;\n birthDay: number;\n birthMonth: number;\n birthYear: number;\n}\n\ntype Props = RouteComponentProps & WithTranslation;\n\nconst Register: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n const player = useSelector(getPlayerData) as IPlayer | null;\n const registerError = useSelector(getRegisterError);\n const updateError = useSelector(getPlayerUpdateError);\n const regions = useSelector(getRegions);\n\n const doBootstrap = () => dispatch(bootstrap());\n const registerPlayer = (data: any) => dispatch(register(data));\n const updatePlayer = (data: any) => dispatch(playerUpdate(data));\n const fetchRegionData = () => dispatch(fetchRegions());\n\n const errorsTxt: { [key: string]: string } = {\n EDob: t(\"register.errors.dob\", \"Date of birth not valid\"),\n EEmail: t(\"register.errors.email\", \"An email is required\"),\n EFName: t(\"register.errors.fname\", \"First name is required\"),\n ELName: t(\"register.errors.lname\", \"Last name is required\"),\n EPass: t(\"register.errors.pass\", \"A password is required\"),\n EPassLength: t(\n \"register.errors.passLength\",\n \"Password too short, minimum 6 characters\"\n ),\n EValidEmail: t(\n \"register.errors.validEmail\",\n \"This Email address is already registered\"\n ),\n EValidPass: t(\"register.errors.validPass\", \"Password not valid\"),\n ERegion: t(\"register.errors.regionn\", \"Nationality is required\"),\n EGender: t(\"register.errors.gender\", \"A gender choice is required\"),\n EValidDob: t(\n \"register.errors.validDobn\",\n \"A correct date of birth is required\"\n ),\n };\n\n const months: { [key: string]: string } = {\n 1: t(\"months.janShort\", \"Jan\"),\n 2: t(\"months.febShort\", \"Feb\"),\n 3: t(\"months.marShort\", \"Mar\"),\n 4: t(\"months.aprShort\", \"Apr\"),\n 5: t(\"months.mayShort\", \"May\"),\n 6: t(\"months.junShort\", \"Jun\"),\n 7: t(\"months.julShort\", \"Jul\"),\n 8: t(\"months.augShort\", \"Aug\"),\n 9: t(\"months.sepShort\", \"Sep\"),\n 10: t(\"months.octShort\", \"Oct\"),\n 11: t(\"months.novShort\", \"Nov\"),\n 12: t(\"months.decShort\", \"Dec\"),\n };\n\n const [state, setState] = useState({\n birthDay:\n player && player.date_of_birth\n ? Number(player.date_of_birth.split(\"-\")[2])\n : 0,\n birthMonth:\n player && player.date_of_birth\n ? Number(player.date_of_birth.split(\"-\")[1])\n : 0,\n birthYear:\n player && player.date_of_birth\n ? Number(player.date_of_birth.split(\"-\")[0])\n : 0,\n email:\n player && player.email.indexOf(\"@ismfgsocial\") === -1 ? player.email : \"\",\n errorEmail: \"\",\n errorFName: \"\",\n errorLName: \"\",\n errorPass: \"\",\n firstName: player ? player.first_name : \"\",\n lastName: player ? player.last_name : \"\",\n password: \"\",\n emailSPL: player ? player.email_spl : false,\n errorRegion: \"\",\n region: player ? player.region : 0,\n residenceData: null,\n residences:\n player && player.residence && player.residence >= 240\n ? 185\n : player && player.residence && player.residence < 240\n ? player.residence\n : 0,\n residenceCity:\n player && player.residence && player.residence >= 240\n ? player.residence\n : null,\n gender: player ? player.gender : \"\",\n errorGender: \"\",\n formDisabled: false,\n errorDob: \"\",\n });\n\n const getMode = () => {\n if (!player) {\n return \"register\";\n }\n return player.dirty ? \"confirm\" : \"update\";\n };\n\n const getRequiredFields: () => Array = () => {\n switch (getMode()) {\n case \"register\":\n return [\n \"birthDay\",\n \"birthMonth\",\n \"birthYear\",\n \"email\",\n \"firstName\",\n \"lastName\",\n \"password\",\n \"region\",\n \"gender\",\n ];\n case \"confirm\":\n return [\n \"birthDay\",\n \"birthMonth\",\n \"birthYear\",\n \"email\",\n \"firstName\",\n \"lastName\",\n \"region\",\n \"gender\",\n ];\n case \"update\":\n return [\n \"birthDay\",\n \"birthMonth\",\n \"birthYear\",\n \"email\",\n \"firstName\",\n \"lastName\",\n \"gender\",\n \"region\",\n ];\n }\n };\n\n const apiDataFromState = () => {\n switch (getMode()) {\n case \"register\":\n return {\n date_of_birth: `${state.birthYear}-${state.birthMonth}-${state.birthDay}`,\n email: state.email,\n first_name: state.firstName,\n last_name: state.lastName,\n password: state.password,\n region: state.region,\n email_spl: state.emailSPL,\n gender: state.gender,\n residence:\n state.residenceCity && state.residenceCity > 0\n ? state.residenceCity\n : state.residences,\n };\n case \"confirm\":\n return {\n date_of_birth: `${state.birthYear}-${state.birthMonth}-${state.birthDay}`,\n email: state.email,\n first_name: state.firstName,\n last_name: state.lastName,\n region: state.region,\n email_spl: state.emailSPL,\n gender: state.gender,\n residence:\n state.residenceCity && state.residenceCity > 0\n ? state.residenceCity\n : state.residences,\n };\n case \"update\":\n return {\n date_of_birth: `${state.birthYear}-${state.birthMonth}-${state.birthDay}`,\n email: state.email,\n first_name: state.firstName,\n last_name: state.lastName,\n region: state.region,\n email_spl: state.emailSPL,\n gender: state.gender,\n residence:\n state.residenceCity && state.residenceCity > 0\n ? state.residenceCity\n : state.residences,\n };\n }\n };\n\n const handleBirthDayChange = (e: React.FormEvent) =>\n setState({\n ...state,\n birthDay: parseInt(e.currentTarget.value, 10),\n });\n\n const handleBirthMonthChange = (e: React.FormEvent) =>\n setState({\n ...state,\n birthMonth: parseInt(e.currentTarget.value, 10),\n });\n\n const handleBirthYearChange = (e: React.FormEvent) =>\n setState({\n ...state,\n birthYear: parseInt(e.currentTarget.value, 10),\n });\n\n const handleEmailChange = (e: React.FormEvent) =>\n setState({\n ...state,\n email: e.currentTarget.value,\n formDisabled: false,\n });\n\n const handleFirstNameChange = (e: React.FormEvent) =>\n setState({\n ...state,\n firstName: e.currentTarget.value,\n });\n\n const handleLastNameChange = (e: React.FormEvent) =>\n setState({\n ...state,\n lastName: e.currentTarget.value,\n });\n\n const handleGenderChange = (e: React.FormEvent) =>\n setState({\n ...state,\n gender: e.currentTarget.value,\n });\n\n const handlePasswordChange = (e: React.FormEvent) =>\n setState({\n ...state,\n password: e.currentTarget.value,\n formDisabled: false,\n });\n\n const handleRegionChange = (e: React.FormEvent) =>\n setState({\n ...state,\n region: parseInt(e.currentTarget.value, 10),\n });\n\n const handleemailSPLChange = (e: React.FormEvent) =>\n setState({\n ...state,\n emailSPL: e.currentTarget.checked ? true : false,\n });\n\n const handleResidenceChange = (e: React.FormEvent) => {\n setState({\n ...state,\n residences: parseInt(e.currentTarget.value, 10),\n });\n setState({\n ...state,\n residenceCity: 0,\n });\n };\n const handleResidenceCityChange = (e: React.FormEvent) =>\n setState({\n ...state,\n residenceCity: parseInt(e.currentTarget.value, 10),\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setState({ ...state, formDisabled: true });\n const mode = getMode();\n\n if (mode === \"register\") {\n try {\n registerPlayer(apiDataFromState());\n } catch (e) {\n window.scrollTo(0, 0); // To see error if failure ...\n return;\n }\n doBootstrap();\n TagManager.dataLayer({\n dataLayer: {\n event: \"sign_up\",\n user_email: state.email,\n first_name: state.firstName,\n last_name: state.lastName,\n region: state.region,\n gender: state.gender,\n RSL: true,\n },\n });\n navigate(\"/squad-selection\");\n } else if (mode === \"confirm\") {\n try {\n updatePlayer(apiDataFromState());\n } catch (e) {\n window.scrollTo(0, 0); // To see error if failure ...\n return;\n }\n doBootstrap();\n navigate(\"/squad-selection\");\n } else if (mode === \"update\") {\n try {\n updatePlayer(apiDataFromState());\n } catch (e) {\n window.scrollTo(0, 0); // To see error if failure ...\n return;\n }\n doBootstrap();\n // Maybe this should be back to my team, maybe our LoggedIn component\n navigate(\"/\");\n }\n setState({ ...state, formDisabled: false });\n };\n\n useEffect(() => {\n const fetchData = async () => {\n fetchRegionData();\n await fetchResidences().then((data) => {\n setState({ ...state, residenceData: data });\n });\n };\n\n fetchData();\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n const getSaudiRegions = () => {\n const regs = regions;\n const saudi = regs.filter((reg) => reg.code === 185);\n return sortBy(saudi, [\"name\"]);\n };\n\n const getIntRegions = () => {\n const regs = regions;\n const noSaudi = regs.filter((reg) => reg.code !== 185);\n return sortBy(noSaudi, [\"name\"]);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const getSaudiResidenceCities = () => {\n const regs = regions;\n const saudi = regs.filter((reg) => reg.code > 185);\n return sortBy(saudi, [\"name\"]);\n };\n\n const handleFirstnameBlur = (e: React.FormEvent) => {\n if (!e.currentTarget.value) {\n setState({ ...state, errorFName: errorsTxt.EFName });\n } else {\n setState({ ...state, errorFName: \"\" });\n }\n };\n\n const handleLastnameBlur = (e: React.FormEvent) => {\n if (!e.currentTarget.value) {\n setState({ ...state, errorLName: errorsTxt.ELName });\n } else {\n setState({ ...state, errorLName: \"\" });\n }\n };\n\n const handlePasswordBlur = (e: React.FormEvent) => {\n if (!e.currentTarget.value) {\n setState({ ...state, errorPass: errorsTxt.EPass });\n } else {\n if (e.currentTarget.value.length < 6) {\n setState({ ...state, errorPass: errorsTxt.EPassLength });\n } else {\n setState({ ...state, errorPass: \"\" });\n }\n }\n };\n\n const handleDobBlur = (e: React.FormEvent) => {\n const year = state.birthYear;\n const month = state.birthMonth;\n const day = state.birthDay;\n if (year > 0 && month > 0 && day > 0) {\n if (moment(new Date(year, month - 1, day)).isValid()) {\n const today = new Date();\n const birthDate = new Date(year, month - 1, day);\n let age = today.getFullYear() - birthDate.getFullYear();\n const m = today.getMonth() - birthDate.getMonth();\n if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {\n age--;\n }\n if (age < 15) {\n setState({ ...state, errorDob: errorsTxt.EDob, formDisabled: true });\n } else {\n setState({ ...state, errorDob: \"\", formDisabled: false });\n }\n } else {\n setState({ ...state, errorDob: errorsTxt.EDob, formDisabled: true });\n }\n }\n };\n\n const handleEmailBlur = (e: React.FormEvent) => {\n if (!e.currentTarget.value) {\n setState({ ...state, errorEmail: errorsTxt.EEmail });\n } else {\n setState({ ...state, errorEmail: \"\" });\n }\n };\n\n const handleRegionBlur = (e: React.FormEvent) => {\n if (!e.currentTarget.value || e.currentTarget.value === \"0\") {\n setState({ ...state, errorRegion: errorsTxt.ERegion });\n } else {\n setState({ ...state, errorRegion: \"\" });\n }\n };\n\n const handleServerErrors = () => {\n const errors = getMode() === \"register\" ? registerError : updateError;\n const formattedErrors = [];\n if (errors) {\n if (\n errors.badRequest &&\n errors.badRequest.password &&\n errors.badRequest.password[0].code === \"invalid\"\n ) {\n formattedErrors.push(errorsTxt.EValidPass);\n }\n if (\n errors.badRequest &&\n errors.badRequest.email &&\n errors.badRequest.email[0].code === \"duplicate\"\n ) {\n formattedErrors.push(errorsTxt.EValidEmail);\n }\n if (\n errors.badRequest &&\n errors.badRequest.email &&\n errors.badRequest.email[0].code === \"blank\"\n ) {\n formattedErrors.push(errorsTxt.EEmail);\n }\n if (\n errors.badRequest &&\n errors.badRequest.password &&\n errors.badRequest.password[0].code === \"blank\"\n ) {\n formattedErrors.push(errorsTxt.EPass);\n }\n if (\n errors.badRequest &&\n errors.badRequest.last_name &&\n errors.badRequest.last_name[0].code === \"blank\"\n ) {\n formattedErrors.push(errorsTxt.EFName);\n }\n if (\n errors.badRequest &&\n errors.badRequest.last_name &&\n errors.badRequest.last_name[0].code === \"blank\"\n ) {\n formattedErrors.push(errorsTxt.ELName);\n }\n if (\n errors.badRequest &&\n errors.badRequest.date_of_birth &&\n errors.badRequest.date_of_birth[0].code === \"invalid\"\n ) {\n formattedErrors.push(errorsTxt.EValidDob);\n }\n if (\n errors.badRequest &&\n errors.badRequest.region &&\n errors.badRequest.region[0].code === \"does_not_exist\"\n ) {\n formattedErrors.push(errorsTxt.ERegion);\n }\n\n return formattedErrors;\n }\n };\n\n const isFormDisabled = () => {\n const requiredFieldsMissing = getRequiredFields().some((e) => !state[e]);\n return requiredFieldsMissing || state.formDisabled;\n };\n\n const mode = getMode();\n const title = {\n register: t(\"register.title.registration\", \"Registration\"),\n confirm: t(\"register.title.confirm\", \"Confirm your details\"),\n update: t(\"register.title.update\", \"Confirm your details\"),\n };\n const buttonText = {\n register: t(\"register.label.register\", \"Register\"),\n confirm: t(\"register.label.confirm\", \"Update\"),\n update: t(\"register.label.update\", \"Update\"),\n };\n const errors = handleServerErrors();\n const saudiResi = state.residenceData?.filter(\n (reg: IResidence) => reg.code === 185\n );\n const intResidenceUn = state.residenceData?.filter(\n (reg: IResidence) => reg.code !== 185 && reg.code < 240\n );\n const intResidence = sortBy(intResidenceUn, [\"name\"]);\n\n const intResidenceCitiesUn = state.residenceData?.filter(\n (reg: IResidence) => reg.code > 239\n );\n const intResidenceCities = sortBy(intResidenceCitiesUn, [\"name\"]);\n\n const residenceCity =\n state.residenceData && state.residences && state.residences === 185\n ? true\n : false;\n return (\n \n

\n \n {title[mode]}\n

\n {t(\n \"register.required\",\n \"Fields marked with an asterisk (*) are required.\"\n )}\n

\n \n\n {errors && {values(errors).map((r) => r)}}\n \n

\n \n \n {state.errorEmail && (\n {state.errorEmail}\n )}\n \n {mode === \"register\" && (\n \n \n {state.errorPass && (\n {state.errorPass}\n )}\n \n )}\n \n \n {state.errorFName && (\n {state.errorFName}\n )}\n \n \n \n {state.errorLName && (\n {state.errorLName}\n )}\n \n \n {state.errorRegion && (\n {state.errorRegion}\n )}\n \n \n \n {values(getSaudiRegions()).map((r) => (\n \n {r.name}\n \n ))}\n \n \n {values(getIntRegions()).map((r) => (\n \n {r.name}\n \n ))}\n \n \n \n \n \n \n \n \n \n {t(\"register.label.dob\", \"Date of birth\")}\n \n \n {t(\n \"register.hint.dob\",\n \"The game is only available to individuals aged 15 and over\"\n )}\n \n \n \n \n \n {t(\"register.label.day\", \"Day\")}\n \n {range(1, 32).map((d) => (\n \n {d}\n \n ))}\n \n \n \n \n \n {t(\"register.label.month\", \"Month\")}\n \n {Object.keys(months).map((m) => (\n \n {months[m]}\n \n ))}\n \n \n \n \n \n {t(\"register.label.year\", \"Year\")}\n \n {range(new Date().getFullYear() - 15, 1900).map((y) => (\n \n {y}\n \n ))}\n \n \n \n {state.errorDob && (\n {state.errorDob}\n )}\n \n \n \n \n \n \n {values(saudiResi).map((r) => (\n \n {r.name}\n \n ))}\n \n \n {values(intResidence).map((r) => (\n \n {r.name}\n \n ))}\n \n \n \n {residenceCity && (\n \n \n \n {values(intResidenceCities).map((r) => (\n \n {r.name}\n \n ))}\n \n \n )}\n \n

\n {t(\n \"register.emailText\",\n \"Receive information and newsletter from\"\n )}\n

\n \n \n \n \n \n

\n \n {mode === \"update\" && player && }\n {mode === \"update\" && player && }\n

\n \n );\n};\n\nexport { Register as RegisterTest };\n\nexport default withTranslation()(Register);\n","import { ThunkResult } from \"..\";\nimport { apiGet } from \"../../utils/api\";\nimport * as actions from \"./actions\";\nimport { IRegion } from \"./types\";\n\nexport const fetchRegions =\n (): ThunkResult> => async (dispatch) => {\n try {\n await apiGet(\"regions/\", dispatch, actions.addRegions);\n } catch (e) {\n return;\n }\n };\n","import { Link, RouteComponentProps, navigate } from \"@reach/router\";\nimport React, { useState } from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { ThunkDispatch } from \"../../core/store\";\nimport { bootstrap } from \"../../core/store/bootstrap/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport { InputField } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport SubHeading from \"../SubHeading\";\nimport Title from \"../Title\";\nimport { FetchPut } from \"./utils\";\n\nconst VerifyDeleteOtp: React.FC = () => {\n const reduxDispatch = useDispatch();\n const { t } = useTranslation();\n const [token, setToken] = useState(\"\");\n const player = useSelector(getPlayerData);\n if (!player) {\n navigate(\"../\");\n }\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n FetchPut(\"player/action-delete-verify/\", { token }).then(async () => {\n try {\n await reduxDispatch(bootstrap());\n } catch (e) {\n return;\n }\n });\n };\n return (\n \n

\n \n \n {t(\"verifyDeleteOtp.title\", \"Delete Your Account\")}\n \n {t(\"mergCode.subheading\", \"Enter Code\")}\n

\n {t(\n \"verifyDeleteOtp.intro\",\n \"To complete the account deletion, please enter the 6-digit code sent to your registered email address and click 'Submit code'.\"\n )}\n

\n \n \n \n

\n \n Didn't get the code? If you do not see the email in your inbox,{\" \"}\n check your â€œjunk mailâ€ folder or â€œspamâ€ folder. We make every{\" \"}\n effort to ensure these emails are delivered. If you still don't{\" \"}\n receive the code, click here to send\n it again.\n \n

\n \n \n

\n \n );\n};\n\nexport default VerifyDeleteOtp;\n","import { Link } from \"@reach/router\";\nimport React, { useState } from \"react\";\nimport { Trans, WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { getNextEvent } from \"../../core/store/events/reducers\";\nimport { getSquadError } from \"../../core/store/squad/reducers\";\nimport { createEntry } from \"../../core/store/squad/thunks\";\nimport { ICreateEntryData } from \"../../core/store/squad/types\";\nimport { getTeams } from \"../../core/store/teams/reducers\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Dialog from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport {\n CheckboxField,\n FieldWrap,\n InputField,\n SelectField,\n} from \"../FieldRenderers\";\nimport { getCodeFromError } from \"./helpers\";\n\ninterface IOwnProps {\n handleHide: () => void;\n}\n\ninterface IState extends ICreateEntryData {\n favourite_team: number;\n least_favourite_team: number;\n}\n\ntype Props = IOwnProps & WithTranslation;\n\nconst CreateEntryDialog: React.FC = ({ handleHide, i18n, t }) => {\n const dispatch = useDispatch();\n const [state, setState] = useState({\n email: false,\n favourite_team: 0,\n least_favourite_team: 0,\n name: \"\",\n terms_agreed: false,\n language: i18n.language,\n });\n\n const error = useSelector(getSquadError);\n const nextEvent = useSelector(getNextEvent);\n const teams = useSelector(getTeams);\n\n const requiredFields: Array = [\n \"favourite_team\",\n \"name\",\n \"terms_agreed\",\n \"language\",\n ];\n\n const apiDataFromState = () => ({\n email: state.email,\n favourite_team: state.favourite_team > 0 ? state.favourite_team : null,\n least_favourite_team:\n state.least_favourite_team > 0 ? state.least_favourite_team : null,\n name: state.name,\n terms_agreed: state.terms_agreed,\n language: i18n.language,\n });\n\n const handleEmailChange = (e: React.FormEvent) =>\n setState({ ...state, email: e.currentTarget.checked ? true : false });\n\n const handleFaveChange = (e: React.FormEvent) =>\n setState({ ...state, favourite_team: parseInt(e.currentTarget.value, 10) });\n\n const handleLeastFaveChange = (e: React.FormEvent) =>\n setState({\n ...state,\n least_favourite_team: parseInt(e.currentTarget.value, 10),\n });\n\n const handleNameChange = (e: React.FormEvent) =>\n setState({ ...state, name: e.currentTarget.value });\n\n const handleTermsChange = (e: React.FormEvent) =>\n setState({\n ...state,\n terms_agreed: e.currentTarget.checked ? true : false,\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (isValid()) {\n dispatch(createEntry(apiDataFromState()));\n }\n };\n\n const isValid = () => requiredFields.every((e) => Boolean(state[e]));\n\n // filterTeams\n const spl = teams\n .filter((team) => team.unavailable === false)\n .sort((a, b) => a.name.localeCompare(b.name));\n\n const errorCode = getCodeFromError(error);\n if (error) {\n const handledErrorCodes = [\"price_changed\"];\n if (handledErrorCodes.indexOf(errorCode) === -1) {\n window.location.reload();\n return null;\n }\n }\n if (!nextEvent) {\n return (\n \n );\n }\n\n return (\n \n );\n};\n\nexport { CreateEntryDialog as CreateEntryDialogTest };\n\nexport default withTranslation()(CreateEntryDialog);\n","// Look for errors we potentally can handle\nexport const getCodeFromError = (error: any) => {\n let errorCode = \"\";\n if (error && error.badRequest) {\n const e = error.badRequest;\n if (e.transfers && e.transfers.length) {\n for (let i = 0; i < e.transfers.length; i++) {\n if (\n e.transfers[i].non_field_errors &&\n e.transfers[i].non_field_errors.length\n ) {\n errorCode = e.transfers[i].non_field_errors[0].code;\n break;\n }\n }\n } else if (e.non_field_errors && e.non_field_errors.length) {\n errorCode = e.non_field_errors[0].code;\n } else if (e.picks && e.picks.length) {\n for (let i = 0; i < e.picks.length; i++) {\n if (e.picks[i].purchase_price && e.picks[i].purchase_price.length) {\n errorCode = e.picks[i].purchase_price[0].code;\n break;\n }\n }\n }\n }\n return errorCode || \"\";\n};\n","import * as React from \"react\";\nimport styled from \"styled-components/macro\";\nimport Title from \"./Title\";\n\nconst StyledPageHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\ninterface IProps {\n children: React.ReactNode;\n title: React.ReactNode;\n}\n\nconst PageHeader: React.FC\n {t(\"createEntryDialog.over\", \"Game over\")}\n \n \n

\n {t(\n \"createEntryDialog.finished\",\n \"This game has now finished. Thanks for your interest, come back soon to select your squad for next season's game.\"\n )}\n

\n \n \n {t(\"createEntryDialog.enterSquad\", \"Enter squad\")}\n \n \n \n \n \n \n \n\n \n\n \n \n \n {spl.map((tm) => (\n \n {tm.name}\n \n ))}\n \n \n \n {t(\"createEntryDialog.chooseAClubLeast\", \"Choose a club\")}...\n \n\n \n\n \n {spl.map((tm) => (\n \n {tm.name}\n \n ))}\n \n {t(\"createEntryDialog.none\", \"None\")}\n \n \n \n \n \n \n I'm over the age of 15 and agree to the SPL\n Terms and conditions.\n \n }\n onChange={handleTermsChange}\n checked={state.terms_agreed}\n />\n \n \n \n {errorCode === \"price_changed\" &&\n t(\n \"createEntryDialog.unable\",\n \"Unable to enter squad as player prices have changed. Please refresh the page and try again.\"\n )}\n = ({ children, title }) => (\n \n);\n\nexport default PageHeader;\n","import React from \"react\";\nimport styled from \"styled-components/macro\";\n\nconst StyledDeadlineBar = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n padding: ${({ theme }) => theme.space[2]};\n border-radius: 0;\n background-color: ${({ theme }) => theme.colors.primary};\n font-size: 1.8rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n border-radius: ${({ theme }) => theme.radii[1]};\n }\n`;\n\nconst Heading = styled.h3`\n margin-top: 0;\n margin-bottom: 0;\n line-height: 1;\n color: ${({ theme }) => theme.colors.white};\n font-size: inherit;\n`;\n\nconst Deadline = styled.time`\n margin-inline-start: 0.4rem;\n line-height: 1;\n color: ${({ theme }) => theme.colors.white};\n font-weight: bold;\n`;\n\ninterface IProps {\n deadlineISO: string;\n deadlineLocal: string;\n headingText: string;\n}\n\nconst DeadlineBar: React.FC\n \n {children}\n {title} = ({\n deadlineISO,\n deadlineLocal,\n headingText,\n}) => (\n \n);\n\nexport default DeadlineBar;\n","import styled from \"styled-components/macro\";\n\nconst SaveBar = styled.div`\n margin-top: ${({ theme }) => theme.space[4]};\n margin-bottom: ${({ theme }) => theme.space[4]};\n padding-inline-end: ${({ theme }) => theme.space[2]};\n padding-inline-start: ${({ theme }) => theme.space[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n margin-inline-end: 30%;\n margin-inline-start: 30%;\n }\n`;\n\nexport default SaveBar;\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\n\nconst StyledScoreboardPanel = styled.div`\n padding: ${(props) => props.theme.space[2]} 0;\n text-align: center;\n`;\n\nconst Heading = styled.h3`\n margin: 0;\n color: ${({ theme }) => theme.colors.black};\n font-size: 1.4rem;\n font-weight: 400;\n`;\n\nconst Value = styled.div\n \n \n \n {headingText}: {deadlineLocal}`\n color: ${({ theme }) => theme.colors.blue};\n font-size: 2.3rem;\n font-weight: bold;\n\n ${(props) =>\n props.isError &&\n css`\n color: ${props.theme.colors.error};\n `}\n\n ${(props) =>\n props.isSuccess &&\n css`\n color: ${props.theme.colors.blue};\n `}\n`;\n\ninterface IScoreboardPanel {\n heading: string;\n value: string;\n}\n\ninterface IValue {\n isError?: boolean;\n isSuccess?: boolean;\n}\n\ntype Props = IScoreboardPanel & IValue;\n\nexport const ScoreboardPanel: React.FC = ({\n heading,\n isError,\n isSuccess,\n value,\n}) => (\n \n);\n","import * as React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport { Box, Flex } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport {\n cancelProposedChip,\n proposeAvailableChip,\n} from \"../../core/store/chips/actions\";\nimport {\n getActiveChipName,\n getAvailableChipNames,\n getPotentialChips,\n getProposedChipName,\n} from \"../../core/store/chips/reducers\";\nimport { IPotentialChip } from \"../../core/store/chips/types\";\nimport { getElementTypesBySquadPosition } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesBySquadPosition } from \"../../core/store/element-types/types\";\nimport {\n canAutocomplete,\n canReset,\n getErrors,\n getFreeTransfersRemaining,\n getProposedElements,\n getToSpend,\n getTransferCosts,\n} from \"../../core/store/squad/reducers\";\nimport { autoComplete, reset } from \"../../core/store/squad/thunks\";\nimport { IProposedElements, ISquadErrors } from \"../../core/store/squad/types\";\nimport { integerToMoney } from \"../../core/utils/money\";\nimport { ChipName, getChipName } from \"../../utils/chips\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Dialog from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport DialogManager from \"../DialogManager\";\nimport { ScoreboardPanel } from \"./ScoreboardPanel\";\n\nconst CostScoreboardUnit = styled.div`\n flex: 1 0 50%;\n padding: 0 ${({ theme }) => theme.space[2]};\n\n :nth-child(4) > div {\n border-bottom-width: 0;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n flex: 1 0 25%;\n\n :nth-child(3) > div {\n border-bottom-width: 0;\n }\n\n :nth-child(4) > div {\n border-bottom-width: 1px;\n }\n }\n`;\n\nconst CostButtonWrap = styled.div`\n margin-top: 1rem;\n margin-bottom: 2rem;\n`;\n\ninterface IBasicProps {\n autoPick: () => void;\n canAutocomplete: boolean;\n canReset: boolean;\n currencyDivisor: number;\n elementTypesByPosition: IElementTypesBySquadPosition;\n isBudgetExceeded: boolean;\n isNeedElements: boolean;\n proposedElements: IProposedElements;\n reset: () => void;\n toSpend: number;\n}\n\nconst Basic: React.FC\n \n \n {heading}\n {value}\n = ({\n autoPick,\n canAutocomplete,\n canReset,\n currencyDivisor,\n elementTypesByPosition,\n isBudgetExceeded,\n isNeedElements,\n proposedElements,\n reset,\n toSpend,\n}) => {\n const { t } = useTranslation();\n return (\n \n );\n};\n\ninterface IExplainChipDialogProps {\n chip: string;\n handleHide: () => void;\n transferCosts: number;\n}\n\nconst ExplainChipDialog: React.FC

\n \n \n

\n \n \n \n \n {t(\"scoreboard.autoPick\", \"Auto Pick\")}\n \n \n \n {t(\"reset\", \"Reset\")}\n \n \n \n \n \n \n \n \n \n \n \n \n = ({\n chip,\n handleHide,\n transferCosts,\n}) => {\n const { t } = useTranslation();\n return (\n \n );\n};\n\ninterface ICostProps {\n activeChipName: string;\n availableChipNames: string[];\n autoPick: () => void;\n canAutocomplete: boolean;\n canReset: boolean;\n currencyDivisor: number;\n freeTransfersRemaining: number;\n isBudgetExceeded: boolean;\n proposedChipName: string;\n reset: () => void;\n toSpend: number;\n transferCosts: number;\n cancelChip: (chip: string) => void;\n proposeChip: (chip: string) => void;\n chips: IPotentialChip[];\n}\n\nconst Cost: React.FC\n \n \n {chip === \"wildcard\" && t(\"squad.playWildcardText\", \"Play Wildcard\")}\n {chip === \"uteam\" && t(\"squad.playUnlimitText\", \"Play Loan Rangers\")}\n \n \n \n {transferCosts ? (\n <>\n \n \n \n ) : (\n \n )}\n

\n {chip === \"wildcard\" &&\n t(\n \"squad.wildcardText1\",\n \"You are now proposing to play your wildcard. Unlimited transfers can be made this Round without points deduction.\"\n )}\n {chip === \"uteam\" &&\n t(\n \"squad.unlimitText1\",\n \"You are now proposing to play your Loan Rangers chip. Unlimited transfers with as many players you want from a specific team can be picked this Round without points deduction.\"\n )}\n

\n {chip === \"wildcard\" &&\n t(\n \"squad.wildcardText2\",\n \"Your wildcard will not be activated until you confirm your transfers.\"\n )}\n {chip === \"uteam\" &&\n t(\n \"squad.unlimitText2\",\n \"Your Loan Rangers chip will not be activated until you confirm your transfers\"\n )}\n

\n {chip === \"wildcard\" &&\n t(\n \"squad.wildcardText3\",\n \"To activate your wildcard you must be making enough proposed transfers that points will be deducted.\"\n )}\n {chip === \"uteam\" &&\n t(\n \"squad.unlimitText3\",\n \"To activate your Loan Rangers chip you must be making enough proposed transfers that points will be deducted.\"\n )}\n

= ({\n activeChipName,\n availableChipNames,\n autoPick,\n canAutocomplete,\n canReset,\n currencyDivisor,\n freeTransfersRemaining,\n isBudgetExceeded,\n proposedChipName,\n reset,\n toSpend,\n transferCosts,\n cancelChip,\n proposeChip,\n chips,\n}) => {\n const { t } = useTranslation();\n const unlimitChip = chips.filter((c) => c.name === \"uteam\")[0];\n const wildCardChip = chips.filter((c) => c.name === \"wildcard\")[0];\n return (\n <>\n \n \n \n );\n};\n\ninterface IOwnProps {\n scoreboard: string;\n}\n\ninterface IPropsFromState {\n activeChipName: string;\n availableChipNames: string[];\n canAutocomplete: boolean;\n canReset: boolean;\n currencyDivisor: number;\n elementTypesByPosition: IElementTypesBySquadPosition | null;\n errors: ISquadErrors;\n freeTransfersRemaining: number;\n proposedChipName: string;\n proposedElements: IProposedElements;\n toSpend: number;\n transferCosts: number;\n chips: IPotentialChip[];\n}\n\ninterface IPropsFromDispatch {\n autoPick: () => void;\n reset: () => void;\n cancelChip: (chip: string) => void;\n proposeChip: (chip: string) => void;\n}\n\ntype Props = IOwnProps & IPropsFromState & IPropsFromDispatch;\n\nclass Scoreboard extends React.Component\n \n \n\n {activeChipName ? (\n \n ) : wildCardChip.status_for_entry === \"played\" ? (\n \n ) : wildCardChip.status_for_entry === \"active\" ? (\n \n ) : proposedChipName === \"wildcard\" ? (\n \n ) : (\n \n \n \n \n {t(\"scoreboard.cost.autoPick\", \"Auto Pick\")}\n \n \n \n \n \n {t(\"scoreboard.cost.reset\", \"Reset\")}\n \n \n \n \n \n \n \n \n \n \n \n (\n <>\n \n {showDialog && (\n \n \n \n \n {t(\"squad.playWildcardTest\", \"Play Wildcard\")}\n \n {\n handleHide();\n if (transferCosts) {\n proposeChip(\"wildcard\");\n }\n }}\n transferCosts={transferCosts}\n />\n )}\n \n )}\n />\n )}\n\n {activeChipName ? (\n <> \n ) : unlimitChip.status_for_entry === \"played\" ? (\n \n ) : unlimitChip.status_for_entry === \"active\" ? (\n \n ) : proposedChipName === \"uteam\" ? (\n \n ) : (\n \n \n \n \n \n \n \n \n (\n <>\n \n {showDialog && (\n \n \n \n \n {t(\"squad.playUnlimitText\", \"Play Loan Rangers\")}\n \n {\n handleHide();\n if (transferCosts) {\n proposeChip(\"uteam\");\n }\n }}\n transferCosts={transferCosts}\n />\n )}\n \n )}\n />\n )}\n \n \n \n \n \n \n \n 0}\n />\n \n \n {\n public render() {\n const {\n elementTypesByPosition,\n errors,\n proposedElements,\n scoreboard,\n ...rest\n } = this.props;\n if (!elementTypesByPosition) {\n return null;\n }\n const isNeedElements = Boolean(errors.needElements);\n const isBudgetExceeded = Boolean(errors.budgetExceeded);\n switch (scoreboard) {\n case \"basic\":\n return (\n \n );\n case \"cost\":\n return ;\n default:\n return null;\n }\n }\n}\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n activeChipName: getActiveChipName(state),\n availableChipNames: getAvailableChipNames(state),\n canAutocomplete: canAutocomplete(state),\n canReset: canReset(state),\n currencyDivisor: 10,\n elementTypesByPosition: getElementTypesBySquadPosition(state),\n errors: getErrors(state),\n freeTransfersRemaining: getFreeTransfersRemaining(state),\n proposedChipName: getProposedChipName(state),\n proposedElements: getProposedElements(state),\n toSpend: getToSpend(state),\n transferCosts: getTransferCosts(state),\n chips: getPotentialChips(state),\n});\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n autoPick: () => {\n if (!dispatch(autoComplete())) {\n // We should do something :-)\n window.console.log(\"Failed to autocomplete\");\n }\n },\n cancelChip: (chip: string) => dispatch(cancelProposedChip(chip)),\n proposeChip: (chip: string) => dispatch(proposeAvailableChip(chip)),\n reset: () => dispatch(reset()),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Scoreboard);\n","var _circle, _path, _path2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgRemove(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 21,\n height: 22,\n viewBox: \"0 0 21 22\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10.5,\n cy: 11.4329,\n r: 10,\n fill: \"#131924\",\n stroke: \"white\"\n })), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.4257 8.11492C17.0115 7.52913 17.0115 6.57939 16.4257 5.9936C15.8399 5.40781 14.8901 5.40781 14.3043 5.9936L5.06092 15.237C4.47514 15.8228 4.47514 16.7726 5.06092 17.3583C5.64671 17.9441 6.59646 17.9441 7.18224 17.3583L16.4257 8.11492Z\",\n fill: \"white\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.18175 5.99358C6.59597 5.4078 5.64622 5.4078 5.06043 5.99358C4.47465 6.57937 4.47465 7.52912 5.06043 8.1149L14.072 17.1265C14.6578 17.7123 15.6076 17.7123 16.1934 17.1265C16.7792 16.5407 16.7792 15.591 16.1934 15.0052L7.18175 5.99358Z\",\n fill: \"white\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgRemove);\nexport default __webpack_public_path__ + \"static/media/remove.cdc28dda.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\nimport { IElement } from \"../core/store/elements/types\";\n\nexport const ElementName = styled.div`\n padding: 0.1rem 0.2rem;\n background-color: ${({ theme }) => theme.colors.blue};\n color: ${({ theme }) => theme.colors.white};\n color: white;\n font-size: 1rem;\n font-weight: 800;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.element.news &&\n props.element.chance_of_playing_next_round !== null &&\n css`\n background-color: ${props.theme.colors.elementStatus[\n props.element.chance_of_playing_next_round\n ].bg};\n color: ${props.theme.colors.elementStatus[\n props.element.chance_of_playing_next_round\n ].color};\n `}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n padding-top: 0.2rem;\n padding-bottom: 0.2rem;\n font-size: ${({ theme }) => theme.fontSizes[0]};\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n padding-top: 0.4em;\n padding-bottom: 0.4em;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n }\n`;\n\nexport const ElementValue = styled.div`\n padding: 0 0.2rem;\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n background-color: ${({ theme }) => theme.colors.white};\n color: ${({ theme }) => theme.colors.blueDarker3};\n font-size: 1rem;\n font-weight: 800;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n padding-top: 0.2rem;\n padding-bottom: 0.2rem;\n font-size: ${({ theme }) => theme.fontSizes[0]};\n }\n`;\n\ninterface IStyledProps {\n element: IElement;\n}\n\ninterface IProps {\n value: React.ReactNode;\n}\n\ntype Props = IStyledProps & IProps;\n\nconst PitchElementData: React.FC = ({ element, value }) => (\n \n);\n\nexport default PitchElementData;\n","import React from \"react\";\nimport Shirt from \"./Shirt\";\n\ninterface IProps {\n elementType?: number;\n hasShadow?: boolean;\n sizes: string;\n}\n\nconst PlaceholderShirt: React.FC

\n \n \n

{element.web_name}{value} = ({\n elementType,\n hasShadow,\n sizes,\n}) => {\n const suffix = elementType === 1 ? `_${elementType}` : \"\";\n return (\n \n );\n};\n\nexport default PlaceholderShirt;\n","import { size } from \"polished\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { showElementSummary } from \"../../core/store/elements/thunks\";\nimport { IElementsById } from \"../../core/store/elements/types\";\nimport { ReactComponent as Remove } from \"../../img/icons/remove.svg\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementShirt from \"../ElementShirt\";\nimport {\n Controls,\n InfoControl,\n PitchElementWrap,\n PrimaryControl,\n StyledPitchElement,\n} from \"../Pitch\";\nimport PitchElementData from \"../PitchElementData\";\nimport PlaceholderShirt from \"../PlaceholderShirt\";\nimport { UnstyledButton } from \"../Utils\";\n\nconst StyledRemove = styled(Remove)`\n ${size(14)}\n display: block;\n fill: #e9ff03;\n color: #e50012;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n ${size(16)}\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${size(20)}\n }\n`;\n\ninterface IPropsFromState {\n elementsById: IElementsById;\n}\n\ninterface IPropsFromDispatch {\n showElementDialog: (elementId: number) => void;\n}\n\ninterface IOwnProps {\n actionMe: () => void;\n elementId: number;\n elementValue: React.ReactNode;\n renderElementMenu: () => void;\n}\n\ninterface IStyleProps {\n isRemoved?: boolean;\n}\ntype Props = IPropsFromState & IPropsFromDispatch & IOwnProps & IStyleProps;\n\nconst SquadPitchElement: React.FC = ({\n actionMe,\n elementId,\n elementsById,\n elementValue,\n isRemoved,\n renderElementMenu,\n}) => {\n const element = elementsById[elementId];\n const shirtProps = {\n hasShadow: true,\n sizes: \"(min-width: 1024px) 55px, (min-width: 610px) 44px, 33px\",\n };\n\n return (\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementsById: getElementsById(state),\n});\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n showElementDialog: (elementId) => dispatch(showElementSummary(elementId)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SquadPitchElement);\n","import { rgba } from \"polished\";\nimport * as React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport styled from \"styled-components/macro\";\nimport { IElementType } from \"../../core/store/element-types/types\";\nimport { PitchElementWrap } from \"../Pitch\";\nimport PlaceholderShirt from \"../PlaceholderShirt\";\n\nconst StyledPlaceholder = styled.button`\n display: block;\n width: 6.4rem;\n margin: auto;\n padding: 0 0.3rem;\n border: 0;\n background-color: transparent;\n text-align: center;\n line-height: 1;\n cursor: pointer;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n width: 10.5rem;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 14rem;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n padding-inline-end: 1rem;\n padding-inline-start: 1rem;\n }\n`;\n\nconst Title = styled.div`\n padding: 0.1rem 0.2rem;\n background-color: ${rgba(\"#035f1d\", 0.8)};\n color: white;\n font-size: 1rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n font-size: ${({ theme }) => theme.fontSizes[0]};\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n padding-top: 0.4em;\n padding-bottom: 0.4em;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n }\n`;\n\nconst Abbr = styled.abbr`\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n text-decoration: none;\n text-transform: lowercase;\n ::after {\n content: attr(title);\n }\n }\n`;\n\nconst Span = styled.span`\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n display: none;\n }\n`;\n\ninterface IProps {\n elementType: IElementType | null;\n onClick: () => void;\n}\n\nconst PitchPlaceholder: React.FC\n \n \n \n \n \n {isRemoved ? (\n \n ) : (\n \n )}\n \n \n \n \n \n \n \n \n \n \n = ({ elementType, onClick }) => {\n const { t } = useTranslation();\n if (!elementType) {\n return null;\n }\n return (\n \n );\n};\n\nexport default PitchPlaceholder;\n","import { RouteComponentProps } from \"@reach/router\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getElementTypesBySquadPosition } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesBySquadPosition } from \"../../core/store/element-types/types\";\nimport {\n showElementSummary,\n updateElementTypeControl,\n} from \"../../core/store/elements/thunks\";\nimport {\n getProposedElements,\n getSavedPicks,\n} from \"../../core/store/squad/reducers\";\nimport { removeElement, restoreElement } from \"../../core/store/squad/thunks\";\nimport { IProposedElements, ISavedPicks } from \"../../core/store/squad/types\";\nimport SquadPitchElement from \"./SquadPitchElement\";\nimport PitchPlaceholder from \"./PitchPlaceholder\";\n\ninterface IPropsFromState {\n elementTypesByPosition: IElementTypesBySquadPosition | null;\n proposedElements: IProposedElements;\n savedPicks: ISavedPicks;\n}\n\ninterface IPropsFromDispatch {\n removePitchElement: (position: number) => void;\n restorePitchElement: (position: number) => void;\n showElementDialog: (elementId: number) => void;\n showElementType: (elementTypeId: number) => void;\n}\n\ninterface IOwnProps {\n pos: number;\n elementValue: React.ReactNode;\n renderElementMenu: (pos: number) => void;\n showSidebar: () => void;\n}\n\ntype Props = RouteComponentProps &\n IPropsFromState &\n IPropsFromDispatch &\n IOwnProps;\n\nconst SquadPitchUnit: React.FC\n \n \n \n \n \n {t(\"add\", \"Add\")}{\" \"}\n <Abbr title={elementType.singular_name}>\n <Span>{elementType.singular_name_short}</Span>\n </Abbr>\n = ({\n elementTypesByPosition,\n elementValue,\n proposedElements,\n pos,\n renderElementMenu,\n removePitchElement,\n restorePitchElement,\n savedPicks,\n showElementType,\n}) => {\n if (!elementTypesByPosition) {\n return null;\n }\n return (\n <>\n {proposedElements[pos] ? (\n {\n removePitchElement(pos);\n }}\n elementId={proposedElements[pos].id}\n elementValue={elementValue}\n renderElementMenu={() => renderElementMenu(pos)}\n />\n ) : savedPicks[pos] ? (\n {\n restorePitchElement(pos);\n }}\n elementId={savedPicks[pos].element}\n elementValue={elementValue}\n renderElementMenu={() => renderElementMenu(pos)}\n isRemoved={true}\n />\n ) : (\n \n showElementType(elementTypesByPosition[pos].thisType.id)\n }\n />\n )}\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementTypesByPosition: getElementTypesBySquadPosition(state),\n proposedElements: getProposedElements(state),\n savedPicks: getSavedPicks(state),\n});\n\nconst mapDispatchToProps = (\n dispatch: ThunkDispatch,\n ownProps: IOwnProps\n): IPropsFromDispatch => ({\n removePitchElement: (position) => {\n dispatch(removeElement(position));\n },\n restorePitchElement: (position) => {\n dispatch(restoreElement(position));\n },\n showElementDialog: (elementId) => dispatch(showElementSummary(elementId)),\n showElementType: (elementTypeId) => {\n dispatch(updateElementTypeControl(elementTypeId));\n ownProps.showSidebar();\n },\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SquadPitchUnit);\n","import * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { Trans, WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport {\n showElementSummary,\n updateElementTypeControl,\n} from \"../../core/store/elements/thunks\";\nimport { IElement } from \"../../core/store/elements/types\";\nimport { getNextEvent } from \"../../core/store/events/reducers\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { IPick } from \"../../core/store/my-team/types\";\nimport { resetLastChange } from \"../../core/store/squad/actions\";\nimport {\n getErrors,\n getLastChange,\n getProposedElements,\n getSavedPicks,\n getSquadMode,\n} from \"../../core/store/squad/reducers\";\nimport { removeElement, restoreElement } from \"../../core/store/squad/thunks\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport {\n formatRawAsISO,\n formatRawAsLocalI18n,\n} from \"../../core/utils/datetime\";\nimport { integerToMoney } from \"../../core/utils/money\";\nimport { dateLocales } from \"../../i18n\";\nimport Alert, { AlertWrap } from \"../Alert\";\nimport Button from \"../Button\";\nimport DeadlineBar from \"../DeadlineBar\";\nimport Dialog, { DialogButtonItem } from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport DialogManager from \"../DialogManager\";\nimport Pitch, { PitchRow, PitchUnit } from \"../Pitch\";\nimport TabPanel from \"../tabs/TabPanel\";\nimport Tabs from \"../tabs/Tabs\";\nimport SaveBar from \"./SaveBar\";\nimport Scoreboard from \"./Scoreboard\";\nimport SquadPitchUnit from \"./SquadPitchUnit\";\n\nconst StyledPitchWrapper = styled(Box)`\n border: 1px solid ${({ theme }) => theme.colors.primary};\n border-radius: ${({ theme }) => theme.radii[2]};\n`;\n\nconst PlayerActions = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n margin: 0 auto;\n }\n`;\n\nconst ScoreBoardWrapper = styled.div`\n margin: ${({ theme }) => `${theme.space[4]} 0`};\n padding: ${({ theme }) => theme.space[2]} 0;\n border-top: ${({ theme }) => theme.borders[2]};\n border-bottom: ${({ theme }) => theme.borders[2]};\n border-radius: 0;\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n border: ${({ theme }) => theme.borders[2]};\n border-radius: ${({ theme }) => theme.radii[2]};\n padding: ${({ theme }) => theme.space[2]};\n }\n`;\n\n//TODO: Move IListTableProps somewhere more abstract?\nexport interface IListTableProps {\n elementType: number;\n key: string;\n positions: number[];\n renderElementDialog: (element: IElement) => void;\n renderElementMenu: (position: number) => void;\n}\n\ninterface IOwnProps {\n listTable: (listTableProps: IListTableProps) => void;\n scoreboard: string;\n showSidebar: () => void;\n submitDialog: (handleHide: () => void) => React.ReactNode;\n}\n\ntype Props = IOwnProps & WithTranslation;\n\nconst CreateSquad: React.FC = ({\n i18n,\n listTable,\n scoreboard,\n showSidebar,\n submitDialog,\n t,\n}) => {\n const dispatch = useDispatch();\n\n const currencyDivisor = 10;\n const elementsById = useSelector(getElementsById);\n const errors = useSelector(getErrors);\n const lastChange = useSelector(getLastChange);\n const mode = useSelector(getSquadMode);\n const nextEvent = useSelector(getNextEvent);\n const proposedElements = useSelector(getProposedElements);\n const savedPicks = useSelector(getSavedPicks);\n const settings = useSelector(getSettings);\n const teamsById = useSelector(getTeamsById);\n\n const [positionForMenu, setPositionForMenu] = useState(0);\n\n const handleShowMenuForElement = (position: number) =>\n setPositionForMenu(position);\n\n const handleHideMenuForElement = () => setPositionForMenu(0);\n\n const handleRemoveElement = (position: number) => {\n handleHideMenuForElement();\n dispatch(removeElement(position));\n };\n\n const handleRestoreElement = (position: number) => {\n handleHideMenuForElement();\n dispatch(restoreElement(position));\n };\n\n const showElementType = (elementTypeId: number) => {\n handleHideMenuForElement();\n dispatch(updateElementTypeControl(elementTypeId));\n showSidebar();\n };\n\n const showDialog = (element: IElement) => {\n dispatch(showElementSummary(element.id));\n handleHideMenuForElement();\n };\n\n const renderMenu = () => {\n let element: IElement | undefined;\n let mode: \"remove\" | \"restore\" | undefined;\n if (proposedElements[positionForMenu]) {\n element = proposedElements[positionForMenu];\n mode = \"remove\";\n } else if (savedPicks[positionForMenu]) {\n element = elementsById[savedPicks[positionForMenu].element];\n mode = \"restore\";\n }\n if (!mode || !element) {\n return null;\n }\n return (\n \n );\n };\n\n const renderElementValueForPosition = (pos: number) => {\n const element: IElement = proposedElements[pos];\n const pick: IPick | undefined = savedPicks[pos];\n // Initial element selection (squad selection)\n if (!pick && element) {\n return integerToMoney(element.now_cost, currencyDivisor);\n }\n // Removed element (transfers)\n if (pick && !element) {\n return integerToMoney(pick.selling_price, currencyDivisor);\n }\n // Original element (transfers)\n if (pick && element && pick.element === element.id) {\n return integerToMoney(pick.selling_price, currencyDivisor);\n }\n // Replaced element (transfers)\n if (pick && element && pick.element !== element.id) {\n return integerToMoney(element.now_cost, currencyDivisor);\n }\n return null;\n };\n\n useEffect(() => {\n dispatch(resetLastChange());\n }, [dispatch]);\n\n let latestAction: React.ReactNode = null;\n if (lastChange.type === \"addition\") {\n latestAction = (\n \n );\n } else if (lastChange.type === \"removal\") {\n latestAction = (\n \n );\n }\n\n // Button enablers\n const canEnter = !Boolean(Object.keys(errors).length);\n\n // Helper functions to generate props used by multiple component instances\n const sharedPitchElementProps = (pos: number) => ({\n pos,\n renderElementMenu: handleShowMenuForElement,\n elementValue: renderElementValueForPosition(pos),\n showSidebar,\n });\n\n const sharedSquadListTableProps = (\n pos: number[],\n elementType: number,\n key: string\n ) => ({\n elementType,\n key,\n positions: pos,\n renderElementDialog: showDialog,\n renderElementMenu: handleShowMenuForElement,\n });\n\n const submitButtonText = {\n selection: t(\"createSquad.enterSquad\", \"Enter Squad\"),\n transfers: t(\"createSquad.makeTransfers\", \"Make Transfers\"),\n };\n\n const positionsByElementType: {\n [index: string]: number[];\n } = {\n 1: [1, 2],\n 2: [3, 4, 5, 6, 7],\n 3: [8, 9, 10, 11, 12],\n 4: [13, 14, 15],\n };\n\n return (\n \n );\n};\n\nexport default withTranslation()(CreateSquad);\n","import React from \"react\";\nimport { withTranslation, WithTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport {\n getElementControls,\n getElementTypeFilterOptions,\n} from \"../../core/store/elements/reducers\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { getTeams } from \"../../core/store/teams/reducers\";\nimport { FieldWrap, SelectField } from \"../FieldRenderers\";\n\ntype Props = WithTranslation & {\n handleFilterChange: (e: React.ChangeEvent\n \n \n {`${element.first_name} ${element.second_name}`}\n \n \n \n {mode === \"remove\" ? (\n \n ) : mode === \"restore\" ? (\n <>\n \n \n \n ) : (\n \"\"\n )}\n \n \n handleRemoveElement(positionForMenu)}\n width={1}\n >\n {t(\"createSquad.removePlayer\", \"Remove player\")}\n \n \n handleRestoreElement(positionForMenu)}\n width={1}\n >\n {t(\"createSquad.restorePlayer\", \"Restore player\")}\n \n \n showElementType(element!.element_type)}\n width={1}\n >\n {t(\"createSquad.replacePlayer\", \"Select replacement\")}\n \n \n showDialog(element as IElement)}\n width={1}\n >\n {t(\"createSquad.viewInformation\", \"View Information\")}\n \n \n \n \n {\" \"}\n has been added to your squad.\n \n {{ playerName: elementsById[lastChange.element].web_name }}\n \n \n \n {\" \"}\n has been removed from your squad.\n \n {{ playerName: elementsById[lastChange.element].web_name }}\n

\n {settings && (\n \n )}\n \n {errors.overTeamLimit && (\n \n )}\n {latestAction && }\n\n \n {/*

\n \n

\n {t(\n \"createSquad.help\",\n \"Select a maximum of {{ teamLimit }} players from a single team or 'Auto Pick' if you're short of time.\",\n { teamLimit: settings.squad_team_limit }\n )}\n

\n {nextEvent && (\n \n )}\n \n \n \n \n {t(\n \"createSquad.errors.overTeamLimit\",\n \"Too many players selected from\"\n )}{\" \"}\n \n \n {errors.overTeamLimit\n .map((team) => teamsById[team].name)\n .join(\", \")}\n {latestAction}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {Object.keys(positionsByElementType).map((et) =>\n listTable(\n sharedSquadListTableProps(\n positionsByElementType[et],\n parseInt(et, 10),\n et\n )\n )\n )}\n */}\n {renderMenu()}\n (\n <>\n \n {showDialog && submitDialog(handleHide)}\n \n )}\n />\n \n \n {submitButtonText[mode]}\n \n ) => void;\n};\n\nconst ElementFilter: React.FC = ({ handleFilterChange, t }) => {\n const controls = useSelector(getElementControls);\n const elementTypeFilterOptions = useSelector(getElementTypeFilterOptions);\n const player = useSelector(getPlayerData);\n const teams = useSelector(getTeams);\n\n // filterTeams\n const filterTeams = teams\n .filter((team: any) => team.unavailable === false)\n .sort((a, b) => a.name.localeCompare(b.name));\n\n return (\n \n );\n};\n\nexport { ElementFilter as ElementFilterTest };\n\nexport default withTranslation()(ElementFilter);\n","import { TFunction } from \"i18next\";\n\ninterface IStatDetails {\n description: string;\n label: string;\n}\n\nconst allStatsDetails = (\n t: TFunction\n): Record\n \n \n \n \n \n \n \n {player && player.entry && (\n \n )}\n \n {elementTypeFilterOptions.map((o) => (\n \n {o.label}\n \n ))}\n \n {filterTeams.map((o) => (\n \n {o.name}\n \n ))}\n => ({\n total_points: {\n description: t(\n \"stats.total_points.description\",\n \"Total points earned this season.\"\n ),\n label: t(\"stats.total_points.label\", \"Total points\"),\n },\n event_points: {\n description: t(\n \"stats.round_points.description\",\n \"Total points earned in the latest round.\"\n ),\n label: t(\"stats.round_points.label\", \"Round points\"),\n },\n now_cost: {\n description: t(\n \"stats.now_cost.description\",\n \"Current buying price in the transfer market.\"\n ),\n label: t(\"stats.now_cost.label\", \"Price\"),\n },\n selected_by_percent: {\n description: t(\n \"stats.selected_by_percent.description\",\n \"The percentage of overall Fantasy managers who currently own the player.\"\n ),\n label: t(\"stats.selected_by_percent.label\", \"Team selected by %\"),\n },\n minutes: {\n description: t(\n \"stats.minutes.description\",\n \"Total minutes played this season.\"\n ),\n label: t(\"stats.minutes.label\", \"Minutes played\"),\n },\n goals_scored: {\n description: t(\n \"stats.goals_scored.description\",\n \"Total goals scored this season.\"\n ),\n label: t(\"stats.goals_scored.label\", \"Goals scored\"),\n },\n assists: {\n description: t(\n \"stats.assists.description\",\n \"Total goal assists â€“ awarded to the player from the goalscoring team who makes the final pass before a goal is scored, including own goals.\"\n ),\n label: t(\"stats.assists.label\", \"Assists\"),\n },\n clean_sheets: {\n description: t(\n \"stats.clean_sheets.description\",\n \"Total clean sheets â€“ awarded to players who do not concede a goal and have played at least 60 minutes.\"\n ),\n label: t(\"stats.clean_sheets.label\", \"Clean sheets\"),\n },\n goals_conceded: {\n description: t(\n \"stats.goals_conceded.description\",\n \"Total number of goals conceded by a team while the player has been on the pitch.\"\n ),\n label: t(\"stats.goals_conceded.label\", \"Goals conceded\"),\n },\n own_goals: {\n description: t(\n \"stats.own_goals.description\",\n \"Awarded to a player who puts the ball into his own teamâ€™s goal.\"\n ),\n label: t(\"stats.own_goals.label\", \"Own goals\"),\n },\n penalties_saved: {\n description: t(\n \"stats.penalties_saved.description\",\n \"Awarded to a goalkeeper who touches the ball when saving a penalty.\"\n ),\n label: t(\"stats.penalties_saved.label\", \"Penalties saved\"),\n },\n penalties_missed: {\n description: t(\n \"stats.penalties_missed.description\",\n \"Awarded to a player who takes a penalty but does not score from the penalty spot.\"\n ),\n label: t(\"stats.penalties_missed.label\", \"Penalties missed\"),\n },\n yellow_cards: {\n description: t(\n \"stats.yellow_cards.description\",\n \"Total yellow cards this season.\"\n ),\n label: t(\"stats.yellow_cards.label\", \"Yellow cards\"),\n },\n red_cards: {\n description: t(\n \"stats.red_cards.description\",\n \"Total red cards this season.\"\n ),\n label: t(\"stats.red_cards.label\", \"Red cards\"),\n },\n saves: {\n description: t(\n \"stats.saves.description\",\n \"Total times a goalkeeper has saved a shot on goal.\"\n ),\n label: t(\"stats.saves.label\", \"Saves\"),\n },\n attacking_bonus: {\n description: t(\n \"stats.attackingBonus.description\",\n \"Bonus points are awarded for attacking, positive actions in a match.\"\n ),\n label: t(\"stats.attackingBonus.label\", \"Attacking Bonus points\"),\n },\n defending_bonus: {\n description: t(\n \"stats.defendingBonus.description\",\n \"Players score extra points for good defending.\"\n ),\n label: t(\"stats.defendingBonus.label\", \"Defending Bonus points\"),\n },\n key_passes: {\n description: t(\n \"stats.keyPasses.description\",\n \"A key pass is one that leads to a shot at goal.\"\n ),\n label: t(\"stats.keyPasses.label\", \"Key passes\"),\n },\n clearances_blocks_interceptions: {\n description: t(\n \"stats.CBI.description\",\n \"Total number of clearances away from the defensive area, blocked shots, interceptions of passes and recoveries.\"\n ),\n label: t(\"stats.CBI.label\", \"Defensive actions\"),\n },\n winning_goals: {\n description: t(\n \"stats.WinGoals.description\",\n \"For scoring the winning goal.\"\n ),\n label: t(\"stats.WinGoals.label\", \"Winning goals\"),\n },\n form: {\n description: t(\n \"stats.form.description\",\n \"Form is a playerâ€™s average score per match, calculated from all matches played by his club in the last 30 days.\"\n ),\n label: t(\"stats.form.label\", \"Form\"),\n },\n dreamteam_count: {\n description: t(\n \"stats.dreamteam_count.description\",\n \"The number of times a player has been selected in a Round Dream Team. Players with the most points in a Round in a valid formation earn a place in the Dream Team.\"\n ),\n label: t(\"stats.dreamteam_count.label\", \"Times in Dream Team\"),\n },\n value_form: {\n description: t(\n \"stats.value_form.description\",\n \"Playerâ€™s form divided by playerâ€™s value.\"\n ),\n label: t(\"stats.value_form.label\", \"Value (form)\"),\n },\n value_season: {\n description: t(\n \"stats.value_season.description\",\n \"Playerâ€™s total points divided by playerâ€™s value.\"\n ),\n label: t(\"stats.value_season.label\", \"Value (season)\"),\n },\n points_per_game: {\n description: t(\n \"stats.points_per_game.description\",\n \"Playerâ€™s total points divided by playerâ€™s number of matches.\"\n ),\n label: t(\"stats.points_per_game.label\", \"Points per match\"),\n },\n transfers_in: {\n description: t(\n \"stats.transfers_in.description\",\n \"Total number of times a player has been transferred in to a team this season.\"\n ),\n label: t(\"stats.transfers_in.label\", \"Transfers in\"),\n },\n transfers_out: {\n description: t(\n \"stats.transfers_out.description\",\n \"Total number of times a player has been transferred out of a team this season.\"\n ),\n label: t(\"stats.transfers_out.label\", \"Transfers out\"),\n },\n transfers_in_event: {\n description: t(\n \"stats.transfers_in_event.description\",\n \"Total number of times a player has been transferred in to a team this Round.\"\n ),\n label: t(\"stats.transfers_in_event.label\", \"Transfers in (round)\"),\n },\n transfers_out_event: {\n description: t(\n \"stats.transfers_out_event.description\",\n \"Total number of times a player has been transferred out of a team this Round.\"\n ),\n label: t(\"stats.transfers_out_event.label\", \"Transfers out (round)\"),\n },\n cost_change_start: {\n description: t(\n \"stats.cost_change_start.description\",\n \"How much a playerâ€™s price has increased since the start of the season.\"\n ),\n label: t(\"stats.cost_change_start.label\", \"Price rise\"),\n },\n cost_change_start_fall: {\n description: t(\n \"stats.cost_change_start_fall.description\",\n \"How much a player price has fallen since the start of the season.\"\n ),\n label: t(\"stats.cost_change_start_fall.label\", \"Price fall\"),\n },\n cost_change_event: {\n description: t(\n \"stats.cost_change_event.description\",\n \"How much a playerâ€™s price has increased this Round.\"\n ),\n label: t(\"stats.cost_change_event.label\", \"Price rise (round)\"),\n },\n cost_change_event_fall: {\n description: t(\n \"stats.cost_change_event_fall.description\",\n \"How much a playerâ€™s price has fallen this Round.\"\n ),\n label: t(\"stats.cost_change_event_fall.label\", \"Price fall (round)\"),\n },\n});\n\nlet _stats: Record = {};\n\nconst getStats = (t: TFunction) => {\n if (!Object.keys(_stats).length) {\n _stats = allStatsDetails(t);\n }\n return _stats;\n};\n\nexport const getStatDetails = (name: string, t: TFunction) => {\n const stats = getStats(t);\n return stats[name] ? stats[name] : null;\n};\n\nexport const getStatNames = (t: TFunction) => Object.keys(getStats(t));\n","import React from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport { getElementControls } from \"../../core/store/elements/reducers\";\nimport { IElement } from \"../../core/store/elements/types\";\nimport { getStatDetails, getStatNames } from \"../../utils/stats\";\nimport { FieldWrap, SelectField } from \"../FieldRenderers\";\n\ninterface ISortOption {\n label: string;\n value: keyof IElement;\n}\n\ntype Props = {\n handleSortChange: (e: React.ChangeEvent) => void;\n sortOptions?: ISortOption[];\n} & WithTranslation;\n\nconst ElementSort: React.FC = ({ handleSortChange, sortOptions, t }) => {\n const controls = useSelector(getElementControls);\n\n const defaultSortOptions: ISortOption[] = getStatNames(t).map((s) => ({\n label: getStatDetails(s, t)!.label,\n value: s,\n }));\n\n const options = sortOptions ?? defaultSortOptions;\n\n return (\n \n );\n};\n\nexport { ElementSort as ElementSortTest };\n\nexport default withTranslation()(ElementSort);\n","import { hideVisually, size } from \"polished\";\nimport * as React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\n\nconst Button = styled.button\n \n {options.map((o) => (\n \n {o.label}\n \n ))}\n \n `\n ${size(42)};\n border: none;\n border-radius: ${({ theme }) => theme.radii[1]};\n background-color: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.green};\n cursor: pointer;\n > svg {\n vertical-align: middle;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n background-color: ${props.theme.colors.greyLight};\n color: ${props.theme.colors.whiteGrey};\n `}\n\n ${(props) =>\n props.isSmall &&\n css`\n ${size(38)};\n `}\n`;\n\nconst HiddenLabel = styled.span`\n ${hideVisually}\n`;\n\ninterface IStyledProps {\n disabled?: boolean;\n isSmall?: boolean;\n}\n\ninterface IProps {\n actionMe: () => void;\n children: React.ReactNode;\n label: string;\n}\n\ntype Props = IProps & IStyledProps;\n\nconst PaginatorButton: React.FC = ({\n actionMe,\n children,\n disabled,\n isSmall,\n label,\n}) => (\n \n {children}\n \n \n);\n\nexport default PaginatorButton;\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Flex } from \"rebass/styled-components\";\nimport { IElement } from \"../../core/store/elements/types\";\nimport {\n ArrowLeft,\n ArrowLeftDouble,\n ArrowRight,\n ArrowRightDouble,\n} from \"../icons/Arrows\";\nimport PaginatorButton from \"../paginator/PaginatorButton\";\n\nexport const paginate = (\n elements: IElement[],\n page: number,\n pageSize: number\n) => {\n const start = (page - 1) * pageSize;\n return {\n data: elements.slice(start, start + pageSize),\n totalPages: Math.ceil(elements.length / pageSize),\n };\n};\n\ninterface IProps {\n page: number;\n setPage: (page: number) => void;\n totalPages: number;\n}\n\nconst Paginator: React.FunctionComponent{label} = ({\n page,\n setPage,\n totalPages,\n}) => {\n const { t } = useTranslation();\n return (\n \n );\n};\n\nexport default Paginator;\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\n\nconst StyledMedia = styled.div\n setPage(1)}\n label={t(\"paginator.first\", \"First\")}\n disabled={page === 1}\n isSmall={true}\n >\n \n \n setPage(page - 1)}\n label={t(\"paginator.previous\", \"Previous\")}\n disabled={page === 1}\n >\n \n \n \n

\n of {totalPages}\n

{page} setPage(page + 1)}\n label={t(\"paginator.next\", \"Next\")}\n disabled={page === totalPages}\n >\n \n \n setPage(totalPages)}\n label={t(\"paginator.last\", \"Last\")}\n disabled={page === totalPages}\n isSmall={true}\n >\n \n \n `\n display: flex;\n ${(props) =>\n props.centred &&\n css`\n align-items: center;\n `}\n`;\n\nconst Img = styled.div`\n margin-inline-end: ${({ theme }) => theme.space[2]};\n`;\n\nconst Body = styled.div`\n flex: 1;\n /* For ElementInTable webname ellipsis */\n max-width: 100%;\n overflow: hidden;\n`;\n\ninterface IStyledMediaProps {\n centred: boolean | undefined;\n}\n\ninterface IMediaProps {\n img: React.ReactNode;\n centred?: boolean;\n children: React.ReactNode;\n}\n\nconst Media: React.FC = ({ img, centred, children }) => (\n \n);\n\nMedia.defaultProps = {\n centred: false,\n};\n\nexport default Media;\n","import { ellipsis } from \"polished\";\nimport * as React from \"react\";\nimport styled from \"styled-components/macro\";\nimport { IElement } from \"../core/store/elements/types\";\nimport { ITeam } from \"../core/store/teams/types\";\nimport Media from \"./Media\";\nimport ElementShirt from \"./ElementShirt\";\nimport { connect } from \"react-redux\";\nimport { getElementTypesById } from \"../core/store/element-types/reducers\";\nimport { RootState } from \"../core/store\";\nimport { IElementTypesById } from \"../core/store/element-types/types\";\n\nconst MenuButton = styled.button`\n ${ellipsis()};\n width: 100%;\n padding: 0;\n border: 0;\n background-color: transparent;\n color: inherit;\n font-family: ${({ theme }) => theme.fonts.base};\n font-weight: bold;\n text-align: start;\n cursor: pointer;\n`;\n\nconst Name = styled.div`\n ${ellipsis()};\n color: ${({ theme }) => theme.colors.primary};\n\n :hover {\n text-decoration: underline;\n }\n`;\n\nconst Team = styled.div`\n margin-inline-end: ${({ theme }) => theme.space[2]};\n font-size: ${({ theme }) => theme.fontSizes[1]};\n`;\n\ninterface IPropsFromState {\n elementTypesById: IElementTypesById;\n}\n\ninterface IOwnProps {\n element: IElement;\n renderElementMenu: () => void;\n team: ITeam;\n}\n\ntype Props = IPropsFromState & IOwnProps;\n\nconst ElementInTable: React.FC\n {img}\n {children}\n = ({\n element,\n elementTypesById,\n renderElementMenu,\n team,\n}) => {\n const Shirt = ;\n return (\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementTypesById: getElementTypesById(state),\n});\n\nexport default connect(mapStateToProps)(ElementInTable);\n","import { rgba } from \"polished\";\nimport * as React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\nimport { IElement } from \"../core/store/elements/types\";\nimport { ITeam } from \"../core/store/teams/types\";\nimport { integerToMoney, isMoneyStat } from \"../core/utils/money\";\nimport ElementDialogButton from \"./ElementDialogButton\";\nimport ElementInTable from \"./ElementInTable\";\nimport { ElementCell, ElementRow } from \"./ElementTable\";\n\nconst StyledElementListRow = styled(ElementRow)\n \n \n \n \n {element.web_name}{team.short_name}`\n ${(props) =>\n props.isProposed &&\n css`\n td,\n button {\n color: ${rgba(\"black\", 0.6)};\n }\n\n img {\n opacity: 0.6;\n }\n `}\n`;\n\nconst ElementListStatCell = styled.td`\n font-weight: bold;\n`;\n\ninterface IStyledProps {\n isProposed: boolean;\n}\n\ninterface IProps extends IStyledProps {\n currencyDivisor: number;\n element: IElement;\n renderElementDialog: () => void;\n renderElementMenu: () => void;\n sort: React.ReactText;\n team: ITeam;\n}\n\nconst ElementListRow: React.FC = ({\n currencyDivisor,\n element,\n isProposed,\n renderElementMenu,\n sort,\n team,\n}) => (\n \n);\n\nexport default ElementListRow;\n","import groupBy from \"lodash/groupBy\";\nimport range from \"lodash/range\";\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { Trans, withTranslation, WithTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box, Flex } from \"rebass/styled-components\";\nimport styled, { css } from \"styled-components/macro\";\nimport {\n getElementTypes,\n getElementTypesById,\n} from \"../../core/store/element-types/reducers\";\nimport { updateElementControls } from \"../../core/store/elements/actions\";\nimport {\n getElementControls,\n getElementsFromControls,\n} from \"../../core/store/elements/reducers\";\nimport {\n showElementSummary,\n updateElementControlsAndMaxCost,\n updateElementTypeControl,\n} from \"../../core/store/elements/thunks\";\nimport { IElement, IElementControls } from \"../../core/store/elements/types\";\nimport {\n getProposedElementsById,\n getTypesNeeded,\n} from \"../../core/store/squad/reducers\";\nimport { proposeElement, removeElement } from \"../../core/store/squad/thunks\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { integerToMoney } from \"../../core/utils/money\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Dialog, { DialogButtonItem } from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport ElementFilter from \"../element-controls/ElementFilter\";\nimport ElementSort from \"../element-controls/ElementSort\";\nimport Paginator from \"../element-controls/Paginator\";\nimport ElementListRow from \"../ElementListRow\";\nimport { ElementTable } from \"../ElementTable\";\nimport { FieldWrap, SearchField, SelectField } from \"../FieldRenderers\";\nimport { ControlArrowLeft } from \"../icons/Arrows\";\nimport Panel from \"../Panel\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\n\nconst Form = styled.form`\n padding: 0 ${({ theme }) => theme.space[2]};\n`;\n\nconst ElementsShown = styled.p`\n margin: ${({ theme }) => theme.space[2]} 0;\n text-align: center;\n\n strong {\n color: ${({ theme }) => theme.colors.primary};\n }\n`;\n\nconst ElementTableHeadStyles = css`\n &&& {\n border: 1px solid ${({ theme }) => theme.colors.blue};\n background-color: ${({ theme }) => theme.colors.blue};\n }\n`;\n\nconst ElementListBlank = styled.th`\n ${ElementTableHeadStyles}\n`;\n\nconst ElementListElement = styled.th`\n ${ElementTableHeadStyles}\n width: 46%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 45%;\n }\n`;\n\nconst ElementListPrice = styled.th`\n ${ElementTableHeadStyles}\n width: 22%;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 25%;\n }\n`;\n\nconst ElementListStat = styled.th`\n ${ElementTableHeadStyles}\n width: 22%;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 18%;\n }\n`;\n\nconst ElementTypeButton = styled.span`\n padding: 0;\n border: 0;\n background-color: transparent;\n color: currentColor;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n cursor: pointer;\n font-family: ${({ theme }) => theme.fonts.base};\n`;\n\nconst ButtonWrap = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n display: none;\n }\n`;\n\nconst PlayerActions = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n margin: 0 auto;\n }\n`;\n\ninterface IOwnProps {\n hideRef: React.RefObject\n \n \n \n \n \n \n \n \n \n {integerToMoney(element.now_cost, currencyDivisor)}\n \n {isMoneyStat(sort)\n ? integerToMoney(element[sort] as number, currencyDivisor)\n : element[sort]}\n ;\n hideSidebar: () => void;\n}\n\ntype Props = IOwnProps & WithTranslation;\n\nconst ElementList: React.FC = ({ hideRef, hideSidebar, t }) => {\n const dispatch = useDispatch();\n const [elementForMenu, setElementForMenu] = useState(null);\n const [page, setPage] = useState(1);\n\n const controls = useSelector(getElementControls);\n const currencyDivisor = 10;\n const elementTypes = useSelector(getElementTypes);\n const elementTypesById = useSelector(getElementTypesById);\n const elements = useSelector(getElementsFromControls);\n const proposedElementsById = useSelector(getProposedElementsById);\n const teamsById = useSelector(getTeamsById);\n const typesNeeded = useSelector(getTypesNeeded);\n\n const updateControls = (controls: IElementControls) =>\n dispatch(updateElementControls(controls));\n const updateControlsAndMaxCost = (controls: IElementControls) =>\n dispatch(updateElementControlsAndMaxCost(controls));\n\n const handleAddElement = (elementId: number) => {\n dispatch(proposeElement(elementId));\n hideSidebar();\n handleHideMenuForElement();\n };\n\n const handleRemoveElement = (position: number) => {\n dispatch(removeElement(position));\n handleHideMenuForElement();\n };\n\n const handleFilterChange = (e: React.ChangeEvent) => {\n setPage(1);\n updateControlsAndMaxCost({\n ...controls,\n filter: e.target.value,\n });\n };\n\n const handleSortChange = (e: React.ChangeEvent) => {\n setPage(1);\n updateControls({\n ...controls,\n sort: e.target.value,\n });\n };\n\n const handleSearchChange = (e: React.ChangeEvent) => {\n setPage(1);\n updateControls({\n ...controls,\n search: e.target.value,\n });\n };\n\n const handleMaxCostChange = (e: React.ChangeEvent) => {\n setPage(1);\n updateControls({\n ...controls,\n maxCost: Number(e.target.value),\n });\n };\n\n const handleShowMenuForElement = (element: IElement) =>\n setElementForMenu(element);\n\n const handleHideMenuForElement = () => {\n setElementForMenu(null);\n };\n\n const showDialog = (element: IElement) => {\n dispatch(showElementSummary(element.id));\n handleHideMenuForElement();\n };\n\n useEffect(() => {\n updateControlsAndMaxCost({\n ...controls,\n filter: \"all\",\n sort: \"total_points\",\n search: \"\",\n getUnavailable: false,\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const paginateAndGroup = (elements: IElement[], pageSize: number) => {\n const start = (page - 1) * pageSize;\n return {\n data: groupBy(elements.slice(start, start + pageSize), \"element_type\"),\n totalPages: Math.ceil(elements.length / pageSize),\n };\n };\n\n const renderMenu = () => {\n const element = elementForMenu;\n\n if (!element) {\n return null;\n }\n\n const proposedElement = proposedElementsById[element.id];\n const roomInSquad = typesNeeded[element.element_type];\n\n let alert = null;\n if (!roomInSquad) {\n alert = (\n \n );\n } else if (proposedElement) {\n alert = (\n \n );\n }\n\n return (\n \n );\n };\n\n const { data, totalPages } = paginateAndGroup(elements.data, 30);\n return (\n \n );\n};\n\nexport default withTranslation()(ElementList);\n","import React, { useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { Box } from \"rebass/styled-components\";\nimport styled, { css } from \"styled-components/macro\";\nimport Button from \"../Button\";\nimport Fixtures from \"../Fixtures\";\nimport { ControlArrowRight } from \"../icons/Arrows\";\nimport { Main, Wrapper } from \"../Layout\";\nimport PageAd from \"../PageAd\";\nimport PageHeader from \"../PageHeader\";\nimport CreateSquad, { IListTableProps } from \"./CreateSquad\";\nimport ElementList from \"./ElementList\";\n\nconst PusherWrap = styled.div`\n overflow-x: hidden;\n`;\n\nconst Pusher = styled.div\n {t(\n \"elementList.errors.maxElementType\",\n \"You already have the maximum number of {{ position }}\",\n {\n position: elementTypesById[element.element_type].plural_name,\n }\n )}\n \n \n \n is already in\n your squad.\n {{ playerName: element.web_name }}\n \n \n \n \n {`${element.first_name} ${element.second_name}`}\n \n \n \n \n \n \n {proposedElement ? (\n handleRemoveElement(proposedElement.position)}\n width={1}\n >\n {t(\"elementList.removePlayer\", \"Remove player\")}\n \n ) : (\n handleAddElement(element.id)}\n disabled={Boolean(!roomInSquad)}\n width={1}\n >\n {t(\"elementList.addPlayer\", \"Add player\")}\n \n )}\n \n showDialog(element)}\n width={1}\n >\n {t(\"viewInformation\", \"View information\")}\n \n \n \n \n \n \n \n }\n >\n {t(\"back\", \"Back\")}\n \n \n \n \n \n \n \n {elementTypes.map(\n (et) =>\n data[et.id] && (\n \n )\n )}\n {renderMenu()}\n \n \n \n \n {range(elements.maxCost, elements.minCost - 1, -5).map((cost) => (\n \n {integerToMoney(cost, 10)}\n \n ))}\n \n \n \n \n players shown\n {{ length: elements.data.length }}\n \n \n \n \n \n \n \n \n \n {data[et.id].map((e) => (\n \n dispatch(updateElementTypeControl(et.id))}\n >\n {et.plural_name}\n \n \n \n \n \n M SARP handleShowMenuForElement(e)}\n renderElementDialog={() => showDialog(e)}\n team={teamsById[e.team]}\n currencyDivisor={currencyDivisor}\n sort={controls.sort}\n />\n ))}\n \n \n `\n position: relative;\n transition: all 300ms;\n\n ${(props) =>\n props.isSidebarVisible &&\n css`\n transform: translate3d(-100%, 0, 0);\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n transform: none;\n }\n `}\n`;\n\nconst PusherSecondary = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n transform: translate3d(100%, 0, 0);\n overflow-y: auto;\n margin-bottom: 2rem;\n padding-top: 2rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n position: static;\n transform: none;\n width: calc(100% / 3);\n padding-inline-end: 1rem;\n padding-inline-start: 1rem;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 25%;\n }\n`;\n\nconst ButtonWrap = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n display: none;\n }\n`;\n\ninterface IOwnProps {\n listTable: (listTableProps: IListTableProps) => void;\n scoreboard: string;\n submitDialog: (handleHide: () => void) => React.ReactNode;\n title: React.ReactNode;\n}\n\ntype Props = IOwnProps & WithTranslation;\n\ninterface IState {\n isSidebarVisible: boolean;\n}\n\nconst SquadBase: React.FC = ({\n listTable,\n scoreboard,\n submitDialog,\n title,\n t,\n}) => {\n const [isSidebarVisible, setIsSidebarVisible] = useState(false);\n\n const showRef = React.createRef();\n const hideRef = React.createRef();\n\n const handleShowSidebar = () => setIsSidebarVisible(true);\n const handleHideSidebar = () => setIsSidebarVisible(false);\n const handleTransitionEnd = (e: React.TransitionEvent) => {\n // Just handle the Pusher transition\n if (e.target === e.currentTarget) {\n isSidebarVisible ? hideRef.current!.focus() : showRef.current!.focus();\n }\n };\n\n return (\n \n );\n};\n\nexport default withTranslation()(SquadBase);\n","import * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getElementTypesBySquadPosition } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesBySquadPosition } from \"../../core/store/element-types/types\";\nimport { updateElementTypeControl } from \"../../core/store/elements/thunks\";\nimport { getFixturesForNextEventByTeam } from \"../../core/store/fixtures/reducers\";\nimport { IFixturesForEventByTeam } from \"../../core/store/fixtures/types\";\nimport { getProposedElements } from \"../../core/store/squad/reducers\";\nimport { IProposedElements } from \"../../core/store/squad/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ITeamsById } from \"../../core/store/teams/types\";\nimport { integerToMoney } from \"../../core/utils/money\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementInTable from \"../ElementInTable\";\nimport { ElementCell, ElementRow, ElementTable } from \"../ElementTable\";\nimport { FixturesForElement } from \"../FixtureForElement\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\nimport { useTranslation } from \"react-i18next\";\n\nconst ScrollWrapper = styled.div`\n overflow-x: auto;\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n overflow-x: visible;\n }\n`;\n\nconst FlexElementCell = styled(ElementCell)`\n display: flex;\n align-items: center;\n`;\n\nconst FilterElTypeButton = styled.button`\n padding: 10px 0 9px;\n border: 0;\n background-color: transparent;\n font-size: 1.3rem;\n white-space: normal;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst SquadListElement = styled.th`\n width: 40%;\n`;\n\nconst SquadListCost = styled.th`\n width: 15%;\n`;\n\nconst SquadListSelected = styled.th`\n width: 15%;\n`;\n\nconst SquadListPoints = styled.th`\n width: 15%;\n`;\n\nconst SquadListFixture = styled.th`\n width: 15%;\n`;\n\ninterface ISquadListRowProps {\n elementTypesByPosition: IElementTypesBySquadPosition | null;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n proposedElements: IProposedElements;\n pos: number;\n renderElementMenu: (position: number) => void;\n showElementType: (elementTypeId: number) => void;\n teamsById: ITeamsById;\n}\n\nconst SquadListRow: React.FC\n \n \n \n \n \n \n

\n \n

\n \n \n \n \n }\n variant=\"tertiary\"\n >\n {t(\"squadBase.playerList\", \"Player List\")}\n \n \n \n \n \n \n \n \n = ({\n elementTypesByPosition,\n proposedElements,\n pos,\n renderElementMenu,\n showElementType,\n teamsById,\n fixturesForNextEventByTeam,\n}) => {\n const { t } = useTranslation();\n\n if (!elementTypesByPosition) {\n return null;\n }\n\n const element = proposedElements[pos];\n return (\n \n );\n};\n\ninterface IPropsFromState {\n elementTypesByPosition: IElementTypesBySquadPosition | null;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n proposedElements: IProposedElements;\n teamsById: ITeamsById;\n}\n\ninterface IPropsFromDispatch {\n showElementType: (elementTypeId: number) => void;\n}\n\ninterface ISquadListTableProps {\n elementType: number;\n positions: number[];\n renderElementMenu: (pos: number) => void;\n}\n\ntype Props = IPropsFromState & IPropsFromDispatch & ISquadListTableProps;\n\nconst SquadListTable: React.SFC\n {element ? (\n <>\n \n {integerToMoney(element.now_cost, 10)}\n {element.selected_by_percent}\n {element.total_points}\n \n \n \n

\n renderElementMenu(pos)}\n element={element}\n team={teamsById[element.team]}\n />\n }\n fixtures={fixturesForNextEventByTeam[element.team]}\n element={element}\n teamsById={teamsById}\n />\n \n \n ) : (\n <>\n \n \n showElementType(elementTypesByPosition[pos].thisType.id)\n }\n >\n {t(\"squad.selectElement\", \"Select {{position}}\", {\n position: elementTypesByPosition[pos].thisType.singular_name,\n })}\n \n \n \n )}\n = ({\n elementType,\n elementTypesByPosition,\n positions,\n ...rest\n}) => {\n const { t } = useTranslation();\n\n if (!elementTypesByPosition) {\n return null;\n }\n return (\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementTypesByPosition: getElementTypesBySquadPosition(state),\n fixturesForNextEventByTeam: getFixturesForNextEventByTeam(state),\n proposedElements: getProposedElements(state),\n teamsById: getTeamsById(state),\n});\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n showElementType: (elementTypeId) =>\n dispatch(updateElementTypeControl(elementTypeId)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SquadListTable);\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport Register from \"../player/Register\";\nimport CreateEntryDialog from \"./CreateEntryDialog\";\nimport SquadBase from \"./SquadBase\";\nimport SquadListTable from \"./SquadListTable\";\n\nconst SquadSelection = () => {\n const { t } = useTranslation();\n const player = useSelector(getPlayerData);\n if (!player || player.dirty) {\n return \n \n \n \n \n \n \n \n \n \n \n \n \n {positions.map((p) => (\n \n {elementTypesByPosition[positions[0]].thisType.plural_name}\n \n \n \n \n M SAR\n \n \n \n \n {t(\"squadListTabel.label.selectedPct\", \"VAL\")}\n \n \n \n \n \n {t(\"squadListTabel.label.totalPoints\", \"TP\")}\n \n \n \n \n \n {t(\"squadListTabel.label.fixtureNext\", \"Mot\")}\n \n ))}\n \n ;\n }\n return (\n }\n scoreboard=\"basic\"\n submitDialog={(handleHide) => (\n \n )}\n title={t(\"squad.title\", \"Squad Selection\")}\n />\n );\n};\n\nexport default SquadSelection;\n","import { useTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport {\n cancelProposedChip,\n proposeAvailableChip,\n} from \"../../core/store/chips/actions\";\nimport {\n getActiveChipName,\n getAvailableChipNames,\n getProposedChipName,\n} from \"../../core/store/chips/reducers\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { IElementsById } from \"../../core/store/elements/types\";\nimport { getNextEvent } from \"../../core/store/events/reducers\";\nimport { IEvent } from \"../../core/store/events/types\";\nimport { ITransferState } from \"../../core/store/my-team/types\";\nimport {\n getFreeTransfers,\n getProposedTransfers,\n getTransferCosts,\n getTransferState,\n} from \"../../core/store/squad/reducers\";\nimport { makeTransfers } from \"../../core/store/squad/thunks\";\nimport { ITransfersData } from \"../../core/store/squad/types\";\nimport { formatRawAsLocalI18n } from \"../../core/utils/datetime\";\nimport { dateLocales } from \"../../i18n\";\nimport Alert, { AlertGroup, AlertItem } from \"../Alert\";\nimport Button from \"../Button\";\nimport Dialog, { DialogButtonItem } from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport Table from \"../Table\";\n\ninterface IOwnProps {\n handleHide: () => void;\n}\n\ninterface IPropsFromState {\n activeChip: string;\n elementsById: IElementsById;\n freeTransfers: number;\n nextEvent: IEvent | null;\n proposedChip: string;\n transferCosts: number;\n transfers: ITransfersData[];\n transferState: ITransferState | null;\n wildcardAvailable: boolean;\n unlimitAvaliable: boolean;\n}\n\ninterface IPropsFromDispatch {\n makeTransfers: () => void;\n cancelChip: (chip: string) => void;\n proposeChip: (chip: string) => void;\n}\n\ntype Props = IOwnProps & IPropsFromState & IPropsFromDispatch;\n\nconst ConfirmTransfersDialog = ({\n freeTransfers,\n handleHide,\n elementsById,\n makeTransfers,\n nextEvent,\n proposedChip,\n transferCosts,\n transfers,\n transferState,\n wildcardAvailable,\n unlimitAvaliable,\n cancelChip,\n proposeChip,\n}: Props) => {\n const { i18n, t } = useTranslation();\n if (!nextEvent || !transferState) {\n return null;\n }\n return (\n \n );\n};\n\nexport { ConfirmTransfersDialog as ConfirmTransfersDialogTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => {\n const availableChips = getAvailableChipNames(state);\n return {\n activeChip: getActiveChipName(state),\n elementsById: getElementsById(state),\n freeTransfers: getFreeTransfers(state),\n nextEvent: getNextEvent(state),\n proposedChip: getProposedChipName(state),\n transferCosts: getTransferCosts(state),\n transferState: getTransferState(state),\n transfers: getProposedTransfers(state),\n wildcardAvailable: availableChips.indexOf(\"wildcard\") > -1,\n unlimitAvaliable: availableChips.indexOf(\"uteam\") > -1,\n };\n};\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n makeTransfers: () => dispatch(makeTransfers()),\n cancelChip: (chip: string) => dispatch(cancelProposedChip(chip)),\n proposeChip: (chip: string) => dispatch(proposeAvailableChip(chip)),\n});\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ConfirmTransfersDialog);\n","import * as React from \"react\";\nimport { withTranslation, WithTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport { getElementTypesBySquadPosition } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesBySquadPosition } from \"../../core/store/element-types/types\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { IElement, IElementsById } from \"../../core/store/elements/types\";\nimport { getFixturesForNextEventByTeam } from \"../../core/store/fixtures/reducers\";\nimport { IFixturesForEventByTeam } from \"../../core/store/fixtures/types\";\nimport {\n getProposedElements,\n getSavedPicks,\n} from \"../../core/store/squad/reducers\";\nimport { IProposedElements, ISavedPicks } from \"../../core/store/squad/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ITeamsById } from \"../../core/store/teams/types\";\nimport { integerToMoney } from \"../../core/utils/money\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementInTable from \"../ElementInTable\";\nimport { ElementCell, ElementRow, ElementTable } from \"../ElementTable\";\nimport { FixturesForElement } from \"../FixtureForElement\";\nimport { ScrollTable } from \"../Table\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\n\nconst SquadListStatus = styled.th`\n width: 7%;\n`;\n\nconst SquadListElement = styled.th`\n width: 28%;\n`;\n\nconst SquadListPrice = styled.th`\n width: 11%;\n`;\n\nconst SquadListForm = styled.th`\n width: 8%;\n`;\n\nconst SquadListPoints = styled.th`\n width: 9%;\n`;\n\nconst SquadListFixture = styled.th`\n width: 15%;\n`;\n\ninterface ISquadListRowProps {\n elementsById: IElementsById;\n elementTypesByPosition: IElementTypesBySquadPosition | null;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n proposedElements: IProposedElements;\n pos: number;\n renderElementMenu: (position: number) => void;\n savedPicks: ISavedPicks;\n teamsById: ITeamsById;\n}\n\nconst TransfersListRow: React.FC\n \n \n {t(\"confirmTransfers.heading\", \"Confirm Transfers\")}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {transfers.map((t, index) => (\n \n \n \n \n \n ))}\n \n \n \n \n \n

{t(\"confirmTransfers.out\", \"Out\")}{t(\"confirmTransfers.in\", \"In\")}{t(\"confirmTransfers.cost\", \"Cost\")}{elementsById[t.element_out].web_name}{elementsById[t.element_in].web_name}\n {transferCosts && index >= freeTransfers\n ? transferState.cost\n : 0}{\" \"}\n pts\n \n {t(\"confirmTransfers.totalCost\", \"Total cost\")}{transferCosts} pts\n {transferCosts > 0 ? (\n \n ) : (\n \n )}\n \n \n \n {wildcardAvailable && proposedChip !== \"uteam\" && (\n \n )}\n \n \n \n {t(\n \"confirmTransfers.transferAlert\",\n \"These transfers will be active for {{name}} ({{time}}) and will deduct {{costs}}pts from your score!\",\n {\n name: nextEvent.name,\n time: formatRawAsLocalI18n(\n nextEvent.deadline_time,\n dateLocales[i18n.language]\n ),\n costs: transferCosts,\n }\n )}\n \n \n \n \n {t(\n \"confirmTransfers.playYourWildcard\",\n \"Play your wildcard to make unlimited free transfers this Round.\"\n )}\n \n \n \n \n {proposedChip === \"wildcard\" && (\n \n )}\n {proposedChip === \"uteam\" && (\n \n )}\n \n \n \n {t(\n \"confirmTransfers.theseTransfersWill\",\n \"These transfers will be active for {{name}} ({{time}})\",\n {\n name: nextEvent.name,\n time: formatRawAsLocalI18n(\n nextEvent.deadline_time,\n dateLocales[i18n.language]\n ),\n }\n )}\n \n \n \n \n \n \n \n {t(\n \"confirmTransfers.youAreProposingWildcard\",\n \"You are proposing to play your wildcard!\"\n )}\n \n {t(\n \"confirmTransfers.cancelYourWildcard\",\n \"Cancel your wildcard if you would prefer to spend points on these transfers.\"\n )}\n \n \n \n \n \n \n {t(\n \"confirmTransfers.proposingUnlimit\",\n \"You are proposing to play your Loan Rangers chip! This allows you to make unlimited free transfers and choose how many players you want from a specific team for a single round. At the next deadline, your squad is returned to how it was at the start of the round.\"\n )}\n \n {t(\n \"confirmTransfers.cancelYourUnlimit\",\n \"Cancel Loan Rangers chip if you would prefer not to do this.\"\n )}\n {\n cancelChip(\"uteam\");\n return handleHide();\n }}\n width={1}\n >\n {t(\"confirmTransfers.cancelUnlimit\", \"Cancel Loan Rangers\")}\n \n \n \n

\n \n \n

\n \n

\n \n = ({\n elementsById,\n elementTypesByPosition,\n fixturesForNextEventByTeam,\n proposedElements,\n pos,\n renderElementMenu,\n savedPicks,\n teamsById,\n}) => {\n if (!elementTypesByPosition) {\n return null;\n }\n\n let element = proposedElements[pos];\n // TODO - We need a visual indicator of the row elementState, in the past we\n // have rendered the '0' shirt instead of the regular one\n let elementState: \"original\" | \"removed\" | \"replaced\" = \"original\";\n if (!element) {\n element = elementsById[savedPicks[pos].element];\n elementState = \"removed\";\n } else if (element.id !== savedPicks[pos].element) {\n elementState = \"replaced\";\n }\n\n return (\n \n );\n};\n\ninterface IPropsFromState {\n elementsById: IElementsById;\n elementTypesByPosition: IElementTypesBySquadPosition | null;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n proposedElements: IProposedElements;\n savedPicks: ISavedPicks;\n teamsById: ITeamsById;\n}\n\ninterface IOwnProps {\n elementType: number;\n positions: number[];\n renderElementDialog: (element: IElement) => void;\n renderElementMenu: (pos: number) => void;\n}\n\ntype Props = IPropsFromState & IOwnProps & WithTranslation;\n\nconst TransfersListTable: React.SFC\n \n \n \n \n {integerToMoney(element.now_cost, 10)}\n {elementState === \"replaced\" ? (\n <>\n {integerToMoney(element.now_cost, 10)}\n {integerToMoney(element.now_cost, 10)}\n \n ) : (\n <>\n {integerToMoney(savedPicks[pos].selling_price, 10)}\n {integerToMoney(savedPicks[pos].purchase_price, 10)}\n \n )}\n {element.form}\n {element.total_points}\n \n \n renderElementMenu(pos)}\n element={element}\n team={teamsById[element.team]}\n />\n }\n fixtures={fixturesForNextEventByTeam[element.team]}\n element={element}\n teamsById={teamsById}\n />\n \n = ({\n t,\n elementType,\n elementTypesByPosition,\n positions,\n ...rest\n}) => {\n if (!elementTypesByPosition) {\n return null;\n }\n return (\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementsById: getElementsById(state),\n elementTypesByPosition: getElementTypesBySquadPosition(state),\n fixturesForNextEventByTeam: getFixturesForNextEventByTeam(state),\n proposedElements: getProposedElements(state),\n savedPicks: getSavedPicks(state),\n teamsById: getTeamsById(state),\n});\n\nexport default withTranslation()(connect(mapStateToProps)(TransfersListTable));\n","import { RouteComponentProps } from \"@reach/router\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { fetchMyTeam } from \"../../core/store/my-team/thunks\";\nimport { ITransferState } from \"../../core/store/my-team/types\";\nimport { getTransferState } from \"../../core/store/squad/reducers\";\nimport ConfirmTransfersDialog from \"./ConfirmTransfersDialog\";\nimport SquadBase from \"./SquadBase\";\nimport TransfersListTable from \"./TransfersListTable\";\nimport { withTranslation, WithTranslation } from \"react-i18next\";\n\ninterface IPropsFromState {\n transfersState: ITransferState | null;\n}\n\ninterface IPropsFromDispatch {\n fetchMyTeam: () => void;\n}\n\ntype Props = RouteComponentProps &\n IPropsFromState &\n IPropsFromDispatch &\n WithTranslation;\n\nclass Transfers extends React.Component\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {positions.map((p) => (\n \n {elementTypesByPosition[positions[0]].thisType.plural_name}\n \n \n \n \n \n {t(\"squadListTabel.label.currentPrice\", \"CP\")}\n \n \n \n \n \n {t(\"squadListTabel.label.sellingPrice\", \"SP\")}\n \n \n \n \n \n {t(\"squadListTabel.label.purchasePrice\", \"PP\")}\n \n \n \n \n \n {t(\"squadListTabel.label.form\", \"F\")}\n \n \n \n \n \n {t(\"squadListTabel.label.totalPoints\", \"TP\")}\n \n \n \n \n \n {t(\"transferListTable.label.fixtureNext\", \"Fix\")}\n \n ))}\n \n {\n public componentDidMount() {\n this.props.fetchMyTeam();\n }\n\n public render() {\n // Don't render until we know what transfers staate we need to render ...\n if (!this.props.transfersState) {\n return null;\n }\n const scoreboard =\n this.props.transfersState.status === \"cost\" ? \"cost\" : \"basic\";\n const { t } = this.props;\n return (\n (\n \n )}\n scoreboard={scoreboard}\n submitDialog={(handleHide) => (\n \n )}\n title={t(\"transfers.title\", \"Transfers\")}\n />\n );\n }\n}\n\nexport { Transfers as TransfersTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n transfersState: getTransferState(state),\n});\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n fetchMyTeam: () => dispatch(fetchMyTeam()),\n});\n\nexport default withTranslation()(\n connect(mapStateToProps, mapDispatchToProps)(Transfers)\n);\n","import { RouteComponentProps } from \"@reach/router\";\nimport React, { useEffect } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { updateElementControls } from \"../../core/store/elements/actions\";\nimport {\n getElementControls,\n getElementsFromControls,\n} from \"../../core/store/elements/reducers\";\nimport { updateElementControlsAndMaxCost } from \"../../core/store/elements/thunks\";\nimport { IElementControls } from \"../../core/store/elements/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementInTable from \"../ElementInTable\";\nimport { ElementRow, ElementTable } from \"../ElementTable\";\nimport { FieldCol, FieldCols } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Title from \"../Title\";\nimport ElementFilter from \"../element-controls/ElementFilter\";\nimport ElementSort from \"../element-controls/ElementSort\";\n\nconst NewsStatus = styled.th`\n width: 10%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 6%;\n }\n`;\n\nconst NewsElement = styled.th`\n width: 39%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 38%;\n }\n`;\n\nconst NewsNews = styled.th`\n width: 51%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 56%;\n }\n`;\n\nconst NewsCell = styled.td`\n white-space: normal;\n`;\n\ntype Props = RouteComponentProps & WithTranslation;\n\nconst News: React.FC = ({ t }) => {\n const dispatch = useDispatch();\n\n const controls = useSelector(getElementControls);\n const elements = useSelector(getElementsFromControls);\n const teamsById = useSelector(getTeamsById);\n\n const updateControls = (controls: IElementControls) =>\n dispatch(updateElementControls(controls));\n\n const handleFilterChange = (e: React.ChangeEvent) => {\n updateControls({\n ...controls,\n filter: e.target.value,\n });\n };\n\n const handleSortChange = (e: React.ChangeEvent) => {\n updateControls({\n ...controls,\n sort: e.target.value,\n });\n };\n\n useEffect(() => {\n dispatch(\n updateElementControlsAndMaxCost({\n ...controls,\n filter: \"all\",\n sort: \"news_added\",\n })\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <>\n \n \n );\n};\n\nexport { News as NewsTest };\n\nexport default withTranslation()(News);\n","import { RouteComponentProps } from \"@reach/router\";\nimport { ellipsis } from \"polished\";\nimport React, { useEffect, useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { updateElementControls } from \"../../core/store/elements/actions\";\nimport {\n getElementControls,\n getElementsFromControls,\n} from \"../../core/store/elements/reducers\";\nimport {\n showElementSummary,\n updateElementControlsAndMaxCost,\n} from \"../../core/store/elements/thunks\";\nimport { IElement, IElementControls } from \"../../core/store/elements/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { integerToMoney } from \"../../core/utils/money\";\nimport { getStatDetails } from \"../../utils/stats\";\nimport Alert from \"../Alert\";\nimport ElementFilter from \"../element-controls/ElementFilter\";\nimport ElementSort from \"../element-controls/ElementSort\";\nimport Paginator, { paginate } from \"../element-controls/Paginator\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementShirt from \"../ElementShirt\";\nimport { ElementRow, ElementTable } from \"../ElementTable\";\nimport { FieldCol, FieldCols } from \"../FieldRenderers\";\nimport { Main, Wrapper } from \"../Layout\";\nimport Media from \"../Media\";\nimport Panel from \"../Panel\";\nimport { ScrollTable } from \"../Table\";\nimport Title from \"../Title\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\n\nconst StatsStatus = styled.th`\n width: 10%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 7%;\n }\n`;\n\nconst StatsElement = styled.th`\n width: 40%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 38%;\n }\n`;\n\nconst StatsCost = styled.th`\n width: 10%;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 11%;\n }\n`;\n\nconst StatsSel = styled.th`\n width: 10%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 11%;\n }\n`;\n\nconst StatsForm = styled.th`\n width: 10%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 11%;\n }\n`;\n\nconst StatsPts = styled.th`\n width: 10%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 11%;\n }\n`;\n\nconst StatsExtra = styled.th`\n width: 10%;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 11%;\n }\n`;\n\nconst ElementNameButton = styled.button`\n ${ellipsis()};\n width: 100%;\n padding: 0;\n border: 0;\n background-color: transparent;\n color: inherit;\n font-family: ${({ theme }) => theme.fonts.base};\n font-weight: bold;\n text-align: start;\n cursor: pointer;\n`;\n\nconst Name = styled.div`\n ${ellipsis()};\n color: ${({ theme }) => theme.colors.primary};\n\n :hover {\n text-decoration: underline;\n }\n`;\n\nconst Team = styled.div`\n margin-inline-end: ${({ theme }) => theme.space[2]};\n font-size: ${({ theme }) => theme.fontSizes[1]};\n`;\n\ntype Props = RouteComponentProps<{ statName?: string }> & WithTranslation;\n\nconst Statistics: React.FC\n \n

\n \n \n \n

\n \n {t(\"news.title\", \"Player Availability\")}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {elements.data\n .filter((e) => e.news)\n .map((e) => (\n \n ))}\n \n {t(\"news.playerCol\", \"Player\")}{t(\"news.newsCol\", \"News\")}\n \n \n \n \n {\n window.console.log(\"not needed\");\n }}\n element={e}\n team={teamsById[e.team]}\n />\n \n \n {e.news} = ({ statName, t }) => {\n const dispatch = useDispatch();\n const [page, setPage] = useState(1);\n\n const controls = useSelector(getElementControls);\n const currencyDivisor = 10;\n const elements = useSelector(getElementsFromControls);\n const teamsById = useSelector(getTeamsById);\n\n const updateControls = (controls: IElementControls) =>\n dispatch(updateElementControls(controls));\n\n const handleFilterChange = (e: React.ChangeEvent) => {\n setPage(1);\n updateControls({\n ...controls,\n filter: e.target.value,\n });\n };\n\n const handleSortChange = (e: React.ChangeEvent) => {\n setPage(1);\n updateControls({\n ...controls,\n sort: e.target.value,\n });\n };\n\n const defaultStats: Array = [\n \"now_cost\",\n \"selected_by_percent\",\n \"form\",\n \"total_points\",\n ];\n\n useEffect(() => {\n dispatch(\n updateElementControlsAndMaxCost({\n ...controls,\n filter: \"all\",\n sort: statName || \"total_points\",\n search: \"\",\n })\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const { data, totalPages } = paginate(elements.data, page, 30);\n const extraStat =\n defaultStats.indexOf(controls.sort) === -1 ? controls.sort : \"\";\n const statDetail = getStatDetails(String(controls.sort), t);\n\n return (\n \n );\n};\n\nexport { Statistics as StatisticsTest };\n\nexport default withTranslation()(Statistics);\n","import * as React from \"react\";\nimport styled from \"styled-components/macro\";\n\ninterface IStyledProps {\n ref?: any;\n}\n\ninterface IProps {\n children: React.ReactNode;\n onClick?: () => void;\n}\n\ntype Props = IStyledProps & IProps;\n\nconst StyledBoldLinkButton = styled.button\n \n

\n \n \n \n \n \n

\n \n {t(\"statistics.title\", \"Statistics\")}\n \n \n \n \n \n \n \n \n \n {statDetail ? statDetail.description : \"\"}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {extraStat ? : null}\n \n \n \n {data.map((e) => (\n \n ))}\n \n \n {t(\"statistics.player\", \"Player\")}\n {t(\"statistics.currency\", \"M SAR\")}\n \n \n \n \n {t(\"statistics.selectedByShort\", \"Sel.\")}\n {t(\"statistics.form\", \"Form\")}\n \n \n \n \n {t(\"statistics.totalPointsShort\", \"TP.\")}\n **\n \n \n \n \n dispatch(showElementSummary(e.id))}\n >\n }\n centred={true}\n >\n \n \n \n \n \n {integerToMoney(e.now_cost, currencyDivisor)}\n {e.selected_by_percent}%\n {e.form}\n {e.total_points}\n {extraStat ? {e[extraStat]} : null}\n {e.web_name}{teamsById[e.team].short_name}\n \n `\n display: inline-flex;\n align-items: center;\n padding: 0;\n border: 0;\n background-color: transparent;\n font-size: inherit;\n text-decoration: none;\n text-align: start;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BoldLinkButton: React.ForwardRefExoticComponent = React.forwardRef(\n ({ children, ...rest }, ref) => (\n \n )\n);\n\nexport default BoldLinkButton;\n","import * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport { getElementStats } from \"../../core/store/element-stats/reducers\";\nimport { IElementStat } from \"../../core/store/element-stats/types\";\nimport { getElementTypesById } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesById } from \"../../core/store/element-types/types\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport {\n IElement,\n IElementsById,\n IElementsEventDataById,\n} from \"../../core/store/elements/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ITeamsById } from \"../../core/store/teams/types\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementInTable from \"../ElementInTable\";\nimport Table from \"../Table\";\n\nconst ScrollTable = styled.div`\n overflow-x: auto;\n width: 100%;\n`;\n\nconst StatsTable = styled(Table)`\n white-space: nowrap;\n`;\n\ninterface IDreamTeamRowProps {\n data: Record\n {children}\n ;\n element: IElement;\n elementTypesById: IElementTypesById;\n renderElementMenu: (index: number) => void;\n stats: ReadonlyArray;\n teamsById: ITeamsById;\n}\n\nconst DreamTeamRow: React.FC = ({\n data,\n element,\n renderElementMenu,\n stats,\n teamsById,\n}) => (\n \n \n \n \n \n renderElementMenu(element.id)}\n element={element}\n team={teamsById[element.team]}\n />\n \n {data.total_points}\n {stats.map((s) => (\n {data[s.name]}\n ))}\n \n);\n\ninterface IOwnProps {\n dataById: IElementsEventDataById;\n elements: number[];\n renderElementMenu: (index: number) => void;\n}\n\ninterface IPropsFromState {\n elementsById: IElementsById;\n elementTypesById: IElementTypesById;\n stats: ReadonlyArray;\n teamsById: ITeamsById;\n}\n\ntype Props = IOwnProps & IPropsFromState;\n\nconst DreamTeamTable: React.FC = ({\n dataById,\n elements,\n elementsById,\n stats,\n ...rest\n}) => {\n return (\n \n );\n};\n\nexport { DreamTeamTable as DreamTeamTableTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => {\n return {\n elementsById: getElementsById(state),\n elementTypesById: getElementTypesById(state),\n stats: getElementStats(state),\n teamsById: getTeamsById(state),\n };\n};\n\nexport default connect(mapStateToProps)(DreamTeamTable);\n","var _circle, _path, _path2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgSub(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 21,\n height: 22,\n viewBox: \"0 0 21 22\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10.5,\n cy: 11.3658,\n r: 10,\n fill: \"#131924\",\n stroke: \"white\"\n })), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.8102 10.1516H3.81016H2.41016L6.61016 5.86584L10.8102 10.1516Z\",\n fill: \"white\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.0102 12.5801L17.0102 12.5801L18.4102 12.5801L14.2102 16.8658L10.0102 12.5801Z\",\n fill: \"white\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgSub);\nexport default __webpack_public_path__ + \"static/media/sub.6be5d4f3.svg\";\nexport { ForwardRef as ReactComponent };","var _circle, _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCaptain(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n role: \"img\",\n focusable: \"false\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"Captain\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 12,\n cy: 12,\n r: 12,\n \"aria-hidden\": \"true\"\n })), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.0769667,14.370341 C14.4472145,15.2780796 13.4066319,15.8124328 12.3019667,15.795341 C10.4380057,15.795341 8.92696674,14.284302 8.92696674,12.420341 C8.92696674,10.55638 10.4380057,9.045341 12.3019667,9.045341 C13.3988206,9.06061696 14.42546,9.58781014 15.0769667,10.470341 L17.2519667,8.295341 C15.3643505,6.02401882 12.1615491,5.35094208 9.51934028,6.67031017 C6.87713147,7.98967826 5.49079334,10.954309 6.17225952,13.8279136 C6.8537257,16.7015182 9.42367333,18.7279285 12.3769667,18.720341 C14.2708124,18.7262708 16.0646133,17.8707658 17.2519667,16.395341 L15.0769667,14.370341 Z\",\n fill: \"currentColor\",\n \"aria-hidden\": \"true\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCaptain);\nexport default __webpack_public_path__ + \"static/media/captain.f6918bb5.svg\";\nexport { ForwardRef as ReactComponent };","var _g, _g2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgViceCaptain(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Layer_1\",\n \"data-name\": \"Layer 1\",\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 32,\n height: 32,\n viewBox: \"0 0 32 32\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"Element Icon vice captain\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon_circle\",\n \"data-name\": \"icon circle\"\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: 16,\n cy: 16,\n r: 16\n }))), _g2 || (_g2 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"symbol_vice\",\n \"data-name\": \"symbol vice\",\n fill: \"currentColor\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M25,8.5l-6.1,16H13.2L7,8.5h4.2L16,21.4,20.8,8.5H25Z\"\n }))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgViceCaptain);\nexport default __webpack_public_path__ + \"static/media/vice-captain.0c8a5676.svg\";\nexport { ForwardRef as ReactComponent };","var _g, _g2;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgX2(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Layer_1\",\n \"data-name\": \"Layer 1\",\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 32,\n height: 32,\n viewBox: \"0 0 32 32\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon_circle\"\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: 16,\n cy: 16,\n r: 16\n }))), _g2 || (_g2 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"currentColor\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.5,16.7l-3.4-5h3.1l1.9,3l1.9-3h3l-3.4,5l3.6,5.2H12L10,18.7l-2.1,3.2h-3L8.5,16.7z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.5,19.6l4.4-3.6c1.7-1.4,2.3-2.1,2.3-3.2c0-1.1-0.7-1.7-1.8-1.7c-1,0-1.7,0.6-2.7,1.8l-2.1-1.7c1.3-1.8,2.6-2.8,5-2.8 c2.8,0,4.6,1.6,4.6,4.1v0c0,2.2-1.1,3.3-3.5,5.1l-2.2,1.7h5.8v2.5h-9.8V19.6z\"\n }))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgX2);\nexport default __webpack_public_path__ + \"static/media/x2.b18573cb.svg\";\nexport { ForwardRef as ReactComponent };","import { size } from \"polished\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled, { css } from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { IElementsById } from \"../../core/store/elements/types\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport { ReactComponent as Captain } from \"../../img/icons/captain.svg\";\nimport { ReactComponent as ViceCaptain } from \"../../img/icons/vice-captain.svg\";\nimport { ReactComponent as x2 } from \"../../img/icons/x2.svg\";\n\nconst StyledCaptain = styled(Captain)\n \n \n \n \n \n Player\n TP\n {stats.map((s) => (\n \n \n \n ))}\n \n \n \n {elements.map((e) => (\n \n {s.label\n .split(\" \")\n .map((w) => w[0])\n .join(\"\")\n .toUpperCase()}\n \n ))}\n \n `\n ${size(14)};\n color: white;\n\n ${(props) =>\n props.variant === \"2capt\" &&\n css`\n color: black;\n fill: #fac101;\n `}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n ${size(16)}\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${size(20)}\n }\n`;\n\nconst StyledViceCaptain = styled(ViceCaptain)`\n ${size(14)};\n color: white;\n\n ${(props) =>\n props.variant === \"2capt\" &&\n css`\n color: black;\n fill: #fac101;\n `}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n ${size(16)}\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${size(20)}\n }\n`;\n\nconst StyledX2 = styled(x2)`\n ${size(14)};\n color: #131924;\n fill: #e6eeff;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n ${size(16)}\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${size(20)}\n }\n`;\n\ninterface IPropsFromState {\n elementsById: IElementsById;\n settings: ISettings | null;\n}\n\ninterface IOwnProps {\n chipName: string | null;\n pick: IPickLight;\n}\n\ninterface IStyledCaptainProps {\n variant?: string;\n}\n\ntype Props = IPropsFromState & IOwnProps & IStyledCaptainProps;\n\nconst TeamElementIcon: React.FC = ({\n chipName,\n elementsById,\n pick,\n settings,\n}) => {\n if (settings && pick.position > settings.squad_squadplay) return null;\n\n if (!chipName || chipName === \"wildcard\" || chipName === \"uteam\") {\n if (pick.is_captain) return ;\n if (pick.is_vice_captain) return ;\n }\n\n if (chipName === \"2capt\") {\n if (pick.is_captain) return ;\n if (pick.is_vice_captain) return ;\n }\n\n const element = elementsById[pick.element];\n\n if (chipName === \"pdbus\" && element.element_type === 2) {\n return ;\n }\n\n return null;\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementsById: getElementsById(state),\n settings: getSettings(state),\n});\n\nexport default connect(mapStateToProps)(TeamElementIcon);\n","import { size } from \"polished\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { showElementSummary } from \"../../core/store/elements/thunks\";\nimport { IElementsById } from \"../../core/store/elements/types\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport { ReactComponent as Sub } from \"../../img/icons/sub.svg\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementShirt from \"../ElementShirt\";\nimport {\n Controls,\n InfoControl,\n PitchElementWrap,\n PrimaryControl,\n StyledPitchElement,\n} from \"../Pitch\";\nimport PitchElementData from \"../PitchElementData\";\nimport { UnstyledButton } from \"../Utils\";\nimport TeamElementIcon from \"./TeamElementIcon\";\n\nconst StyledSub = styled(Sub)`\n ${size(14)}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n ${size(16)}\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${size(20)}\n }\n`;\n\nconst ElementIconWrap = styled.span`\n position: absolute;\n top: 22%;\n right: 0;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n right: 10px;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n right: 20px;\n }\n`;\n\nconst DreamTeamWrap = styled.div`\n position: absolute;\n top: 44%;\n right: 0;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n right: 10px;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n right: 20px;\n }\n`;\n\ninterface IPropsFromState {\n elementsById: IElementsById;\n settings: ISettings | null;\n}\n\ninterface IPropsFromDispatch {\n showElementDialog: (elementId: number) => void;\n}\n\ninterface IOwnProps {\n actionMe: () => void;\n chipName: string | null;\n pick: IPickLight;\n renderDreamTeam: (pick: IPickLight) => React.ReactNode;\n renderElementMenu: () => void;\n renderPickValue: (pick: IPickLight) => React.ReactNode;\n}\n\ntype Props = IPropsFromState & IPropsFromDispatch & IOwnProps;\n\nconst TeamPitchElement: React.FC = ({\n actionMe,\n chipName,\n pick,\n elementsById,\n renderElementMenu,\n renderPickValue,\n renderDreamTeam,\n settings,\n}) => {\n if (!settings) return null;\n\n const element = elementsById[pick.element];\n\n return (\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n elementsById: getElementsById(state),\n settings: getSettings(state),\n});\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n showElementDialog: (elementId) => dispatch(showElementSummary(elementId)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TeamPitchElement);\n","import * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { ThunkDispatch } from \"../../core/store\";\nimport { actionSubstitution } from \"../../core/store/my-team/thunks\";\nimport Pitch, { PitchRow, PitchUnit } from \"../Pitch\";\nimport TeamPitchElement from \"./TeamPitchElement\";\nimport { IPickLight } from \"../../core/store/entries/types\";\n\ninterface IFormationProps {\n generateProps: (i: number) => {\n actionMe: () => void;\n chipName: string | null;\n pick: IPickLight;\n renderDreamTeam: (pick: IPickLight) => React.ReactNode;\n renderElementMenu: () => void;\n renderPickValue: (pick: IPickLight) => React.ReactNode;\n };\n}\n\nconst FiveFourOne: React.FC\n \n \n \n \n\n \n\n \n \n \n \n \n {actionMe && typeof pick.subStatus !== \"undefined\" && (\n \n )}\n \n \n \n \n \n \n \n \n \n {renderDreamTeam(pick)} = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst FiveThreeTwo: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst FiveTwoThree: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst FourFiveOne: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst FourThreeThree: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst FourFourTwo: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst ThreeFourThree: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\nconst ThreeFiveTwo: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({ generateProps }) => (\n <>\n \n \n \n \n \n);\n\ninterface IPropsFromDispatch {\n substitute: (elementId: number) => void;\n}\n\ninterface IProps {\n chipName: string | null;\n formation: string;\n picks: IPickLight[];\n renderDreamTeam: (pick: IPickLight) => React.ReactNode;\n renderElementMenu: (element: number) => void;\n renderPickValue: (pick: IPickLight) => React.ReactNode;\n}\n\ntype Props = IPropsFromDispatch & IProps;\n\ninterface IFormations {\n [key: string]: React.ReactNode;\n}\n\nconst PitchFormation: React.FC\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n = ({\n chipName,\n formation,\n substitute,\n picks,\n renderDreamTeam,\n renderElementMenu,\n renderPickValue,\n}) => {\n const sharedTeamPitchElementProps = (i: number) => ({\n actionMe: () => substitute(picks[i].element),\n chipName,\n pick: picks[i],\n renderDreamTeam,\n renderElementMenu: () => renderElementMenu(picks[i].element),\n renderPickValue,\n });\n const formations: IFormations = {\n \"1-5-4-1\": ,\n \"1-5-3-2\": ,\n \"1-5-2-3\": ,\n \"1-4-5-1\": ,\n \"1-4-4-2\": ,\n \"1-4-3-3\": ,\n \"1-3-5-2\": ,\n \"1-3-4-3\": ,\n };\n return ;\n};\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n substitute: (elementId) => dispatch(actionSubstitution(elementId)),\n});\n\nexport default connect(null, mapDispatchToProps)(PitchFormation);\n","import { RouteComponentProps } from \"@reach/router\";\nimport { useEffect, useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n dreamTeamAsPickLight,\n getEventDreamTeam,\n getEventDreamTeamFormation,\n getOverallDreamTeam,\n getOverallDreamTeamFormation,\n} from \"../../core/store/dream-teams/reducers\";\nimport {\n fetchEventDreamTeam,\n fetchOverallDreamTeam,\n} from \"../../core/store/dream-teams/thunks\";\nimport {\n getElementsById,\n getElementsEventDataById,\n} from \"../../core/store/elements/reducers\";\nimport {\n fetchEventLive,\n showElementSummary,\n} from \"../../core/store/elements/thunks\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport {\n getCurrentEvent,\n getEventsById,\n} from \"../../core/store/events/reducers\";\nimport { getFixturesForEventById } from \"../../core/store/fixtures/reducers\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport BoldLink from \"../BoldLink\";\nimport BoldLinkButton from \"../BoldLinkButton\";\nimport ButtonLink from \"../ButtonLink\";\nimport ElementShirt from \"../ElementShirt\";\nimport Fixtures from \"../Fixtures\";\nimport { ControlArrowLeft, ControlArrowRight } from \"../icons/Arrows\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Media from \"../Media\";\nimport {\n EventPager,\n PagerButton,\n PagerButtonNext,\n PagerHeading,\n} from \"../Pager\";\nimport { NotFound } from \"../Routes\";\nimport SubHeading from \"../SubHeading\";\nimport TabPanel from \"../tabs/TabPanel\";\nimport Tabs from \"../tabs/Tabs\";\nimport Title from \"../Title\";\nimport DreamTeamTable from \"./DreamTeamTable\";\nimport ElementExplainDialog from \"./ElementExplainDialog\";\nimport PitchFormation from \"./PitchFormation\";\nimport valueForPlayerElement from \"./valueForPlayedElement\";\n\nconst DTScoreboardWrapper = styled.div`\n margin: ${({ theme }) => theme.space[4]} 0;\n padding: ${({ theme }) => theme.space[2]};\n border: ${({ theme }) => theme.borders[2]};\n border-radius: ${({ theme }) => theme.radii[2]};\n`;\n\nconst DTScoreboard = styled.div`\n display: flex;\n`;\n\nconst DTScoreboardPanel = styled.div`\n flex: 1;\n margin: ${({ theme }) => theme.space[2]};\n padding: ${({ theme }) => theme.space[2]};\n border: ${({ theme }) => theme.borders[3]};\n border-radius: ${({ theme }) => theme.radii[2]};\n background-color: white;\n text-align: center;\n`;\n\nconst DTScoreboardHeading = styled.h3`\n margin: ${({ theme }) => theme.space[1]};\n font-size: ${({ theme }) => theme.fontSizes[4]};\n`;\n\nconst DTScoreboardValue = styled.div`\n position: relative;\n color: ${({ theme }) => theme.colors.blue};\n font-size: 4rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n padding-top: 0.6rem;\n padding-bottom: 1rem;\n }\n`;\n\nconst TopPlayer = styled.div`\n display: inline-block;\n`;\n\nconst TopPlayerData = styled.div`\n text-align: start;\n`;\n\nconst PitchWrapper = styled(Box)`\n border: ${({ theme }) => theme.borders[2]};\n border-radius: ${({ theme }) => theme.radii[2]};\n`;\n\ntype Props = RouteComponentProps<{ eventId?: string }> & WithTranslation;\n\nconst DreamTeam: React.FC{formations[formation]} = ({ eventId, t }) => {\n const dispatch = useDispatch();\n const [elementForMenu, setElementForMenu] = useState(0);\n\n const data = useSelector((state: RootState) =>\n eventId\n ? getEventDreamTeam(state, Number(eventId))\n : getOverallDreamTeam(state)\n );\n const elementsById = useSelector(getElementsById);\n const elementsDataById = useSelector((state: RootState) =>\n getElementsEventDataById(state, Number(eventId))\n );\n const event = useSelector(getEventsById)[Number(eventId)];\n const fixturesById = useSelector((state: RootState) =>\n getFixturesForEventById(state, Number(eventId))\n );\n const formation = useSelector((state: RootState) =>\n eventId\n ? getEventDreamTeamFormation(state, Number(eventId))\n : getOverallDreamTeamFormation(state)\n );\n const now = useSelector(getCurrentEvent);\n const teamsById = useSelector(getTeamsById);\n\n const showElementDialog = (elementId: number) =>\n dispatch(showElementSummary(elementId));\n\n const handleShowMenuForElement = (element: number) => {\n setElementForMenu(element);\n };\n\n const handleHideMenuForElement = () => {\n setElementForMenu(0);\n };\n\n useEffect(() => {\n if (event) {\n dispatch(fetchEventDreamTeam(event.id));\n dispatch(fetchEventLive(event.id));\n } else {\n dispatch(fetchOverallDreamTeam());\n }\n }, [dispatch, event]);\n\n if (!now) {\n return ;\n }\n if (!data) {\n return null;\n }\n const picks = dreamTeamAsPickLight(data.team);\n const topPlayer = elementsById[data.top_player.id];\n\n // For the overall team we just show the standard element dialog as there\n // is no explain\n if (elementForMenu && !event) {\n showElementDialog(elementForMenu);\n }\n\n // Create a new function on each render as data could have changed and\n // need to ensure a render of connected subcomponents\n const renderPickValue = event\n ? valueForPlayerElement({\n elementsById,\n elementsDataById,\n fixturesById,\n teamsById,\n })\n : (pick: IPickLight) => {\n const elementData = data.team.filter((e) => e.element === pick.element);\n return elementData.length ? elementData[0].points : null;\n };\n return (\n \n );\n};\n\nexport { DreamTeam as DreamTeamTest };\n\nexport default withTranslation()(DreamTeam);\n","var _g, _defs;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgDreamteam(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 32,\n height: 32,\n viewBox: \"0 0 32 32\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n clipPath: \"url(#clip0_1185_132416)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M31.5 16C31.5 24.5604 24.5604 31.5 16 31.5C7.43959 31.5 0.5 24.5604 0.5 16C0.5 7.43959 7.43959 0.5 16 0.5C24.5604 0.5 31.5 7.43959 31.5 16Z\",\n fill: \"white\",\n stroke: \"#0050FF\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M22.13 26L16 21.5L9.75 26L11.88 18.5L6 13.63L13.5 13.38L16 6L18.5 13.5L26 13.75L20 18.5L22.13 26Z\",\n fill: \"#0050FF\"\n }))), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip0_1185_132416\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n width: 32,\n height: 32,\n fill: \"white\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDreamteam);\nexport default __webpack_public_path__ + \"static/media/dreamteam.93b01913.svg\";\nexport { ForwardRef as ReactComponent };","var _polygon, _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgReload(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Non_mover\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n x: \"0px\",\n y: \"0px\",\n width: \"16px\",\n height: \"16px\",\n viewBox: \"0 0 16 16\",\n enableBackground: \"new 0 0 16 16\",\n xmlSpace: \"preserve\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"Reload\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _polygon || (_polygon = /*#__PURE__*/React.createElement(\"polygon\", {\n points: \"7,16 11,16 16,11 11,6 7,6 12,11 \"\n })), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.3,0L16,0v3H6.3C4.5,3,3,4.5,3,6.2s1.5,3.2,3.3,3.2h7.2v3H6.3C2.9,12.4,0,9.6,0,6.2S2.8,0,6.3,0z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgReload);\nexport default __webpack_public_path__ + \"static/media/reload.0ae64c38.svg\";\nexport { ForwardRef as ReactComponent };","import { size } from \"polished\";\nimport styled from \"styled-components/macro\";\nimport { ReactComponent as BaseDreamTeam } from \"../../img/icons/dreamteam.svg\";\n\nconst DreamTeam = styled(BaseDreamTeam)`\n ${size(14)};\n color: white;\n fill: #005baa;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n ${size(16)}\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${size(20)}\n }\n`;\n\nexport default DreamTeam;\n","import styled from \"styled-components/macro\";\n\nconst Bench = styled.div`\n margin-bottom: 3rem;\n background: linear-gradient(#afafaf, #e0e0e0);\n );\n`;\n\nexport default Bench;\n","import * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { ThunkDispatch } from \"../../core/store\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport { actionSubstitution } from \"../../core/store/my-team/thunks\";\nimport TeamPitchElement from \"./TeamPitchElement\";\n\nconst StyledBenchUnit = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n padding-top: ${({ theme }) => theme.space[1]};\n`;\n\nconst BenchUnitHeading = styled.h3`\n order: 2;\n margin: 0.2rem 0;\n color: #61605c;\n font-size: ${({ theme }) => theme.fontSizes[0]};\n text-align: center;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n font-size: ${({ theme }) => theme.fontSizes[3]};\n }\n`;\n\ninterface IPropsFromDispatch {\n substitute: (elementId: number) => void;\n}\n\ninterface IProps {\n chipName: string | null;\n heading: React.ReactNode;\n pick: IPickLight;\n renderDreamTeam: (pick: IPickLight) => React.ReactNode;\n renderElementMenu: (pick: IPickLight) => void;\n renderPickValue: (element: IPickLight) => React.ReactNode;\n substitute: (elementId: number) => void;\n}\n\ntype Props = IPropsFromDispatch & IProps;\n\nconst BenchUnit: React.FC\n \n \n

\n \n {/* ROUND PAGER */}\n \n {/* TEAM */}\n \n {event && elementForMenu ? (\n

\n \n {t(\"dreamTeam.dt\", \"Dream Team\")}\n {event ? (\n \n ) : (\n \n )}\n {/* SCOREBOARD */}\n\n \n \n \n {(event.id > 1 || event.id < now.id) && (\n \n )}\n {event.name}\n {event.id > 1 && (\n \n )}\n {event.id < now.id && (\n \n )}\n \n \n \n {t(\"dreamTeam.prev\", \"Previous\")}\n \n \n \n {t(\"dreamTeam.next\", \"Next\")}\n \n \n \n \n {t(\"dreamTeam.overall\", \"Overall\")}\n \n \n \n \n \n \n \n \n \n {t(\"dreamTeam.topPlayer\", \"Top Player\")}\n \n showElementDialog(topPlayer.id)}\n >\n {topPlayer.web_name}\n \n \n \n \n \n \n }\n centred={true}\n >\n \n \n \n \n \n

{teamsById[topPlayer.team].short_name}

\n {data.top_player.points}{\" \"}\n {t(\"dreamTeam.points\", \"Points\")}\n

\n \n \n {event ? (\n \n ) : (\n \n )}\n \n {t(\"dreamTeam.totalPoints\", \"Total Points\")}\n \n {data.team.reduce((total, e) => total + e.points, 0)}\n \n {t(\"dreamTeam.overall\", \"Overall\")}\n \n {t(\"dreamTeam.round\", \"Round\")}\n \n \n \n \n \n \n \n \n \n null}\n renderElementMenu={handleShowMenuForElement}\n renderPickValue={renderPickValue}\n />\n \n \n \n \n e.element)}\n renderElementMenu={handleShowMenuForElement}\n dataById={elementsDataById}\n />\n \n ) : null}\n {event && }\n \n \n = ({\n chipName,\n heading,\n pick,\n renderDreamTeam,\n renderElementMenu,\n renderPickValue,\n substitute,\n}) => (\n \n);\n\nconst mapDispatchToProps = (dispatch: ThunkDispatch): IPropsFromDispatch => ({\n substitute: (elementId) => dispatch(actionSubstitution(elementId)),\n});\n\nexport default connect(null, mapDispatchToProps)(BenchUnit);\n","import * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport { getElementStats } from \"../../core/store/element-stats/reducers\";\nimport { IElementStat } from \"../../core/store/element-stats/types\";\nimport { getElementTypesById } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesById } from \"../../core/store/element-types/types\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport {\n IElement,\n IElementEventStats,\n IElementsById,\n IElementsEventDataById,\n} from \"../../core/store/elements/types\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ITeamsById } from \"../../core/store/teams/types\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementInTable from \"../ElementInTable\";\nimport { ElementRow } from \"../ElementTable\";\nimport Table from \"../Table\";\nimport TeamElementIcon from \"./TeamElementIcon\";\n\nconst ScrollTable = styled.div`\n overflow-x: auto;\n width: 100%;\n`;\n\nconst StatsTable = styled(Table)`\n white-space: nowrap;\n`;\n\ninterface IEntryEventRowProps {\n chipName: string | null;\n data: IElementEventStats;\n pick: IPickLight;\n element: IElement;\n elementTypesById: IElementTypesById;\n renderElementMenu: (index: number) => void;\n stats: ReadonlyArray\n \n {heading} substitute(pick.element)}\n chipName={chipName}\n pick={pick}\n renderDreamTeam={renderDreamTeam}\n renderElementMenu={() => renderElementMenu(pick)}\n renderPickValue={renderPickValue}\n />\n ;\n teamsById: ITeamsById;\n}\n\nconst EntryEventRow: React.FC = ({\n chipName,\n data,\n pick,\n element,\n renderElementMenu,\n stats,\n teamsById,\n}) => (\n \n);\n\ninterface IOwnProps {\n chipName: string | null;\n dataById: IElementsEventDataById | null;\n picks: IPickLight[];\n renderElementMenu: (index: number) => void;\n title: string;\n}\n\ninterface IPropsFromState {\n elementsById: IElementsById;\n elementTypesById: IElementTypesById;\n stats: ReadonlyArray\n \n \n \n \n \n \n \n renderElementMenu(pick.element)}\n element={element}\n team={teamsById[element.team]}\n />\n \n {data.total_points * Math.max(pick.multiplier, 1)}\n {stats.map((s) => (\n {data[s.name]}\n ))}\n ;\n teamsById: ITeamsById;\n}\n\ntype Props = IOwnProps & IPropsFromState;\n\nconst EntryEventTable: React.FC = ({\n dataById,\n elementsById,\n picks,\n stats,\n title,\n ...rest\n}) => {\n if (!dataById) {\n return null;\n }\n return (\n \n );\n};\n\nexport { EntryEventTable as EntryEventTableTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => {\n return {\n elementsById: getElementsById(state),\n elementTypesById: getElementTypesById(state),\n stats: getElementStats(state),\n teamsById: getTeamsById(state),\n };\n};\n\nexport default connect(mapStateToProps)(EntryEventTable);\n","import { Link as ReachLink, RouteComponentProps } from \"@reach/router\";\nimport range from \"lodash/range\";\nimport { hideVisually, size } from \"polished\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled, { css } from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n getElementsById,\n getElementsEventDataById,\n} from \"../../core/store/elements/reducers\";\nimport { fetchEventLive } from \"../../core/store/elements/thunks\";\nimport {\n getEntry,\n getEntryEventFormation,\n getEntryEventPicks,\n getEntryEventPoints,\n} from \"../../core/store/entries/reducers\";\nimport {\n fetchEntryEventPicks,\n fetchEntrySummary,\n} from \"../../core/store/entries/thunks\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport {\n getCurrentEvent,\n getEventsById,\n} from \"../../core/store/events/reducers\";\nimport { getFixturesForEventById } from \"../../core/store/fixtures/reducers\";\nimport { fetchFixtures } from \"../../core/store/fixtures/thunks\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { IPlayer } from \"../../core/store/player/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ReactComponent as BaseDreamTeam } from \"../../img/icons/dreamteam.svg\";\nimport { ReactComponent as BaseReload } from \"../../img/icons/reload.svg\";\nimport { ChipName, getChipName } from \"../../utils/chips\";\nimport { isRTL } from \"../../utils/locale\";\nimport ButtonLink from \"../ButtonLink\";\nimport Entry from \"../Entry\";\nimport Fixtures from \"../Fixtures\";\nimport { ArrowHyphen, ControlArrowRight } from \"../icons/Arrows\";\nimport DreamTeam from \"../icons/DreamTeam\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Link from \"../Link\";\nimport PageAd from \"../PageAd\";\nimport {\n EventPager,\n PagerButton,\n PagerButtonNext,\n PagerHeading,\n} from \"../Pager\";\nimport Panel from \"../Panel\";\nimport { ElementRow } from \"../Pitch\";\nimport { NotFound } from \"../Routes\";\nimport Table from \"../Table\";\nimport TabPanel from \"../tabs/TabPanel\";\nimport Tabs from \"../tabs/Tabs\";\nimport Title from \"../Title\";\nimport Bench from \"./Bench\";\nimport BenchUnit from \"./BenchUnit\";\nimport ElementExplainDialog from \"./ElementExplainDialog\";\nimport EntryEventTable from \"./EntryEventTable\";\nimport PitchFormation from \"./PitchFormation\";\nimport valueForPlayerElement from \"./valueForPlayedElement\";\n\nconst PointsScoreboardWrap = styled.div`\n border: ${({ theme }) => theme.borders[2]};\n border-radius: ${({ theme }) => theme.radii[2]};\n margin: ${({ theme }) => theme.space[2]} 0;\n padding: ${({ theme }) => theme.space[3]} ${({ theme }) => theme.space[1]} 0;\n`;\n\nconst StyledPitchWrapper = styled(Box)`\n border: 1px solid ${({ theme }) => theme.colors.primary};\n border-radius: ${({ theme }) => theme.radii[2]};\n`;\n\nconst PointsScoreboard = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n padding: ${({ theme }) => theme.space[2]} 0;\n margin: 0 ${({ theme }) => theme.space[2]};\n`;\n\nconst ScoreboardPrimary = styled.div`\n flex: 0 0 38%;\n padding-inline-end: ${({ theme }) => theme.space[2]};\n padding-inline-start: ${({ theme }) => theme.space[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n flex: 0 0 34%;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n flex-basis: calc(22% - ${({ theme }) => theme.space[1]});\n margin-bottom: 0;\n }\n`;\n\ninterface IPrimaryPanelProps {\n chipPlayed?: boolean;\n}\n\nconst PrimaryPanel = styled.div\n \n \n \n \n \n \n {title}\n TP\n {stats.map((s) => (\n \n \n \n ))}\n \n \n \n {picks.map((p) => (\n \n {s.label\n .split(\" \")\n .map((w) => w[0])\n .join(\"\")\n .toUpperCase()}\n \n ))}\n \n `\n position: relative;\n border-radius: ${({ theme }) => theme.space[3]};\n color: ${({ theme }) => theme.colors.white};\n background-color: ${({ theme }) => theme.colors.blue};\n text-align: center;\n\n ${(props) =>\n props.chipPlayed &&\n css`\n padding-top: 2rem;\n padding-bottom: 1.8rem;\n `}\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding-top: 1rem;\n padding-bottom: 1rem;\n margin-bottom: 0;\n }\n`;\n\nconst PrimaryHeading = styled.h4`\n margin: 0;\n padding: 1.5rem;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding-top: 0.8rem;\n padding-bottom: 0.7rem;\n }\n`;\n\nconst PrimaryValue = styled.div`\n padding-top: ${({ theme }) => theme.space[3]};\n color: ${({ theme }) => theme.colors.white};\n font-size: 3rem;\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n font-size: 4rem;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n padding-bottom: 0.3rem;\n }\n`;\n\nconst ReloadButton = styled.button`\n position: absolute;\n top: 40%;\n right: ${isRTL() && `0`};\n left: ${!isRTL() && `0`};\n transform: ${isRTL()\n ? `translateY(-50%) scaleX(-1) `\n : `translateY(-50%) scaleX(1) `};\n padding: ${({ theme }) => theme.space[1]};\n border: 0;\n border-radius: ${({ theme }) => theme.radii[0]};\n background-color: ${({ theme }) => theme.colors.primary};\n line-height: 0;\n cursor: pointer;\n`;\n\nconst Reload = styled(BaseReload)`\n fill: white;\n`;\n\nconst ReloadButtonText = styled.span`\n ${hideVisually()}\n`;\n\nconst ScoreboardSecondary = styled.div`\n display: flex;\n align-items: center;\n width: 100%;\n`;\n\nconst SecondaryPanel = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n }\n`;\n\nconst SecondaryItem = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: auto;\n border: 3px solid black;\n border-radius: ${({ theme }) => theme.radii[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n flex-basis: 45%;\n margin: 0;\n }\n`;\n\nconst SecondaryHeading = styled.h4`\n margin-top: 1.7rem;\n margin-bottom: 1.7rem;\n font-family: ${({ theme }) => theme.fonts.base};\n font-size: ${({ theme }) => theme.fontSizes[1]};\n font-weight: normal;\n`;\n\nconst SecondaryValue = styled.div`\n padding-bottom: 0.7rem;\n font-size: ${({ theme }) => theme.fontSizes[5]};\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n font-size: ${({ theme }) => theme.fontSizes[6]};\n }\n color: ${({ theme }) => theme.colors.blue};\n`;\n\nconst DreamTeamWrap = styled.div`\n width: 40%;\n margin: 0 auto ${({ theme }) => theme.space[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[1]}) {\n width: 25%;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n width: 30%;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: 20%;\n }\n`;\n\nconst DreamTeamLinkIcon = styled(BaseDreamTeam)`\n ${size(16)}\n margin-inline-end: ${({ theme }) => theme.space[1]};\n`;\n\nconst DreamTeamLink = styled(ReachLink)`\n display: flex;\n align-items: center;\n justify-content: space-around;\n border-radius: ${({ theme }) => theme.radii[1]};\n padding: 0.6rem;\n background-color: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.green};\n text-decoration: none;\n`;\n\nconst ChipStatus = styled.div`\n padding: ${({ theme }) => theme.space[2]};\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n ${({ theme }) => theme.space[1]};\n }\n border-radius: 5px;\n background-color: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.white};\n font-size: 1.1rem;\n font-weight: bold;\n text-align: center;\n`;\n\ntype OwnProps = RouteComponentProps<{ entryId: string; eventId: string }>;\n\ntype Props = OwnProps & WithTranslation;\n\nconst EntryEvent: React.FC = ({\n entryId: initialEntryId,\n eventId: initialEventId,\n t,\n}) => {\n const dispatch = useDispatch();\n const [pickForMenu, setPickForMenu] = useState(null);\n\n const entryId = Number(initialEntryId);\n const eventId = Number(initialEventId);\n const player = useSelector(getPlayerData) as IPlayer;\n const elementsById = useSelector(getElementsById);\n const elementsDataById = useSelector((state: RootState) =>\n getElementsEventDataById(state, eventId)\n );\n const entry = useSelector((state: RootState) => getEntry(state, entryId));\n const entryData = useSelector((state: RootState) =>\n getEntryEventPicks(state, entryId, eventId)\n );\n const event = useSelector(\n (state: RootState) => getEventsById(state)[eventId]\n );\n const fixturesById = useSelector((state: RootState) =>\n getFixturesForEventById(state, eventId)\n );\n const formation = useSelector((state: RootState) =>\n getEntryEventFormation(state, entryId, eventId)\n );\n const mine = Boolean(player && player.entry && player.entry === entryId);\n const now = useSelector((state: RootState) => getCurrentEvent(state));\n const points = useSelector((state: RootState) =>\n getEntryEventPoints(state, entryId, eventId)\n );\n const settings = useSelector(getSettings) as ISettings;\n const teamsById = useSelector(getTeamsById);\n\n const handleShowMenuForPickElement = (element: number) => {\n const matches = entryData!.picks.filter((p) => p.element === element);\n if (matches.length) {\n setPickForMenu(matches[0]);\n }\n };\n\n const handleHideMenuForPick = () => {\n setPickForMenu(null);\n };\n\n const renderDreamTeam = (pick: IPickLight) =>\n elementsDataById &&\n elementsDataById[pick.element] &&\n elementsDataById[pick.element].stats.in_dreamteam ? (\n \n \n \n ) : null;\n\n const fetchDataAndFixtures = () => {\n fetchData();\n dispatch(fetchFixtures(eventId));\n };\n\n const fetchData = useCallback(() => {\n dispatch(fetchEntrySummary(entryId));\n dispatch(fetchEntryEventPicks(entryId, eventId));\n dispatch(fetchEventLive(eventId));\n }, [dispatch, entryId, eventId]);\n\n useEffect(() => {\n fetchData();\n }, [entryId, eventId, fetchData]);\n\n // Handle unknown and unstarted events\n if (!now || !event || event.id > now.id) {\n return ;\n }\n if (!entry || !entryData) {\n return null;\n }\n\n const chipName = entryData.active_chip\n ? getChipName(entryData.active_chip as ChipName, t)\n : \"\";\n\n // Create a new function on each render as data could have changed and\n // need to ensure a render of connected subcomponents\n const renderPickValue = valueForPlayerElement({\n elementsById,\n elementsDataById,\n fixturesById,\n teamsById,\n });\n const benchHeading: Record = {\n 11: (\n \n ),\n 12: \"1\",\n 13: \"2\",\n 14: \"3\",\n };\n\n // Handle events before the entry started\n return (\n \n );\n};\n\nexport { EntryEvent as EntryEventTest };\n\nexport default withTranslation()(EntryEvent);\n","import * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport styled from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport { getActiveOrProposedTeamChipName } from \"../../core/store/chips/reducers\";\nimport { getElementTypesById } from \"../../core/store/element-types/reducers\";\nimport { IElementTypesById } from \"../../core/store/element-types/types\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { IElement, IElementsById } from \"../../core/store/elements/types\";\nimport { getFixturesForNextEventByTeam } from \"../../core/store/fixtures/reducers\";\nimport { IFixturesForEventByTeam } from \"../../core/store/fixtures/types\";\nimport { IPickProposed } from \"../../core/store/my-team/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ITeamsById } from \"../../core/store/teams/types\";\nimport ElementDialogButton from \"../ElementDialogButton\";\nimport ElementInTable from \"../ElementInTable\";\nimport { ElementCell, ElementRow, ElementTable } from \"../ElementTable\";\nimport { FixturesForElement } from \"../FixtureForElement\";\nimport { ScrollTable } from \"../Table\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\nimport TeamElementIcon from \"./TeamElementIcon\";\nimport { withTranslation, WithTranslation } from \"react-i18next\";\n\nconst MyTeamStatus = styled.th`\n width: 6%;\n`;\n\nconst MyTeamCpt = styled.th`\n width: 4%;\n`;\n\nconst MyTeamElement = styled.th`\n width: 32%;\n`;\n\nconst MyTeamPos = styled.th`\n width: 12%;\n`;\n\nconst MyTeamForm = styled.th`\n width: 10%;\n`;\n\nconst MyTeamRD = styled.th`\n width: 10%;\n`;\n\nconst MyTeamPts = styled.th`\n width: 12%;\n`;\n\nconst MyTeamFix = styled.th`\n width: 14%;\n`;\n\ninterface IMyTeamRowProps {\n chipInPlayName: string | null;\n pick: IPickProposed;\n element: IElement;\n elementTypesById: IElementTypesById;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n renderElementMenu: (index: number) => void;\n teamsById: ITeamsById;\n}\n\nconst MyTeamRow: React.FC\n {t(\"entryEvent.goalkeeper.abbr\", \"GK\")}\n \n \n \n

\n \n\n {/* ROUND PAGER */}\n \n\n {/* TEAM */}\n \n {entryData.automatic_subs.length > 0 && (\n \n )}\n {pickForMenu && (\n

\n \n \n {t(\"entryEvent.title\", \"Points\")} - {entry.name}\n \n \n\n {/* SCOREBOARD */}\n\n \n \n {(event.id > entry.started_event || event.id < now.id) && (\n \n )}\n \n {event.id > entry.started_event && (\n \n )}\n \n {event.id < now.id && (\n \n )}\n {/* Also need to check isn't last event */}\n {mine && event.id === now.id && (\n \n )}\n \n \n \n {t(\"entryEvent.prev\", \"Previous\")}\n \n \n \n {event.name}\n \n {t(\"entryEvent.next\", \"Next\")}\n \n \n \n \n {t(\"entryEvent.next\", \"Next\")}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {t(\"entryEvent.average\", \"Average Pts\")}\n \n {event.average_entry_score || \"-\"}\n \n \n \n \n {t(\"entryEvent.highest\", \"Highest Pts\")}\n \n {event.highest_scoring_entry ? (\n \n {event.highest_score || \"???\"}\n \n ) : (\n \"-\"\n )}\n \n \n \n \n \n \n \n {chipName && (\n \n )}\n \n {points}\n {!event.finished && (\n \n )}\n \n \n \n {t(\"entryEvent.reload\", \"Reload Points\")}\n \n \n {event.finished\n ? t(\"entryEvent.finalPoints\", \"Final Points\")\n : t(\"entryEvent.latestPoints\", \"Latest Points\")}\n \n {t(\n \"entryEvent.ChipStatus.played\",\n \"{{ chipName }} played\",\n {\n chipName: chipName,\n }\n )}\n \n \n \n \n \n \n \n {t(\"entryEvent.rank\", \"RD Rank\")}\n \n {entryData.entry_history.rank\n ? entryData.entry_history.rank.toLocaleString()\n : \"-\"}\n \n \n \n \n {t(\"entryEvent.transfers\", \"Transfers\")}\n \n \n {entryData.entry_history.event_transfers}\n {\" \"}\n {entryData.entry_history.event_transfers_cost\n ? `(-${entryData.entry_history.event_transfers_cost} pts)`\n : \"\"}\n \n \n \n \n {t(\"entryEvent.dreamTeam\", \"Dream Team\")}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {range(\n settings.squad_squadplay,\n settings.squad_squadsize\n ).map((i) => (\n \n handleShowMenuForPickElement(\n entryData.picks[i].element\n )\n }\n renderPickValue={renderPickValue}\n />\n ))}\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n {entryData.automatic_subs.map((s) => (\n \n \n \n \n ))}\n \n

{t(\"entryEvent.autoSubs.playerOut\", \"Player out\")}{t(\"entryEvent.autoSubs.playerIn\", \"Player in\")}{elementsById[s.element_out].web_name}{elementsById[s.element_in].web_name}\n )}\n \n \n \n \n \n \n = ({\n chipInPlayName,\n pick,\n element,\n elementTypesById,\n fixturesForNextEventByTeam,\n renderElementMenu,\n teamsById,\n}) => (\n \n);\n\ninterface IOwnProps {\n picks: IPickProposed[];\n renderElementMenu: (index: number) => void;\n title: string;\n}\n\ninterface IPropsFromState {\n chipInPlayName: string | null;\n elementsById: IElementsById;\n elementTypesById: IElementTypesById;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n teamsById: ITeamsById;\n}\n\ntype Props = IOwnProps & IPropsFromState & WithTranslation;\n\nconst MyTeamTable: React.FC\n \n \n \n \n \n \n \n {elementTypesById[element.element_type].singular_name_short}\n {element.form}\n {element.event_points}\n {element.total_points}\n \n \n renderElementMenu(pick.element)}\n element={element}\n team={teamsById[element.team]}\n />\n }\n fixtures={fixturesForNextEventByTeam[element.team]}\n element={element}\n teamsById={teamsById}\n />\n \n = ({\n t,\n elementsById,\n picks,\n title,\n ...rest\n}) => {\n return (\n \n );\n};\n\nexport { MyTeamTable as MyTeamTableTest };\n\nconst mapStateToProps = (state: RootState): IPropsFromState => {\n return {\n chipInPlayName: getActiveOrProposedTeamChipName(state),\n elementsById: getElementsById(state),\n elementTypesById: getElementTypesById(state),\n fixturesForNextEventByTeam: getFixturesForNextEventByTeam(state),\n teamsById: getTeamsById(state),\n };\n};\n\nexport default withTranslation()(connect(mapStateToProps)(MyTeamTable));\n","import { range } from \"lodash\";\nimport { size } from \"polished\";\nimport { Trans, WithTranslation, withTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport styled, { css } from \"styled-components/macro\";\nimport { RootState } from \"../../core/store\";\nimport {\n cancelActiveChip,\n cancelProposedChip,\n proposeAvailableChip,\n restoreCancelledChip,\n} from \"../../core/store/chips/actions\";\nimport {\n getActiveChip,\n getActiveOrProposedAllChipName,\n getActiveOrProposedTeamChipName,\n getPotentialChips,\n teamChipsHaveChanged,\n} from \"../../core/store/chips/reducers\";\nimport { IPotentialChip } from \"../../core/store/chips/types\";\nimport { getElementsById } from \"../../core/store/elements/reducers\";\nimport { showElementSummary } from \"../../core/store/elements/thunks\";\nimport { IElement, IElementsById } from \"../../core/store/elements/types\";\nimport { getEntry } from \"../../core/store/entries/reducers\";\nimport { fetchEntrySummary } from \"../../core/store/entries/thunks\";\nimport { IPickLight } from \"../../core/store/entries/types\";\nimport { getNextEvent } from \"../../core/store/events/reducers\";\nimport { getFixturesForNextEventByTeam } from \"../../core/store/fixtures/reducers\";\nimport { IFixturesForEventByTeam } from \"../../core/store/fixtures/types\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport { ISettings } from \"../../core/store/game/types\";\nimport {\n changeCaptain,\n changeViceCaptain,\n} from \"../../core/store/my-team/actions\";\nimport {\n getMyFormation,\n getMyPicksProposed,\n getMyTeamSavingState,\n hasMyTeamChanged,\n isMyTeamValid,\n} from \"../../core/store/my-team/reducers\";\nimport {\n actionSubstitution,\n fetchMyTeam,\n saveMyTeam,\n} from \"../../core/store/my-team/thunks\";\nimport { IPickProposed } from \"../../core/store/my-team/types\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport { ILoggedInPlayer } from \"../../core/store/player/types\";\nimport { getTeamsById } from \"../../core/store/teams/reducers\";\nimport { ITeamsById } from \"../../core/store/teams/types\";\nimport {\n formatRawAsISO,\n formatRawAsLocalI18n,\n} from \"../../core/utils/datetime\";\nimport { ReactComponent as ArrowRight } from \"../../img/icons/arrow-right.svg\";\nimport { ChipName, getAllChipDetails } from \"../../utils/chips\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Copy from \"../Copy\";\nimport DeadlineBar from \"../DeadlineBar\";\nimport Dialog, { DialogButtonItem } from \"../Dialog\";\nimport DialogHeading from \"../DialogHeading\";\nimport DialogManager from \"../DialogManager\";\nimport Entry from \"../Entry\";\nimport { FixturesForElement } from \"../FixtureForElement\";\nimport Fixtures from \"../Fixtures\";\nimport { Main, Secondary, Wrapper } from \"../Layout\";\nimport Link from \"../Link\";\nimport { ElementRow } from \"../Pitch\";\nimport DreamTeam from \"../icons/DreamTeam\";\n// import ShirtSoonAlert from \"../ShirtSoonAlert\";\nimport { useEffect, useState } from \"react\";\nimport { dateLocales } from \"../../i18n\";\nimport { isRTL } from \"../../utils/locale\";\nimport PageAd from \"../PageAd\";\nimport Title from \"../Title\";\nimport Tooltip, { TooltipLabel } from \"../Tooltip\";\nimport SaveBar from \"../squad/SaveBar\";\nimport TabPanel from \"../tabs/TabPanel\";\nimport Tabs from \"../tabs/Tabs\";\nimport Bench from \"./Bench\";\nimport BenchUnit from \"./BenchUnit\";\nimport MyTeamTable from \"./MyTeamTable\";\nimport PitchFormation from \"./PitchFormation\";\n\nconst StyledPitchWrapper = styled(Box)`\n border: 1px solid ${({ theme }) => theme.colors.primary};\n border-radius: ${({ theme }) => theme.radii[2]};\n`;\n\nconst ChipList = styled.ul`\n display: flex;\n flex-direction: column;\n align-items: baseline;\n margin: ${({ theme }) => theme.space[4]} 0 3.5rem;\n padding: 10px 10px 20px;\n list-style-type: none;\n border-top: 1px solid ${({ theme }) => theme.colors.primary};\n border-bottom: 1px solid ${({ theme }) => theme.colors.primary};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n flex-direction: row;\n border: 1px solid ${({ theme }) => theme.colors.primary};\n border-radius: ${({ theme }) => theme.radii[1]};\n }\n`;\n\nconst ChipItem = styled.li`\n flex: 1;\n width: 100%;\n padding-inline-end: ${({ theme }) => theme.space[1]};\n padding-inline-start: ${({ theme }) => theme.space[1]};\n`;\n\nconst Chip = styled.div`\n text-align: center;\n`;\n\nconst ChipHeading = styled.h3`\n display: inline-block;\n margin-bottom: 1.5rem;\n color: ${({ theme }) => theme.colors.primary};\n font-family: ${({ theme }) => theme.fonts.impact};\n font-size: 1.8rem;\n font-weight: 600;\n text-align: center;\n`;\n\nconst ChipLink = styled(Link)`\n position: relative;\n display: block;\n width: 100%;\n padding: 0.6rem 2.7rem 0.5rem;\n border-radius: 4px;\n background-color: ${({ theme }) => theme.colors.grey};\n color: #333;\n\n :hover {\n text-decoration: none;\n }\n`;\n\nconst ChipLinkArrow = styled(ArrowRight)`\n ${size(10)};\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n fill: currentColor;\n cursor: pointer;\n ${isRTL()\n ? css`\n left: ${({ theme }) => theme.space[2]};\n transform: translateY(-50%) scaleX(-1);\n `\n : css`\n right: ${({ theme }) => theme.space[2]};\n `}\n`;\n\nconst renderPickValue =\n (initProps: {\n elementsById: IElementsById;\n fixturesForNextEventByTeam: IFixturesForEventByTeam;\n teamsById: ITeamsById;\n }) =>\n (pick: IPickLight) => {\n const element = initProps.elementsById[pick.element];\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {picks.map((p) => (\n {title}\n \n \n \n \n {t(\"myTeamTable.postitionShort\", \"Pos\")}\n {t(\"myTeamTable.form\", \"Form\")}\n \n \n \n \n {t(\"myTeamTable.roundPointsShort\", \"RD\")}\n \n \n \n \n \n {t(\"myTeamTable.totalPointsShort\", \"TP\")}\n \n \n \n \n \n {t(\"myTeamTable.fixtureNextRoundShort\", \"Fix\")}\n \n ))}\n \n \n );\n };\n\nconst PlayerActions = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n margin: 0 auto;\n }\n`;\n\ntype Props = WithTranslation;\n\nconst MyTeam: React.FC = ({ i18n, t }) => {\n const dispatch = useDispatch();\n const [pickForMenu, setPickForMenu] = useState(null);\n\n const player = useSelector(getPlayerData) as ILoggedInPlayer;\n\n const activeChip = useSelector(getActiveChip);\n const chipInPlayName = useSelector(getActiveOrProposedTeamChipName);\n const chipAllPlayName = useSelector(getActiveOrProposedAllChipName);\n const changed = useSelector(hasMyTeamChanged);\n const chips = useSelector(getPotentialChips);\n const chipsChanged = useSelector(teamChipsHaveChanged);\n const elementsById = useSelector(getElementsById);\n const entry = useSelector((state: RootState) =>\n getEntry(state, player.entry)\n );\n const fixturesForNextEventByTeam = useSelector(getFixturesForNextEventByTeam);\n const formation = useSelector(getMyFormation);\n const nextEvent = useSelector(getNextEvent);\n const picks = useSelector(getMyPicksProposed);\n const savingState = useSelector(getMyTeamSavingState);\n const settings = useSelector(getSettings) as ISettings;\n const teamsById = useSelector(getTeamsById);\n const valid = useSelector(isMyTeamValid);\n\n const handleShowMenuForPickElement = (element: number) => {\n const matches = picks.filter((p) => p.element === element);\n if (matches.length) {\n setPickForMenu(matches[0]);\n }\n };\n\n const handleHideMenuForPick = () => {\n setPickForMenu(null);\n };\n\n const renderDreamTeam = (pick: IPickLight) =>\n elementsById[pick.element].in_dreamteam ? (\n \n \n \n ) : null;\n\n const action = (\n type: \"substitute\" | \"makeCaptain\" | \"makeViceCaptain\",\n element: number\n ) => {\n handleHideMenuForPick();\n switch (type) {\n case \"substitute\":\n dispatch(actionSubstitution(element));\n break;\n case \"makeCaptain\":\n dispatch(changeCaptain(element));\n break;\n case \"makeViceCaptain\":\n dispatch(changeViceCaptain(element));\n break;\n }\n };\n\n const showDialog = (element: IElement) => {\n dispatch(showElementSummary(element.id));\n handleHideMenuForPick();\n };\n\n const renderMenu = () => {\n const pick = pickForMenu;\n if (!pick) {\n return null;\n }\n const element = elementsById[pick.element];\n const status = pick.subStatus;\n const startMax = settings.squad_squadplay;\n return (\n \n );\n };\n\n useEffect(() => {\n dispatch(fetchMyTeam());\n dispatch(fetchEntrySummary(player.entry));\n }, [dispatch, player.entry]);\n\n const renderChipAction = (c: IPotentialChip) => {\n switch (c.status_for_entry) {\n case \"available\":\n case \"unavailable\":\n return (\n \n \n \n {`${element.first_name} ${element.second_name}`}\n \n \n \n {status.match(/^(target|)$/) && (\n \n )}\n {status === \"instigator\" && (\n \n )}\n {!status && pick.position <= startMax && !pick.is_captain && (\n \n )}\n {!status && pick.position <= startMax && !pick.is_vice_captain && (\n \n )}\n \n \n action(\"substitute\", pick.element)}\n width={1}\n variant=\"primary\"\n >\n {t(\"myTeam.menuDialog.switch\", \"Switch\")}\n \n \n action(\"substitute\", pick.element)}\n width={1}\n variant=\"primary\"\n >\n {t(\"myTeam.menuDialog.cancel\", \"Cancel\")}\n \n \n action(\"makeCaptain\", pick.element)}\n width={1}\n variant=\"primary\"\n >\n {t(\"myTeam.menuDialog.makeCaptain\", \"Make Captain\")}\n \n \n action(\"makeViceCaptain\", pick.element)}\n width={1}\n variant=\"primary\"\n >\n {t(\"myTeam.menuDialog.makeViceCaptain\", \"Make Vice Captain\")}\n \n \n showDialog(element)}\n width={1}\n variant=\"primary\"\n >\n {t(\"myTeam.menuDialog.viewInfo\", \"View Information\")}\n \n dispatch(proposeAvailableChip(c.name))}\n disabled={Boolean(chipInPlayName)}\n width={1}\n variant=\"secondary\"\n >\n {t(\"myTeam.play\", \"Play\")}\n \n );\n case \"proposed\":\n return (\n dispatch(cancelProposedChip(c.name))}\n width={1}\n >\n {t(\"myTeam.cancel\", \"Cancel\")}\n \n );\n case \"active\":\n return (\n dispatch(cancelActiveChip(c.name))}\n width={1}\n >\n {t(\"myTeam.cancel\", \"Cancel\")}\n \n );\n case \"cancelled\":\n return (\n dispatch(restoreCancelledChip(c.name))}\n disabled={Boolean(chipInPlayName)}\n width={1}\n >\n {t(\"myTeam.restore\", \"Restore\")}\n \n );\n case \"played\":\n if (!entry) {\n return (\n <>\n \n \n \n );\n }\n return (\n \n );\n default:\n return \"\";\n }\n };\n\n const renderUnlimitChipAction = (c: IPotentialChip) => {\n switch (c.status_for_entry) {\n case \"available\":\n case \"unavailable\":\n return (\n

{t(\"myTeam.played\", \"Played\")}

{`${t(\"myTeam.round\", \"Round\")} ${\n c.played_by_entry[0]\n }`}

\n \n

\n \n \n

{t(\"myTeam.played\", \"Played\")}

{`${t(\"myTeam.round\", \"Round\")} ${\n c.played_by_entry[0]\n }`}

\n (\n <>\n \n {t(\"myTeam.play\", \"Play\")}\n \n {showDialog && (\n \n )}\n \n )}\n />\n );\n case \"active\":\n return ;\n case \"played\":\n if (!entry) {\n return (\n <>\n \n \n \n );\n }\n return (\n \n );\n default:\n return \"\";\n }\n };\n\n if (!entry || !picks.length) {\n return null;\n }\n // Create a new function on each render as fixtures could have changed and\n // need to ensure a render of connected subcomponents\n const _renderPickValue = renderPickValue({\n elementsById,\n teamsById,\n fixturesForNextEventByTeam,\n });\n const benchHeading: Record\n \n \n {t(\"myTeam.chips.unlimit.name\", \"Loan Rangers\")}\n \n \n \n \n \n \n

\n {t(\n \"myTeam.chips.unlimit.dialog.p1\",\n \"The Loan Rangers chip is played when confirming your transfers and can be used once a season.\"\n )}\n

\n {t(\n \"myTeam.chips.unlimit.dialog.p2\",\n \"It allows you to make unlimited free transfers and choose how many players you want from a specific team for a single round. At the next deadline, your squad is returned to how it was at the start of the round.\"\n )}\n

\n \n

\n Please note: Loan Rangers{\" \"}\n once\n confirmed.\n cannot be cancelled

{t(\"myTeam.active\", \"Active\")}

{`${t(\"myTeam.round\", \"Round\")} ${\n c.played_by_entry[0]\n }`}

\n \n

\n \n \n

{t(\"myTeam.played\", \"Played\")}

{`${t(\"myTeam.round\", \"Round\")} ${\n c.played_by_entry[0]\n }`}

\n = {\n 11: (\n \n ),\n 12: \"1\",\n 13: \"2\",\n 14: \"3\",\n };\n\n const unlimitChip = chips.filter((c) => c.name === \"uteam\")[0];\n const chipDetails = getAllChipDetails(t);\n return (\n <>\n \n \n );\n};\n\nexport { MyTeam as MyTeamTest };\n\nexport default withTranslation()(MyTeam);\n","import {\n Location,\n Redirect,\n RouteComponentProps,\n Router,\n WindowLocation,\n} from \"@reach/router\";\nimport React, { Suspense, lazy } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ConnectedComponent, connect } from \"react-redux\";\nimport { RootState } from \"../core/store\";\nimport { getPlayerData } from \"../core/store/player/reducers\";\nimport { IPlayer } from \"../core/store/player/types\";\nimport { Loading } from \"./App\";\nimport Copy from \"./Copy\";\nimport EntryHistory from \"./EntryHistory\";\nimport EntryUnsubscribe from \"./EntryUnsubscribe\";\nimport EntryUpdate from \"./EntryUpdate\";\nimport FixturesWrapper from \"./FixturesWrapper\";\nimport Home from \"./Home\";\nimport { Main, Wrapper } from \"./Layout\";\nimport Login from \"./Login\";\n\nimport TransfersHistory from \"./TransfersHistory\";\nimport PlayerList from \"./help/PlayerList\";\nimport AdminClassic from \"./leagues/AdminClassic\";\nimport AdminH2H from \"./leagues/AdminH2H\";\nimport AutoJoin from \"./leagues/AutoJoin\";\nimport Create from \"./leagues/Create\";\nimport CreateClassic from \"./leagues/CreateClassic\";\nimport CreateH2H from \"./leagues/CreateH2H\";\nimport CreateJoin from \"./leagues/CreateJoin\";\nimport CupNotStarted from \"./leagues/CupNotStarted\";\nimport Invite from \"./leagues/Invite\";\nimport Join from \"./leagues/Join\";\nimport JoinPrivate from \"./leagues/JoinPrivate\";\nimport JoinPublic from \"./leagues/JoinPublic\";\nimport MatchesCup from \"./leagues/MatchesCup\";\nimport MatchesH2H from \"./leagues/MatchesH2H\";\nimport MyCups from \"./leagues/MyCups\";\nimport MyLeagues from \"./leagues/MyLeagues\";\nimport Renew from \"./leagues/Renew\";\nimport StandingsClassic from \"./leagues/StandingsClassic\";\nimport StandingsH2H from \"./leagues/StandingsH2H\";\nimport LoggedIn from \"./player/LoggedIn\";\nimport Logout from \"./player/Logout\";\nimport PasswordReset from \"./player/PasswordReset\";\nimport PasswordSet from \"./player/PasswordSet\";\nimport Register from \"./player/Register\";\nimport VerifyDeleteOtp from \"./player/VerifyDeleteOtp\";\nimport SquadSelection from \"./squad/SquadSelection\";\nimport Transfers from \"./squad/Transfers\";\nimport News from \"./stats/News\";\nimport Statistics from \"./stats/Statistics\";\nimport DreamTeam from \"./team/DreamTeam\";\nimport EntryEvent from \"./team/EntryEvent\";\nimport MyTeam from \"./team/MyTeam\";\nconst AccountRecovery = lazy(() => import(\"./AccountRecovery\"));\nconst Help = lazy(() => import(\"./help/Help\"));\nconst Rules = lazy(() => import(\"./help/Rules\"));\nconst Terms = lazy(() => import(\"./help/Terms\"));\nconst Prizes = lazy(() => import(\"./Prizes\"));\n\ninterface IRouteChangeProps {\n action: () => void;\n}\n\ninterface IRouteChangeWorkerProps {\n location: WindowLocation;\n}\n\ntype RouteChangeProps = IRouteChangeProps & IRouteChangeWorkerProps;\n\nclass OnRouteChangeWorker extends React.Component\n \n GK\n \n \n

\n \n {nextEvent && (\n

\n \n {t(\"myTeam.title\", \"My Team\")}\n )}\n \n \n {/* \n \n \n {t(\n \"myTeam.alerts.captain\",\n \"To change your captain use the menu which appears when clicking on a player's shirt.\"\n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {range(\n settings.squad_squadplay,\n settings.squad_squadsize\n ).map((i) => (\n \n handleShowMenuForPickElement(picks[i].element)\n }\n renderDreamTeam={renderDreamTeam}\n renderPickValue={_renderPickValue}\n />\n ))}\n \n \n \n \n \n */}\n {activeChip && activeChip.chip_type === \"transfer\" ? (\n \n ) : (\n \n )}\n {savingState === \"saved\" ? (\n \n ) : (\n \n )}\n {renderMenu()}\n \n \n \n \n \n

\n {t(\"myTeam.alerts.transferChip\", \"{{ chipName }} Active\", {\n chipName: chipDetails[activeChip.name as ChipName].name,\n })}\n

\n {chips\n .filter((c) => [\"2capt\", \"pdbus\"].indexOf(c.name) > -1)\n .map((c) => (\n \n ))}\n {unlimitChip && (\n \n )}\n \n \n \n \n \n \n {renderChipAction(c)}\n \n {chipDetails[c.name as ChipName].name}\n \n \n \n \n \n \n {renderUnlimitChipAction(unlimitChip)}\n \n {chipDetails[unlimitChip.name as ChipName].name}\n \n \n \n {t(\"myTeam.alerts.teamSaved\", \"Your team has been saved.\")}\n \n dispatch(saveMyTeam())}\n disabled={\n (!changed && !chipsChanged) ||\n !valid ||\n savingState === \"saving\"\n }\n width={1}\n >\n {t(\"myTeam.saveTeam\", \"Save Your Team\")}\n \n \n \n \n \n \n {\n componentDidUpdate(prevProps: RouteChangeProps) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n this.props.action();\n }\n }\n\n render() {\n return null;\n }\n}\n\nconst OnRouteChange: React.FC = ({ action }) => (\n \n);\n\ninterface IProtectedRouteProps extends RouteComponentProps {\n as: React.ComponentType | ConnectedComponent\n {({ location }) => (\n \n )}\n ;\n player: IPlayer | null;\n}\n\ninterface IPropsFromState {\n player: IPlayer | null;\n}\n\nconst PlayerRoute: React.FC = ({\n as: Component,\n player,\n ...rest\n}) => {\n if (player && !player.entry) {\n return ;\n } else if (player && player.dirty) {\n return ;\n } else {\n return (\n \n );\n }\n};\n\nconst RecoveryRoute: React.FC\n \n

\n = ({\n as: Component,\n player,\n ...rest\n}) => {\n if (!player) {\n return (\n \n );\n } else {\n return \n \n

\n ;\n }\n};\n\nconst EntryRoute: React.FC = ({\n as: Component,\n player,\n ...rest\n}) => {\n if (player && player.entry && !player.dirty) {\n return ;\n } else if (player && player.dirty) {\n return ;\n } else {\n return (\n \n );\n }\n};\n\nexport const NotFound: React.FC\n \n

\n = () => {\n const { t } = useTranslation();\n return (\n \n );\n};\n\nconst Routes: React.FC\n \n

\n \n

\n \n \n

{t(\"routes.notFound.title\", \"Page not found\")}

\n {t(\n \"routes.notFound.text\",\n \"Sorry, but the page you were looking for can't be found.\"\n )}\n

= ({ player }) => {\n return (\n \n );\n};\n\nconst mapStateToProps = (state: RootState): IPropsFromState => ({\n player: getPlayerData(state),\n});\n\nexport default connect(mapStateToProps)(Routes);\n","import { TFunction } from \"i18next\";\nimport * as React from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport { IServerError } from \"../core/store/global/types\";\nimport Copy from \"./Copy\";\nimport { Main, Wrapper } from \"./Layout\";\n\ninterface IProps {\n error: IServerError;\n}\n\nconst HomeOrHelp = () => (\n \n);\n\nconst renderError = (e: IServerError, t: TFunction) => {\n switch (e.code) {\n case 401:\n case 403:\n return (\n \n );\n case 404:\n return (\n \n );\n case 502:\n case 503:\n case 504:\n return e.details.match(/being updated/) ? (\n \n ) : (\n \n );\n default:\n return (\n \n );\n }\n};\n\nconst ServerError: React.FC}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n window.scrollTo(0, 0)} />\n

\n \n

\n You can return to the and try again or{\" \"}\n for further help.\n home page contact us\n \n \n

\n {t(\"serverError.permissionDenied.title\", \"Permission denied\")}\n

\n {t(\n \"serverError.permissionDenied.text\",\n \"Sorry, but you don't have permission to perform the request action.\"\n )}\n

\n \n \n \n

{t(\"serverError.notFound.title\", \"Page not found\")}

\n {t(\n \"serverError.notFound.text\",\n \"Sorry, but the page you were looking for can't be found.\"\n )}\n

\n \n \n \n

\n {t(\"serverError.updating.title\", \"The game is being updated.\")}\n

\n {t(\n \"serverError.updating.text\",\n \"Please try again later when the updated scores / teams will be available.\"\n )}\n

\n \n \n \n

{t(\"serverError.unavailable.title\", \"Unavailable\")}

\n {t(\n \"serverError.unavailable.text1\",\n \"Sorry, but we are unable to load the requested page at this time.\"\n )}\n

\n {t(\n \"serverError.unavailable.text2\",\n \"Please try again in a few minutes.\"\n )}\n

\n \n \n

{t(\"serverError.default.title\", \"Error\")}

\n {t(\n \"serverError.default.text\",\n \"Sorry, but there has been an unexpected error processing your request.\"\n )}\n

\n = ({ error }) => {\n const { t } = useTranslation();\n return (\n \n );\n};\n\nexport default ServerError;\n","import { navigate } from \"@reach/router\";\nimport React, { useEffect } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Box, Flex } from \"rebass\";\nimport styled from \"styled-components/macro\";\nimport { RootState, ThunkDispatch } from \"../../core/store\";\nimport { getSettings } from \"../../core/store/game/reducers\";\nimport {\n getActiveEntryInLeague,\n getAutoJoinCode,\n getJoinPrivateLeagueError,\n getJoinPrivateLeagueSuccess,\n getLeagueFromCode,\n} from \"../../core/store/leagues/reducers\";\nimport {\n checkLeagueCode,\n clearCode,\n joinPrivateLeague,\n} from \"../../core/store/leagues/thunks\";\nimport { getPlayerData } from \"../../core/store/player/reducers\";\nimport Alert from \"../Alert\";\nimport Button from \"../Button\";\nimport Dialog from \"../Dialog\";\nimport { getErrorType } from \"./errors\";\nimport JoinLeagueError from \"./JoinLeagueError\";\n\nconst ConfirmBtnWrapper = styled.div`\n display: inline-block;\n margin-inline-end: ${({ theme }) => theme.space[3]};\n`;\n\nconst LeagueName = styled.div`\n padding: ${({ theme }) => theme.space[2]};\n background-color: ${({ theme }) => theme.colors.blueDarker2};\n color: ${({ theme }) => theme.colors.white};\n font-family: ${({ theme }) => theme.fonts.impact};\n text-transform: uppercase;\n font-size: 24px;\n font-weight: 600;\n line-height: 1;\n`;\n\nconst AutoJoinDialog: React.FC = () => {\n const { t } = useTranslation();\n const reduxDispatch = useDispatch\n \n

{renderError(error, t)}

();\n const code = useSelector((state: RootState) => getAutoJoinCode(state));\n const player = useSelector(getPlayerData);\n const error = useSelector((state: RootState) =>\n getErrorType(getJoinPrivateLeagueError(state))\n );\n const settings = useSelector((state: RootState) => getSettings(state));\n const joinedPrivateLeagueSuccess = useSelector((state: RootState) =>\n getJoinPrivateLeagueSuccess(state)\n );\n\n // Most important part, if it returns null, nothing renders\n const league = useSelector((state: RootState) =>\n code ? getLeagueFromCode(state, code) : null\n );\n\n // Check if entry is already apart of the league\n const isPlayerInLeague = useSelector((state: RootState) =>\n league\n ? getActiveEntryInLeague(\n state,\n league.id,\n league.scoring === \"c\" ? \"classic\" : \"h2h\"\n )\n : null\n );\n\n // If we have a code, try and fetch the associated league. If there is an\n // issue fetching the league clear the code from local storage so we don't\n // try again\n useEffect(() => {\n // If you're logged in check the code\n // You might be logged out and we don't want a 403 forbidden\n if (player && player.entry && code) {\n reduxDispatch(checkLeagueCode(code));\n }\n }, [player, code, reduxDispatch]);\n\n const handleHide = () => {\n reduxDispatch(clearCode());\n };\n\n const confirmJoinLeague = (code: string) => {\n reduxDispatch(joinPrivateLeague({ code }));\n };\n\n if (joinedPrivateLeagueSuccess && code && league) {\n handleHide();\n navigate(`/leagues/${league.id}/standings/${league.scoring}`);\n return null;\n }\n\n return league ? (\n \n ) : null;\n};\n\nexport default AutoJoinDialog;\n","import * as Sentry from \"@sentry/browser\";\nimport TagManager from \"@sooro-io/react-gtm-module\";\nimport * as React from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { useTranslation } from \"react-i18next\";\nimport { connect } from \"react-redux\";\nimport { Box } from \"rebass/styled-components\";\nimport { ThemeProvider } from \"styled-components/macro\";\nimport GlobalStyle from \"../GlobalStyle\";\nimport { RootState, ThunkDispatch } from \"../core/store\";\nimport { getBootstrapped } from \"../core/store/bootstrap/reducers\";\nimport { bootstrap } from \"../core/store/bootstrap/thunks\";\nimport { getServerError } from \"../core/store/global/reducers\";\nimport { IServerError } from \"../core/store/global/types\";\nimport \"../fonts.css\";\nimport i18n from \"../i18n\";\nimport theme from \"../theme\";\nimport {\n KeycloakProfile,\n KeycloakUrls,\n useKeycloak,\n} from \"../utils/keycloakPulse\";\nimport { isRTL } from \"../utils/locale\";\nimport { getIsWebView } from \"../utils/webView\";\nimport ElementDialog from \"./ElementDialog\";\nimport Footer from \"./Footer\";\nimport GameHeader from \"./GameHeader\";\nimport { Main, Wrapper } from \"./Layout\";\nimport PageAd from \"./PageAd\";\nimport Routes from \"./Routes\";\nimport ServerError from \"./ServerError\";\nimport AutoJoinDialog from \"./leagues/AutoJoinDialog\";\n\ninterface IProps {\n bootstrapped: boolean;\n serverError: IServerError | null;\n}\n\nexport const Loading: React.FC = () => {\n const { t } = useTranslation();\n return (\n \n );\n};\nexport const KeyCloakContext = React.createContext<{\n profile: KeycloakProfile;\n urls: KeycloakUrls;\n}>({\n profile: {},\n urls: {},\n});\n\nconst App: React.FC\n \n \n {t(\"AutoJoinDialog.title\", \"Join League\")}\n {league && `: ${league.name}`}\n \n {isPlayerInLeague && (\n <>\n \n \n )}\n {!isPlayerInLeague && (\n <>\n {error ? (\n <>\n \n \n ) : (\n <>\n \n \n \n )}\n \n )}\n \n \n \n {t(\n \"AutoJoinDialog.errors.alreadyJoined\",\n \"You are already in this league\"\n )}\n \n \n \n {settings && (\n \n )}\n \n \n

\n {t(\n \"AutoJoinDialog.confirmText\",\n \"Please press confirm to join league: {{leagueName}}\",\n { leagueName: league.name }\n )}\n

\n {code && (\n \n )}\n \n \n \n \n \n

\n \n

{t(\"loading\", \"Loading\")} ... = ({ bootstrapped, serverError }) => {\n const { profile, urls } = useKeycloak();\n\n React.useEffect(() => {\n const userId = profile?.id;\n const tagManagerArgs = {\n gtmId: process.env.REACT_APP_GTM_ENV_ID!,\n dataLayer: {\n userId: userId || \"\",\n loggedIn: userId ? true : false,\n },\n };\n TagManager.initialize(tagManagerArgs);\n }, [profile]);\n\n return (\n \n );\n};\n\ninterface IContainerPropsFromState {\n bootstrapped: boolean;\n serverError: IServerError | null;\n}\n\ninterface IState {\n eventId: string | null;\n error: Error | null;\n}\n\ninterface IContainerPropsFromDispatch {\n bootstrapApp: () => Promise\n \n \n \n \n }>\n \n \n \n \n \n {i18n.t(\"app.gameName\", \"RSL Fantasy\")}\n \n \n

\n\n \n {serverError ? (\n \n ) : bootstrapped ? (\n \n ) : (\n \n )}\n {!getIsWebView() && \n \n ;\n}\ntype ContainerProps = IContainerPropsFromState & IContainerPropsFromDispatch;\nclass AppContainer extends React.Component {\n public state: IState = { error: null, eventId: null };\n\n public componentDidMount() {\n this.props.bootstrapApp();\n }\n\n public componentDidCatch(error: Error | null, errorInfo: {}) {\n this.setState({ error });\n if (process.env.REACT_APP_SENTRY_ENVIRONMENT) {\n Sentry.withScope((scope) => {\n scope.setExtras(errorInfo);\n const eventId = Sentry.captureException(error);\n this.setState({ eventId });\n });\n }\n }\n\n public render() {\n // JS Error\n if (this.state.error) {\n // Can't reliably use any of our components, eg Button. This should\n //probably be in Norwegian can't use react to do it though ...\n return (\n <>\n \n \n {process.env.REACT_APP_SENTRY_ENVIRONMENT && (\n <>\n \n

Error

We're sorry - something's gone wrong.

\n Our team has been notified, but click here to fill out a report.\n

\n Sentry.showReportDialog({\n eventId: this.state.eventId as string,\n })\n }\n >\n Report feedback\n \n \n )}\n \n );\n }\n // All OK - Render App\n return (\n \n );\n }\n}\n\nconst mapStateToProps = (state: RootState): IContainerPropsFromState => ({\n bootstrapped: getBootstrapped(state),\n serverError: getServerError(state),\n});\n\nconst mapDispatchToProps = (\n dispatch: ThunkDispatch\n): IContainerPropsFromDispatch => ({\n bootstrapApp: () => dispatch(bootstrap()),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AppContainer);\n","import { createAsyncAction } from \"typesafe-actions\";\nimport { IError } from \"..\";\nimport { ICupDetailData } from \"./types\";\n\nexport const fetchEntryCupDetail = createAsyncAction(\n \"FETCH_ENTRY_CUP_DETAIL_START\",\n \"FETCH_ENTRY_CUP_DETAIL_SUCCESS\",\n \"FETCH_ENTRY_CUP_DETAIL_FAILURE\"\n)();\n","import sortBy from \"lodash/sortBy\";\nimport { combineReducers } from \"redux\";\nimport { getType } from \"typesafe-actions\";\nimport { RootAction, RootState } from \"../\";\nimport { fetchEntrySummary } from \"../entries/actions\";\nimport * as actions from \"./actions\";\nimport { IState } from \"./types\";\n\n// State Reducer\nexport default combineReducers({\n byEntryId: (state = {}, action: RootAction) => {\n switch (action.type) {\n case getType(fetchEntrySummary.success): {\n // If we aready have some data, we make sure we keep the matches which\n // aren't in the summary\n const entryId = action.payload.id;\n const cupDetail = action.payload.data.leagues.cup;\n const newState = { ...state };\n newState[entryId] = cupDetail;\n if (!state[entryId]) {\n return newState;\n }\n const idsFromSummary = newState[entryId].matches.map((m) => m.id);\n state[entryId].matches.forEach((m) => {\n if (idsFromSummary.indexOf(m.id) === -1) {\n newState[entryId].matches.push(m);\n }\n });\n return newState;\n }\n\n case getType(actions.fetchEntryCupDetail.success): {\n const newState = { ...state };\n newState[action.payload.id] = {\n matches: action.payload.data.cup_matches,\n status: action.payload.data.cup_status,\n };\n return newState;\n }\n default:\n return state;\n }\n },\n});\n\n// State Selectors\nexport const getCupDetailForEntry = (state: RootState, entryId: number) => {\n const detail = state.cup.byEntryId[entryId];\n if (!detail) {\n return null;\n }\n return {\n ...detail,\n matches: sortBy(detail.matches, \"event\"),\n };\n};\n","import { createAsyncAction } from \"typesafe-actions\";\nimport { IError } from \"..\";\nimport { IBestLeague, IMostValuableTeam } from \"./types\";\n\nexport const fetchBestClassicPrivateLeagues = createAsyncAction(\n \"FETCH_BEST_CLASSIC_PRIVATE_LEAGUES_START\",\n \"FETCH_BEST_CLASSIC_PRIVATE_LEAGUES_SUCCESS\",\n \"FETCH_BEST_CLASSIC_PRIVATE_LEAGUES_FAILURE\"\n)();\n\nexport const fetchMostValuableTeams = createAsyncAction(\n \"FETCH_MOST_VALUABLE_TEAMS_START\",\n \"FETCH_MOST_VALUABLE_TEAMS_SUCCESS\",\n \"FETCH_MOST_VALUABLE_TEAMS_FAILURE\"\n)();\n","import { combineReducers } from \"redux\";\nimport { getType } from \"typesafe-actions\";\nimport { RootAction, RootState } from \"../\";\nimport * as actions from \"./actions\";\nimport { IState } from \"./types\";\n\n// State Reducer\nexport default combineReducers({\n bestClassicPrivateLeagues: (state = [], action: RootAction) => {\n switch (action.type) {\n case getType(actions.fetchBestClassicPrivateLeagues.success):\n return action.payload;\n default:\n return state;\n }\n },\n mostValuableTeams: (state = [], action: RootAction) => {\n switch (action.type) {\n case getType(actions.fetchMostValuableTeams.success):\n return action.payload;\n default:\n return state;\n }\n },\n});\n\n// State Selectors\nexport const getBestClassicPrivateLeagues = (state: RootState) =>\n state.stats.bestClassicPrivateLeagues;\n\nexport const getMostValuableTeams = (state: RootState) =>\n state.stats.mostValuableTeams;\n","import { combineReducers } from \"redux\";\nimport { getType } from \"typesafe-actions\";\nimport { RootAction, RootState } from \"../\";\nimport * as actions from \"./actions\";\nimport { IState } from \"./types\";\n\n// State Reducer\nexport default combineReducers({\n byURL: (state = {}, action: RootAction) => {\n switch (action.type) {\n case getType(actions.fetchURL.success):\n return {\n ...state,\n [action.payload.url]: {\n ...action.payload.data,\n last_fetched: Math.round(new Date().getTime() / 1000),\n },\n };\n default:\n return state;\n }\n },\n});\n\n// State Selectors\n\n// We leave it up to the caller to parse the content based on the conent_type.\n// If used by a lot of games we could create helpers\nexport const getURL = (state: RootState, url: string) =>\n state.urls.byURL[url] || null;\n","import { createAsyncAction } from \"typesafe-actions\";\nimport { IWinner } from \"./types\";\nimport { IError } from \"..\";\n\nexport const fetchEventWinners = createAsyncAction(\n \"FETCH_EVENT_WINNERS_START\",\n \"FETCH_EVENT_WINNERS_SUCCESS\",\n \"FETCH_EVENT_WINNERS_FAILURE\"\n)();\n\nexport const fetchPhaseWinners = createAsyncAction(\n \"FETCH_PHASE_WINNERS_START\",\n \"FETCH_PHASE_WINNERS_SUCCESS\",\n \"FETCH_PHASE_WINNERS_FAILURE\"\n)();\n","import { combineReducers } from \"redux\";\nimport { getType } from \"typesafe-actions\";\nimport { RootAction, RootState } from \"../\";\nimport * as actions from \"./actions\";\nimport { IState } from \"./types\";\n\n// State Reducer\nexport default combineReducers({\n byEvent: (state = {}, action: RootAction) => {\n switch (action.type) {\n case getType(actions.fetchEventWinners.success):\n return {\n ...state,\n [action.payload.event]: action.payload.data,\n };\n default:\n return state;\n }\n },\n byPhase: (state = {}, action: RootAction) => {\n switch (action.type) {\n case getType(actions.fetchPhaseWinners.success):\n return {\n ...state,\n [action.payload.phase]: action.payload.data,\n };\n\n default:\n return state;\n }\n },\n});\n\n// State Selectors\nexport const getWinnersByEvent = (state: RootState) => state.winners.byEvent;\n\nexport const getEventWinners = (state: RootState, eventId: number) =>\n getWinnersByEvent(state)[eventId] || [];\n\nexport const getWinnersByPhase = (state: RootState) => state.winners.byPhase;\n\nexport const getPhaseWinners = (state: RootState, phaseId: number) =>\n getWinnersByPhase(state)[phaseId] || [];\n","import { enableAllPlugins } from \"immer\";\nimport { combineReducers } from \"redux\";\nimport { ThunkAction, ThunkDispatch as BaseThunkDispatch } from \"redux-thunk\";\nimport { ActionType, deprecated, StateType } from \"typesafe-actions\";\nimport * as bootstrapActions from \"./bootstrap/actions\";\nimport bootstrap from \"./bootstrap/reducers\";\nimport * as chipActions from \"./chips/actions\";\nimport chips from \"./chips/reducers\";\nimport * as cupActions from \"./cup/actions\";\nimport cup from \"./cup/reducers\";\nimport * as dreamTeamActions from \"./dream-teams/actions\";\nimport dreamTeams from \"./dream-teams/reducers\";\nimport elementStats from \"./element-stats/reducers\";\nimport elementTypes from \"./element-types/reducers\";\nimport * as elementActions from \"./elements/actions\";\nimport elements from \"./elements/reducers\";\nimport * as entryActions from \"./entries/actions\";\nimport entries from \"./entries/reducers\";\nimport * as eventsActions from \"./events/actions\";\nimport events from \"./events/reducers\";\nimport * as fixtureActions from \"./fixtures/actions\";\nimport fixtures from \"./fixtures/reducers\";\nimport game from \"./game/reducers\";\nimport * as globalActions from \"./global/actions\";\nimport global from \"./global/reducers\";\nimport * as leagueActions from \"./leagues/actions\";\nimport leagues from \"./leagues/reducers\";\nimport * as myTeamActions from \"./my-team/actions\";\nimport myTeam from \"./my-team/reducers\";\nimport phases from \"./phases/reducers\";\nimport * as playerActions from \"./player/actions\";\nimport player from \"./player/reducers\";\nimport * as regionActions from \"./regions/actions\";\nimport regions from \"./regions/reducers\";\nimport * as squadActions from \"./squad/actions\";\nimport squad from \"./squad/reducers\";\nimport * as statsActions from \"./stats/actions\";\nimport stats from \"./stats/reducers\";\nimport teams from \"./teams/reducers\";\nimport * as urlActions from \"./urls/actions\";\nimport urls from \"./urls/reducers\";\nimport * as winnersActions from \"./winners/actions\";\nimport winners from \"./winners/reducers\";\n\nenableAllPlugins();\n\nconst createAction = deprecated.createAction;\n\n// This is an action which does nothing! Useful for setting initial state in\n// tests\nexport const noAction = createAction(\"NoActionRequired\");\n\nconst actions = {\n bootstrapActions,\n chipActions,\n cupActions,\n dreamTeamActions,\n elementActions,\n entryActions,\n eventsActions,\n fixtureActions,\n globalActions,\n leagueActions,\n myTeamActions,\n noAction,\n playerActions,\n regionActions,\n squadActions,\n statsActions,\n urlActions,\n winnersActions,\n};\n\nexport type RootAction = ActionType;\n\nconst rootReducer = combineReducers({\n bootstrap,\n chips,\n cup,\n dreamTeams,\n elementStats,\n elementTypes,\n elements,\n entries,\n events,\n fixtures,\n game,\n global,\n leagues,\n myTeam,\n phases,\n player,\n regions,\n squad,\n stats,\n teams,\n urls,\n winners,\n});\n\nexport type RootState = StateType;\n\nexport type ThunkDispatch = BaseThunkDispatch;\n\nexport type ThunkResult = ThunkAction;\n\nexport interface ISelectOption {\n label: string;\n value: string;\n}\n\nexport interface IError {\n errorText?: string;\n statusText?: string;\n badRequest?: {\n [key: string]: Array<{ code: string; message: string }>;\n };\n url?: string;\n}\n\nexport type SavingState = \"\" | \"saving\" | \"saved\";\n\nexport default rootReducer;\n","import { applyMiddleware, createStore } from \"redux\";\nimport { composeWithDevTools } from \"redux-devtools-extension\";\nimport thunkMiddleware from \"redux-thunk\";\nimport rootReducer from \"./store\";\n\nconst configureStore = (initialState?: object) => {\n const middlewares = [thunkMiddleware];\n const enhancer = composeWithDevTools(applyMiddleware(...middlewares));\n const store = createStore(rootReducer, initialState!, enhancer);\n return store;\n};\n\nexport default configureStore;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read http://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === \"localhost\" ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === \"[::1]\" ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ninterface IConfig {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n}\n\nexport function register(config?: IConfig) {\n if (process.env.NODE_ENV === \"production\" && \"serviceWorker\" in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(\n (process as { env: { [key: string]: string } }).env.PUBLIC_URL,\n window.location.href\n );\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener(\"load\", () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n // console.log(\n // \"This web app is being served cache-first by a service \" +\n // \"worker. To learn more, visit http://bit.ly/CRA-PWA\"\n // );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: IConfig) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === \"installed\") {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n // console.log(\n // \"New content is available and will be used when all \" +\n // \"tabs for this page are closed. See http://bit.ly/CRA-PWA.\"\n // );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n // console.log(\"Content is cached for offline use.\");\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n // console.error(\"Error during service worker registration:\", error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: IConfig) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get(\"content-type\");\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf(\"javascript\") === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n // console.log(\n // \"No internet connection found. App is running in offline mode.\"\n // );\n });\n}\n\nexport function unregister() {\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister();\n });\n }\n}\n","import * as Sentry from \"@sentry/browser\";\nimport ReactDOM from \"react-dom\";\nimport { Provider } from \"react-redux\";\nimport App from \"./components/App\";\nimport configureStore from \"./core/configureStore\";\nimport \"./i18n\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nif (process.env.REACT_APP_SENTRY_ENVIRONMENT) {\n Sentry.init({\n dsn: \"https://5989fdf4d706b78ebd5e45fe2a7f7785@o118622.ingest.sentry.io/4506111474991105\",\n environment: process.env.REACT_APP_SENTRY_ENVIRONMENT,\n integrations: [\n new Sentry.BrowserProfilingIntegration(),\n new Sentry.BrowserTracing(),\n ],\n ignoreErrors: [/gtag is not defined/],\n maxBreadcrumbs: 50,\n tracesSampleRate: 0.000002,\n profilesSampleRate: 0.000002,\n });\n}\n\nReactDOM.render(\n ,\n document.getElementById(\"root\")\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: http://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","// Return true if the webview query param exists on the URL\nexport const getIsWebView = () => {\n const webview =\n new URLSearchParams(document.location.search).has(\"webview\") ||\n document.getElementById(\"webview\")\n ? true\n : false;\n return webview;\n};\n","import { createAsyncAction } from \"typesafe-actions\";\nimport { IError } from \"..\";\nimport {\n IEntry,\n IEntryChipHistory,\n IEntryEvent,\n IEntryEventHistory,\n IEntryPhaseStanding,\n IEntrySeasonHistory,\n ITransfer,\n} from \"./types\";\n\nexport const fetchEntrySummary = createAsyncAction(\n \"FETCH_ENTRY_SUMMARY_START\",\n \"FETCH_ENTRY_SUMMARY_SUCCESS\",\n \"FETCH_ENTRY_SUMMARY_FAILURE\"\n)\n \n ();\n\nexport const fetchEntryHistory = createAsyncAction(\n \"FETCH_ENTRY_HISTORY_START\",\n \"FETCH_ENTRY_HISTORY_SUCCESS\",\n \"FETCH_ENTRY_HISTORY_FAILURE\"\n)<\n void,\n {\n id: number;\n data: {\n current: IEntryEventHistory[];\n past: IEntrySeasonHistory[];\n chips: IEntryChipHistory[];\n };\n },\n IError\n>();\n\nexport const fetchEntryEventPicks = createAsyncAction(\n \"FETCH_ENTRY_EVENT_PICKS_START\",\n \"FETCH_ENTRY_EVENT_PICKS_SUCCESS\",\n \"FETCH_ENTRY_EVENT_PICKS_FAILURE\"\n)();\n\nexport const updateEntry = createAsyncAction(\n \"UPDATE_ENTRY_START\",\n \"UPDATE_ENTRY_SUCCESS\",\n \"UPDATE_ENTRY_FAILURE\"\n)();\n\nexport const fetchEntryTransfers = createAsyncAction(\n \"FETCH_ENTRY_TRANSFERS_START\",\n \"FETCH_ENTRY_TRANSFERS_SUCCESS\",\n \"FETCH_ENTRY_TRANSFERS_FAILURE\"\n)();\n\nexport const fetchEntryPhaseStandings = createAsyncAction(\n \"FETCH_ENTRY_PHASE_STANDINGS_START\",\n \"FETCH_ENTRY_PHASE_STANDINGS_SUCCESS\",\n \"FETCH_ENTRY_PHASE_STANDINGS_FAILURE\"\n)<\n void,\n { entry: number; phase: number; data: IEntryPhaseStanding[] },\n IError\n>();\n\nexport const unsubscribeEntry = createAsyncAction(\n \"UNSUBSCRIBE_ENTRY_START\",\n \"UNSUBSCRIBE_ENTRY_SUCCESS\",\n \"UNSUBSCRIBE_ENTRY_FAILURE\"\n)();\n","import { ThunkResult } from \"..\";\nimport { apiGet } from \"../../utils/api\";\nimport { IElementStat } from \"../element-stats/types\";\nimport { IElementType } from \"../element-types/types\";\nimport { IElement } from \"../elements/types\";\nimport { IEvent } from \"../events/types\";\nimport { ISettings } from \"../game/types\";\nimport { IPhase } from \"../phases/types\";\nimport { IPlayer } from \"../player/types\";\nimport { ITeam } from \"../teams/types\";\nimport * as actions from \"./actions\";\nimport { timeNow, getBootstrapTime } from \"./reducers\";\nimport { fetchEntrySummary } from \"../entries/thunks\";\n\nexport const bootstrap = (): ThunkResult> => async (dispatch) => {\n dispatch(actions.bootstrap.request());\n\n const staticRequest = apiGet<{\n element_stats: IElementStat[];\n element_types: IElementType[];\n elements: IElement[];\n events: IEvent[];\n game_settings: ISettings;\n phases: IPhase[];\n teams: ITeam[];\n total_players: number;\n }>(\"bootstrap-static/\", dispatch, actions.bootstrapStatic);\n\n const dynamicRequest = apiGet<{ player: IPlayer | null; watched: number[] }>(\n \"me/\",\n dispatch,\n actions.bootstrapMe\n );\n\n await Promise.all([staticRequest, dynamicRequest])\n .then(([staticData, meData]) => {\n if (meData.player && meData.player.entry) {\n // If the player has an entry then fetch their summary. This is done\n // asynchronously, users of `getEntry` should be prepared to handle\n // null and delay rendering as necessary\n dispatch(fetchEntrySummary(meData.player.entry));\n }\n dispatch(actions.addElementStats(staticData.element_stats));\n dispatch(actions.addElementTypes(staticData.element_types));\n dispatch(actions.addElements(staticData.elements));\n dispatch(actions.addEvents(staticData.events));\n dispatch(actions.addGameSettings(staticData.game_settings));\n dispatch(actions.addPhases(staticData.phases));\n dispatch(actions.addTeams(staticData.teams));\n dispatch(actions.addTotalPlayers(staticData.total_players));\n dispatch(actions.addPlayer(meData.player));\n dispatch(actions.addWatched(meData.watched));\n dispatch(actions.bootstrap.success({}));\n })\n .catch((e) => {\n dispatch(actions.bootstrap.failure(e.message));\n });\n};\n\nexport const checkGame =\n (): ThunkResult> => async (dispatch, getState) => {\n const REFRESH_MINUTES = 10;\n const lastBootstrap = getBootstrapTime(getState());\n if (lastBootstrap && timeNow() - lastBootstrap > REFRESH_MINUTES * 60) {\n dispatch(bootstrap());\n }\n };\n","import { ThunkResult } from \"..\";\nimport { apiDelete, apiGet, apiPost, apiPut } from \"../../utils/api\";\nimport { bootstrap } from \"../bootstrap/thunks\";\nimport * as actions from \"./actions\";\nimport {\n ILoginData,\n IPasswordChangeData,\n IPasswordResetData,\n IPasswordSetData,\n} from \"./types\";\n\nexport const login =\n (postData: ILoginData): ThunkResult> =>\n async (dispatch) => {\n try {\n await apiPost(\"player/login/\", postData, dispatch, actions.login);\n } catch (e) {\n return;\n }\n dispatch(bootstrap());\n };\n\nexport const logout = (): ThunkResult> => (dispatch) =>\n apiGet(\"player/logout/\", dispatch, actions.logout);\n\nexport const register =\n (postData: {}): ThunkResult> =>\n (dispatch) =>\n apiPost(\"player/create/\", postData, dispatch, actions.register);\n\nexport const playerUpdate =\n (postData: {}): ThunkResult> =>\n (dispatch) =>\n apiPut(\"player/update/\", postData, dispatch, actions.playerUpdate);\n\nexport const passwordChange =\n (postData: IPasswordChangeData): ThunkResult> =>\n (dispatch) =>\n apiPut(\n \"player/password-change/\",\n postData,\n dispatch,\n actions.passwordChange\n );\n\nexport const passwordReset =\n (postData: IPasswordResetData): ThunkResult> =>\n (dispatch) =>\n apiPost(\n \"player/password-reset/\",\n postData,\n dispatch,\n actions.passwordReset\n );\n\nexport const passwordSet =\n (postData: IPasswordSetData): ThunkResult> =>\n (dispatch) =>\n apiPut(\"player/password-set/\", postData, dispatch, actions.passwordSet);\n\nexport const addToWatchlist =\n (elementCode: number): ThunkResult> =>\n async (dispatch) => {\n dispatch(actions.addToWatched(elementCode));\n return apiPost(\n `watchlist/${elementCode}/`,\n {},\n dispatch,\n actions.addToWatchlist\n );\n };\n\nexport const removeFromWatchlist =\n (elementCode: number): ThunkResult> =>\n async (dispatch) => {\n dispatch(actions.removeFromWatched(elementCode));\n return apiDelete(\n `watchlist/${elementCode}/`,\n {},\n dispatch,\n actions.removeFromWatchlist\n );\n };\n\nexport const accountRecovery =\n (postData: ILoginData): ThunkResult> =>\n async (dispatch) => {\n try {\n await apiPost(\"player/recovery/\", postData, dispatch, actions.recover);\n } catch (e) {\n return;\n }\n dispatch(bootstrap());\n };\n","import styled from \"styled-components/macro\";\n\nexport const Wrapper = styled.div`\n max-width: 1220px;\n min-height: 0;\n min-width: 0;\n margin: 0 auto;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n display: flex;\n }\n`;\n\ninterface IMainProps {\n isWide?: boolean;\n}\n\nexport const Main = styled.div`\n padding-top: 2rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n width: ${(props) => (props.isWide ? \"100%\" : \"calc(100% / 3 * 2)\")};\n padding-inline-end: 1rem;\n padding-inline-start: 1rem;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: ${(props) => (props.isWide ? \"100%\" : \"calc(100% / 4 * 3)\")};\n }\n`;\n\nexport const Secondary = styled.div`\n padding-top: 2rem;\n\n @media (min-width: ${({ theme }) => theme.breakpoints[3]}) {\n width: calc(100% / 3);\n padding-inline-end: 1rem;\n padding-inline-start: 1rem;\n }\n\n @media (min-width: ${({ theme }) => theme.breakpoints[4]}) {\n width: calc(100% / 4 * 1);\n }\n`;\n","import * as React from \"react\";\nimport { Button as Base } from \"rebass/styled-components\";\nimport styled, { css } from \"styled-components/macro\";\n\nexport interface IButtonStyledProps {\n disabled?: boolean;\n fullwidth?: string; // \"true\"\n variant?: string; //\"primary\" | \"secondary\" | \"link\" | \"home\";\n size?: string; // \"sm\" || \"md\" || \"lg\"\n hasicon: string; // \"true\" || \"\",\n justifyContent?: string;\n textTransform?: string;\n}\n\nconst btnVariations = {\n baseBtn: css`\n display: inline-block;\n padding: 1.5rem 1.2rem;\n border: 0;\n background-color: ${({ theme }) => theme.colors.primary};\n font-family: ${({ theme }) => theme.fonts.base};\n font-size: ${({ theme }) => theme.fontSizes[3]};\n font-weight: bold;\n color: ${({ theme }) => theme.colors.white};\n line-height: 1;\n border-radius: 4px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all 250ms linear;\n text-decoration: none;\n font-weight: bold;\n &:hover {\n background-color: ${({ theme }) => theme.colors.blueDark};\n }\n `,\n primary: css`\n background-color: ${({ theme }) => theme.colors.blue};\n color: ${({ theme }) => theme.colors.white};\n &:hover {\n background-color: ${({ theme }) => theme.colors.blueDark};\n }\n `,\n secondary: css`\n background-color: ${({ theme }) => theme.colors.green};\n color: ${({ theme }) => theme.colors.primary};\n &:hover {\n background-color: ${({ theme }) => theme.colors.greenDark};\n }\n `,\n tertiary: css`\n background-color: ${({ theme }) => theme.colors.primary};\n color: ${({ theme }) => theme.colors.green};\n &:hover {\n background-color: ${({ theme }) => theme.colors.blueDark};\n }\n `,\n\n home: css`\n width: 100%;\n height: 100%;\n background-color: transparent;\n\n &:hover {\n background-color: transparent;\n }\n `,\n link: css`\n background-color: transparent;\n\n &:hover {\n background-color: transparent;\n }\n `,\n fullwidth: css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n `,\n xs: css`\n font-size: 1.2rem;\n padding: 0.8rem;\n `,\n sm: css`\n font-size: 1.4rem;\n padding: 1rem;\n `,\n lg: css`\n padding: 1.6rem;\n `,\n};\n\nconst flexVariations = {\n flexStart: css`\n justify-content: flex-start;\n `,\n flexEnd: css`\n justify-content: flex-end;\n `,\n spaceBetween: css`\n justify-content: space-between;\n `,\n};\n\nexport const StyledBtn = styled(Base)`\n ${btnVariations.baseBtn};\n ${({ variant }) => variant === \"primary\" && btnVariations.primary};\n ${({ variant }) => variant === \"secondary\" && btnVariations.secondary};\n ${({ variant }) => variant === \"tertiary\" && btnVariations.tertiary};\n ${({ variant }) => variant === \"link\" && btnVariations.link};\n ${({ variant }) => variant === \"home\" && btnVariations.home};\n ${({ fullwidth }) => fullwidth === \"true\" && btnVariations.fullwidth}\n ${({ size }) => size === \"xs\" && btnVariations.xs}\n ${({ size }) => size === \"sm\" && btnVariations.sm}\n ${({ size }) => size === \"lg\" && btnVariations.lg}\n ${({ fullwidth, hasicon }) =>\n fullwidth === \"true\" && hasicon === \"true\" && flexVariations.spaceBetween};\n\n ${({ fullwidth, hasicon, justifyContent }) =>\n fullwidth === \"true\" &&\n hasicon === \"true\" &&\n justifyContent === \"flexStart\" &&\n flexVariations.flexStart};\n\n ${({ fullwidth, hasicon, justifyContent }) =>\n fullwidth === \"true\" &&\n hasicon === \"true\" &&\n justifyContent === \"flexEnd\" &&\n flexVariations.flexEnd}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n background-color: ${theme.colors.grey};\n color: ${theme.colors.greyDark};\n cursor: auto;\n\n &:hover {\n background-color: ${theme.colors.grey};\n color: ${theme.colors.greyDark};\n cursor: not-allowed;\n pointer-events: all !important;\n }\n `}\n \n ${({ textTransform }) =>\n textTransform === \"upperCase\" &&\n css`\n text-transform: uppercase;\n `}\n`;\n\ninterface IProps {\n onClick?: () => void;\n type?: \"button\" | \"submit\" | \"reset\";\n width?: number;\n startIcon?: React.ReactNode;\n endIcon?: React.ReactNode;\n ref: React.RefObject;\n children: React.ReactNode;\n disabled?: boolean;\n variant?: string;\n size?: string;\n // Need to clean this part up\n to?: string;\n href?: string;\n as?: any;\n tabIndex?: number;\n role?: string;\n target?: string;\n newTab?: boolean;\n rel?: string;\n justifyContent?: string;\n textTransform?: string;\n}\n\ntype Props = IProps;\n\nconst Button = React.forwardRef(\n (\n {\n as,\n width = 0,\n children,\n disabled = false,\n variant,\n type = \"button\",\n startIcon: startIconProp,\n endIcon: endIconProp,\n newTab = false,\n ...props\n }: Props,\n ref?: React.Ref\n ) => {\n const commonProps = {\n ref,\n disabled,\n variant,\n fullwidth: width === 1 ? \"true\" : \"undefined\",\n hasicon: !(startIconProp || endIconProp) ? \"\" : \"true\",\n };\n\n const startIcon = startIconProp && (\n \n );\n\n const endIcon = endIconProp && (\n \n );\n\n // If it has a \"href\" prop we assume it's wants to be an anchor\n // Or it could be a Link component but you can use the prop.as for this as={Link}\n if (props.href || props.to) {\n if (disabled) {\n props.tabIndex = -1;\n props.role = \"button\";\n }\n\n if (newTab) {\n props.target = \"_blank\";\n props.rel = \"noopener noreferrer\";\n }\n\n return (\n \n );\n }\n\n return (\n \n );\n }\n);\n\nexport default Button;\n","export default __webpack_public_path__ + \"static/media/arrow-down.5ff80440.svg\";","import { hideVisually, size } from \"polished\";\nimport * as React from \"react\";\nimport styled, { css } from \"styled-components/macro\";\nimport ArrowDown from \"../img/icons/arrow-down.svg\";\nimport theme from \"../theme\";\nimport { isRTL } from \"../utils/locale\";\n\nexport const FieldWrap = styled.div`\n margin-bottom: ${theme.space[4]};\n position: relative;\n z-index: 1;\n`;\n\nconst fieldStyles = {\n display: \"block\",\n width: \"100%\",\n padding: theme.space[2],\n border: theme.borders[2],\n borderRadius: theme.radii[0],\n color: theme.colors.black,\n fontFamily: theme.fonts.base,\n fontSize: \"16px\",\n\n \":hover, :focus\": {\n borderColor: `${theme.colors.blueDark}`,\n },\n};\n\ninterface ILabelProps {\n labelVisbility?: boolean;\n}\n\nexport const FieldLabel = styled.label{startIconProp}{endIconProp}\n {startIcon}\n {children}\n {endIcon}\n \n {startIcon}\n {children}\n {endIcon}\n `\n display: block;\n margin-bottom: ${theme.space[1]};\n color: ${theme.colors.black};\n font-family: ${theme.fonts.book};\n font-size: 1.5rem;\n font-weight: bold;\n cursor: pointer;\n\n ${({ labelVisbility }) => labelVisbility === false && hideVisually};\n`;\n\nconst Hint = styled.span`\n margin-bottom: ${theme.space[1]};\n display: block;\n color: ${theme.colors.black};\n font-weight: 100;\n font-size: 14px;\n`;\n\ninterface InputProps {\n hasErrors?: boolean;\n required?: boolean;\n}\n\nexport const Input = styled.input`\n ${fieldStyles}\n ${(props) =>\n props.hasErrors &&\n css`\n border-color: ${theme.colors.error};\n\n &:focus {\n border-color: ${theme.colors.error};\n }\n `}\n box-sizing: border-box;\n`;\n\nexport const SelectWrap = styled.div`\n position: relative;\n z-index: ${theme.zIndex.select.wrap};\n border: none;\n border-radius: ${theme.radii[0]};\n background-color: white;\n\n :hover {\n border-color: ${theme.colors.blueDark};\n }\n\n ::after {\n content: \"\";\n background: url(${ArrowDown}) no-repeat;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 14px;\n height: 8px;\n background-size: contain;\n ${isRTL()\n ? css`\n left: ${(props) => props.theme.space[2]};\n `\n : css`\n right: ${(props) => props.theme.space[2]};\n `};\n }\n`;\n\n// Unable to extend SelectWrap for some reason\nconst InlineSelectWrap = styled.div`\n position: relative;\n display: inline-block;\n z-index: ${theme.zIndex.select.wrap};\n border: none;\n border-radius: ${theme.radii[0]};\n :hover {\n border-color: ${theme.colors.blueDark};\n }\n ::after {\n content: \"\";\n background: url(${ArrowDown}) no-repeat;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 14px;\n height: 8px;\n background-size: contain;\n ${isRTL()\n ? css`\n left: ${(props) => props.theme.space[2]};\n `\n : css`\n right: ${(props) => props.theme.space[2]};\n `};\n }\n`;\n\nexport const Select = styled.select`\n ${fieldStyles}\n position: relative;\n z-index: ${theme.zIndex.select.select};\n border: ${theme.borders[2]};\n border-radius: ${theme.radii[0]};\n background: none;\n appearance: none;\n cursor: pointer;\n\n ::-ms-expand {\n display: none; /* [1] */\n }\n`;\n\nconst InlineSelect = styled(Select)`\n display: inline-block;\n width: auto;\n padding-inline-end: 40px;\n`;\n\nconst SearchWrap = styled.div`\n position: relative;\n`;\n\nconst SearchIcon = styled.span`\n ${size(\"17px\")}\n content: \"\";\n background-size: contain;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-repeat: no-repeat;\n background-image: url('data:image/svg+xml;utf8,');\n ${isRTL()\n ? css`\n left: ${(props) => props.theme.space[2]};\n `\n : css`\n right: ${(props) => props.theme.space[2]};\n `};\n`;\n\nconst SearchInput = styled(Input)`\n /* stylelint-disable property-no-vendor-prefix */\n -webkit-appearance: textfield;\n\n &:focus + ${SearchIcon} {\n display: none;\n }\n`;\n\nexport const FieldCols = styled.div`\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n display: flex;\n }\n`;\n\nexport const FieldCol = styled.div`\n padding-inline-end: ${({ theme }) => theme.space[2]};\n padding-inline-start: ${({ theme }) => theme.space[2]};\n\n @media (min-width: ${({ theme }) => theme.breakpoints[2]}) {\n flex: 1;\n }\n`;\n\ninterface ILabelHintProps {\n hint?: React.ReactNode;\n id: string;\n label: React.ReactNode;\n required?: boolean;\n labelVisbility?: boolean;\n}\n\ninterface IFieldProps extends ILabelHintProps {\n name?: string;\n value?: string | number;\n}\n\ninterface IInputProps extends IFieldProps {\n maxLength?: number;\n onChange?: (e: React.ChangeEvent) => void;\n onBlur?: (e: React.ChangeEvent) => void;\n type?: string;\n disabled?: boolean;\n readonly?: boolean;\n hasErrors?: boolean;\n required?: boolean;\n}\n\nexport const LabelHint: React.FC = ({\n id,\n label,\n hint,\n required = true,\n labelVisbility = true,\n}) => (\n \n);\n\nconst InlineLabel: React.FC\n \n {hint && }\n {`${label}${required ? \"*\" : \"\"}`}{hint} = ({\n id,\n label,\n required = true,\n labelVisbility = true,\n}) => (\n \n);\n\nexport const InputField: React.FC\n \n {`${label}${required && \"*\"}`} = ({\n hint,\n id,\n label,\n maxLength,\n name,\n onBlur,\n onChange,\n type,\n value,\n required = true,\n hasErrors,\n disabled = false,\n readonly = false,\n labelVisbility = true,\n}) => (\n <>\n \n \n \n);\n\ninterface ISearchProps extends IFieldProps {\n onChange?: (e: React.ChangeEvent) => void;\n}\n\nexport const SearchField: React.FC = ({\n hint,\n id,\n label,\n name,\n onChange,\n required = true,\n value,\n ...rest\n}) => (\n <>\n \n \n \n);\n\ninterface INumberProps extends IFieldProps {\n ariaValueMax?: number;\n ariaValueMin?: number;\n ariaValueNow?: number;\n max?: string | number;\n min?: string | number;\n onChange?: (e: React.ChangeEvent\n \n \n ) => void;\n step?: string | number;\n}\n\nexport const NumberField: React.FC = ({\n ariaValueMax,\n ariaValueMin,\n ariaValueNow,\n hint,\n id,\n label,\n max = \"\",\n min = \"\",\n name,\n onChange,\n step = \"\",\n value,\n required = true,\n}) => (\n <>\n \n \n \n);\n\nconst Checkbox = styled.input`\n ${hideVisually()};\n\n :hover + span::before {\n border-color: ${(props) => props.theme.colors.primary};\n border-radius: ${(props) => props.theme.radii[0]};\n background-image: url('data:image/svg+xml;utf8,');\n }\n\n :focus + span {\n outline: -webkit-focus-ring-color auto 5px;\n }\n\n :checked + span::before {\n background-color: ${(props) => props.theme.colors.primary};\n border-radius: ${(props) => props.theme.radii[0]};\n background-image: url('data:image/svg+xml;utf8,');\n }\n`;\n\ninterface ICheckboxText {\n hasLogo?: boolean;\n}\n\nconst CheckboxText = styled.span`\n display: inline-block;\n position: relative;\n line-height: 1.6;\n ${isRTL()\n ? css`\n padding: 6px 42px 6px 0;\n `\n : css`\n padding: 6px 0 6px 42px;\n `};\n\n ::before {\n content: \"\";\n position: absolute;\n top: 50%;\n width: 30px;\n height: 30px;\n transform: translateY(-50%);\n border: ${theme.borders[0]};\n background-repeat: no-repeat;\n background-size: contain;\n vertical-align: middle;\n ${isRTL()\n ? css`\n right: 0;\n `\n : css`\n left: 0;\n `};\n }\n\n ${({ hasLogo }) =>\n hasLogo &&\n css`\n display: flex;\n align-items: center;\n `}\n`;\n\ninterface ICheckboxProps {\n checked?: boolean;\n id: string;\n label: React.ReactNode;\n name?: string;\n onChange?: (e: React.FormEvent) => void;\n logo?: any;\n hideLabel?: boolean;\n}\n\nconst LogoImg = styled.img`\n height: 29px;\n width: auto;\n max-width: 100%;\n`;\n\nexport const CheckboxField: React.SFC = ({\n id,\n onChange,\n label,\n checked,\n logo,\n hideLabel = false,\n}) => {\n let labelStyles = {};\n if (hideLabel) {\n labelStyles = hideVisually;\n }\n\n return (\n \n );\n};\n\nCheckboxField.defaultProps = {\n checked: false,\n};\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n border: 0;\n`;\n\ninterface ILabelLegendProps {\n children: React.ReactNode;\n legend: string;\n}\n\nexport const LabelLegend: React.SFC

\n \n

\n \n \n \n {hideLabel === false && }\n {logo && {label}}\n = ({\n children,\n legend,\n}) => (\n \n);\n\nconst Radio = styled.input`\n ${hideVisually()};\n\n &:hover + span::before {\n background-color: #e5e5e5;\n box-shadow: 0 0 0 0.2rem ${(props) => props.theme.colors.blueDark};\n }\n\n &:focus + span {\n outline: -webkit-focus-ring-color auto 5px;\n }\n\n &:checked + span::before {\n box-shadow: 0 0 0 0.2rem ${(props) => props.theme.colors.blueDark};\n background-color: ${(props) => props.theme.colors.blue};\n }\n`;\n\nconst RadioText = styled.span`\n display: inline-block;\n position: relative;\n line-height: 1.6;\n ${isRTL()\n ? css`\n padding: 6px 42px 6px 0;\n `\n : css`\n padding: 6px 0 6px 42px;\n `};\n\n &::before {\n /* [1] */\n display: inline-block;\n position: absolute;\n top: 50%;\n width: 23px;\n height: 23px;\n transform: translateY(-50%);\n border: 5px solid white;\n border-radius: 50%;\n box-shadow: 0 0 0 2px #e5e5e5;\n content: \"\";\n vertical-align: middle;\n ${isRTL()\n ? css`\n right: 0;\n `\n : css`\n left: 0;\n `};\n }\n`;\n\nconst StyledFieldFeedback = styled.p`\n color: ${theme.colors.error};\n margin-top: 0;\n`;\n\ninterface IOptions {\n checked?: boolean;\n id: string;\n label: string;\n onChange?: (e: React.FormEvent

\n \n {children}\n

\n \n {legend}) => void;\n value: string;\n}\ninterface IRadioGroupProps {\n defaultOptionIndex?: number;\n legend: React.ReactNode;\n name: string;\n options: IOptions[];\n onChange?: (e: React.FormEvent) => void;\n required?: boolean;\n}\n\nexport const RadioGroup: React.SFC = ({\n defaultOptionIndex,\n legend,\n name,\n options,\n onChange,\n required = true,\n}) => (\n \n);\n\ninterface ISelectProps extends IFieldProps {\n children: React.ReactNode;\n onBlur?: (e: React.ChangeEvent

\n \n {options.map((o, index) => (\n \n ))}\n

\n \n \n {legend}\n {required ? \"*\" : \"\"}\n

\n \n

\n \n \n {o.label}) => void;\n onChange?: (e: React.ChangeEvent) => void;\n required?: boolean;\n labelVisbility?: boolean;\n}\n\nexport const SelectField: React.FC = ({\n children,\n hint,\n id,\n label,\n onBlur,\n onChange,\n value,\n labelVisbility = true,\n required = true,\n}) => (\n <>\n \n \n \n);\n\nexport const InlineSelectField: React.FC\n \n = ({\n children,\n id,\n label,\n onChange,\n value,\n}) => (\n <>\n \n \n \n);\n\ninterface IFieldFeedback {\n children: React.ReactNode;\n}\n\nexport const FieldFeedback: React.FC\n \n \n {children}\n = ({ children }) => (\n \n);\n","import { combineReducers } from \"redux\";\nimport { getType } from \"typesafe-actions\";\nimport { RootAction, RootState } from \"../\";\nimport * as actions from \"./actions\";\nimport { IState } from \"./types\";\n\nexport const timeNow = () => Math.round(new Date().getTime() / 1000);\n\n// State Reducer\nexport default combineReducers{children}({\n loading: (state = false, action) => {\n switch (action.type) {\n case getType(actions.bootstrap.request):\n return true;\n case getType(actions.bootstrap.failure):\n case getType(actions.bootstrap.success):\n return false;\n default:\n return state;\n }\n },\n\n times: (state = { browser: null, server: null }, action) => {\n switch (action.type) {\n case getType(actions.bootstrap.success):\n return {\n browser: timeNow(),\n server: null,\n };\n default:\n return state;\n }\n },\n});\n\n// State Selectors\nexport const getBootstrapped = (state: RootState) =>\n Boolean(state.bootstrap.times.browser);\n\nexport const getBootstrapTime = (state: RootState) =>\n state.bootstrap.times.browser;\n"],"sourceRoot":""}

{t(\"myTeam.overallPoints\", \"Overall Points\")}:	\n {entry.summary_overall_points}\n
{t(\"myTeam.overallRank\", \"Overall Rank\")}:	\n \n {entry.summary_overall_rank &&\n entry.summary_overall_rank.toLocaleString()}\n \n
{t(\"myTeam.totalPlayers\", \"Total Players\")}:	\n {totalPlayers.toLocaleString()}\n
{t(\"myTeam.roundPoints\", \"Round Points\")}:	\n {entry.summary_event_points}\n

\n \n \n \n \n \n \n {headingText}\n \n

{t(\"routes.notFound.title\", \"Page not found\")}

\n {t(\"serverError.permissionDenied.title\", \"Permission denied\")}\n

{t(\"serverError.notFound.title\", \"Page not found\")}

\n {t(\"serverError.updating.title\", \"The game is being updated.\")}\n

{t(\"serverError.unavailable.title\", \"Unavailable\")}

{t(\"serverError.default.title\", \"Error\")}

Error

\n \n \n \n \n {headingText}\n \n