aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/pages/Profile.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages/Profile.tsx')
-rw-r--r--frontend/src/pages/Profile.tsx200
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 @@
1import React from 'react'; 1import React from "react";
2import { Link, useNavigate } from 'react-router-dom'; 2import { Link, useNavigate } from "react-router-dom";
3import { Helmet } from 'react-helmet'; 3import { Helmet } from "react-helmet";
4 4
5import { 5import {
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";
18import { UserProfile } from '@customTypes/Profile'; 18import { UserProfile } from "@customTypes/Profile";
19import { Game, GameChapters } from '@customTypes/Game'; 19import { Game, GameChapters } from "@customTypes/Game";
20import { Map } from '@customTypes/Map'; 20import { Map } from "@customTypes/Map";
21import { ticks_to_time } from '@utils/Time'; 21import { ticks_to_time } from "@utils/Time";
22import '@css/Profile.css'; 22import "@css/Profile.css";
23import { API } from '@api/Api'; 23import { API } from "@api/Api";
24import useConfirm from '@hooks/UseConfirm'; 24import useConfirm from "@hooks/UseConfirm";
25import useMessage from '@hooks/UseMessage'; 25import useMessage from "@hooks/UseMessage";
26import useMessageLoad from '@hooks/UseMessageLoad'; 26import useMessageLoad from "@hooks/UseMessageLoad";
27 27
28interface ProfileProps { 28interface 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 </>