diff options
| author | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 10:44:30 -0600 |
|---|---|---|
| committer | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 10:44:30 -0600 |
| commit | e40f07211f5f15dcb138e2520a76d13afd3c0cfd (patch) | |
| tree | 46bad6a17e66d55a4a65088c0b6eb8c48641615a /frontend/src/components/Leaderboards.tsx | |
| parent | added prettier for more consistency (diff) | |
| download | lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.tar.gz lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.tar.bz2 lphub-e40f07211f5f15dcb138e2520a76d13afd3c0cfd.zip | |
formatted with prettier
Diffstat (limited to 'frontend/src/components/Leaderboards.tsx')
| -rw-r--r-- | frontend/src/components/Leaderboards.tsx | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index 05f01d0..fb72f2b 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx | |||
| @@ -1,12 +1,12 @@ | |||
| 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'; |
| 10 | 10 | ||
| 11 | interface LeaderboardsProps { | 11 | interface LeaderboardsProps { |
| 12 | mapID: string; | 12 | mapID: string; |
| @@ -35,7 +35,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 35 | if (!data) { | 35 | if (!data) { |
| 36 | return ( | 36 | return ( |
| 37 | <section id="section6" className="summary2"> | 37 | <section id="section6" className="summary2"> |
| 38 | <h1 style={{ textAlign: "center" }}> | 38 | <h1 style={{ textAlign: 'center' }}> |
| 39 | Map is not available for competitive boards. | 39 | Map is not available for competitive boards. |
| 40 | </h1> | 40 | </h1> |
| 41 | </section> | 41 | </section> |
| @@ -45,7 +45,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 45 | if (data.records.length === 0) { | 45 | if (data.records.length === 0) { |
| 46 | return ( | 46 | return ( |
| 47 | <section id="section6" className="summary2"> | 47 | <section id="section6" className="summary2"> |
| 48 | <h1 style={{ textAlign: "center" }}>No records found.</h1> | 48 | <h1 style={{ textAlign: 'center' }}>No records found.</h1> |
| 49 | </section> | 49 | </section> |
| 50 | ); | 50 | ); |
| 51 | } | 51 | } |
| @@ -58,8 +58,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 58 | id="leaderboard-top" | 58 | id="leaderboard-top" |
| 59 | style={ | 59 | style={ |
| 60 | data.map.is_coop | 60 | data.map.is_coop |
| 61 | ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } | 61 | ? { gridTemplateColumns: '7.5% 40% 7.5% 15% 15% 15%' } |
| 62 | : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" } | 62 | : { gridTemplateColumns: '7.5% 30% 10% 20% 17.5% 15%' } |
| 63 | } | 63 | } |
| 64 | > | 64 | > |
| 65 | <span>Place</span> | 65 | <span>Place</span> |
| @@ -82,13 +82,13 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 82 | onClick={() => | 82 | onClick={() => |
| 83 | pageNumber === 1 | 83 | pageNumber === 1 |
| 84 | ? null | 84 | ? null |
| 85 | : setPageNumber((prevPageNumber) => prevPageNumber - 1) | 85 | : setPageNumber(prevPageNumber => prevPageNumber - 1) |
| 86 | } | 86 | } |
| 87 | > | 87 | > |
| 88 | <i | 88 | <i |
| 89 | className="triangle" | 89 | className="triangle" |
| 90 | style={{ position: "relative", left: "-5px" }} | 90 | style={{ position: 'relative', left: '-5px' }} |
| 91 | ></i>{" "} | 91 | ></i>{' '} |
| 92 | </button> | 92 | </button> |
| 93 | <span> | 93 | <span> |
| 94 | {data.pagination.current_page}/{data.pagination.total_pages} | 94 | {data.pagination.current_page}/{data.pagination.total_pages} |
| @@ -97,17 +97,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 97 | onClick={() => | 97 | onClick={() => |
| 98 | pageNumber === data.pagination.total_pages | 98 | pageNumber === data.pagination.total_pages |
| 99 | ? null | 99 | ? null |
| 100 | : setPageNumber((prevPageNumber) => prevPageNumber + 1) | 100 | : setPageNumber(prevPageNumber => prevPageNumber + 1) |
| 101 | } | 101 | } |
| 102 | > | 102 | > |
| 103 | <i | 103 | <i |
| 104 | className="triangle" | 104 | className="triangle" |
| 105 | style={{ | 105 | style={{ |
| 106 | position: "relative", | 106 | position: 'relative', |
| 107 | left: "5px", | 107 | left: '5px', |
| 108 | transform: "rotate(180deg)", | 108 | transform: 'rotate(180deg)', |
| 109 | }} | 109 | }} |
| 110 | ></i>{" "} | 110 | ></i>{' '} |
| 111 | </button> | 111 | </button> |
| 112 | </div> | 112 | </div> |
| 113 | </div> | 113 | </div> |
| @@ -120,33 +120,33 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 120 | key={index} | 120 | key={index} |
| 121 | style={ | 121 | style={ |
| 122 | data.map.is_coop | 122 | data.map.is_coop |
| 123 | ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } | 123 | ? { gridTemplateColumns: '3% 4.5% 40% 4% 3.5% 15% 15% 14.5%' } |
| 124 | : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" } | 124 | : { gridTemplateColumns: '3% 4.5% 30% 4% 6% 20% 17% 15%' } |
| 125 | } | 125 | } |
| 126 | > | 126 | > |
| 127 | <span>{r.placement}</span> | 127 | <span>{r.placement}</span> |
| 128 | <span> </span> | 128 | <span> </span> |
| 129 | {r.kind === "multiplayer" ? ( | 129 | {r.kind === 'multiplayer' ? ( |
| 130 | <div> | 130 | <div> |
| 131 | <Link to={`/users/${r.host.steam_id}`}> | 131 | <Link to={`/users/${r.host.steam_id}`}> |
| 132 | <span> | 132 | <span> |
| 133 | <img src={r.host.avatar_link} alt="" /> {" "} | 133 | <img src={r.host.avatar_link} alt="" /> {' '} |
| 134 | {r.host.user_name} | 134 | {r.host.user_name} |
| 135 | </span> | 135 | </span> |
| 136 | </Link> | 136 | </Link> |
| 137 | <Link to={`/users/${r.partner.steam_id}`}> | 137 | <Link to={`/users/${r.partner.steam_id}`}> |
| 138 | <span> | 138 | <span> |
| 139 | <img src={r.partner.avatar_link} alt="" /> {" "} | 139 | <img src={r.partner.avatar_link} alt="" /> {' '} |
| 140 | {r.partner.user_name} | 140 | {r.partner.user_name} |
| 141 | </span> | 141 | </span> |
| 142 | </Link> | 142 | </Link> |
| 143 | </div> | 143 | </div> |
| 144 | ) : ( | 144 | ) : ( |
| 145 | r.kind === "singleplayer" && ( | 145 | r.kind === 'singleplayer' && ( |
| 146 | <div> | 146 | <div> |
| 147 | <Link to={`/users/${r.user.steam_id}`}> | 147 | <Link to={`/users/${r.user.steam_id}`}> |
| 148 | <span> | 148 | <span> |
| 149 | <img src={r.user.avatar_link} alt="" /> {" "} | 149 | <img src={r.user.avatar_link} alt="" /> {' '} |
| 150 | {r.user.user_name} | 150 | {r.user.user_name} |
| 151 | </span> | 151 | </span> |
| 152 | </Link> | 152 | </Link> |
| @@ -158,25 +158,25 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 158 | <span> </span> | 158 | <span> </span> |
| 159 | <span | 159 | <span |
| 160 | className="hover-popup" | 160 | className="hover-popup" |
| 161 | popup-text={r.score_time + " ticks"} | 161 | popup-text={r.score_time + ' ticks'} |
| 162 | > | 162 | > |
| 163 | {ticks_to_time(r.score_time)} | 163 | {ticks_to_time(r.score_time)} |
| 164 | </span> | 164 | </span> |
| 165 | <span | 165 | <span |
| 166 | className="hover-popup" | 166 | className="hover-popup" |
| 167 | popup-text={r.record_date.replace("T", " ").split(".")[0]} | 167 | popup-text={r.record_date.replace('T', ' ').split('.')[0]} |
| 168 | > | 168 | > |
| 169 | {time_ago( | 169 | {time_ago( |
| 170 | new Date(r.record_date.replace("T", " ").replace("Z", "")) | 170 | new Date(r.record_date.replace('T', ' ').replace('Z', '')) |
| 171 | )} | 171 | )} |
| 172 | </span> | 172 | </span> |
| 173 | 173 | ||
| 174 | {r.kind === "multiplayer" ? ( | 174 | {r.kind === 'multiplayer' ? ( |
| 175 | <span> | 175 | <span> |
| 176 | <button | 176 | <button |
| 177 | onClick={() => { | 177 | onClick={() => { |
| 178 | message( | 178 | message( |
| 179 | "Demo Information", | 179 | 'Demo Information', |
| 180 | `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}` | 180 | `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}` |
| 181 | ); | 181 | ); |
| 182 | }} | 182 | }} |
| @@ -193,7 +193,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 193 | alt="download" | 193 | alt="download" |
| 194 | style={{ | 194 | style={{ |
| 195 | filter: | 195 | filter: |
| 196 | "hue-rotate(160deg) contrast(60%) saturate(1000%)", | 196 | 'hue-rotate(160deg) contrast(60%) saturate(1000%)', |
| 197 | }} | 197 | }} |
| 198 | /> | 198 | /> |
| 199 | </button> | 199 | </button> |
| @@ -207,17 +207,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 207 | alt="download" | 207 | alt="download" |
| 208 | style={{ | 208 | style={{ |
| 209 | filter: | 209 | filter: |
| 210 | "hue-rotate(300deg) contrast(60%) saturate(1000%)", | 210 | 'hue-rotate(300deg) contrast(60%) saturate(1000%)', |
| 211 | }} | 211 | }} |
| 212 | /> | 212 | /> |
| 213 | </button> | 213 | </button> |
| 214 | </span> | 214 | </span> |
| 215 | ) : ( | 215 | ) : ( |
| 216 | r.kind === "singleplayer" && ( | 216 | r.kind === 'singleplayer' && ( |
| 217 | <span> | 217 | <span> |
| 218 | <button | 218 | <button |
| 219 | onClick={() => { | 219 | onClick={() => { |
| 220 | message("Demo Information", `Demo ID: ${r.demo_id}`); | 220 | message('Demo Information', `Demo ID: ${r.demo_id}`); |
| 221 | }} | 221 | }} |
| 222 | > | 222 | > |
| 223 | <img src={ThreedotIcon} alt="demo_id" /> | 223 | <img src={ThreedotIcon} alt="demo_id" /> |