diff options
| -rw-r--r-- | frontend/package.json | 1 | ||||
| -rw-r--r-- | frontend/src/components/Leaderboards.tsx | 7 | ||||
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 9 | ||||
| -rw-r--r-- | frontend/src/css/Maps.css | 45 | ||||
| -rw-r--r-- | frontend/src/css/Profile.css | 30 | ||||
| -rw-r--r-- | frontend/src/pages/Maplist.tsx | 1 | ||||
| -rw-r--r-- | frontend/src/pages/Rankings.tsx | 1 | ||||
| -rw-r--r-- | frontend/src/utils/Time.ts | 28 |
8 files changed, 96 insertions, 26 deletions
diff --git a/frontend/package.json b/frontend/package.json index 02b5ee3..946ee40 100644 --- a/frontend/package.json +++ b/frontend/package.json | |||
| @@ -20,6 +20,7 @@ | |||
| 20 | "build": "vite build", | 20 | "build": "vite build", |
| 21 | "preview": "vite preview", | 21 | "preview": "vite preview", |
| 22 | "lint": "eslint .", | 22 | "lint": "eslint .", |
| 23 | "lint-fix": "eslint . --fix", | ||
| 23 | "type-check": "tsc -b" | 24 | "type-check": "tsc -b" |
| 24 | }, | 25 | }, |
| 25 | "devDependencies": { | 26 | "devDependencies": { |
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index 5d4045a..1a4aa48 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx | |||
| @@ -9,7 +9,7 @@ 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; |
| 13 | } | 13 | } |
| 14 | 14 | ||
| 15 | const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | 15 | const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { |
| @@ -25,8 +25,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 25 | const { message, MessageDialogComponent } = useMessage(); | 25 | const { message, MessageDialogComponent } = useMessage(); |
| 26 | 26 | ||
| 27 | React.useEffect(() => { | 27 | React.useEffect(() => { |
| 28 | _fetch_map_leaderboards(); | 28 | _fetch_map_leaderboards(); |
| 29 | console.log(data); | ||
| 30 | }, [pageNumber, navigate]) | 29 | }, [pageNumber, navigate]) |
| 31 | 30 | ||
| 32 | if (!data) { | 31 | if (!data) { |
| @@ -47,7 +46,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => { | |||
| 47 | 46 | ||
| 48 | return ( | 47 | return ( |
| 49 | <div> | 48 | <div> |
| 50 | {MessageDialogComponent} | 49 | {MessageDialogComponent} |
| 51 | <section id='section6' className='summary2'> | 50 | <section id='section6' className='summary2'> |
| 52 | 51 | ||
| 53 | <div id='leaderboard-top' | 52 | <div id='leaderboard-top' |
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index eef5bca..c45ec27 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx | |||
| @@ -105,6 +105,11 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 105 | setIsMobileSearchOpen(false); | 105 | setIsMobileSearchOpen(false); |
| 106 | }; | 106 | }; |
| 107 | 107 | ||
| 108 | const _close_mobile_search_and_menu = () => { | ||
| 109 | setIsMobileSearchOpen(false); | ||
| 110 | setIsMobileMenuOpen(false); | ||
| 111 | }; | ||
| 112 | |||
| 108 | const _handle_search_change = async (q: string) => { | 113 | const _handle_search_change = async (q: string) => { |
| 109 | const searchResponse = await API.get_search(q); | 114 | const searchResponse = await API.get_search(q); |
| 110 | setSearchData(searchResponse); | 115 | setSearchData(searchResponse); |
| @@ -213,7 +218,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 213 | <div id='search-data'> | 218 | <div id='search-data'> |
| 214 | 219 | ||
| 215 | {searchData?.maps.map((q, index) => ( | 220 | {searchData?.maps.map((q, index) => ( |
| 216 | <Link to={`/maps/${q.id}`} className='search-map' key={index} onClick={_close_mobile_search}> | 221 | <Link to={`/maps/${q.id}`} className='search-map' key={index} onClick={_close_mobile_search_and_menu}> |
| 217 | <span>{q.game}</span> | 222 | <span>{q.game}</span> |
| 218 | <span>{q.chapter}</span> | 223 | <span>{q.chapter}</span> |
| 219 | <span>{q.map}</span> | 224 | <span>{q.map}</span> |
| @@ -224,7 +229,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 224 | <Link to={ | 229 | <Link to={ |
| 225 | profile && q.steam_id === profile.steam_id ? "/profile" : | 230 | profile && q.steam_id === profile.steam_id ? "/profile" : |
| 226 | `/users/${q.steam_id}` | 231 | `/users/${q.steam_id}` |
| 227 | } className='search-player' key={index} onClick={_close_mobile_search}> | 232 | } className='search-player' key={index} onClick={_close_mobile_search_and_menu}> |
| 228 | <img src={q.avatar_link} alt='pfp'></img> | 233 | <img src={q.avatar_link} alt='pfp'></img> |
| 229 | <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span> | 234 | <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span> |
| 230 | </Link> | 235 | </Link> |
diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css index 4ae6727..66e11c7 100644 --- a/frontend/src/css/Maps.css +++ b/frontend/src/css/Maps.css | |||
| @@ -1050,7 +1050,21 @@ p>span.portal-count { | |||
| 1050 | padding-left: 10px; | 1050 | padding-left: 10px; |
| 1051 | padding-right: 10px; | 1051 | padding-right: 10px; |
| 1052 | margin: 0 10px; | 1052 | margin: 0 10px; |
| 1053 | min-width: max-content; | 1053 | display: flex; |
| 1054 | justify-content: flex-end; | ||
| 1055 | } | ||
| 1056 | |||
| 1057 | #leaderboard-top>span, | ||
| 1058 | #leaderboard-top>div#runner { | ||
| 1059 | display: none; | ||
| 1060 | } | ||
| 1061 | |||
| 1062 | #leaderboard-top>div#page-number { | ||
| 1063 | display: flex; | ||
| 1064 | } | ||
| 1065 | |||
| 1066 | #section6>hr { | ||
| 1067 | display: none; | ||
| 1054 | } | 1068 | } |
| 1055 | 1069 | ||
| 1056 | .leaderboard-record { | 1070 | .leaderboard-record { |
| @@ -1059,8 +1073,30 @@ p>span.portal-count { | |||
| 1059 | padding-right: 10px; | 1073 | padding-right: 10px; |
| 1060 | margin: 10px 10px 0 10px; | 1074 | margin: 10px 10px 0 10px; |
| 1061 | width: calc(100% - 20px); | 1075 | width: calc(100% - 20px); |
| 1062 | min-width: max-content; | ||
| 1063 | box-sizing: border-box; | 1076 | box-sizing: border-box; |
| 1077 | grid-template-columns: 10% 0% 60% 10% 5% 15% 0% 0% !important; | ||
| 1078 | align-items: center; | ||
| 1079 | } | ||
| 1080 | |||
| 1081 | .leaderboard-record>div { | ||
| 1082 | display: grid; | ||
| 1083 | align-items: center; | ||
| 1084 | height: 44px; | ||
| 1085 | } | ||
| 1086 | |||
| 1087 | .leaderboard-record>div>a>span { | ||
| 1088 | overflow: hidden; | ||
| 1089 | text-overflow: ellipsis; | ||
| 1090 | white-space: nowrap; | ||
| 1091 | width: 100%; | ||
| 1092 | display: flex; | ||
| 1093 | align-items: center; | ||
| 1094 | height: 44px; | ||
| 1095 | } | ||
| 1096 | |||
| 1097 | .leaderboard-record>span:nth-child(7), | ||
| 1098 | .leaderboard-record>span:nth-child(8) { | ||
| 1099 | display: none; | ||
| 1064 | } | 1100 | } |
| 1065 | 1101 | ||
| 1066 | .leaderboard-record:last-child { | 1102 | .leaderboard-record:last-child { |
| @@ -1071,6 +1107,11 @@ p>span.portal-count { | |||
| 1071 | height: 28px; | 1107 | height: 28px; |
| 1072 | } | 1108 | } |
| 1073 | 1109 | ||
| 1110 | .leaderboard-record>span>button:has(img[alt="download"]), | ||
| 1111 | .leaderboard-record>span>button:has(img[alt="demo_id"]) { | ||
| 1112 | display: none; | ||
| 1113 | } | ||
| 1114 | |||
| 1074 | #page-number>div { | 1115 | #page-number>div { |
| 1075 | width: 80px; | 1116 | width: 80px; |
| 1076 | } | 1117 | } |
diff --git a/frontend/src/css/Profile.css b/frontend/src/css/Profile.css index 2522602..ccf88f4 100644 --- a/frontend/src/css/Profile.css +++ b/frontend/src/css/Profile.css | |||
| @@ -385,7 +385,20 @@ span.titles { | |||
| 385 | padding-left: 10px; | 385 | padding-left: 10px; |
| 386 | padding-right: 10px; | 386 | padding-right: 10px; |
| 387 | margin: 0 10px; | 387 | margin: 0 10px; |
| 388 | min-width: max-content; | 388 | display: flex; |
| 389 | justify-content: flex-end; | ||
| 390 | } | ||
| 391 | |||
| 392 | #profileboard-top>span { | ||
| 393 | display: none; | ||
| 394 | } | ||
| 395 | |||
| 396 | #profileboard-top>div#page-number { | ||
| 397 | display: block; | ||
| 398 | } | ||
| 399 | |||
| 400 | #section3.profile1>hr { | ||
| 401 | display: none; | ||
| 389 | } | 402 | } |
| 390 | 403 | ||
| 391 | .profileboard-record { | 404 | .profileboard-record { |
| @@ -394,8 +407,21 @@ span.titles { | |||
| 394 | padding-right: 10px; | 407 | padding-right: 10px; |
| 395 | margin: 10px; | 408 | margin: 10px; |
| 396 | width: calc(100% - 20px); | 409 | width: calc(100% - 20px); |
| 397 | min-width: max-content; | ||
| 398 | box-sizing: border-box; | 410 | box-sizing: border-box; |
| 411 | grid-template-columns: 28% 14% 9% 24% 5% 18% 0%; | ||
| 412 | } | ||
| 413 | |||
| 414 | .profileboard-record>span:nth-child(7), | ||
| 415 | .profileboard-record>span:nth-child(16), | ||
| 416 | .profileboard-record>span:nth-child(25), | ||
| 417 | .profileboard-record>span:nth-child(34), | ||
| 418 | .profileboard-record>span:nth-child(43) { | ||
| 419 | display: none; | ||
| 420 | } | ||
| 421 | |||
| 422 | .profileboard-record>span>button:has(img[alt="download"]), | ||
| 423 | .profileboard-record>span>button:has(img[alt="demo_id"]) { | ||
| 424 | display: none; | ||
| 399 | } | 425 | } |
| 400 | 426 | ||
| 401 | span.titles { | 427 | span.titles { |
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx index 76f9a52..bda24cd 100644 --- a/frontend/src/pages/Maplist.tsx +++ b/frontend/src/pages/Maplist.tsx | |||
| @@ -63,7 +63,6 @@ const Maplist: React.FC = () => { | |||
| 63 | const _fetch_game = async () => { | 63 | const _fetch_game = async () => { |
| 64 | const games = await API.get_games(); | 64 | const games = await API.get_games(); |
| 65 | const foundGame = games.find((game) => game.id === gameId); | 65 | const foundGame = games.find((game) => game.id === gameId); |
| 66 | // console.log(foundGame) | ||
| 67 | if (foundGame) { | 66 | if (foundGame) { |
| 68 | setGame(foundGame); | 67 | setGame(foundGame); |
| 69 | setLoad(false); | 68 | setLoad(false); |
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx index 12dcab4..4a96e26 100644 --- a/frontend/src/pages/Rankings.tsx +++ b/frontend/src/pages/Rankings.tsx | |||
| @@ -47,7 +47,6 @@ const Rankings: React.FC = () => { | |||
| 47 | const rankings = await API.get_unofficial_rankings(); | 47 | const rankings = await API.get_unofficial_rankings(); |
| 48 | setLeaderboardData(rankings); | 48 | setLeaderboardData(rankings); |
| 49 | if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { | 49 | if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { |
| 50 | // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer)) | ||
| 51 | setCurrentLeaderboard(rankings.rankings_singleplayer) | 50 | setCurrentLeaderboard(rankings.rankings_singleplayer) |
| 52 | } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) { | 51 | } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) { |
| 53 | setCurrentLeaderboard(rankings.rankings_multiplayer) | 52 | setCurrentLeaderboard(rankings.rankings_multiplayer) |
diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts index 9cbe793..9844e0c 100644 --- a/frontend/src/utils/Time.ts +++ b/frontend/src/utils/Time.ts | |||
| @@ -1,30 +1,30 @@ | |||
| 1 | export function time_ago(date: any) { | 1 | export function time_ago(date: Date) { |
| 2 | const now = new Date().getTime(); | 2 | const now = new Date().getTime(); |
| 3 | 3 | ||
| 4 | const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)); | 4 | const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)); |
| 5 | const seconds = Math.floor((now - localDate.getTime()) / 1000); | 5 | const seconds = Math.floor((now - localDate.getTime()) / 1000); |
| 6 | 6 | ||
| 7 | let interval = Math.floor(seconds / 31536000); | 7 | let interval = Math.floor(seconds / 31536000); |
| 8 | if (interval === 1) {return interval + " year ago";} | 8 | if (interval === 1) { return interval + " year ago"; } |
| 9 | if (interval > 1) {return interval + " years ago";} | 9 | if (interval > 1) { return interval + " years ago"; } |
| 10 | 10 | ||
| 11 | interval = Math.floor(seconds / 2592000); | 11 | interval = Math.floor(seconds / 2592000); |
| 12 | if (interval === 1) {return interval + " month ago";} | 12 | if (interval === 1) { return interval + " month ago"; } |
| 13 | if (interval > 1) {return interval + " months ago";} | 13 | if (interval > 1) { return interval + " months ago"; } |
| 14 | 14 | ||
| 15 | interval = Math.floor(seconds / 86400); | 15 | interval = Math.floor(seconds / 86400); |
| 16 | if (interval === 1) {return interval + " day ago";} | 16 | if (interval === 1) { return interval + " day ago"; } |
| 17 | if (interval > 1) {return interval + " days ago";} | 17 | if (interval > 1) { return interval + " days ago"; } |
| 18 | 18 | ||
| 19 | interval = Math.floor(seconds / 3600); | 19 | interval = Math.floor(seconds / 3600); |
| 20 | if (interval === 1) {return interval + " hour ago";} | 20 | if (interval === 1) { return interval + " hour ago"; } |
| 21 | if (interval > 1) {return interval + " hours ago";} | 21 | if (interval > 1) { return interval + " hours ago"; } |
| 22 | 22 | ||
| 23 | interval = Math.floor(seconds / 60); | 23 | interval = Math.floor(seconds / 60); |
| 24 | if (interval === 1) {return interval + " minute ago";} | 24 | if (interval === 1) { return interval + " minute ago"; } |
| 25 | if (interval > 1) {return interval + " minutes ago";} | 25 | if (interval > 1) { return interval + " minutes ago"; } |
| 26 | 26 | ||
| 27 | if(seconds < 10) return "just now"; | 27 | if (seconds < 10) return "just now"; |
| 28 | 28 | ||
| 29 | return Math.floor(seconds) + " seconds ago"; | 29 | return Math.floor(seconds) + " seconds ago"; |
| 30 | }; | 30 | }; |