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/Profile.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/Profile.tsx')
| -rw-r--r-- | frontend/src/pages/Profile.tsx | 200 |
1 files changed, 100 insertions, 100 deletions
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index 8acf746..e2d6000 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx | |||
| @@ -1,6 +1,6 @@ | |||
| 1 | import React from 'react'; | 1 | import React from "react"; |
| 2 | import { Link, useNavigate } from 'react-router-dom'; | 2 | import { Link, 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, |
| @@ -14,16 +14,16 @@ import { | |||
| 14 | DownloadIcon, | 14 | DownloadIcon, |
| 15 | HistoryIcon, | 15 | HistoryIcon, |
| 16 | DeleteIcon, | 16 | DeleteIcon, |
| 17 | } from '@images/Images'; | 17 | } from "@images/Images"; |
| 18 | import { UserProfile } from '@customTypes/Profile'; | 18 | import { UserProfile } from "@customTypes/Profile"; |
| 19 | import { Game, GameChapters } from '@customTypes/Game'; | 19 | import { Game, GameChapters } from "@customTypes/Game"; |
| 20 | import { Map } from '@customTypes/Map'; | 20 | import { Map } from "@customTypes/Map"; |
| 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 { API } from '@api/Api'; | 23 | import { API } from "@api/Api"; |
| 24 | import useConfirm from '@hooks/UseConfirm'; | 24 | import useConfirm from "@hooks/UseConfirm"; |
| 25 | import useMessage from '@hooks/UseMessage'; | 25 | import useMessage from "@hooks/UseMessage"; |
| 26 | import useMessageLoad from '@hooks/UseMessageLoad'; | 26 | import useMessageLoad from "@hooks/UseMessageLoad"; |
| 27 | 27 | ||
| 28 | interface ProfileProps { | 28 | interface ProfileProps { |
| 29 | profile?: UserProfile; | 29 | profile?: UserProfile; |
| @@ -46,8 +46,8 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 46 | const [pageNumber, setPageNumber] = React.useState(1); | 46 | const [pageNumber, setPageNumber] = React.useState(1); |
| 47 | const [pageMax, setPageMax] = React.useState(0); | 47 | const [pageMax, setPageMax] = React.useState(0); |
| 48 | 48 | ||
| 49 | const [game, setGame] = React.useState('0'); | 49 | const [game, setGame] = React.useState("0"); |
| 50 | const [chapter, setChapter] = React.useState('0'); | 50 | const [chapter, setChapter] = React.useState("0"); |
| 51 | const [chapterData, setChapterData] = React.useState<GameChapters | null>( | 51 | const [chapterData, setChapterData] = React.useState<GameChapters | null>( |
| 52 | null | 52 | null |
| 53 | ); | 53 | ); |
| @@ -62,17 +62,17 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 62 | }; | 62 | }; |
| 63 | 63 | ||
| 64 | const _get_game_chapters = React.useCallback(async () => { | 64 | const _get_game_chapters = React.useCallback(async () => { |
| 65 | if (game && game !== '0') { | 65 | if (game && game !== "0") { |
| 66 | const gameChapters = await API.get_games_chapters(game); | 66 | const gameChapters = await API.get_games_chapters(game); |
| 67 | setChapterData(gameChapters); | 67 | setChapterData(gameChapters); |
| 68 | } else if (game && game === '0') { | 68 | } else if (game && game === "0") { |
| 69 | setPageMax(Math.ceil(profile!.records.length / 20)); | 69 | setPageMax(Math.ceil(profile!.records.length / 20)); |
| 70 | setPageNumber(1); | 70 | setPageNumber(1); |
| 71 | } | 71 | } |
| 72 | }, [game, profile]); | 72 | }, [game, profile]); |
| 73 | 73 | ||
| 74 | const _get_game_maps = React.useCallback(async () => { | 74 | const _get_game_maps = React.useCallback(async () => { |
| 75 | if (chapter === '0') { | 75 | if (chapter === "0") { |
| 76 | const gameMaps = await API.get_game_maps(game); | 76 | const gameMaps = await API.get_game_maps(game); |
| 77 | setMaps(gameMaps); | 77 | setMaps(gameMaps); |
| 78 | setPageMax(Math.ceil(gameMaps.length / 20)); | 78 | setPageMax(Math.ceil(gameMaps.length / 20)); |
| @@ -87,29 +87,29 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 87 | 87 | ||
| 88 | const _delete_submission = async (map_id: number, record_id: number) => { | 88 | const _delete_submission = async (map_id: number, record_id: number) => { |
| 89 | const userConfirmed = await confirm( | 89 | const userConfirmed = await confirm( |
| 90 | 'Delete Record', | 90 | "Delete Record", |
| 91 | 'Are you sure you want to delete this record?' | 91 | "Are you sure you want to delete this record?" |
| 92 | ); | 92 | ); |
| 93 | 93 | ||
| 94 | if (!userConfirmed) { | 94 | if (!userConfirmed) { |
| 95 | return; | 95 | return; |
| 96 | } | 96 | } |
| 97 | 97 | ||
| 98 | messageLoad('Deleting...'); | 98 | messageLoad("Deleting..."); |
| 99 | 99 | ||
| 100 | const api_success = await API.delete_map_record(token!, map_id, record_id); | 100 | const api_success = await API.delete_map_record(token!, map_id, record_id); |
| 101 | messageLoadClose(); | 101 | messageLoadClose(); |
| 102 | if (api_success) { | 102 | if (api_success) { |
| 103 | await message('Delete Record', 'Successfully deleted record.'); | 103 | await message("Delete Record", "Successfully deleted record."); |
| 104 | onDeleteRecord(); | 104 | onDeleteRecord(); |
| 105 | } else { | 105 | } else { |
| 106 | await message('Delete Record', 'Could not delete record.'); | 106 | await message("Delete Record", "Could not delete record."); |
| 107 | } | 107 | } |
| 108 | }; | 108 | }; |
| 109 | 109 | ||
| 110 | React.useEffect(() => { | 110 | React.useEffect(() => { |
| 111 | if (!profile) { | 111 | if (!profile) { |
| 112 | navigate('/'); | 112 | navigate("/"); |
| 113 | } | 113 | } |
| 114 | }, [profile, navigate]); | 114 | }, [profile, navigate]); |
| 115 | 115 | ||
| @@ -120,7 +120,7 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 120 | }, [profile, game, _get_game_chapters]); | 120 | }, [profile, game, _get_game_chapters]); |
| 121 | 121 | ||
| 122 | React.useEffect(() => { | 122 | React.useEffect(() => { |
| 123 | if (profile && game !== '0') { | 123 | if (profile && game !== "0") { |
| 124 | _get_game_maps(); | 124 | _get_game_maps(); |
| 125 | } | 125 | } |
| 126 | }, [profile, game, chapter, chapterData, _get_game_maps]); | 126 | }, [profile, game, chapter, chapterData, _get_game_maps]); |
| @@ -156,8 +156,8 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 156 | <div> | 156 | <div> |
| 157 | <div>{profile.user_name}</div> | 157 | <div>{profile.user_name}</div> |
| 158 | <div> | 158 | <div> |
| 159 | {profile.country_code === 'XX' ? ( | 159 | {profile.country_code === "XX" ? ( |
| 160 | '' | 160 | "" |
| 161 | ) : ( | 161 | ) : ( |
| 162 | <img | 162 | <img |
| 163 | src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`} | 163 | src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`} |
| @@ -177,32 +177,32 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 177 | </div> | 177 | </div> |
| 178 | </div> | 178 | </div> |
| 179 | <div> | 179 | <div> |
| 180 | {profile.links.steam === '-' ? ( | 180 | {profile.links.steam === "-" ? ( |
| 181 | '' | 181 | "" |
| 182 | ) : ( | 182 | ) : ( |
| 183 | <a href={profile.links.steam}> | 183 | <a href={profile.links.steam}> |
| 184 | <img src={SteamIcon} alt="Steam" /> | 184 | <img src={SteamIcon} alt="Steam" /> |
| 185 | </a> | 185 | </a> |
| 186 | )} | 186 | )} |
| 187 | {profile.links.twitch === '-' ? ( | 187 | {profile.links.twitch === "-" ? ( |
| 188 | '' | 188 | "" |
| 189 | ) : ( | 189 | ) : ( |
| 190 | <a href={profile.links.twitch}> | 190 | <a href={profile.links.twitch}> |
| 191 | <img src={TwitchIcon} alt="Twitch" /> | 191 | <img src={TwitchIcon} alt="Twitch" /> |
| 192 | </a> | 192 | </a> |
| 193 | )} | 193 | )} |
| 194 | {profile.links.youtube === '-' ? ( | 194 | {profile.links.youtube === "-" ? ( |
| 195 | '' | 195 | "" |
| 196 | ) : ( | 196 | ) : ( |
| 197 | <a href={profile.links.youtube}> | 197 | <a href={profile.links.youtube}> |
| 198 | <img src={YouTubeIcon} alt="Youtube" /> | 198 | <img src={YouTubeIcon} alt="Youtube" /> |
| 199 | </a> | 199 | </a> |
| 200 | )} | 200 | )} |
| 201 | {profile.links.p2sr === '-' ? ( | 201 | {profile.links.p2sr === "-" ? ( |
| 202 | '' | 202 | "" |
| 203 | ) : ( | 203 | ) : ( |
| 204 | <a href={profile.links.p2sr}> | 204 | <a href={profile.links.p2sr}> |
| 205 | <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} /> | 205 | <img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /> |
| 206 | </a> | 206 | </a> |
| 207 | )} | 207 | )} |
| 208 | </div> | 208 | </div> |
| @@ -212,8 +212,8 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 212 | <span>Overall</span> | 212 | <span>Overall</span> |
| 213 | <span> | 213 | <span> |
| 214 | {profile.rankings.overall.rank === 0 | 214 | {profile.rankings.overall.rank === 0 |
| 215 | ? 'N/A ' | 215 | ? "N/A " |
| 216 | : '#' + profile.rankings.overall.rank + ' '} | 216 | : "#" + profile.rankings.overall.rank + " "} |
| 217 | <span> | 217 | <span> |
| 218 | ({profile.rankings.overall.completion_count}/ | 218 | ({profile.rankings.overall.completion_count}/ |
| 219 | {profile.rankings.overall.completion_total}) | 219 | {profile.rankings.overall.completion_total}) |
| @@ -224,8 +224,8 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 224 | <span>Singleplayer</span> | 224 | <span>Singleplayer</span> |
| 225 | <span> | 225 | <span> |
| 226 | {profile.rankings.singleplayer.rank === 0 | 226 | {profile.rankings.singleplayer.rank === 0 |
| 227 | ? 'N/A ' | 227 | ? "N/A " |
| 228 | : '#' + profile.rankings.singleplayer.rank + ' '} | 228 | : "#" + profile.rankings.singleplayer.rank + " "} |
| 229 | <span> | 229 | <span> |
| 230 | ({profile.rankings.singleplayer.completion_count}/ | 230 | ({profile.rankings.singleplayer.completion_count}/ |
| 231 | {profile.rankings.singleplayer.completion_total}) | 231 | {profile.rankings.singleplayer.completion_total}) |
| @@ -236,8 +236,8 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 236 | <span>Cooperative</span> | 236 | <span>Cooperative</span> |
| 237 | <span> | 237 | <span> |
| 238 | {profile.rankings.cooperative.rank === 0 | 238 | {profile.rankings.cooperative.rank === 0 |
| 239 | ? 'N/A ' | 239 | ? "N/A " |
| 240 | : '#' + profile.rankings.cooperative.rank + ' '} | 240 | : "#" + profile.rankings.cooperative.rank + " "} |
| 241 | <span> | 241 | <span> |
| 242 | ({profile.rankings.cooperative.completion_count}/ | 242 | ({profile.rankings.cooperative.completion_count}/ |
| 243 | {profile.rankings.cooperative.completion_total}) | 243 | {profile.rankings.cooperative.completion_total}) |
| @@ -267,15 +267,15 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 267 | id="select-game" | 267 | id="select-game" |
| 268 | onChange={() => { | 268 | onChange={() => { |
| 269 | setGame( | 269 | setGame( |
| 270 | (document.querySelector('#select-game') as HTMLInputElement) | 270 | (document.querySelector("#select-game") as HTMLInputElement) |
| 271 | .value | 271 | .value |
| 272 | ); | 272 | ); |
| 273 | setChapter('0'); | 273 | setChapter("0"); |
| 274 | const chapterSelect = document.querySelector( | 274 | const chapterSelect = document.querySelector( |
| 275 | '#select-chapter' | 275 | "#select-chapter" |
| 276 | ) as HTMLSelectElement; | 276 | ) as HTMLSelectElement; |
| 277 | if (chapterSelect) { | 277 | if (chapterSelect) { |
| 278 | chapterSelect.value = '0'; | 278 | chapterSelect.value = "0"; |
| 279 | } | 279 | } |
| 280 | }} | 280 | }} |
| 281 | > | 281 | > |
| @@ -290,7 +290,7 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 290 | </select> | 290 | </select> |
| 291 | )} | 291 | )} |
| 292 | 292 | ||
| 293 | {game === '0' ? ( | 293 | {game === "0" ? ( |
| 294 | <select disabled> | 294 | <select disabled> |
| 295 | <option>All Chapters</option> | 295 | <option>All Chapters</option> |
| 296 | </select> | 296 | </select> |
| @@ -303,7 +303,7 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 303 | setChapter( | 303 | setChapter( |
| 304 | ( | 304 | ( |
| 305 | document.querySelector( | 305 | document.querySelector( |
| 306 | '#select-chapter' | 306 | "#select-chapter" |
| 307 | ) as HTMLInputElement | 307 | ) as HTMLInputElement |
| 308 | ).value | 308 | ).value |
| 309 | ) | 309 | ) |
| @@ -327,15 +327,15 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 327 | <span>Map Name</span> | 327 | <span>Map Name</span> |
| 328 | <img src={SortIcon} alt="" /> | 328 | <img src={SortIcon} alt="" /> |
| 329 | </span> | 329 | </span> |
| 330 | <span style={{ justifyContent: 'center' }}> | 330 | <span style={{ justifyContent: "center" }}> |
| 331 | <span>Portals</span> | 331 | <span>Portals</span> |
| 332 | <img src={SortIcon} alt="" /> | 332 | <img src={SortIcon} alt="" /> |
| 333 | </span> | 333 | </span> |
| 334 | <span style={{ justifyContent: 'center' }}> | 334 | <span style={{ justifyContent: "center" }}> |
| 335 | <span>WRΔ </span> | 335 | <span>WRΔ </span> |
| 336 | <img src={SortIcon} alt="" /> | 336 | <img src={SortIcon} alt="" /> |
| 337 | </span> | 337 | </span> |
| 338 | <span style={{ justifyContent: 'center' }}> | 338 | <span style={{ justifyContent: "center" }}> |
| 339 | <span>Time</span> | 339 | <span>Time</span> |
| 340 | <img src={SortIcon} alt="" /> | 340 | <img src={SortIcon} alt="" /> |
| 341 | </span> | 341 | </span> |
| @@ -355,18 +355,18 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 355 | if (pageNumber !== 1) { | 355 | if (pageNumber !== 1) { |
| 356 | setPageNumber(prevPageNumber => prevPageNumber - 1); | 356 | setPageNumber(prevPageNumber => prevPageNumber - 1); |
| 357 | const records = document.querySelectorAll( | 357 | const records = document.querySelectorAll( |
| 358 | '.profileboard-record' | 358 | ".profileboard-record" |
| 359 | ); | 359 | ); |
| 360 | records.forEach(r => { | 360 | records.forEach(r => { |
| 361 | (r as HTMLInputElement).style.height = '44px'; | 361 | (r as HTMLInputElement).style.height = "44px"; |
| 362 | }); | 362 | }); |
| 363 | } | 363 | } |
| 364 | }} | 364 | }} |
| 365 | > | 365 | > |
| 366 | <i | 366 | <i |
| 367 | className="triangle" | 367 | className="triangle" |
| 368 | style={{ position: 'relative', left: '-5px' }} | 368 | style={{ position: "relative", left: "-5px" }} |
| 369 | ></i>{' '} | 369 | ></i>{" "} |
| 370 | </button> | 370 | </button> |
| 371 | <span> | 371 | <span> |
| 372 | {pageNumber}/{pageMax} | 372 | {pageNumber}/{pageMax} |
| @@ -376,10 +376,10 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 376 | if (pageNumber !== pageMax) { | 376 | if (pageNumber !== pageMax) { |
| 377 | setPageNumber(prevPageNumber => prevPageNumber + 1); | 377 | setPageNumber(prevPageNumber => prevPageNumber + 1); |
| 378 | const records = document.querySelectorAll( | 378 | const records = document.querySelectorAll( |
| 379 | '.profileboard-record' | 379 | ".profileboard-record" |
| 380 | ); | 380 | ); |
| 381 | records.forEach(r => { | 381 | records.forEach(r => { |
| 382 | (r as HTMLInputElement).style.height = '44px'; | 382 | (r as HTMLInputElement).style.height = "44px"; |
| 383 | }); | 383 | }); |
| 384 | } | 384 | } |
| 385 | }} | 385 | }} |
| @@ -387,18 +387,18 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 387 | <i | 387 | <i |
| 388 | className="triangle" | 388 | className="triangle" |
| 389 | style={{ | 389 | style={{ |
| 390 | position: 'relative', | 390 | position: "relative", |
| 391 | left: '5px', | 391 | left: "5px", |
| 392 | transform: 'rotate(180deg)', | 392 | transform: "rotate(180deg)", |
| 393 | }} | 393 | }} |
| 394 | ></i>{' '} | 394 | ></i>{" "} |
| 395 | </button> | 395 | </button> |
| 396 | </div> | 396 | </div> |
| 397 | </div> | 397 | </div> |
| 398 | </div> | 398 | </div> |
| 399 | <hr /> | 399 | <hr /> |
| 400 | <div id="profileboard-records"> | 400 | <div id="profileboard-records"> |
| 401 | {game === '0' ? ( | 401 | {game === "0" ? ( |
| 402 | profile.records | 402 | profile.records |
| 403 | .sort((a, b) => a.map_id - b.map_id) | 403 | .sort((a, b) => a.map_id - b.map_id) |
| 404 | .map((r, index) => | 404 | .map((r, index) => |
| @@ -407,25 +407,25 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 407 | {r.scores.map((e, i) => ( | 407 | {r.scores.map((e, i) => ( |
| 408 | <> | 408 | <> |
| 409 | {i !== 0 ? ( | 409 | {i !== 0 ? ( |
| 410 | <hr style={{ gridColumn: '1 / span 8' }} /> | 410 | <hr style={{ gridColumn: "1 / span 8" }} /> |
| 411 | ) : ( | 411 | ) : ( |
| 412 | '' | 412 | "" |
| 413 | )} | 413 | )} |
| 414 | 414 | ||
| 415 | <Link to={`/maps/${r.map_id}`}> | 415 | <Link to={`/maps/${r.map_id}`}> |
| 416 | <span>{r.map_name}</span> | 416 | <span>{r.map_name}</span> |
| 417 | </Link> | 417 | </Link> |
| 418 | 418 | ||
| 419 | <span style={{ display: 'grid' }}> | 419 | <span style={{ display: "grid" }}> |
| 420 | {e.score_count} | 420 | {e.score_count} |
| 421 | </span> | 421 | </span> |
| 422 | 422 | ||
| 423 | <span style={{ display: 'grid' }}> | 423 | <span style={{ display: "grid" }}> |
| 424 | {e.score_count - r.map_wr_count > 0 | 424 | {e.score_count - r.map_wr_count > 0 |
| 425 | ? `+${e.score_count - r.map_wr_count}` | 425 | ? `+${e.score_count - r.map_wr_count}` |
| 426 | : `-`} | 426 | : `-`} |
| 427 | </span> | 427 | </span> |
| 428 | <span style={{ display: 'grid' }}> | 428 | <span style={{ display: "grid" }}> |
| 429 | {ticks_to_time(e.score_time)} | 429 | {ticks_to_time(e.score_time)} |
| 430 | </span> | 430 | </span> |
| 431 | <span> </span> | 431 | <span> </span> |
| @@ -434,13 +434,13 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 434 | ) : ( | 434 | ) : ( |
| 435 | <span> </span> | 435 | <span> </span> |
| 436 | )} | 436 | )} |
| 437 | <span>{e.date.split('T')[0]}</span> | 437 | <span>{e.date.split("T")[0]}</span> |
| 438 | <span style={{ flexDirection: 'row-reverse' }}> | 438 | <span style={{ flexDirection: "row-reverse" }}> |
| 439 | <button | 439 | <button |
| 440 | style={{ marginRight: '10px' }} | 440 | style={{ marginRight: "10px" }} |
| 441 | onClick={() => { | 441 | onClick={() => { |
| 442 | message( | 442 | message( |
| 443 | 'Demo Information', | 443 | "Demo Information", |
| 444 | `Demo ID: ${e.demo_id}` | 444 | `Demo ID: ${e.demo_id}` |
| 445 | ); | 445 | ); |
| 446 | }} | 446 | }} |
| @@ -466,38 +466,38 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 466 | onClick={() => { | 466 | onClick={() => { |
| 467 | ( | 467 | ( |
| 468 | document.querySelectorAll( | 468 | document.querySelectorAll( |
| 469 | '.profileboard-record' | 469 | ".profileboard-record" |
| 470 | )[index % 20] as HTMLInputElement | 470 | )[index % 20] as HTMLInputElement |
| 471 | ).style.height === '44px' || | 471 | ).style.height === "44px" || |
| 472 | ( | 472 | ( |
| 473 | document.querySelectorAll( | 473 | document.querySelectorAll( |
| 474 | '.profileboard-record' | 474 | ".profileboard-record" |
| 475 | )[index % 20] as HTMLInputElement | 475 | )[index % 20] as HTMLInputElement |
| 476 | ).style.height === '' | 476 | ).style.height === "" |
| 477 | ? (( | 477 | ? (( |
| 478 | document.querySelectorAll( | 478 | document.querySelectorAll( |
| 479 | '.profileboard-record' | 479 | ".profileboard-record" |
| 480 | )[index % 20] as HTMLInputElement | 480 | )[index % 20] as HTMLInputElement |
| 481 | ).style.height = | 481 | ).style.height = |
| 482 | `${r.scores.length * 46}px`) | 482 | `${r.scores.length * 46}px`) |
| 483 | : (( | 483 | : (( |
| 484 | document.querySelectorAll( | 484 | document.querySelectorAll( |
| 485 | '.profileboard-record' | 485 | ".profileboard-record" |
| 486 | )[index % 20] as HTMLInputElement | 486 | )[index % 20] as HTMLInputElement |
| 487 | ).style.height = '44px'); | 487 | ).style.height = "44px"); |
| 488 | }} | 488 | }} |
| 489 | > | 489 | > |
| 490 | <img src={HistoryIcon} alt="history" /> | 490 | <img src={HistoryIcon} alt="history" /> |
| 491 | </button> | 491 | </button> |
| 492 | ) : ( | 492 | ) : ( |
| 493 | '' | 493 | "" |
| 494 | )} | 494 | )} |
| 495 | </span> | 495 | </span> |
| 496 | </> | 496 | </> |
| 497 | ))} | 497 | ))} |
| 498 | </button> | 498 | </button> |
| 499 | ) : ( | 499 | ) : ( |
| 500 | '' | 500 | "" |
| 501 | ) | 501 | ) |
| 502 | ) | 502 | ) |
| 503 | ) : maps ? ( | 503 | ) : maps ? ( |
| @@ -511,42 +511,42 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 511 | <button | 511 | <button |
| 512 | className="profileboard-record" | 512 | className="profileboard-record" |
| 513 | key={index} | 513 | key={index} |
| 514 | style={{ backgroundColor: '#1b1b20' }} | 514 | style={{ backgroundColor: "#1b1b20" }} |
| 515 | > | 515 | > |
| 516 | <Link to={`/maps/${r.id}`}> | 516 | <Link to={`/maps/${r.id}`}> |
| 517 | <span>{r.name}</span> | 517 | <span>{r.name}</span> |
| 518 | </Link> | 518 | </Link> |
| 519 | <span style={{ display: 'grid' }}>N/A</span> | 519 | <span style={{ display: "grid" }}>N/A</span> |
| 520 | <span style={{ display: 'grid' }}>N/A</span> | 520 | <span style={{ display: "grid" }}>N/A</span> |
| 521 | <span>N/A</span> | 521 | <span>N/A</span> |
| 522 | <span> </span> | 522 | <span> </span> |
| 523 | <span>N/A</span> | 523 | <span>N/A</span> |
| 524 | <span>N/A</span> | 524 | <span>N/A</span> |
| 525 | <span style={{ flexDirection: 'row-reverse' }}></span> | 525 | <span style={{ flexDirection: "row-reverse" }}></span> |
| 526 | </button> | 526 | </button> |
| 527 | ) : ( | 527 | ) : ( |
| 528 | <button className="profileboard-record" key={index}> | 528 | <button className="profileboard-record" key={index}> |
| 529 | {record.scores.map((e, i) => ( | 529 | {record.scores.map((e, i) => ( |
| 530 | <> | 530 | <> |
| 531 | {i !== 0 ? ( | 531 | {i !== 0 ? ( |
| 532 | <hr style={{ gridColumn: '1 / span 8' }} /> | 532 | <hr style={{ gridColumn: "1 / span 8" }} /> |
| 533 | ) : ( | 533 | ) : ( |
| 534 | '' | 534 | "" |
| 535 | )} | 535 | )} |
| 536 | <Link to={`/maps/${r.id}`}> | 536 | <Link to={`/maps/${r.id}`}> |
| 537 | <span>{r.name}</span> | 537 | <span>{r.name}</span> |
| 538 | </Link> | 538 | </Link> |
| 539 | <span style={{ display: 'grid' }}> | 539 | <span style={{ display: "grid" }}> |
| 540 | {record!.scores[i].score_count} | 540 | {record!.scores[i].score_count} |
| 541 | </span> | 541 | </span> |
| 542 | <span style={{ display: 'grid' }}> | 542 | <span style={{ display: "grid" }}> |
| 543 | {record!.scores[i].score_count - | 543 | {record!.scores[i].score_count - |
| 544 | record!.map_wr_count > | 544 | record!.map_wr_count > |
| 545 | 0 | 545 | 0 |
| 546 | ? `+${record!.scores[i].score_count - record!.map_wr_count}` | 546 | ? `+${record!.scores[i].score_count - record!.map_wr_count}` |
| 547 | : `-`} | 547 | : `-`} |
| 548 | </span> | 548 | </span> |
| 549 | <span style={{ display: 'grid' }}> | 549 | <span style={{ display: "grid" }}> |
| 550 | {ticks_to_time(record!.scores[i].score_time)} | 550 | {ticks_to_time(record!.scores[i].score_time)} |
| 551 | </span> | 551 | </span> |
| 552 | <span> </span> | 552 | <span> </span> |
| @@ -555,12 +555,12 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 555 | ) : ( | 555 | ) : ( |
| 556 | <span> </span> | 556 | <span> </span> |
| 557 | )} | 557 | )} |
| 558 | <span>{record!.scores[i].date.split('T')[0]}</span> | 558 | <span>{record!.scores[i].date.split("T")[0]}</span> |
| 559 | <span style={{ flexDirection: 'row-reverse' }}> | 559 | <span style={{ flexDirection: "row-reverse" }}> |
| 560 | <button | 560 | <button |
| 561 | onClick={() => { | 561 | onClick={() => { |
| 562 | message( | 562 | message( |
| 563 | 'Demo Information', | 563 | "Demo Information", |
| 564 | `Demo ID: ${e.demo_id}` | 564 | `Demo ID: ${e.demo_id}` |
| 565 | ); | 565 | ); |
| 566 | }} | 566 | }} |
| @@ -586,31 +586,31 @@ const Profile: React.FC<ProfileProps> = ({ | |||
| 586 | onClick={() => { | 586 | onClick={() => { |
| 587 | ( | 587 | ( |
| 588 | document.querySelectorAll( | 588 | document.querySelectorAll( |
| 589 | '.profileboard-record' | 589 | ".profileboard-record" |
| 590 | )[index % 20] as HTMLInputElement | 590 | )[index % 20] as HTMLInputElement |
| 591 | ).style.height === '44px' || | 591 | ).style.height === "44px" || |
| 592 | ( | 592 | ( |
| 593 | document.querySelectorAll( | 593 | document.querySelectorAll( |
| 594 | '.profileboard-record' | 594 | ".profileboard-record" |
| 595 | )[index % 20] as HTMLInputElement | 595 | )[index % 20] as HTMLInputElement |
| 596 | ).style.height === '' | 596 | ).style.height === "" |
| 597 | ? (( | 597 | ? (( |
| 598 | document.querySelectorAll( | 598 | document.querySelectorAll( |
| 599 | '.profileboard-record' | 599 | ".profileboard-record" |
| 600 | )[index % 20] as HTMLInputElement | 600 | )[index % 20] as HTMLInputElement |
| 601 | ).style.height = | 601 | ).style.height = |
| 602 | `${record!.scores.length * 46}px`) | 602 | `${record!.scores.length * 46}px`) |
| 603 | : (( | 603 | : (( |
| 604 | document.querySelectorAll( | 604 | document.querySelectorAll( |
| 605 | '.profileboard-record' | 605 | ".profileboard-record" |
| 606 | )[index % 20] as HTMLInputElement | 606 | )[index % 20] as HTMLInputElement |
| 607 | ).style.height = '44px'); | 607 | ).style.height = "44px"); |
| 608 | }} | 608 | }} |
| 609 | > | 609 | > |
| 610 | <img src={HistoryIcon} alt="history" /> | 610 | <img src={HistoryIcon} alt="history" /> |
| 611 | </button> | 611 | </button> |
| 612 | ) : ( | 612 | ) : ( |
| 613 | '' | 613 | "" |
| 614 | )} | 614 | )} |
| 615 | </span> | 615 | </span> |
| 616 | </> | 616 | </> |