diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index b026a90..dba48ec 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -61,6 +61,7 @@ declare type PlayerProps = { shirtFallback?: string className?: string + motm?: boolean } export const Player = (props: PlayerProps) => { @@ -92,6 +93,7 @@ export const Player = (props: PlayerProps) => { benchPlayer, replacePlayerPointsWithStatsPoints, type, + motm, } = props; const [state, setState] = useState({ @@ -203,7 +205,7 @@ export const Player = (props: PlayerProps) => { { showPlayerName && // badgeBgColor of playerPositionColor // span: color: pointsColor - + {playerName} } diff --git a/src/components/Substitutes/Substitutes.tsx b/src/components/Substitutes/Substitutes.tsx index 4924e11..4975630 100644 --- a/src/components/Substitutes/Substitutes.tsx +++ b/src/components/Substitutes/Substitutes.tsx @@ -34,6 +34,7 @@ type SubstitutesProps = { isSwapAble?: any swapPlayerId?: number | null swappedFrom?: string | null + motmId?: number } export const Substitutes = (props: SubstitutesProps) => { @@ -89,6 +90,7 @@ export const Substitutes = (props: SubstitutesProps) => { positionLabel={positionLabel} onPlaceholderClick={props.onPlaceholderClick} actionLessPlayerIds={props.actionsLessPlayerIds} + motm={props.motmId===player.id} {...imgProps} /> ; diff --git a/src/components/Team/Team.tsx b/src/components/Team/Team.tsx index 3efd9e4..a409b2a 100644 --- a/src/components/Team/Team.tsx +++ b/src/components/Team/Team.tsx @@ -36,6 +36,7 @@ export declare type TeamProps = { // boosterWeekStatus?: BoostersWeekStatus; viceCaptainId?: number; centerAligned?: boolean | undefined; + motmId?: number // t: i18next.TFunction; }; @@ -70,7 +71,8 @@ export const Team = (props: TeamProps) => { captainHasPlayed, viceCaptainId, showCaptainBadge, - onViceCaptainSelect + onViceCaptainSelect, + motmId, } = props; return ( @@ -125,6 +127,7 @@ export const Team = (props: TeamProps) => { swappedFrom={swappedFrom} club={club} type={playerType} + motm={motmId===player.id} {...imgProps} /> ); diff --git a/src/pages/Match/Match.tsx b/src/pages/Match/Match.tsx index f99b761..8e756d3 100644 --- a/src/pages/Match/Match.tsx +++ b/src/pages/Match/Match.tsx @@ -20,7 +20,7 @@ import { Substitutes } from "@/components/Substitutes/Substitutes"; import teamBackground from "./../../assets/img/fpl-pitch-no-boarding.svg"; const playerProps = - ["id", "name", "short", "positionId", "clubId", "injury", "form", "forename", "surname", "points", "pointsOverview", "stats", "portraitUrl"]; + ["id", "name", "short", "positionId", "clubId", "injury", "form", "forename", "surname", "points", "pointsOverview", "stats", "portraitUrl"]; const calculatePointsByPlayerStats = (players: Player[]) => { @@ -62,89 +62,93 @@ const _MatchContainer = (props: AbstractTeamType) => { const homeTotalPoints = useMemo(() => match && match.home && calculatePointsByPlayerStats(match.home.players), [match]); const awayTotalPoints = useMemo(() => match && match.away && calculatePointsByPlayerStats(match.away.players), [match]); + const motmId = useMemo(() => [].concat(homeStartingPlayers, homeBenchPlayers, awayStartingPlayers, awayBenchPlayers).find((p: Player) => p?.stats[0].motm)?.id, [homeStartingPlayers, homeBenchPlayers, awayStartingPlayers, awayBenchPlayers]); + return ( {match && clubs && - - - - - - {match!.home!.name} - - {homeTotalPoints} {t("general.points")} - - a.positionId - b.positionId)} - clubs={clubs} - title="De bank" - bgImage={"#F4F8FF"} - playerType={PlayerType.SoccerPortrait} - modalEnabled={true} - assetsCdn={application.competition.assetsCdn} - playerBadgeColor={"#000"} - playerBadgeBgColor={theme.primaryColor} - playerPointsColor={"#000"} - playerPointsBgColor={theme.primaryColor} - /> - - - - - - {match!.away!.name} - - {awayTotalPoints} {t("general.points")} - - a.positionId - b.positionId)} - clubs={clubs} - title="De bank" - bgImage={"#F4F8FF"} - playerType={PlayerType.SoccerPortrait} - modalEnabled={true} - assetsCdn={application.competition.assetsCdn} - playerBadgeColor={"#000"} - playerBadgeBgColor={theme.primaryColor} - playerPointsColor={"#000"} - playerPointsBgColor={theme.primaryColor} - /> - - - - + + + + + + {match!.home!.name} + + {homeTotalPoints} {t("general.points")} + + a.positionId - b.positionId)} + clubs={clubs} + title="De bank" + bgImage={"#F4F8FF"} + playerType={PlayerType.SoccerPortrait} + modalEnabled={true} + assetsCdn={application.competition.assetsCdn} + playerBadgeColor={"#000"} + playerBadgeBgColor={theme.primaryColor} + playerPointsColor={"#000"} + playerPointsBgColor={theme.primaryColor} + motmId={motmId} + /> + + + + + + {match!.away!.name} + + {awayTotalPoints} {t("general.points")} + + a.positionId - b.positionId)} + clubs={clubs} + title="De bank" + bgImage={"#F4F8FF"} + playerType={PlayerType.SoccerPortrait} + modalEnabled={true} + assetsCdn={application.competition.assetsCdn} + playerBadgeColor={"#000"} + playerBadgeBgColor={theme.primaryColor} + playerPointsColor={"#000"} + playerPointsBgColor={theme.primaryColor} + /> + + + + } ); diff --git a/src/types/index.tsx b/src/types/index.tsx index debfa5f..d848c00 100644 --- a/src/types/index.tsx +++ b/src/types/index.tsx @@ -81,6 +81,7 @@ type Statistic = { duelsTotal?: number yellow?: number red?: number + motm?: boolean } type PlayerSelection = {