99 lines
6.8 KiB
TypeScript
99 lines
6.8 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { TLeaderboardRecord } from '../../types/leaderboard.ts';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
const trains: TLeaderboardRecord[] = { "success": true, "data": { "records": [{ "id": "055d3e33-2623-4654-80dd-4d3516cfeccc", "steam": "76561198159312038", "steamName": "_JeNTeK_", "trainTime": 4416784286, "trainPoints": 978915, "trainDistance": 2467309, "dispatcherTime": 0, "trainStats": { "Pendolino (ED250)": { "distance": 2467309, "score": 978915, "time": 4416784286 } } }, { "id": "16b54f4a-0826-4005-b67d-2ab57d74ffeb", "steam": "76561199101984415", "steamName": "tomsobczak35", "trainTime": 4841000336, "trainPoints": 572048, "trainDistance": 8066546, "dispatcherTime": 0, "trainStats": { "Pendolino (ED250)": { "distance": 8066546, "score": 572048, "time": 4841000336 } } }, { "id": "a9050fd0-f3cd-45c9-8087-44948da79b00", "steam": "76561198258359953", "steamName": "Kashameister.", "trainTime": 4838762785, "trainPoints": 353232, "trainDistance": 10274248, "dispatcherTime": 0, "trainStats": { "EU07": { "distance": 10274248, "score": 353232, "time": 4838762785 } } }, { "id": "2a08cadb-bacb-494a-8d09-0ef1870f1057", "steam": "76561198200906855", "steamName": "Nesto Ash Leo", "trainTime": 4411743671, "trainPoints": 110438, "trainDistance": 4412798, "dispatcherTime": 0, "trainStats": { "EP08": { "distance": 4412798, "score": 110438, "time": 4411743671 } } }, { "id": "23de2c57-84da-4845-b901-a40b6b5e1261", "steam": "76561199065951587", "steamName": "Pablo", "trainTime": 3021172809, "trainPoints": 55277, "trainDistance": 429106, "dispatcherTime": 250586, "trainStats": { "EN96": { "distance": 429106, "score": 55277, "time": 3021172809 } }, "dispatcherStats": { "Korytów": { "time": 22064 }, "Olszamowice": { "time": 221137 }, "Dąbrowa Górnicza": { "time": 7385 } } }, { "id": "b44b2b4b-476a-4e52-b612-573d5c5eea78", "steam": "76561198356160006", "steamName": "Marcion", "trainTime": 9571588, "dispatcherTime": 0, "trainStats": { "Pendolino (ED250)": { "distance": 303450, "score": 9856, "time": 9571588 } }, "trainDistance": 303450, "trainPoints": 9856 }, { "id": "3ee1f655-8329-4c83-96ae-bcf162d31f78", "steam": "76561199465955782", "steamName": "Bolek", "trainTime": 14441779, "dispatcherTime": 0, "trainStats": { "Pendolino (ED250)": { "distance": 402970, "score": 9740, "time": 14441779 } }, "trainDistance": 402970, "trainPoints": 9740 }, { "id": "c3731119-72b0-47c4-a047-70315e595d01", "steam": "76561198048854814", "steamName": "Night King_UA", "trainTime": 9537157, "dispatcherTime": 0, "trainStats": { "Pendolino (ED250)": { "distance": 302954, "score": 9686, "time": 9537157 } }, "trainDistance": 302954, "trainPoints": 9686 }, { "id": "a88f7594-844b-47e1-b657-d6c0be2d021a", "steam": "76561198886710784", "steamName": "LIPTON2315", "trainTime": 10820008, "dispatcherTime": 0, "trainStats": { "EP08": { "distance": 240000, "score": 0, "time": 9860788 }, "Pendolino (ED250)": { "distance": 22693, "score": 9320, "time": 959220 } }, "trainDistance": 262693, "trainPoints": 9320 }, { "id": "42b5c7f0-3af4-4305-aca7-6462e5bf134b", "steam": "76561198067997310", "steamName": "Gladicek", "trainTime": 8042564, "dispatcherTime": 0, "trainStats": { "EU07": { "distance": 97165, "score": 0, "time": 4419762 }, "Traxx (E186)": { "distance": 5704, "score": 4483, "time": 873122 }, "EN57": { "distance": 27186, "score": 4696, "time": 2262371 }, "EN96": { "distance": 3506, "score": 0, "time": 487309 } }, "trainDistance": 133561, "trainPoints": 9179 }] }, "code": 200 }.data.records;
|
|
|
|
|
|
const TrainTable = ({ trains }: { trains: TLeaderboardRecord[] }) => {
|
|
const { t } = useTranslation();
|
|
|
|
|
|
return (
|
|
<div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
|
|
{/* <h4 className="mb-6 text-xl font-semibold text-black dark:text-white">
|
|
Top
|
|
</h4> */}
|
|
|
|
<div className="flex flex-col">
|
|
<div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
|
|
<div className="p-2.5 text-center xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.user")}
|
|
</h5>
|
|
</div>
|
|
<div className="p-2.5 text-center xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.points")}
|
|
</h5>
|
|
</div>
|
|
<div className="p-2.5 text-center xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.distance")}
|
|
</h5>
|
|
</div>
|
|
<div className="p-2.5 text-center sm:block xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.time")}
|
|
</h5>
|
|
</div>
|
|
<div className="hidden p-2.5 text-center sm:block xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.actions")}
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
|
|
{trains.map((train,key) => (
|
|
<div
|
|
className={`grid grid-cols-4 sm:grid-cols-5 ${trains.length === (key+1)
|
|
? ''
|
|
: 'border-b border-stroke dark:border-strokedark'
|
|
}`}
|
|
key={train.id}
|
|
>
|
|
<div className="flex items-center gap-3 p-5 lg:p-5">
|
|
<p className="text-black dark:text-white sm:block break-all">
|
|
<Link to={"/profile/" + train.steam}
|
|
className='color-orchid'>{train.steamName}</Link>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-2.5 lg:p-5">
|
|
<p className="text-meta-6">{train.trainPoints}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-2.5 lg:p-5">
|
|
<p className="text-meta-5">{(train.trainDistance / 1000).toFixed(2)}km</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-2.5 lg:p-5">
|
|
<p className="text-meta-3">{Math.floor(train.trainTime / 3600000)}h</p>
|
|
</div>
|
|
|
|
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
|
|
<Link
|
|
to={"/profile/" + train.steam}
|
|
className="inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
|
|
>
|
|
{t("leaderboard.profile")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const TrainLeaderboard = () => {
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-10">
|
|
{/* TODO: get data from API */}
|
|
<TrainTable trains={trains} />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|