1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { DownloadIcon, ThreedotIcon } from "@images/Images";
import { MapLeaderboard } from "@customTypes/Map";
import { ticks_to_time, time_ago } from "@utils/Time";
import { API } from "@api/Api";
import useMessage from "@hooks/UseMessage";
import "@css/Maps.css"
interface LeaderboardsProps {
mapID: string;
}
const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
const navigate = useNavigate();
const [data, setData] = React.useState<MapLeaderboard | undefined>(undefined);
const [pageNumber, setPageNumber] = React.useState<number>(1);
const _fetch_map_leaderboards = async () => {
const mapLeaderboards = await API.get_map_leaderboard(mapID, pageNumber.toString());
setData(mapLeaderboards);
};
const { message, MessageDialogComponent } = useMessage();
React.useEffect(() => {
_fetch_map_leaderboards();
console.log(data);
}, [pageNumber, navigate])
if (!data) {
return (
<section id='section6' className='summary2'>
<h1 style={{ textAlign: "center" }}>Map is not available for competitive boards.</h1>
</section>
);
};
if (data.records.length === 0) {
return (
<section id='section6' className='summary2'>
<h1 style={{ textAlign: "center" }}>No records found.</h1>
</section>
);
};
return (
<div>
{MessageDialogComponent}
<section id='section6' className='summary2'>
<div id='leaderboard-top'
style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }}
>
<span>Place</span>
{data.map.is_coop ? (
<div id='runner'>
<span>Blue</span>
<span>Orange</span>
</div>
) : (
<span>Runner</span>
)}
<span>Portals</span>
<span>Time</span>
<span>Date</span>
<div id='page-number'>
<div>
<button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button>
<span>{data.pagination.current_page}/{data.pagination.total_pages}</span>
<button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button>
</div>
</div>
</div>
<hr />
<div id='leaderboard-records'>
{data.records.map((r, index) => (
<span className='leaderboard-record' key={index}
style={data.map.is_coop ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }}
>
<span>{r.placement}</span>
<span> </span>
{r.kind === "multiplayer" ? (
<div>
<Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> {r.host.user_name}</span></Link>
<Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> {r.partner.user_name}</span></Link>
</div>
) : r.kind === "singleplayer" && (
<div>
<Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> {r.user.user_name}</span></Link>
</div>
)}
<span>{r.score_count}</span>
<span> </span>
<span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span>
<span className='hover-popup' popup-text={r.record_date.replace("T", " ").split(".")[0]}>{time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))}</span>
{r.kind === "multiplayer" ? (
<span>
<button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
<button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
<button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
</span>
) : r.kind === "singleplayer" && (
<span>
<button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
<button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
</span>
)}
</span>
))}
</div>
</section>
</div>
);
};
export default Leaderboards;
|