From 6191d4e481c3dcbc64ab2623d9bc90f08c3b23ae Mon Sep 17 00:00:00 2001
From: Itamar Tati <itamar.tati1994@gmail.com>
Date: Sun, 14 May 2023 10:29:46 +0100
Subject: [PATCH] added the player trading card

---
 src/ui/views/Player/PlayerTradingCard.tsx | 164 ++++++++++++++++++++++
 src/ui/views/Player/TopStuff.tsx          |  66 ++++++++-
 2 files changed, 229 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/views/Player/PlayerTradingCard.tsx

diff --git a/src/ui/views/Player/PlayerTradingCard.tsx b/src/ui/views/Player/PlayerTradingCard.tsx
new file mode 100644
index 0000000000..c0e1985502
--- /dev/null
+++ b/src/ui/views/Player/PlayerTradingCard.tsx
@@ -0,0 +1,164 @@
+import React, { useEffect, useState, useRef } from "react";
+import html2canvas from "html2canvas";
+import AwardsSummary from "./AwardsSummary";
+import { PlayerPicture } from "../../components";
+interface Props {
+	name: string;
+	teams: string[];
+	stats: {
+		games: string;
+		points: string;
+		rebounds: string;
+		assists: string;
+		playerEfficiencyRating: string;
+	};
+	awards: Array<{
+		season: number;
+		type: string;
+	}>;
+}
+
+const PlayerTradingCard: React.FC<Props> = ({
+	name,
+	teams,
+	stats,
+	awards,
+	face,
+	imgURL,
+	colors,
+	jersey,
+}) => {
+	const cardRef = useRef<HTMLDivElement>(null);
+	const handleDownloadClick = () => {
+		html2canvas(cardRef.current!).then(canvas => {
+			const link = document.createElement("a");
+			link.download = "player-card.png";
+			link.href = canvas.toDataURL();
+			link.click();
+		});
+	};
+
+	const styling = {
+		container: {
+			display: "flex",
+			flexDirection: "column",
+			flexWrap: "wrap",
+			alignContent: "center",
+			justifyContent: "center",
+			alignItems: "center",
+			marginTop: "20px",
+		},
+		card: {
+			backgroundColor: "#111",
+			color: "#fff",
+			padding: "20px",
+			borderRadius: "10px",
+			fontFamily: "Arial, sans-serif",
+			textAlign: "center",
+		},
+		image: {
+			height: "350px",
+		},
+		name: {
+			fontSize: "24px",
+			fontWeight: "bold",
+			marginTop: "10px",
+		},
+		teams: {
+			fontSize: "1.2rem",
+			margin: "1rem 0",
+		},
+		teamsUl: {
+			listStyleType: "none",
+			padding: "0",
+			margin: "0",
+		},
+		teamsLi: {
+			padding: "0.5rem 0",
+			borderBottom: "1px solid #ccc",
+		},
+		stats: {
+			marginTop: "20px",
+		},
+		table: {
+			margin: "0 auto",
+			borderCollapse: "collapse",
+			fontSize: "18px",
+		},
+		th: {
+			fontWeight: "normal",
+			padding: "10px 15px",
+			borderBottom: "2px solid #fff",
+		},
+		td: {
+			padding: "10px 15px",
+			borderBottom: "1px solid #444",
+		},
+		tfoot: {
+			fontWeight: "bold",
+		},
+		button: {
+			backgroundColor: "#007bff",
+			color: "#fff",
+			padding: "10px 20px",
+			border: "none",
+			borderRadius: "5px",
+			fontSize: "18px",
+			cursor: "pointer",
+			marginTop: "20px",
+		},
+	};
+
+	return (
+		<div style={styling.container}>
+			<div ref={cardRef} style={styling.card}>
+				<div style={styling.image}>
+					<PlayerPicture
+						face={face}
+						imgURL={imgURL}
+						colors={colors}
+						jersey={jersey}
+					/>
+				</div>
+				<div style={styling.name}>{name}</div>
+				<div style={styling.teams}>
+					<ul style={styling.teamsUl}>
+						{teams.map((team, index) => (
+							<li key={index} style={styling.teamsLi}>
+								{team}
+							</li>
+						))}
+					</ul>
+				</div>
+				<div>
+					<table style={styling.table}>
+						<thead>
+							<tr>
+								<th style={styling.th}>G</th>
+								<th style={styling.th}>PTS</th>
+								<th style={styling.th}>TRB</th>
+								<th style={styling.th}>AST</th>
+								<th style={styling.th}>PER</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td style={styling.td}>{stats.games}</td>
+								<td style={styling.td}>{stats.points}</td>
+								<td style={styling.td}>{stats.rebounds}</td>
+								<td style={styling.td}>{stats.assists}</td>
+								<td style={styling.td}>{stats.playerEfficiencyRating}</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+				<AwardsSummary awards={awards} />
+			</div>
+			<button style={styling.button} onClick={handleDownloadClick}>
+				Download Card
+			</button>
+		</div>
+	);
+};
+
+export default PlayerTradingCard;
diff --git a/src/ui/views/Player/TopStuff.tsx b/src/ui/views/Player/TopStuff.tsx
index 94086ab961..652954d895 100644
--- a/src/ui/views/Player/TopStuff.tsx
+++ b/src/ui/views/Player/TopStuff.tsx
@@ -29,6 +29,7 @@ import classNames from "classnames";
 import AwardsSummary from "./AwardsSummary";
 import RatingsOverview from "./RatingsOverview";
 import Note from "./Note";
+import PlayerTradingCard from "./PlayerTradingCard";
 
 const Relatives = ({
 	gender,
@@ -47,7 +48,6 @@ const Relatives = ({
 
 	const numToShow = showAll || relatives.length <= 3 ? relatives.length : 2;
 	const numToHide = relatives.length - numToShow;
-
 	return (
 		<>
 			{relatives.slice(0, numToShow).map(rel => {
@@ -429,6 +429,53 @@ const TopStuff = ({
 	);
 
 	const showRatingsOverview = (!retired || season !== undefined) && showRatings;
+	let teamsPlayedFor: any = {};
+	let teams = [];
+	teamsPlayedFor[player.stats[0].abbrev] = { start: null, end: null };
+	teamsPlayedFor[player.stats[0].abbrev].start = player.stats[0].season;
+	let playerSeasons = player.stats.filter(season => season.abbrev !== "TOT");
+	for (let index = 1; index < playerSeasons.length; index++) {
+		let teamPreviousYear = playerSeasons[index - 1].abbrev;
+		let teamCurrentYear = playerSeasons[index].abbrev;
+
+		if (
+			teamsPlayedFor[teamCurrentYear] === undefined &&
+			teamCurrentYear !== teamPreviousYear
+		) {
+			teamsPlayedFor[teamCurrentYear] = { start: null, end: null };
+			teamsPlayedFor[teamCurrentYear].start = playerSeasons[index - 1].season;
+		}
+
+		if (
+			teamsPlayedFor[teamCurrentYear] &&
+			teamCurrentYear !== teamPreviousYear
+		) {
+			let start = teamsPlayedFor[teamPreviousYear].start;
+			let end = teamsPlayedFor[teamPreviousYear].end;
+			let current = playerSeasons[index].season;
+
+			if (playerSeasons[index].abbrev !== "TOT") {
+				if (end !== null) {
+					teams.push(`${start} - ${end} ${teamPreviousYear}`);
+				} else {
+					teams.push(`${start} - ${current} ${teamPreviousYear}`);
+				}
+			}
+		}
+
+		if (
+			teamsPlayedFor[teamCurrentYear] &&
+			teamCurrentYear === teamPreviousYear
+		) {
+			teamsPlayedFor[teamCurrentYear].end = playerSeasons[index].season;
+		}
+
+		if (index === playerSeasons.length - 1) {
+			let start = teamsPlayedFor[teamCurrentYear].start;
+			let end = player.stats[index].season;
+			teams.push(`${start} - ${end} ${teamCurrentYear}`);
+		}
+	}
 
 	return (
 		<div className="mb-3">
@@ -683,6 +730,23 @@ const TopStuff = ({
 			<AwardsSummary awards={player.awards} />
 
 			<Note note={player.note} pid={player.pid} />
+
+			<PlayerTradingCard
+				name={player.name}
+				teams={teams}
+				stats={{
+					games: player.careerStats.gp.toString(),
+					points: player.careerStats.pts.toFixed(2),
+					rebounds: player.careerStats.trb.toFixed(2),
+					assists: player.careerStats.ast.toFixed(2),
+					playerEfficiencyRating: player.careerStats.per.toFixed(2),
+				}}
+				awards={player.awards}
+				face={player.face}
+				imgURL={player.imgURL}
+				colors={teamColors}
+				jersey={teamJersey}
+			/>
 		</div>
 	);
 };