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/components/Leaderboards.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/components/Leaderboards.tsx')
| -rw-r--r-- | frontend/src/components/Leaderboards.tsx | 68 |
1 files changed, 34 insertions, 34 deletions
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index 801f331..b388aba 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx | |||
| @@ -1,12 +1,12 @@ | |||
| 1 | import React, { useCallback } from 'react'; | 1 | import React, { useCallback } 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> |
| @@ -87,8 +87,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 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} |
| @@ -103,11 +103,11 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 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" /> |