aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/pages/User.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages/User.tsx')
-rw-r--r--frontend/src/pages/User.tsx44
1 files changed, 22 insertions, 22 deletions
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index d43c0c6..33be1f0 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,15 +1,15 @@
1import React from 'react'; 1import React from "react";
2import { Link, useLocation, useNavigate } from 'react-router-dom'; 2import { Link, useLocation, useNavigate } from "react-router-dom";
3import { Helmet } from 'react-helmet'; 3import { Helmet } from "react-helmet";
4 4
5import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images'; 5import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from "@images/Images";
6import { UserProfile } from '@customTypes/Profile'; 6import { UserProfile } from "@customTypes/Profile";
7import { Game, GameChapters } from '@customTypes/Game'; 7import { Game, GameChapters } from "@customTypes/Game";
8import { Map } from '@customTypes/Map'; 8import { Map } from "@customTypes/Map";
9import { API } from '@api/Api'; 9import { API } from "@api/Api";
10import { ticks_to_time } from '@utils/Time'; 10import { ticks_to_time } from "@utils/Time";
11import "@css/Profile.css"; 11import "@css/Profile.css";
12import useMessage from '@hooks/UseMessage'; 12import useMessage from "@hooks/UseMessage";
13 13
14interface UserProps { 14interface UserProps {
15 profile?: UserProfile; 15 profile?: UserProfile;
@@ -162,9 +162,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
162 162
163 <select id='select-game' 163 <select id='select-game'
164 onChange={() => { 164 onChange={() => {
165 setGame((document.querySelector('#select-game') as HTMLInputElement).value); 165 setGame((document.querySelector("#select-game") as HTMLInputElement).value);
166 setChapter("0"); 166 setChapter("0");
167 const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement; 167 const chapterSelect = document.querySelector("#select-chapter") as HTMLSelectElement;
168 if (chapterSelect) { 168 if (chapterSelect) {
169 chapterSelect.value = "0"; 169 chapterSelect.value = "0";
170 } 170 }
@@ -182,7 +182,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
182 : chapterData === null ? <select></select> : 182 : chapterData === null ? <select></select> :
183 183
184 <select id='select-chapter' 184 <select id='select-chapter'
185 onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}> 185 onChange={() => setChapter((document.querySelector("#select-chapter") as HTMLInputElement).value)}>
186 <option value="0" key="0">All Chapters</option> 186 <option value="0" key="0">All Chapters</option>
187 {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => ( 187 {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
188 <option value={e.id} key={i + 1}>{e.name}</option> 188 <option value={e.id} key={i + 1}>{e.name}</option>
@@ -191,9 +191,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
191 </div> 191 </div>
192 <div id='profileboard-top'> 192 <div id='profileboard-top'>
193 <span><span>Map Name</span><img src={SortIcon} alt="" /></span> 193 <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
194 <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span> 194 <span style={{ justifyContent: "center" }}><span>Portals</span><img src={SortIcon} alt="" /></span>
195 <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span> 195 <span style={{ justifyContent: "center" }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
196 <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span> 196 <span style={{ justifyContent: "center" }}><span>Time</span><img src={SortIcon} alt="" /></span>
197 <span> </span> 197 <span> </span>
198 <span><span>Rank</span><img src={SortIcon} alt="" /></span> 198 <span><span>Rank</span><img src={SortIcon} alt="" /></span>
199 <span><span>Date</span><img src={SortIcon} alt="" /></span> 199 <span><span>Date</span><img src={SortIcon} alt="" /></span>
@@ -208,7 +208,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
208 }); 208 });
209 } 209 }
210 }} 210 }}
211 ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button> 211 ><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button>
212 <span>{pageNumber}/{pageMax}</span> 212 <span>{pageNumber}/{pageMax}</span>
213 <button onClick={() => { 213 <button onClick={() => {
214 if (pageNumber !== pageMax) { 214 if (pageNumber !== pageMax) {
@@ -219,7 +219,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
219 }); 219 });
220 } 220 }
221 }} 221 }}
222 ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button> 222 ><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button>
223 </div> 223 </div>
224 </div> 224 </div>
225 </div> 225 </div>
@@ -241,7 +241,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
241 241
242 <span style={{ display: "grid" }}>{e.score_count}</span> 242 <span style={{ display: "grid" }}>{e.score_count}</span>
243 243
244 <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span> 244 <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : "-"}</span>
245 <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span> 245 <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
246 <span> </span> 246 <span> </span>
247 {i === 0 ? <span>#{r.placement}</span> : <span> </span>} 247 {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
@@ -268,7 +268,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
268 maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id) 268 maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
269 .map((r, index) => { 269 .map((r, index) => {
270 if (Math.ceil((index + 1) / 20) === pageNumber) { 270 if (Math.ceil((index + 1) / 20) === pageNumber) {
271 let record = user.records.find((e) => e.map_id === r.id); 271 const record = user.records.find((e) => e.map_id === r.id);
272 return record === undefined ? ( 272 return record === undefined ? (
273 <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}> 273 <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
274 <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link> 274 <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
@@ -286,7 +286,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
286 {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""} 286 {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
287 <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link> 287 <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
288 <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span> 288 <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
289 <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span> 289 <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : "-"}</span>
290 <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span> 290 <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
291 <span> </span> 291 <span> </span>
292 {i === 0 ? <span>#{record!.placement}</span> : <span> </span>} 292 {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}