aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/Leaderboards.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/Leaderboards.tsx')
-rw-r--r--frontend/src/components/Leaderboards.tsx144
1 files changed, 72 insertions, 72 deletions
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index fb614fa..5d4045a 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,9 +1,9 @@
1import React from 'react'; 1import React from "react";
2import { Link, useNavigate } from 'react-router-dom'; 2import { Link, useNavigate } from "react-router-dom";
3 3
4import { DownloadIcon, ThreedotIcon } from '@images/Images'; 4import { DownloadIcon, ThreedotIcon } from "@images/Images";
5import { MapLeaderboard } from '@customTypes/Map'; 5import { MapLeaderboard } from "@customTypes/Map";
6import { ticks_to_time, time_ago } from '@utils/Time'; 6import { ticks_to_time, time_ago } from "@utils/Time";
7import { API } from "@api/Api"; 7import { API } from "@api/Api";
8import useMessage from "@hooks/UseMessage"; 8import useMessage from "@hooks/UseMessage";
9import "@css/Maps.css" 9import "@css/Maps.css"
@@ -46,80 +46,80 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
46 }; 46 };
47 47
48 return ( 48 return (
49 <div> 49 <div>
50 {MessageDialogComponent} 50 {MessageDialogComponent}
51 <section id='section6' className='summary2'> 51 <section id='section6' className='summary2'>
52
53 <div id='leaderboard-top'
54 style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }}
55 >
56 <span>Place</span>
57 52
58 {data.map.is_coop ? ( 53 <div id='leaderboard-top'
59 <div id='runner'> 54 style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }}
60 <span>Blue</span> 55 >
61 <span>Orange</span> 56 <span>Place</span>
62 </div> 57
63 ) : ( 58 {data.map.is_coop ? (
64 <span>Runner</span> 59 <div id='runner'>
65 )} 60 <span>Blue</span>
66 61 <span>Orange</span>
67 <span>Portals</span> 62 </div>
68 <span>Time</span> 63 ) : (
69 <span>Date</span> 64 <span>Runner</span>
70 <div id='page-number'> 65 )}
71 <div> 66
72 67 <span>Portals</span>
73 <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)} 68 <span>Time</span>
74 ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button> 69 <span>Date</span>
75 <span>{data.pagination.current_page}/{data.pagination.total_pages}</span> 70 <div id='page-number'>
76 <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)} 71 <div>
77 ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button> 72
73 <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
74 ><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button>
75 <span>{data.pagination.current_page}/{data.pagination.total_pages}</span>
76 <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
77 ><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button>
78 </div>
78 </div> 79 </div>
79 </div> 80 </div>
80 </div> 81 <hr />
81 <hr /> 82 <div id='leaderboard-records'>
82 <div id='leaderboard-records'> 83 {data.records.map((r, index) => (
83 {data.records.map((r, index) => ( 84 <span className='leaderboard-record' key={index}
84 <span className='leaderboard-record' key={index} 85 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%" }}
85 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%" }} 86 >
86 > 87 <span>{r.placement}</span>
87 <span>{r.placement}</span> 88 <span> </span>
88 <span> </span> 89 {r.kind === "multiplayer" ? (
89 {r.kind === "multiplayer" ? ( 90 <div>
90 <div>
91 <Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span></Link> 91 <Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span></Link>
92 <Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span></Link> 92 <Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span></Link>
93 </div> 93 </div>
94 ) : r.kind === "singleplayer" && ( 94 ) : r.kind === "singleplayer" && (
95 <div> 95 <div>
96 <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></Link> 96 <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></Link>
97 </div> 97 </div>
98 )} 98 )}
99 99
100 <span>{r.score_count}</span> 100 <span>{r.score_count}</span>
101 <span> </span> 101 <span> </span>
102 <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span> 102 <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span>
103 <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> 103 <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>
104 104
105 {r.kind === "multiplayer" ? ( 105 {r.kind === "multiplayer" ? (
106 <span> 106 <span>
107 <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> 107 <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>
108 <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> 108 <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>
109 <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> 109 <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>
110 </span> 110 </span>
111 ) : r.kind === "singleplayer" && ( 111 ) : r.kind === "singleplayer" && (
112 112
113 <span> 113 <span>
114 <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button> 114 <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
115 <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button> 115 <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
116 </span> 116 </span>
117 )} 117 )}
118 </span> 118 </span>
119 ))} 119 ))}
120 </div> 120 </div>
121 </section> 121 </section>
122 </div> 122 </div>
123 ); 123 );
124}; 124};
125 125