Skip to content

Commit fafaf72

Browse files
darkstars31darkstars31
committed
Player History WIP
1 parent bc82237 commit fafaf72

File tree

2 files changed

+117
-0
lines changed

2 files changed

+117
-0
lines changed

‎src/pages/player.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ import { GraphicsPlayer } from "./graphicsPlayer";
3737
import { Button } from "../common/components/button";
3838
import { toPng } from 'html-to-image';
3939
import { MdKeyboardArrowDown } from "react-icons/md";
40+
import dayjs from "dayjs";
41+
import { PlayerHistory } from "./player/playerHistory";
4042

4143
const PlayerMatchHistory = React.lazy(() =>import('./player/matchHistory').then(module => ({default: module.PlayerMatchHistory})));
4244
const TeamSideRatingPie = React.lazy(() =>import('../common/components/teamSideRatingPie').then(module => ({default: module.TeamSideRatingPie})));
@@ -53,6 +55,7 @@ export function Player() {
5355
const { addNotification } = useNotificationsContext();
5456
const [ showProfile, setShowProfile ] = React.useState(false);
5557
const [ isPlayerCardOpen, setIsPlayerCardOpen ] = React.useState(false);
58+
const [ showPlayerHistory, setShowPlayerHistory ] = React.useState(false);
5659
const [ activeTab, setActiveTab ] = React.useState<number>(0);
5760

5861
const nameParam = decodeURIComponent(params?.id ?? "");
@@ -336,6 +339,32 @@ export function Player() {
336339
</React.Suspense>
337340
</div>
338341
)}
342+
{playerProfile?.teamHistory && (
343+
<Transition
344+
as={"div"}
345+
show={true}
346+
enter="transition ease-out duration-300"
347+
enterFrom="transform opacity-0 scale-95"
348+
enterTo="transform opacity-100 scale-100"
349+
leave="transition ease-in duration-75"
350+
leaveFrom="transform opacity-100 scale-100"
351+
leaveTo="transform opacity-0 scale-95"
352+
>
353+
<div className="space-y-2 w-full">
354+
{ showPlayerHistory ?
355+
<React.Suspense fallback={<Loading />}>
356+
<PlayerHistory playerProfile={playerProfile} />
357+
</React.Suspense>
358+
:
359+
<div
360+
onClick={() => setShowPlayerHistory(prev => !prev)}
361+
className="flex flex-col mt-2 w-full text-center text-gray-400 text-sm">
362+
Expand Player History
363+
</div>
364+
}
365+
</div>
366+
</Transition>
367+
)}
339368
</Containers.StandardBackgroundPage>
340369
{teammates.length > 0 &&
341370
false && ( // TODO: fix weird bug in logic that shows same teammate twice

‎src/pages/player/playerHistory.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import * as React from 'react';
2+
import { TeamHistory } from '../../models/profile-types';
3+
4+
type Props = {
5+
playerProfile: {
6+
teamHistory: TeamHistory[]
7+
}
8+
}
9+
10+
export const PlayerHistory = ( { playerProfile }: Props ) => {
11+
console.info(playerProfile.teamHistory)
12+
13+
return (
14+
<div className="flex flex-col gap-4">
15+
<h2 className="text-lg font-bold text-center uppercase text-gray-400">Player History (WIP)</h2>
16+
<div className="overflow-x-auto">
17+
<ul className="flex flex-col gap-3">
18+
{playerProfile.teamHistory.map((history, index) => {
19+
let bubbleColor = "";
20+
let icon = null;
21+
22+
switch (history?.changeType?.toUpperCase() ?? "") {
23+
case "CUT":
24+
bubbleColor = "bg-red-100 border-red-400 text-red-800";
25+
icon = (
26+
<svg className="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
27+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
28+
</svg>
29+
);
30+
break;
31+
case "SIGN":
32+
bubbleColor = "bg-blue-100 border-blue-400 text-blue-800";
33+
icon = (
34+
<svg className="w-5 h-5 text-blue-500 mr-3" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
35+
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
36+
</svg>
37+
);
38+
break;
39+
case "SUB":
40+
bubbleColor = "bg-green-100 border-green-400 text-green-800";
41+
icon = (
42+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
43+
<circle cx="12" cy="12" r="10" />
44+
<path strokeLinecap="round" strokeLinejoin="round" d="M8 12l2 2 4-4" />
45+
</svg>
46+
);
47+
break;
48+
case "DRAFT":
49+
bubbleColor = "bg-purple-100 border-purple-400 text-purple-800";
50+
icon = (
51+
<svg className="w-5 h-5 text-purple-500 mr-3" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
52+
<rect x="4" y="4" width="16" height="16" rx="4" />
53+
<path strokeLinecap="round" strokeLinejoin="round" d="M8 12h8" />
54+
</svg>
55+
);
56+
break;
57+
default:
58+
bubbleColor = "bg-gray-100 border-gray-400 text-gray-800";
59+
icon = (
60+
<svg className="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
61+
<circle cx="12" cy="12" r="10" />
62+
</svg>
63+
);
64+
}
65+
66+
return (
67+
<li
68+
key={index}
69+
className={`flex items-center border rounded-xl px-2 py-1 shadow-sm ${bubbleColor}`}
70+
>
71+
{icon}
72+
<div className="flex flex-row flex-1 gap-4">
73+
<div className="font-semibold uppercase">{history.changeType}</div>
74+
<div className="text-xs">{history.value}</div>
75+
<div className="text-xs">{new Date(history.dateCreated).toLocaleDateString()}</div>
76+
{
77+
history.metadata?.teamId &&
78+
<div>({history.metadata.franchisePrefix})</div>
79+
}
80+
</div>
81+
</li>
82+
);
83+
})}
84+
</ul>
85+
</div>
86+
</div>
87+
)
88+
}

0 commit comments

Comments
 (0)