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.tsx72
1 files changed, 36 insertions, 36 deletions
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 05f01d0..fb72f2b 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,12 +1,12 @@
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';
10 10
11interface LeaderboardsProps { 11interface LeaderboardsProps {
12 mapID: string; 12 mapID: string;
@@ -35,7 +35,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
35 if (!data) { 35 if (!data) {
36 return ( 36 return (
37 <section id="section6" className="summary2"> 37 <section id="section6" className="summary2">
38 <h1 style={{ textAlign: "center" }}> 38 <h1 style={{ textAlign: 'center' }}>
39 Map is not available for competitive boards. 39 Map is not available for competitive boards.
40 </h1> 40 </h1>
41 </section> 41 </section>
@@ -45,7 +45,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
45 if (data.records.length === 0) { 45 if (data.records.length === 0) {
46 return ( 46 return (
47 <section id="section6" className="summary2"> 47 <section id="section6" className="summary2">
48 <h1 style={{ textAlign: "center" }}>No records found.</h1> 48 <h1 style={{ textAlign: 'center' }}>No records found.</h1>
49 </section> 49 </section>
50 ); 50 );
51 } 51 }
@@ -58,8 +58,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
58 id="leaderboard-top" 58 id="leaderboard-top"
59 style={ 59 style={
60 data.map.is_coop 60 data.map.is_coop
61 ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } 61 ? { gridTemplateColumns: '7.5% 40% 7.5% 15% 15% 15%' }
62 : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" } 62 : { gridTemplateColumns: '7.5% 30% 10% 20% 17.5% 15%' }
63 } 63 }
64 > 64 >
65 <span>Place</span> 65 <span>Place</span>
@@ -82,13 +82,13 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
82 onClick={() => 82 onClick={() =>
83 pageNumber === 1 83 pageNumber === 1
84 ? null 84 ? null
85 : setPageNumber((prevPageNumber) => prevPageNumber - 1) 85 : setPageNumber(prevPageNumber => prevPageNumber - 1)
86 } 86 }
87 > 87 >
88 <i 88 <i
89 className="triangle" 89 className="triangle"
90 style={{ position: "relative", left: "-5px" }} 90 style={{ position: 'relative', left: '-5px' }}
91 ></i>{" "} 91 ></i>{' '}
92 </button> 92 </button>
93 <span> 93 <span>
94 {data.pagination.current_page}/{data.pagination.total_pages} 94 {data.pagination.current_page}/{data.pagination.total_pages}
@@ -97,17 +97,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
97 onClick={() => 97 onClick={() =>
98 pageNumber === data.pagination.total_pages 98 pageNumber === data.pagination.total_pages
99 ? null 99 ? null
100 : setPageNumber((prevPageNumber) => prevPageNumber + 1) 100 : setPageNumber(prevPageNumber => prevPageNumber + 1)
101 } 101 }
102 > 102 >
103 <i 103 <i
104 className="triangle" 104 className="triangle"
105 style={{ 105 style={{
106 position: "relative", 106 position: 'relative',
107 left: "5px", 107 left: '5px',
108 transform: "rotate(180deg)", 108 transform: 'rotate(180deg)',
109 }} 109 }}
110 ></i>{" "} 110 ></i>{' '}
111 </button> 111 </button>
112 </div> 112 </div>
113 </div> 113 </div>
@@ -120,33 +120,33 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
120 key={index} 120 key={index}
121 style={ 121 style={
122 data.map.is_coop 122 data.map.is_coop
123 ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } 123 ? { gridTemplateColumns: '3% 4.5% 40% 4% 3.5% 15% 15% 14.5%' }
124 : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" } 124 : { gridTemplateColumns: '3% 4.5% 30% 4% 6% 20% 17% 15%' }
125 } 125 }
126 > 126 >
127 <span>{r.placement}</span> 127 <span>{r.placement}</span>
128 <span> </span> 128 <span> </span>
129 {r.kind === "multiplayer" ? ( 129 {r.kind === 'multiplayer' ? (
130 <div> 130 <div>
131 <Link to={`/users/${r.host.steam_id}`}> 131 <Link to={`/users/${r.host.steam_id}`}>
132 <span> 132 <span>
133 <img src={r.host.avatar_link} alt="" /> &nbsp;{" "} 133 <img src={r.host.avatar_link} alt="" /> &nbsp;{' '}
134 {r.host.user_name} 134 {r.host.user_name}
135 </span> 135 </span>
136 </Link> 136 </Link>
137 <Link to={`/users/${r.partner.steam_id}`}> 137 <Link to={`/users/${r.partner.steam_id}`}>
138 <span> 138 <span>
139 <img src={r.partner.avatar_link} alt="" /> &nbsp;{" "} 139 <img src={r.partner.avatar_link} alt="" /> &nbsp;{' '}
140 {r.partner.user_name} 140 {r.partner.user_name}
141 </span> 141 </span>
142 </Link> 142 </Link>
143 </div> 143 </div>
144 ) : ( 144 ) : (
145 r.kind === "singleplayer" && ( 145 r.kind === 'singleplayer' && (
146 <div> 146 <div>
147 <Link to={`/users/${r.user.steam_id}`}> 147 <Link to={`/users/${r.user.steam_id}`}>
148 <span> 148 <span>
149 <img src={r.user.avatar_link} alt="" /> &nbsp;{" "} 149 <img src={r.user.avatar_link} alt="" /> &nbsp;{' '}
150 {r.user.user_name} 150 {r.user.user_name}
151 </span> 151 </span>
152 </Link> 152 </Link>
@@ -158,25 +158,25 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
158 <span> </span> 158 <span> </span>
159 <span 159 <span
160 className="hover-popup" 160 className="hover-popup"
161 popup-text={r.score_time + " ticks"} 161 popup-text={r.score_time + ' ticks'}
162 > 162 >
163 {ticks_to_time(r.score_time)} 163 {ticks_to_time(r.score_time)}
164 </span> 164 </span>
165 <span 165 <span
166 className="hover-popup" 166 className="hover-popup"
167 popup-text={r.record_date.replace("T", " ").split(".")[0]} 167 popup-text={r.record_date.replace('T', ' ').split('.')[0]}
168 > 168 >
169 {time_ago( 169 {time_ago(
170 new Date(r.record_date.replace("T", " ").replace("Z", "")) 170 new Date(r.record_date.replace('T', ' ').replace('Z', ''))
171 )} 171 )}
172 </span> 172 </span>
173 173
174 {r.kind === "multiplayer" ? ( 174 {r.kind === 'multiplayer' ? (
175 <span> 175 <span>
176 <button 176 <button
177 onClick={() => { 177 onClick={() => {
178 message( 178 message(
179 "Demo Information", 179 'Demo Information',
180 `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}` 180 `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`
181 ); 181 );
182 }} 182 }}
@@ -193,7 +193,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
193 alt="download" 193 alt="download"
194 style={{ 194 style={{
195 filter: 195 filter:
196 "hue-rotate(160deg) contrast(60%) saturate(1000%)", 196 'hue-rotate(160deg) contrast(60%) saturate(1000%)',
197 }} 197 }}
198 /> 198 />
199 </button> 199 </button>
@@ -207,17 +207,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
207 alt="download" 207 alt="download"
208 style={{ 208 style={{
209 filter: 209 filter:
210 "hue-rotate(300deg) contrast(60%) saturate(1000%)", 210 'hue-rotate(300deg) contrast(60%) saturate(1000%)',
211 }} 211 }}
212 /> 212 />
213 </button> 213 </button>
214 </span> 214 </span>
215 ) : ( 215 ) : (
216 r.kind === "singleplayer" && ( 216 r.kind === 'singleplayer' && (
217 <span> 217 <span>
218 <button 218 <button
219 onClick={() => { 219 onClick={() => {
220 message("Demo Information", `Demo ID: ${r.demo_id}`); 220 message('Demo Information', `Demo ID: ${r.demo_id}`);
221 }} 221 }}
222 > 222 >
223 <img src={ThreedotIcon} alt="demo_id" /> 223 <img src={ThreedotIcon} alt="demo_id" />