diff options
Diffstat (limited to 'frontend/src/components/Leaderboards.tsx')
| -rw-r--r-- | frontend/src/components/Leaderboards.tsx | 144 |
1 files changed, 72 insertions, 72 deletions
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index fb614fa..5d4045a 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx | |||
| @@ -1,9 +1,9 @@ | |||
| 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 | 3 | ||
| 4 | import { DownloadIcon, ThreedotIcon } from '@images/Images'; | 4 | import { DownloadIcon, ThreedotIcon } from "@images/Images"; |
| 5 | import { MapLeaderboard } from '@customTypes/Map'; | 5 | import { MapLeaderboard } from "@customTypes/Map"; |
| 6 | import { ticks_to_time, time_ago } from '@utils/Time'; | 6 | import { ticks_to_time, time_ago } from "@utils/Time"; |
| 7 | import { API } from "@api/Api"; | 7 | import { API } from "@api/Api"; |
| 8 | import useMessage from "@hooks/UseMessage"; | 8 | import useMessage from "@hooks/UseMessage"; |
| 9 | import "@css/Maps.css" | 9 | import "@css/Maps.css" |
| @@ -46,80 +46,80 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 46 | }; | 46 | }; |
| 47 | 47 | ||
| 48 | return ( | 48 | return ( |
| 49 | <div> | 49 | <div> |
| 50 | {MessageDialogComponent} | 50 | {MessageDialogComponent} |
| 51 | <section id='section6' className='summary2'> | 51 | <section id='section6' className='summary2'> |
| 52 | |||
| 53 | <div id='leaderboard-top' | ||
| 54 | style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }} | ||
| 55 | > | ||
| 56 | <span>Place</span> | ||
| 57 | 52 | ||
| 58 | {data.map.is_coop ? ( | 53 | <div id='leaderboard-top' |
| 59 | <div id='runner'> | 54 | style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }} |
| 60 | <span>Blue</span> | 55 | > |
| 61 | <span>Orange</span> | 56 | <span>Place</span> |
| 62 | </div> | 57 | |
| 63 | ) : ( | 58 | {data.map.is_coop ? ( |
| 64 | <span>Runner</span> | 59 | <div id='runner'> |
| 65 | )} | 60 | <span>Blue</span> |
| 66 | 61 | <span>Orange</span> | |
| 67 | <span>Portals</span> | 62 | </div> |
| 68 | <span>Time</span> | 63 | ) : ( |
| 69 | <span>Date</span> | 64 | <span>Runner</span> |
| 70 | <div id='page-number'> | 65 | )} |
| 71 | <div> | 66 | |
| 72 | 67 | <span>Portals</span> | |
| 73 | <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)} | 68 | <span>Time</span> |
| 74 | ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button> | 69 | <span>Date</span> |
| 75 | <span>{data.pagination.current_page}/{data.pagination.total_pages}</span> | 70 | <div id='page-number'> |
| 76 | <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)} | 71 | <div> |
| 77 | ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button> | 72 | |
| 73 | <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)} | ||
| 74 | ><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button> | ||
| 75 | <span>{data.pagination.current_page}/{data.pagination.total_pages}</span> | ||
| 76 | <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)} | ||
| 77 | ><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button> | ||
| 78 | </div> | ||
| 78 | </div> | 79 | </div> |
| 79 | </div> | 80 | </div> |
| 80 | </div> | 81 | <hr /> |
| 81 | <hr /> | 82 | <div id='leaderboard-records'> |
| 82 | <div id='leaderboard-records'> | 83 | {data.records.map((r, index) => ( |
| 83 | {data.records.map((r, index) => ( | 84 | <span className='leaderboard-record' key={index} |
| 84 | <span className='leaderboard-record' key={index} | 85 | style={data.map.is_coop ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }} |
| 85 | style={data.map.is_coop ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }} | 86 | > |
| 86 | > | 87 | <span>{r.placement}</span> |
| 87 | <span>{r.placement}</span> | 88 | <span> </span> |
| 88 | <span> </span> | 89 | {r.kind === "multiplayer" ? ( |
| 89 | {r.kind === "multiplayer" ? ( | 90 | <div> |
| 90 | <div> | ||
| 91 | <Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> {r.host.user_name}</span></Link> | 91 | <Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> {r.host.user_name}</span></Link> |
| 92 | <Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> {r.partner.user_name}</span></Link> | 92 | <Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> {r.partner.user_name}</span></Link> |
| 93 | </div> | 93 | </div> |
| 94 | ) : r.kind === "singleplayer" && ( | 94 | ) : r.kind === "singleplayer" && ( |
| 95 | <div> | 95 | <div> |
| 96 | <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> {r.user.user_name}</span></Link> | 96 | <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> {r.user.user_name}</span></Link> |
| 97 | </div> | 97 | </div> |
| 98 | )} | 98 | )} |
| 99 | 99 | ||
| 100 | <span>{r.score_count}</span> | 100 | <span>{r.score_count}</span> |
| 101 | <span> </span> | 101 | <span> </span> |
| 102 | <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span> | 102 | <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span> |
| 103 | <span className='hover-popup' popup-text={r.record_date.replace("T", ' ').split(".")[0]}>{time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))}</span> | 103 | <span className='hover-popup' popup-text={r.record_date.replace("T", " ").split(".")[0]}>{time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))}</span> |
| 104 | 104 | ||
| 105 | {r.kind === "multiplayer" ? ( | 105 | {r.kind === "multiplayer" ? ( |
| 106 | <span> | 106 | <span> |
| 107 | <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button> | 107 | <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button> |
| 108 | <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button> | 108 | <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button> |
| 109 | <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button> | 109 | <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button> |
| 110 | </span> | 110 | </span> |
| 111 | ) : r.kind === "singleplayer" && ( | 111 | ) : r.kind === "singleplayer" && ( |
| 112 | 112 | ||
| 113 | <span> | 113 | <span> |
| 114 | <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button> | 114 | <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button> |
| 115 | <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button> | 115 | <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button> |
| 116 | </span> | 116 | </span> |
| 117 | )} | 117 | )} |
| 118 | </span> | 118 | </span> |
| 119 | ))} | 119 | ))} |
| 120 | </div> | 120 | </div> |
| 121 | </section> | 121 | </section> |
| 122 | </div> | 122 | </div> |
| 123 | ); | 123 | ); |
| 124 | }; | 124 | }; |
| 125 | 125 | ||