Skip to content

Commit

Permalink
feat(match): display MOTM
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonassimoen
jonassimoen committed Dec 3, 2023
1 parent d0bb8e4 commit e331a0d
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 83 deletions.
4 changes: 3 additions & 1 deletion src/components/Player/Player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ declare type PlayerProps = {
shirtFallback?: string

className?: string
motm?: boolean
}

export const Player = (props: PlayerProps) => {
Expand Down Expand Up @@ -92,6 +93,7 @@ export const Player = (props: PlayerProps) => {
benchPlayer,
replacePlayerPointsWithStatsPoints,
type,
motm,
} = props;

const [state, setState] = useState<PlayerState>({
Expand Down Expand Up @@ -203,7 +205,7 @@ export const Player = (props: PlayerProps) => {

{
showPlayerName && // badgeBgColor of playerPositionColor // span: color: pointsColor
<Badge color={badgeColor} bgColor={playerPositionColor}>
<Badge color={badgeColor} bgColor={motm ? "#c4a747" : theme.primaryContrast}>
<span style={{ color: "white" }}>{playerName}</span>
</Badge>
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/Substitutes/Substitutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ type SubstitutesProps = {
isSwapAble?: any
swapPlayerId?: number | null
swappedFrom?: string | null
motmId?: number
}

export const Substitutes = (props: SubstitutesProps) => {
Expand Down Expand Up @@ -89,6 +90,7 @@ export const Substitutes = (props: SubstitutesProps) => {
positionLabel={positionLabel}
onPlaceholderClick={props.onPlaceholderClick}
actionLessPlayerIds={props.actionsLessPlayerIds}
motm={props.motmId===player.id}
{...imgProps}
/>
</React.Fragment>;
Expand Down
5 changes: 4 additions & 1 deletion src/components/Team/Team.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export declare type TeamProps = {
// boosterWeekStatus?: BoostersWeekStatus;
viceCaptainId?: number;
centerAligned?: boolean | undefined;
motmId?: number
// t: i18next.TFunction;
};

Expand Down Expand Up @@ -70,7 +71,8 @@ export const Team = (props: TeamProps) => {
captainHasPlayed,
viceCaptainId,
showCaptainBadge,
onViceCaptainSelect
onViceCaptainSelect,
motmId,
} = props;

return (
Expand Down Expand Up @@ -125,6 +127,7 @@ export const Team = (props: TeamProps) => {
swappedFrom={swappedFrom}
club={club}
type={playerType}
motm={motmId===player.id}
{...imgProps}
/>
);
Expand Down
166 changes: 85 additions & 81 deletions src/pages/Match/Match.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[]) => {
Expand Down Expand Up @@ -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 (
<Spin spinning={matchLoading || clubsLoading} delay={0} style={{ padding: "2rem 0" }}>
{match && clubs &&
<MatchStyles>
<Row>
<Col md={12} sm={24} xs={24} className="left">
<Block>
<Title level={2}>
{match!.home!.name}
</Title>
<span style={{ display: "block", fontSize: "16px", textAlign: "center" }}>{homeTotalPoints} {t("general.points")}</span>
<Team
widthRatio={15}
heightRatio={10}
clubs={clubs}
bg={teamBackground}
assetsCdn={application.competition.assetsCdn}
replacePlayerPointsWithStatsPoints={true}
selection={homeStartingPlayersByPositions}
centerAligned={true}
playerType={PlayerType.SoccerPortrait}
playerBadgeColor={"#fff"}
modalEnabled={true}
captainId={undefined}
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#fff"}
playerPointsBgColor={theme.primaryColor}
/>
<Substitutes
selection={homeBenchPlayers.sort((a: any, b: any) => 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}
/>
</Block>
</Col>
<Col md={12} sm={24} xs={24} className="right">
<Block>
<Title level={2}>
{match!.away!.name}
</Title>
<span style={{ display: "block", fontSize: "16px", textAlign: "center" }}>{awayTotalPoints} {t("general.points")}</span>
<Team
widthRatio={15}
heightRatio={10}
clubs={clubs}
bg={teamBackground}
assetsCdn={application.competition.assetsCdn}
replacePlayerPointsWithStatsPoints={true}
selection={awayStartingPlayersByPositions}
centerAligned={true}
playerType={PlayerType.SoccerPortrait}
playerBadgeColor={"#fff"}
modalEnabled={true}
captainId={undefined}
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#fff"}
playerPointsBgColor={theme.primaryColor}
/>
<Substitutes
selection={awayBenchPlayers.sort((a: any, b: any) => 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}
/>
</Block>
</Col>
</Row>
</MatchStyles>
<MatchStyles>
<Row>
<Col md={12} sm={24} xs={24} className="left">
<Block>
<Title level={2}>
{match!.home!.name}
</Title>
<span style={{ display: "block", fontSize: "16px", textAlign: "center" }}>{homeTotalPoints} {t("general.points")}</span>
<Team
widthRatio={15}
heightRatio={10}
clubs={clubs}
bg={teamBackground}
assetsCdn={application.competition.assetsCdn}
replacePlayerPointsWithStatsPoints={true}
selection={homeStartingPlayersByPositions}
centerAligned={true}
playerType={PlayerType.SoccerPortrait}
playerBadgeColor={"#fff"}
modalEnabled={true}
captainId={undefined}
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#fff"}
playerPointsBgColor={theme.primaryColor}
motmId={motmId}
/>
<Substitutes
selection={homeBenchPlayers.sort((a: any, b: any) => 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}
/>
</Block>
</Col>
<Col md={12} sm={24} xs={24} className="right">
<Block>
<Title level={2}>
{match!.away!.name}
</Title>
<span style={{ display: "block", fontSize: "16px", textAlign: "center" }}>{awayTotalPoints} {t("general.points")}</span>
<Team
widthRatio={15}
heightRatio={10}
clubs={clubs}
bg={teamBackground}
assetsCdn={application.competition.assetsCdn}
replacePlayerPointsWithStatsPoints={true}
selection={awayStartingPlayersByPositions}
centerAligned={true}
playerType={PlayerType.SoccerPortrait}
playerBadgeColor={"#fff"}
modalEnabled={true}
captainId={undefined}
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#fff"}
playerPointsBgColor={theme.primaryColor}
/>
<Substitutes
selection={awayBenchPlayers.sort((a: any, b: any) => 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}
/>
</Block>
</Col>
</Row>
</MatchStyles>
}
</Spin>
);
Expand Down
1 change: 1 addition & 0 deletions src/types/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ type Statistic = {
duelsTotal?: number
yellow?: number
red?: number
motm?: boolean
}

type PlayerSelection = {
Expand Down

0 comments on commit e331a0d

Please sign in to comment.