Skip to content

Commit

Permalink
fix(player): display right images
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonassimoen
jonassimoen committed Nov 27, 2023
1 parent fe20bed commit ba6a11a
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 77 deletions.
2 changes: 2 additions & 0 deletions src/components/AbstractTeam/AbstractTeam.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,8 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
teamId,
starting: startingIds,
bench: benchIds,
captainId: state.captainId,
viceCaptainId: state.viceCaptainId,
teamName: state.teamName,
}).unwrap().then((res) => openSuccessNotification({ title: res.msg })).catch((err) => openErrorNotification({ title: t("team.updateSelection.failed") }));
}
Expand Down
67 changes: 39 additions & 28 deletions src/components/Player/Player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ const ViceCaptainIcon = (props: any) => <Icon component={ViceCaptainButtonSvg} {

declare type PlayerState = {
modalVisible: boolean
// shirtSoccer?: string
portraitFace?: string
portraitFaceFallBack?: string
face?: string
faceFallback?: string
shirt?: string
shirtFallback?: string
}

declare type PlayerProps = {
player: Player
portraitFace?: string
portraitFaceFallBack?: string
type: PlayerType
avatarOnly?: boolean
badgeColor: string
badgeBgColor: string
Expand All @@ -44,7 +44,7 @@ declare type PlayerProps = {
showCaptainBadge?: boolean
club?: Club
isSwapable?: any
swappedFrom?: string|null
swappedFrom?: string | null
modalEnabled?: boolean
onRemove?: any
onSwap?: any
Expand All @@ -55,6 +55,11 @@ declare type PlayerProps = {
showPlayerValueInsteadOfPoints?: boolean
replacePlayerPointsWithStatsPoints?: boolean

face?: string
faceFallback?: string
shirt?: string
shirtFallback?: string

className?: string
}

Expand Down Expand Up @@ -86,20 +91,24 @@ export const Player = (props: PlayerProps) => {
showPlayerValue,
benchPlayer,
replacePlayerPointsWithStatsPoints,
type,
} = props;

const [state, setState] = useState<PlayerState>({
portraitFace: props.portraitFace,
portraitFaceFallBack: props.portraitFaceFallBack,
face: props.face,
faceFallback: props.faceFallback,
shirt: props.shirt,
shirtFallback: props.shirtFallback,
modalVisible: false,
});

useEffect(() => {
setState({
...state,
portraitFace: `${config.API_URL}/static/${player.externalId}.png`,
portraitFaceFallBack: `${config.API_URL}/static/dummy.png`,
});
}, [player]);
useEffect(() => setState({
...state,
face: props.face,
faceFallback: props.faceFallback,
shirt: props.shirt,
shirtFallback: props.shirtFallback,
}), [props]);


const gamePositionIdToLabels = [
Expand All @@ -119,12 +128,12 @@ export const Player = (props: PlayerProps) => {
const playerName = useMemo(() =>
(player && player.id && player.short) ||
(player && player.id && `${player.surname} ${player.forename && firstLetterUppercased(player.forename)}.`) ||
`${currentPositionLabel ? currentPositionLabel.name : t("general.choosePlayer")}`,
[player]);
`${currentPositionLabel ? currentPositionLabel.name : t("general.choosePlayer")}`, [player]
);

const opponentInfo = useMemo(
() => {
if(player && player.upcomingMatches && player.upcomingMatches.length) {
if (player && player.upcomingMatches && player.upcomingMatches.length) {
const nextMatch = player.upcomingMatches[0];
return {
playing: nextMatch.homeId === player.clubId ? t("player.opponentHome") : t("player.opponentAway"),
Expand All @@ -142,11 +151,11 @@ export const Player = (props: PlayerProps) => {
const isCaptain = useMemo(() => player && player.id && player.id === captainId, [player, captainId]);
const isViceCaptain = useMemo(() => player && player.id && player.id === viceCaptainId, [player, viceCaptainId]);

const showPoints = (player && player.points !== undefined && player.points !== null) || showPlayerValueInsteadOfPoints || replacePlayerPointsWithStatsPoints;
const showPoints = (player && player.points !== undefined && player.points !== null) || showPlayerValueInsteadOfPoints || replacePlayerPointsWithStatsPoints;
const showPlayerName = !avatarOnly;

useEffect(() => {
if(player && replacePlayerPointsWithStatsPoints && hasStats) {
if (player && replacePlayerPointsWithStatsPoints && hasStats) {
const statsPointsCurrentWeek = player.stats.reduce((acc: number, stat: any) => acc + stat.points, 0);
const captainOrViceCaptainPoints = isCaptain || (!captainHasPlayed && isViceCaptain);

Expand Down Expand Up @@ -177,17 +186,19 @@ export const Player = (props: PlayerProps) => {
};

const onBgLoadError = (event: any) => {
if(state.portraitFaceFallBack) {
setState({ ...state, portraitFace: state.portraitFaceFallBack,});
console.log("FAILED FETCHING", player.id);
if (state.faceFallback) {
setState({ ...state, face: state.faceFallback, });
}
};
// console.log("speler", player.name, showPoints && hasStats && player.points !== null && player.points !== undefined && player.points)

console.log("assetsCdn for Player", player.short, state.face);
return (
<PlayerStyle onClick={(e: any) => onPlayerClick(!hasInactiveOverlay)} className={`position_${player.positionId}` && props.className}>
{
player && player.id &&
<PlayerBg src={state.portraitFace} onError={onBgLoadError} inactive={hasInactiveOverlay} />
<PlayerBg src={state.face} onError={onBgLoadError} inactive={hasInactiveOverlay} />
}

{
Expand All @@ -205,7 +216,7 @@ export const Player = (props: PlayerProps) => {
{
opponentInfo ?
<OpponentBadge color={"#000"} bgColor={"#fff"}>
<p style={{fontSize: "10px"}}>
<p style={{ fontSize: "10px" }}>
{`${opponentInfo.opponentShort} (${opponentInfo.playing})`}
</p>
</OpponentBadge> : null
Expand All @@ -219,7 +230,7 @@ export const Player = (props: PlayerProps) => {
) || null
}
{
!player || (player && !player.id) &&
!player || (player && !player.id) &&
// todo
// eslint-disable-next-line @typescript-eslint/no-empty-function
<NoPlayer onClick={onPlaceholderClick ? (e: any) => onPlaceholderClick(player) : () => { }}>
Expand Down Expand Up @@ -271,8 +282,8 @@ export const Player = (props: PlayerProps) => {
<PlayerModal
visible={state.modalVisible}
onCancel={onCancel}
portraitFace={state.portraitFace}
portraitFaceFallback={state.portraitFaceFallBack}
portraitFace={state.face}
portraitFaceFallback={state.faceFallback}
player={player}
club={props.club}
swapPlayerId={swapPlayerId}
Expand Down
91 changes: 53 additions & 38 deletions src/components/PlayerList/PlayerList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ declare type PlayerListProps = {
matches?: any
deadlineWeek?: any;
playerTax?: number | undefined;
assetsCdn: string
}

declare type PlayerListState = {
Expand All @@ -45,12 +46,29 @@ declare type PlayerListState = {

export const PlayerList = (props: PlayerListProps) => {
const { t } = useTranslation();

const {
assetsCdn,
activePositionFilter,
setActivePositionFilter,
onPick,
clubs,
hidePositions,
isPickable,
actionLabel,
playerType,
action,
data,
isLoading,
showHeader
} = props;

const [state, setState] = useState<PlayerListState>({
filters: {
search: "",
budget: -1,
club: -1,
position: props.activePositionFilter || -1
position: activePositionFilter || -1
}
});

Expand All @@ -74,20 +92,20 @@ export const PlayerList = (props: PlayerListProps) => {
id: -1,
name: <span className={"prefixed-label"}> <StarOutlined style={{ marginRight: 5 }} /> {t("general.footballAllClubs")} </span>
}]
.concat(props.clubs.map((c: Club) => ({ id: c.id, name: <span>{c.name}</span> })));
.concat(clubs.map((c: Club) => ({ id: c.id, name: <span>{c.name}</span> })));

useEffect(() => {
const filters = { ...state.filters, position: props.activePositionFilter };
const filters = { ...state.filters, position: activePositionFilter };
setState({ ...state, filters });
}, [props.activePositionFilter]);
}, [activePositionFilter]);

const onFilterChange = (name: string, value: string | number) => {
const filters: any = Object.assign({}, state.filters, {
[name]: value,
});

if (props.activePositionFilter && props.setActivePositionFilter && name === "position") {
props.setActivePositionFilter(value);
if (activePositionFilter && setActivePositionFilter && name === "position") {
setActivePositionFilter(value);
} else {
setState({ ...state, filters });
}
Expand Down Expand Up @@ -117,8 +135,8 @@ export const PlayerList = (props: PlayerListProps) => {
const onPickHandler = (e: any, record: any) => {
e.stopPropagation();

if (props.onPick) {
props.onPick(record);
if (onPick) {
onPick(record);
}
};

Expand All @@ -129,22 +147,19 @@ export const PlayerList = (props: PlayerListProps) => {
dataIndex: "avatar",
width: "15%",
render: (txt: string, record: any) => {
const sportSpecificProps: {
shirtSoccer?: string,
soccerJersey?: string,
clubBadge?: string,
portraitFace?: string,
const imgProps: {
shirt?: string,
face?: string,
faceFallback?: string,
shirtFallback?: string,
portraitFaceFallBack?: string,
club?: Club
} = {};

if (PlayerType.SoccerPortrait === props.playerType && record) {
// sportSpecificProps.soccerJersey = `${assetsCdn}/jerseys/club_${record.clubId}.png`;
// sportSpecificProps.clubBadge = `${assetsCdn}/badges/club_${record.clubId}.png`;
// sportSpecificProps.portraitFace = record.portraitUrl;
// sportSpecificProps.portraitFaceFallBack = `${assetsCdn}/players/dummy.png`;
sportSpecificProps.portraitFace = `${config.API_URL}/static/${record.externalId}.png`;
if (PlayerType.SoccerPortrait === playerType) {
imgProps.face = `${assetsCdn}/players/${record.id}.png`;
imgProps.faceFallback = `${assetsCdn}/players/dummy.png`;
} else if (PlayerType.SoccerShirt === playerType) {
imgProps.shirt = `${assetsCdn}/jerseys/${record.clubId}.png`;
imgProps.shirtFallback = `${assetsCdn}/jerseys/dummy.png`;
}

return (
Expand All @@ -157,8 +172,8 @@ export const PlayerList = (props: PlayerListProps) => {
badgeBgColor={"#fff"}
avatarOnly={true}
player={record}
// type={props.playerType}
{...sportSpecificProps}
type={playerType}
{...imgProps}
/>
</div>
);
Expand All @@ -170,7 +185,7 @@ export const PlayerList = (props: PlayerListProps) => {
dataIndex: "name",
width: "45%",
render: (txt: string, record: Player) => {
const club = props.clubs?.find(club => club.id === record.clubId);
const club = clubs?.find(club => club.id === record.clubId);
const position = positions.find(
position => position.id === record.positionId
);
Expand All @@ -186,16 +201,16 @@ export const PlayerList = (props: PlayerListProps) => {
<span>
{record.short}
</span>
<span style={{float:"right", marginRight: "10px"}}>
{record.star && <StarIcon style={{ marginRight: "2px" }} />}
{record.caps && <CaptainIcon style={{ marginRight: "2px" }} />}
{record.setPieces && <SetPiecesIcon style={{ marginRight: "2px" }} />}
<span style={{ float: "right", marginRight: "10px" }}>
{record.star ? <StarIcon style={{ marginRight: "2px" }} /> : null}
{record.caps ? <CaptainIcon style={{ marginRight: "2px" }} /> : null}
{record.setPieces ? <SetPiecesIcon style={{ marginRight: "2px" }} /> : null}
</span>
</p>
<p>
<span>{club && club.short} {opponentInfo ? `vs ${opponentInfo.short}` : null} </span>
<span className="player-position" style={{ color: positionColor }}>
{(!props.hidePositions && position && position.name) || null}
{(!hidePositions && position && position.name) || null}
</span>
</p>
</PlayerStyle>
Expand All @@ -208,7 +223,7 @@ export const PlayerList = (props: PlayerListProps) => {
<p className="mobile-name">{record.short}</p>
<p>
<span style={{ color: "#16002b" }}>{club && club.short}</span> <span className="player-position" style={{ color: positionColor }}>
{(!props.hidePositions && position && position.name) || null}
{(!hidePositions && position && position.name) || null}
</span>
</p>
<p className="icons">
Expand Down Expand Up @@ -240,7 +255,7 @@ export const PlayerList = (props: PlayerListProps) => {
</div>
<p style={{ fontSize: "0.8rem" }}>
<span style={{ color: "#16002b" }}>{club && club.short}</span> <span className="player-position" style={{ color: positionColor }}>
{(!props.hidePositions && position && position.name) || null}
{(!hidePositions && position && position.name) || null}
</span>
</p>
</PlayerStyle> */}
Expand All @@ -263,22 +278,22 @@ export const PlayerList = (props: PlayerListProps) => {
}
];

if (props.action) {
if (action) {
columns.push({
key: "action",
title: "Pick player",
dataIndex: "action",
width: "20%",
render: (text: string, record: any) => {
return (
(props.isPickable && props.isPickable(record) && (
(isPickable && isPickable(record) && (
<Button
type="primary"
onClick={(e: any) => onPickHandler(e, record)}
style={{ width: "100%", marginLeft:0 }}
style={{ width: "100%", marginLeft: 0 }}
size="small"
>
{props.actionLabel || t("general.pick")}
{actionLabel || t("general.pick")}
</Button>
)) || <span />
);
Expand Down Expand Up @@ -332,10 +347,10 @@ export const PlayerList = (props: PlayerListProps) => {
/>
</SelectGroupStyle>
<TableStyle
loading={props.isLoading}
showHeader={props.showHeader}
loading={isLoading}
showHeader={showHeader}
columns={columns}
dataSource={props.data.filter(player => playerFilter(player))}
dataSource={data.filter(player => playerFilter(player))}
rowKey="id"
rowClassName={(record: object, index: number) =>
`${index % 2 ? "ant-table-row--odd" : "ant-table-row--even"}`
Expand Down
Loading

0 comments on commit ba6a11a

Please sign in to comment.