diff options
| author | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
|---|---|---|
| committer | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
| commit | 81342e2579165ebfdb28c749dc5225141721a419 (patch) | |
| tree | 8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend/src/pages/User.tsx | |
| parent | fixed issues with useCallback (diff) | |
| download | lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2 lphub-81342e2579165ebfdb28c749dc5225141721a419.zip | |
switched to double quotes
Diffstat (limited to 'frontend/src/pages/User.tsx')
| -rw-r--r-- | frontend/src/pages/User.tsx | 184 |
1 files changed, 92 insertions, 92 deletions
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx index 29d0041..0198034 100644 --- a/frontend/src/pages/User.tsx +++ b/frontend/src/pages/User.tsx | |||
| @@ -1,6 +1,6 @@ | |||
| 1 | import React from 'react'; | 1 | import React from "react"; |
| 2 | import { Link, useLocation, useNavigate } from 'react-router-dom'; | 2 | import { Link, useLocation, useNavigate } from "react-router-dom"; |
| 3 | import { Helmet } from 'react-helmet'; | 3 | import { Helmet } from "react-helmet"; |
| 4 | 4 | ||
| 5 | import { | 5 | import { |
| 6 | SteamIcon, | 6 | SteamIcon, |
| @@ -13,14 +13,14 @@ import { | |||
| 13 | ThreedotIcon, | 13 | ThreedotIcon, |
| 14 | DownloadIcon, | 14 | DownloadIcon, |
| 15 | HistoryIcon, | 15 | HistoryIcon, |
| 16 | } from '@images/Images'; | 16 | } from "@images/Images"; |
| 17 | import { UserProfile } from '@customTypes/Profile'; | 17 | import { UserProfile } from "@customTypes/Profile"; |
| 18 | import { Game, GameChapters } from '@customTypes/Game'; | 18 | import { Game, GameChapters } from "@customTypes/Game"; |
| 19 | import { Map } from '@customTypes/Map'; | 19 | import { Map } from "@customTypes/Map"; |
| 20 | import { API } from '@api/Api'; | 20 | import { API } from "@api/Api"; |
| 21 | import { ticks_to_time } from '@utils/Time'; | 21 | import { ticks_to_time } from "@utils/Time"; |
| 22 | import '@css/Profile.css'; | 22 | import "@css/Profile.css"; |
| 23 | import useMessage from '@hooks/UseMessage'; | 23 | import useMessage from "@hooks/UseMessage"; |
| 24 | 24 | ||
| 25 | interface UserProps { | 25 | interface UserProps { |
| 26 | profile?: UserProfile; | 26 | profile?: UserProfile; |
| @@ -37,8 +37,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 37 | const [pageNumber, setPageNumber] = React.useState(1); | 37 | const [pageNumber, setPageNumber] = React.useState(1); |
| 38 | const [pageMax, setPageMax] = React.useState(0); | 38 | const [pageMax, setPageMax] = React.useState(0); |
| 39 | 39 | ||
| 40 | const [game, setGame] = React.useState('0'); | 40 | const [game, setGame] = React.useState("0"); |
| 41 | const [chapter, setChapter] = React.useState('0'); | 41 | const [chapter, setChapter] = React.useState("0"); |
| 42 | const [chapterData, setChapterData] = React.useState<GameChapters | null>( | 42 | const [chapterData, setChapterData] = React.useState<GameChapters | null>( |
| 43 | null | 43 | null |
| 44 | ); | 44 | ); |
| @@ -48,9 +48,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 48 | const navigate = useNavigate(); | 48 | const navigate = useNavigate(); |
| 49 | 49 | ||
| 50 | const _fetch_user = React.useCallback(async () => { | 50 | const _fetch_user = React.useCallback(async () => { |
| 51 | const userID = location.pathname.split('/')[2]; | 51 | const userID = location.pathname.split("/")[2]; |
| 52 | if (token && profile && profile.profile && profile.steam_id === userID) { | 52 | if (token && profile && profile.profile && profile.steam_id === userID) { |
| 53 | navigate('/profile'); | 53 | navigate("/profile"); |
| 54 | return; | 54 | return; |
| 55 | } | 55 | } |
| 56 | const userData = await API.get_user(userID); | 56 | const userData = await API.get_user(userID); |
| @@ -58,7 +58,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 58 | }, [location.pathname, token, profile, navigate]); | 58 | }, [location.pathname, token, profile, navigate]); |
| 59 | 59 | ||
| 60 | const _get_game_chapters = React.useCallback(async () => { | 60 | const _get_game_chapters = React.useCallback(async () => { |
| 61 | if (game !== '0') { | 61 | if (game !== "0") { |
| 62 | const gameChapters = await API.get_games_chapters(game); | 62 | const gameChapters = await API.get_games_chapters(game); |
| 63 | setChapterData(gameChapters); | 63 | setChapterData(gameChapters); |
| 64 | } else { | 64 | } else { |
| @@ -68,7 +68,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 68 | }, [game, user]); | 68 | }, [game, user]); |
| 69 | 69 | ||
| 70 | const _get_game_maps = React.useCallback(async () => { | 70 | const _get_game_maps = React.useCallback(async () => { |
| 71 | if (chapter === '0') { | 71 | if (chapter === "0") { |
| 72 | const gameMaps = await API.get_game_maps(game); | 72 | const gameMaps = await API.get_game_maps(game); |
| 73 | setMaps(gameMaps); | 73 | setMaps(gameMaps); |
| 74 | setPageMax(Math.ceil(gameMaps.length / 20)); | 74 | setPageMax(Math.ceil(gameMaps.length / 20)); |
| @@ -92,7 +92,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 92 | }, [user, game, location, _get_game_chapters]); | 92 | }, [user, game, location, _get_game_chapters]); |
| 93 | 93 | ||
| 94 | React.useEffect(() => { | 94 | React.useEffect(() => { |
| 95 | if (user && game !== '0') { | 95 | if (user && game !== "0") { |
| 96 | _get_game_maps(); | 96 | _get_game_maps(); |
| 97 | } | 97 | } |
| 98 | }, [user, game, chapter, location, _get_game_maps]); | 98 | }, [user, game, chapter, location, _get_game_maps]); |
| @@ -116,8 +116,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 116 | <div> | 116 | <div> |
| 117 | <div>{user.user_name}</div> | 117 | <div>{user.user_name}</div> |
| 118 | <div> | 118 | <div> |
| 119 | {user.country_code === 'XX' ? ( | 119 | {user.country_code === "XX" ? ( |
| 120 | '' | 120 | "" |
| 121 | ) : ( | 121 | ) : ( |
| 122 | <img | 122 | <img |
| 123 | src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`} | 123 | src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`} |
| @@ -137,32 +137,32 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 137 | </div> | 137 | </div> |
| 138 | </div> | 138 | </div> |
| 139 | <div> | 139 | <div> |
| 140 | {user.links.steam === '-' ? ( | 140 | {user.links.steam === "-" ? ( |
| 141 | '' | 141 | "" |
| 142 | ) : ( | 142 | ) : ( |
| 143 | <a href={user.links.steam}> | 143 | <a href={user.links.steam}> |
| 144 | <img src={SteamIcon} alt="Steam" /> | 144 | <img src={SteamIcon} alt="Steam" /> |
| 145 | </a> | 145 | </a> |
| 146 | )} | 146 | )} |
| 147 | {user.links.twitch === '-' ? ( | 147 | {user.links.twitch === "-" ? ( |
| 148 | '' | 148 | "" |
| 149 | ) : ( | 149 | ) : ( |
| 150 | <a href={user.links.twitch}> | 150 | <a href={user.links.twitch}> |
| 151 | <img src={TwitchIcon} alt="Twitch" /> | 151 | <img src={TwitchIcon} alt="Twitch" /> |
| 152 | </a> | 152 | </a> |
| 153 | )} | 153 | )} |
| 154 | {user.links.youtube === '-' ? ( | 154 | {user.links.youtube === "-" ? ( |
| 155 | '' | 155 | "" |
| 156 | ) : ( | 156 | ) : ( |
| 157 | <a href={user.links.youtube}> | 157 | <a href={user.links.youtube}> |
| 158 | <img src={YouTubeIcon} alt="Youtube" /> | 158 | <img src={YouTubeIcon} alt="Youtube" /> |
| 159 | </a> | 159 | </a> |
| 160 | )} | 160 | )} |
| 161 | {user.links.p2sr === '-' ? ( | 161 | {user.links.p2sr === "-" ? ( |
| 162 | '' | 162 | "" |
| 163 | ) : ( | 163 | ) : ( |
| 164 | <a href={user.links.p2sr}> | 164 | <a href={user.links.p2sr}> |
| 165 | <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} /> | 165 | <img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /> |
| 166 | </a> | 166 | </a> |
| 167 | )} | 167 | )} |
| 168 | </div> | 168 | </div> |
| @@ -172,8 +172,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 172 | <span>Overall</span> | 172 | <span>Overall</span> |
| 173 | <span> | 173 | <span> |
| 174 | {user.rankings.overall.rank === 0 | 174 | {user.rankings.overall.rank === 0 |
| 175 | ? 'N/A ' | 175 | ? "N/A " |
| 176 | : '#' + user.rankings.overall.rank + ' '} | 176 | : "#" + user.rankings.overall.rank + " "} |
| 177 | <span> | 177 | <span> |
| 178 | ({user.rankings.overall.completion_count}/ | 178 | ({user.rankings.overall.completion_count}/ |
| 179 | {user.rankings.overall.completion_total}) | 179 | {user.rankings.overall.completion_total}) |
| @@ -184,8 +184,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 184 | <span>Singleplayer</span> | 184 | <span>Singleplayer</span> |
| 185 | <span> | 185 | <span> |
| 186 | {user.rankings.singleplayer.rank === 0 | 186 | {user.rankings.singleplayer.rank === 0 |
| 187 | ? 'N/A ' | 187 | ? "N/A " |
| 188 | : '#' + user.rankings.singleplayer.rank + ' '} | 188 | : "#" + user.rankings.singleplayer.rank + " "} |
| 189 | <span> | 189 | <span> |
| 190 | ({user.rankings.singleplayer.completion_count}/ | 190 | ({user.rankings.singleplayer.completion_count}/ |
| 191 | {user.rankings.singleplayer.completion_total}) | 191 | {user.rankings.singleplayer.completion_total}) |
| @@ -196,8 +196,8 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 196 | <span>Cooperative</span> | 196 | <span>Cooperative</span> |
| 197 | <span> | 197 | <span> |
| 198 | {user.rankings.cooperative.rank === 0 | 198 | {user.rankings.cooperative.rank === 0 |
| 199 | ? 'N/A ' | 199 | ? "N/A " |
| 200 | : '#' + user.rankings.cooperative.rank + ' '} | 200 | : "#" + user.rankings.cooperative.rank + " "} |
| 201 | <span> | 201 | <span> |
| 202 | ({user.rankings.cooperative.completion_count}/ | 202 | ({user.rankings.cooperative.completion_count}/ |
| 203 | {user.rankings.cooperative.completion_total}) | 203 | {user.rankings.cooperative.completion_total}) |
| @@ -227,15 +227,15 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 227 | id="select-game" | 227 | id="select-game" |
| 228 | onChange={() => { | 228 | onChange={() => { |
| 229 | setGame( | 229 | setGame( |
| 230 | (document.querySelector('#select-game') as HTMLInputElement) | 230 | (document.querySelector("#select-game") as HTMLInputElement) |
| 231 | .value | 231 | .value |
| 232 | ); | 232 | ); |
| 233 | setChapter('0'); | 233 | setChapter("0"); |
| 234 | const chapterSelect = document.querySelector( | 234 | const chapterSelect = document.querySelector( |
| 235 | '#select-chapter' | 235 | "#select-chapter" |
| 236 | ) as HTMLSelectElement; | 236 | ) as HTMLSelectElement; |
| 237 | if (chapterSelect) { | 237 | if (chapterSelect) { |
| 238 | chapterSelect.value = '0'; | 238 | chapterSelect.value = "0"; |
| 239 | } | 239 | } |
| 240 | }} | 240 | }} |
| 241 | > | 241 | > |
| @@ -250,7 +250,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 250 | </select> | 250 | </select> |
| 251 | )} | 251 | )} |
| 252 | 252 | ||
| 253 | {game === '0' ? ( | 253 | {game === "0" ? ( |
| 254 | <select disabled> | 254 | <select disabled> |
| 255 | <option>All Chapters</option> | 255 | <option>All Chapters</option> |
| 256 | </select> | 256 | </select> |
| @@ -263,7 +263,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 263 | setChapter( | 263 | setChapter( |
| 264 | ( | 264 | ( |
| 265 | document.querySelector( | 265 | document.querySelector( |
| 266 | '#select-chapter' | 266 | "#select-chapter" |
| 267 | ) as HTMLInputElement | 267 | ) as HTMLInputElement |
| 268 | ).value | 268 | ).value |
| 269 | ) | 269 | ) |
| @@ -287,15 +287,15 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 287 | <span>Map Name</span> | 287 | <span>Map Name</span> |
| 288 | <img src={SortIcon} alt="" /> | 288 | <img src={SortIcon} alt="" /> |
| 289 | </span> | 289 | </span> |
| 290 | <span style={{ justifyContent: 'center' }}> | 290 | <span style={{ justifyContent: "center" }}> |
| 291 | <span>Portals</span> | 291 | <span>Portals</span> |
| 292 | <img src={SortIcon} alt="" /> | 292 | <img src={SortIcon} alt="" /> |
| 293 | </span> | 293 | </span> |
| 294 | <span style={{ justifyContent: 'center' }}> | 294 | <span style={{ justifyContent: "center" }}> |
| 295 | <span>WRΔ </span> | 295 | <span>WRΔ </span> |
| 296 | <img src={SortIcon} alt="" /> | 296 | <img src={SortIcon} alt="" /> |
| 297 | </span> | 297 | </span> |
| 298 | <span style={{ justifyContent: 'center' }}> | 298 | <span style={{ justifyContent: "center" }}> |
| 299 | <span>Time</span> | 299 | <span>Time</span> |
| 300 | <img src={SortIcon} alt="" /> | 300 | <img src={SortIcon} alt="" /> |
| 301 | </span> | 301 | </span> |
| @@ -315,18 +315,18 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 315 | if (pageNumber !== 1) { | 315 | if (pageNumber !== 1) { |
| 316 | setPageNumber(prevPageNumber => prevPageNumber - 1); | 316 | setPageNumber(prevPageNumber => prevPageNumber - 1); |
| 317 | const records = document.querySelectorAll( | 317 | const records = document.querySelectorAll( |
| 318 | '.profileboard-record' | 318 | ".profileboard-record" |
| 319 | ); | 319 | ); |
| 320 | records.forEach(r => { | 320 | records.forEach(r => { |
| 321 | (r as HTMLInputElement).style.height = '44px'; | 321 | (r as HTMLInputElement).style.height = "44px"; |
| 322 | }); | 322 | }); |
| 323 | } | 323 | } |
| 324 | }} | 324 | }} |
| 325 | > | 325 | > |
| 326 | <i | 326 | <i |
| 327 | className="triangle" | 327 | className="triangle" |
| 328 | style={{ position: 'relative', left: '-5px' }} | 328 | style={{ position: "relative", left: "-5px" }} |
| 329 | ></i>{' '} | 329 | ></i>{" "} |
| 330 | </button> | 330 | </button> |
| 331 | <span> | 331 | <span> |
| 332 | {pageNumber}/{pageMax} | 332 | {pageNumber}/{pageMax} |
| @@ -336,10 +336,10 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 336 | if (pageNumber !== pageMax) { | 336 | if (pageNumber !== pageMax) { |
| 337 | setPageNumber(prevPageNumber => prevPageNumber + 1); | 337 | setPageNumber(prevPageNumber => prevPageNumber + 1); |
| 338 | const records = document.querySelectorAll( | 338 | const records = document.querySelectorAll( |
| 339 | '.profileboard-record' | 339 | ".profileboard-record" |
| 340 | ); | 340 | ); |
| 341 | records.forEach(r => { | 341 | records.forEach(r => { |
| 342 | (r as HTMLInputElement).style.height = '44px'; | 342 | (r as HTMLInputElement).style.height = "44px"; |
| 343 | }); | 343 | }); |
| 344 | } | 344 | } |
| 345 | }} | 345 | }} |
| @@ -347,18 +347,18 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 347 | <i | 347 | <i |
| 348 | className="triangle" | 348 | className="triangle" |
| 349 | style={{ | 349 | style={{ |
| 350 | position: 'relative', | 350 | position: "relative", |
| 351 | left: '5px', | 351 | left: "5px", |
| 352 | transform: 'rotate(180deg)', | 352 | transform: "rotate(180deg)", |
| 353 | }} | 353 | }} |
| 354 | ></i>{' '} | 354 | ></i>{" "} |
| 355 | </button> | 355 | </button> |
| 356 | </div> | 356 | </div> |
| 357 | </div> | 357 | </div> |
| 358 | </div> | 358 | </div> |
| 359 | <hr /> | 359 | <hr /> |
| 360 | <div id="profileboard-records"> | 360 | <div id="profileboard-records"> |
| 361 | {game === '0' ? ( | 361 | {game === "0" ? ( |
| 362 | user.records | 362 | user.records |
| 363 | .sort((a, b) => a.map_id - b.map_id) | 363 | .sort((a, b) => a.map_id - b.map_id) |
| 364 | .map((r, index) => | 364 | .map((r, index) => |
| @@ -367,33 +367,33 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 367 | {r.scores.map((e, i) => ( | 367 | {r.scores.map((e, i) => ( |
| 368 | <> | 368 | <> |
| 369 | {i !== 0 ? ( | 369 | {i !== 0 ? ( |
| 370 | <hr style={{ gridColumn: '1 / span 8' }} /> | 370 | <hr style={{ gridColumn: "1 / span 8" }} /> |
| 371 | ) : ( | 371 | ) : ( |
| 372 | '' | 372 | "" |
| 373 | )} | 373 | )} |
| 374 | 374 | ||
| 375 | <Link to={`/maps/${r.map_id}`}> | 375 | <Link to={`/maps/${r.map_id}`}> |
| 376 | <span>{r.map_name}</span> | 376 | <span>{r.map_name}</span> |
| 377 | </Link> | 377 | </Link> |
| 378 | 378 | ||
| 379 | <span style={{ display: 'grid' }}>{e.score_count}</span> | 379 | <span style={{ display: "grid" }}>{e.score_count}</span> |
| 380 | 380 | ||
| 381 | <span style={{ display: 'grid' }}> | 381 | <span style={{ display: "grid" }}> |
| 382 | {e.score_count - r.map_wr_count > 0 | 382 | {e.score_count - r.map_wr_count > 0 |
| 383 | ? `+${e.score_count - r.map_wr_count}` | 383 | ? `+${e.score_count - r.map_wr_count}` |
| 384 | : `-`} | 384 | : `-`} |
| 385 | </span> | 385 | </span> |
| 386 | <span style={{ display: 'grid' }}> | 386 | <span style={{ display: "grid" }}> |
| 387 | {ticks_to_time(e.score_time)} | 387 | {ticks_to_time(e.score_time)} |
| 388 | </span> | 388 | </span> |
| 389 | <span> </span> | 389 | <span> </span> |
| 390 | {i === 0 ? <span>#{r.placement}</span> : <span> </span>} | 390 | {i === 0 ? <span>#{r.placement}</span> : <span> </span>} |
| 391 | <span>{e.date.split('T')[0]}</span> | 391 | <span>{e.date.split("T")[0]}</span> |
| 392 | <span style={{ flexDirection: 'row-reverse' }}> | 392 | <span style={{ flexDirection: "row-reverse" }}> |
| 393 | <button | 393 | <button |
| 394 | onClick={() => { | 394 | onClick={() => { |
| 395 | message( | 395 | message( |
| 396 | 'Demo Information', | 396 | "Demo Information", |
| 397 | `Demo ID: ${e.demo_id}` | 397 | `Demo ID: ${e.demo_id}` |
| 398 | ); | 398 | ); |
| 399 | }} | 399 | }} |
| @@ -412,38 +412,38 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 412 | onClick={() => { | 412 | onClick={() => { |
| 413 | ( | 413 | ( |
| 414 | document.querySelectorAll( | 414 | document.querySelectorAll( |
| 415 | '.profileboard-record' | 415 | ".profileboard-record" |
| 416 | )[index % 20] as HTMLInputElement | 416 | )[index % 20] as HTMLInputElement |
| 417 | ).style.height === '44px' || | 417 | ).style.height === "44px" || |
| 418 | ( | 418 | ( |
| 419 | document.querySelectorAll( | 419 | document.querySelectorAll( |
| 420 | '.profileboard-record' | 420 | ".profileboard-record" |
| 421 | )[index % 20] as HTMLInputElement | 421 | )[index % 20] as HTMLInputElement |
| 422 | ).style.height === '' | 422 | ).style.height === "" |
| 423 | ? (( | 423 | ? (( |
| 424 | document.querySelectorAll( | 424 | document.querySelectorAll( |
| 425 | '.profileboard-record' | 425 | ".profileboard-record" |
| 426 | )[index % 20] as HTMLInputElement | 426 | )[index % 20] as HTMLInputElement |
| 427 | ).style.height = | 427 | ).style.height = |
| 428 | `${r.scores.length * 46}px`) | 428 | `${r.scores.length * 46}px`) |
| 429 | : (( | 429 | : (( |
| 430 | document.querySelectorAll( | 430 | document.querySelectorAll( |
| 431 | '.profileboard-record' | 431 | ".profileboard-record" |
| 432 | )[index % 20] as HTMLInputElement | 432 | )[index % 20] as HTMLInputElement |
| 433 | ).style.height = '44px'); | 433 | ).style.height = "44px"); |
| 434 | }} | 434 | }} |
| 435 | > | 435 | > |
| 436 | <img src={HistoryIcon} alt="history" /> | 436 | <img src={HistoryIcon} alt="history" /> |
| 437 | </button> | 437 | </button> |
| 438 | ) : ( | 438 | ) : ( |
| 439 | '' | 439 | "" |
| 440 | )} | 440 | )} |
| 441 | </span> | 441 | </span> |
| 442 | </> | 442 | </> |
| 443 | ))} | 443 | ))} |
| 444 | </button> | 444 | </button> |
| 445 | ) : ( | 445 | ) : ( |
| 446 | '' | 446 | "" |
| 447 | ) | 447 | ) |
| 448 | ) | 448 | ) |
| 449 | ) : maps ? ( | 449 | ) : maps ? ( |
| @@ -457,42 +457,42 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 457 | <button | 457 | <button |
| 458 | className="profileboard-record" | 458 | className="profileboard-record" |
| 459 | key={index} | 459 | key={index} |
| 460 | style={{ backgroundColor: '#1b1b20' }} | 460 | style={{ backgroundColor: "#1b1b20" }} |
| 461 | > | 461 | > |
| 462 | <Link to={`/maps/${r.id}`}> | 462 | <Link to={`/maps/${r.id}`}> |
| 463 | <span>{r.name}</span> | 463 | <span>{r.name}</span> |
| 464 | </Link> | 464 | </Link> |
| 465 | <span style={{ display: 'grid' }}>N/A</span> | 465 | <span style={{ display: "grid" }}>N/A</span> |
| 466 | <span style={{ display: 'grid' }}>N/A</span> | 466 | <span style={{ display: "grid" }}>N/A</span> |
| 467 | <span>N/A</span> | 467 | <span>N/A</span> |
| 468 | <span> </span> | 468 | <span> </span> |
| 469 | <span>N/A</span> | 469 | <span>N/A</span> |
| 470 | <span>N/A</span> | 470 | <span>N/A</span> |
| 471 | <span style={{ flexDirection: 'row-reverse' }}></span> | 471 | <span style={{ flexDirection: "row-reverse" }}></span> |
| 472 | </button> | 472 | </button> |
| 473 | ) : ( | 473 | ) : ( |
| 474 | <button className="profileboard-record" key={index}> | 474 | <button className="profileboard-record" key={index}> |
| 475 | {record.scores.map((e, i) => ( | 475 | {record.scores.map((e, i) => ( |
| 476 | <> | 476 | <> |
| 477 | {i !== 0 ? ( | 477 | {i !== 0 ? ( |
| 478 | <hr style={{ gridColumn: '1 / span 8' }} /> | 478 | <hr style={{ gridColumn: "1 / span 8" }} /> |
| 479 | ) : ( | 479 | ) : ( |
| 480 | '' | 480 | "" |
| 481 | )} | 481 | )} |
| 482 | <Link to={`/maps/${r.id}`}> | 482 | <Link to={`/maps/${r.id}`}> |
| 483 | <span>{r.name}</span> | 483 | <span>{r.name}</span> |
| 484 | </Link> | 484 | </Link> |
| 485 | <span style={{ display: 'grid' }}> | 485 | <span style={{ display: "grid" }}> |
| 486 | {record!.scores[i].score_count} | 486 | {record!.scores[i].score_count} |
| 487 | </span> | 487 | </span> |
| 488 | <span style={{ display: 'grid' }}> | 488 | <span style={{ display: "grid" }}> |
| 489 | {record!.scores[i].score_count - | 489 | {record!.scores[i].score_count - |
| 490 | record!.map_wr_count > | 490 | record!.map_wr_count > |
| 491 | 0 | 491 | 0 |
| 492 | ? `+${record!.scores[i].score_count - record!.map_wr_count}` | 492 | ? `+${record!.scores[i].score_count - record!.map_wr_count}` |
| 493 | : `-`} | 493 | : `-`} |
| 494 | </span> | 494 | </span> |
| 495 | <span style={{ display: 'grid' }}> | 495 | <span style={{ display: "grid" }}> |
| 496 | {ticks_to_time(record!.scores[i].score_time)} | 496 | {ticks_to_time(record!.scores[i].score_time)} |
| 497 | </span> | 497 | </span> |
| 498 | <span> </span> | 498 | <span> </span> |
| @@ -501,12 +501,12 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 501 | ) : ( | 501 | ) : ( |
| 502 | <span> </span> | 502 | <span> </span> |
| 503 | )} | 503 | )} |
| 504 | <span>{record!.scores[i].date.split('T')[0]}</span> | 504 | <span>{record!.scores[i].date.split("T")[0]}</span> |
| 505 | <span style={{ flexDirection: 'row-reverse' }}> | 505 | <span style={{ flexDirection: "row-reverse" }}> |
| 506 | <button | 506 | <button |
| 507 | onClick={() => { | 507 | onClick={() => { |
| 508 | message( | 508 | message( |
| 509 | 'Demo Information', | 509 | "Demo Information", |
| 510 | `Demo ID: ${e.demo_id}` | 510 | `Demo ID: ${e.demo_id}` |
| 511 | ); | 511 | ); |
| 512 | }} | 512 | }} |
| @@ -525,31 +525,31 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => { | |||
| 525 | onClick={() => { | 525 | onClick={() => { |
| 526 | ( | 526 | ( |
| 527 | document.querySelectorAll( | 527 | document.querySelectorAll( |
| 528 | '.profileboard-record' | 528 | ".profileboard-record" |
| 529 | )[index % 20] as HTMLInputElement | 529 | )[index % 20] as HTMLInputElement |
| 530 | ).style.height === '44px' || | 530 | ).style.height === "44px" || |
| 531 | ( | 531 | ( |
| 532 | document.querySelectorAll( | 532 | document.querySelectorAll( |
| 533 | '.profileboard-record' | 533 | ".profileboard-record" |
| 534 | )[index % 20] as HTMLInputElement | 534 | )[index % 20] as HTMLInputElement |
| 535 | ).style.height === '' | 535 | ).style.height === "" |
| 536 | ? (( | 536 | ? (( |
| 537 | document.querySelectorAll( | 537 | document.querySelectorAll( |
| 538 | '.profileboard-record' | 538 | ".profileboard-record" |
| 539 | )[index % 20] as HTMLInputElement | 539 | )[index % 20] as HTMLInputElement |
| 540 | ).style.height = | 540 | ).style.height = |
| 541 | `${record!.scores.length * 46}px`) | 541 | `${record!.scores.length * 46}px`) |
| 542 | : (( | 542 | : (( |
| 543 | document.querySelectorAll( | 543 | document.querySelectorAll( |
| 544 | '.profileboard-record' | 544 | ".profileboard-record" |
| 545 | )[index % 20] as HTMLInputElement | 545 | )[index % 20] as HTMLInputElement |
| 546 | ).style.height = '44px'); | 546 | ).style.height = "44px"); |
| 547 | }} | 547 | }} |
| 548 | > | 548 | > |
| 549 | <img src={HistoryIcon} alt="history" /> | 549 | <img src={HistoryIcon} alt="history" /> |
| 550 | </button> | 550 | </button> |
| 551 | ) : ( | 551 | ) : ( |
| 552 | '' | 552 | "" |
| 553 | )} | 553 | )} |
| 554 | </span> | 554 | </span> |
| 555 | </> | 555 | </> |