Merge pull request #53 from NovaDrake76/dev

feat: leaderboard podium
NovaDrake76 · Feb 9, 2024 · 7170562 · 7170562
2 parents e96f240 + 57d4557
commit 7170562
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 25 deletions.
diff --git a/public/images/podium.svg b/public/images/podium.svg
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -7,9 +7,11 @@ import { Link } from "react-router-dom";
 interface Player {
     user: User
     size: "small" | "medium" | "large" | "extra-large"
+    direction?: "row" | "column",
+    showLevel?: boolean
 }
 
-const Player: React.FC<Player> = ({ user, size }) => {
+const Player: React.FC<Player> = ({ user, size, direction = "row", showLevel = "true" }) => {
     const [showPreview, setShowPreview] = useState<boolean>(false);
     const hoverTimeoutRef = useRef<any>(null);
 
@@ -43,9 +45,9 @@ const Player: React.FC<Player> = ({ user, size }) => {
                 )
             }
             <Link to={`/profile/${user._id}`}>
-                <div className='flex items-center justify-center gap-4 text-white'>
-                    <Avatar id={user._id} image={user.profilePicture} size={size} showLevel={true} level={user.level} />
-                    <span className="mt-2 font-semibold">{user.username}</span>
+                <div className={`flex items-center justify-center text-white ${direction == "row" ? "gap-4" : "flex-col"}`}>
+                    <Avatar id={user._id} image={user.profilePicture} size={size} showLevel={!!showLevel} level={user.level} />
+                    <span className="mt-2 font-semibold ">{user.username}</span>
                 </div>
             </Link>
         </div>

diff --git a/src/components/TopPlayer.tsx b/src/components/TopPlayer.tsx
@@ -1,27 +1,28 @@
 import { User } from '../components/Types';
 import Player from './Player';
+import Monetary from './Monetary';
 
 interface CardProps {
     user: User;
     rank: number;
 }
 
 const TopPlayer: React.FC<CardProps> = ({ user, rank }) => {
+
     return (
-        <div className="bg-primary-light shadow-lg rounded-lg p-4 text-center w-64 flex flex-col gap-4 "
-            style={{ border: rank === 1 ? '1px solid gold' : rank === 2 ? '1px solid silver' : rank === 3 ? '1px solid #cd7f32' : 'none' }}
-        >
-            {/* <div className="text-2xl font-bold text-indigo-600">#{rank}</div> */}
-            <Player user={user} size="medium" />
-            <p className="text-gray-500 truncate">
-                {new Intl.NumberFormat("en-US", {
-                    style: "currency",
-                    currency: "DOL",
-                    maximumFractionDigits: 0,
-                })
-                    .format(user.weeklyWinnings)
-                    .replace("DOL", "K₽")}
-            </p>
+        <div className={`relative w-64 ${rank === 1 ? '-mt-10' : 'invisible md:visible'}`}>
+            <div className='relative  z-50 flex flex-col items-center justify-center'>
+                <Player user={user} size="large" direction='column' showLevel={false} />
+                <div className='flex flex-col items-center gap-2'>
+                    <span className='text-2xl font-bold mt-1'>
+                        #{rank}
+                    </span>
+                </div>
+                <div className="text-gray-500 truncate mt-6">
+                    <Monetary value={user.weeklyWinnings} />
+                </div>
+            </div>
+            <img src="images/podium.svg" alt="podium" className="absolute top-[70px] z-0" />
         </div>
     );
 };

diff --git a/src/pages/Home/Leaderboard.tsx b/src/pages/Home/Leaderboard.tsx
@@ -4,6 +4,7 @@ import { User } from '../../components/Types';
 import Title from '../../components/Title';
 import TopPlayer from '../../components/TopPlayer';
 import Player from '../../components/Player';
+import Skeleton from 'react-loading-skeleton';
 
 const Leaderboard = () => {
     const [users, setUsers] = useState<User[]>([]);
@@ -26,11 +27,18 @@ const Leaderboard = () => {
         <div className="flex flex-col items-center justify-center max-w-[360px] md:max-w-none overflow-x-auto ">
             <Title title="Leaderboard" />
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-8">
-                {users.slice(0, 3).map((user, index) => (
-                    <TopPlayer key={user._id} user={user} rank={index + 1} />
-                ))}
-            </div>
+            {!loading && users[1] ? (
+                <div className="flex gap-14 my-16 ">
+                    <TopPlayer key={users[1]._id} user={users[1]} rank={2} />
+                    <TopPlayer key={users[0]._id} user={users[0]} rank={1} />
+                    <TopPlayer key={users[2]._id} user={users[2]} rank={3} />
+
+                </div>
+            ) : (
+                <div className="h-[330px]">
+                    {/* put a skeleton here */}
+                </div>
+            )}
 
             <div className="w-full overflow-x-auto max-w-4xl">
                 <table className="min-w-full divide-y divide-gray-500">
@@ -48,8 +56,11 @@ const Leaderboard = () => {
                         </tr>
                     </thead>
                     <tbody className=" divide-y divide-[#19172d]">
-                        {loading && <tr><td colSpan={3}>Loading...</td></tr>}
-                        {users.slice(3).map((user, index) => (
+                        {loading && <tr><td colSpan={3}>
+                            <Skeleton count={10} height={72} />
+                        </td></tr>}
+
+                        {!loading && users.slice(3).map((user, index) => (
                             <tr key={user._id}>
                                 <td className="px-6 py-4 whitespace-nowrap">
                                     #{index + 4}