From cfd377e29c0fa6f10c4d6bf3f507de4ca2f0b10a Mon Sep 17 00:00:00 2001 From: FifthWit Date: Thu, 14 Aug 2025 15:44:50 -0500 Subject: Mobile Design looking decent --- frontend/src/App.css | 16 - frontend/src/components/Leaderboards.tsx | 2 +- frontend/src/components/Summary.tsx | 10 +- frontend/src/pages/About.tsx | 4 +- frontend/src/pages/Games.tsx | 2 +- frontend/src/pages/Homepage.tsx | 2 +- frontend/src/pages/Maplist.tsx | 271 +++++++------ frontend/src/pages/Maps.tsx | 39 +- frontend/src/pages/Rankings.tsx | 32 +- frontend/src/pages/Rules.tsx | 2 +- frontend/src/pages/User.tsx | 627 ++++++++++++------------------- 11 files changed, 410 insertions(+), 597 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/App.css b/frontend/src/App.css index a4c058b..464b759 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -49,22 +49,6 @@ --font-barlow-semicondensed-semibold: 'BarlowSemiCondensed-SemiBold'; } -main { - overflow: auto; - overflow-x: hidden; - position: relative; - - width: calc(100% - 380px); - height: 100vh; - left: 350px; - - padding-right: 30px; - - font-size: 40px; - font-family: var(--font-barlow-semicondensed-regular); - color: var(--color-text); - -} a { color: inherit; diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index 99481a2..1de9b08 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx @@ -51,7 +51,7 @@ const Leaderboards: React.FC = ({ mapID }) => { } return ( -
+
{MessageDialogComponent}
= ({ return ( <> -
+
= ({
- Difficulty - {data.summary.routes[selectedRun].rating === 0 && N/A} + Difficulty + {data.summary.routes[selectedRun].rating === 0 && N/A} {data.summary.routes[selectedRun].rating === 1 && ( Very easy )} @@ -255,9 +255,9 @@ const Summary: React.FC = ({ ) : ( "" )} -

Route Description

+

Route Description

- + {data.summary.routes[selectedRun].description} diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index a5bb291..7802d75 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -24,11 +24,11 @@ const About: React.FC = () => { }, []); return ( -
+
LPHUB | About - {aboutText} + {aboutText}
); }; diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx index 1ef0f57..8587635 100644 --- a/frontend/src/pages/Games.tsx +++ b/frontend/src/pages/Games.tsx @@ -10,7 +10,7 @@ interface GamesProps { const Games: React.FC = ({ games }) => { return ( -
+
LPHUB | Games diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx index 2d16b8d..b4ac3b0 100644 --- a/frontend/src/pages/Homepage.tsx +++ b/frontend/src/pages/Homepage.tsx @@ -3,7 +3,7 @@ import { Helmet } from "react-helmet"; const Homepage: React.FC = () => { return ( -
+
LPHUB | Homepage diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx index 8343129..2f0491e 100644 --- a/frontend/src/pages/Maplist.tsx +++ b/frontend/src/pages/Maplist.tsx @@ -87,161 +87,160 @@ const Maplist: React.FC = () => { }, [gameChapters, location.search]); return ( -
+
- LPHUB | Maplist + LPHUB | Maplist
- - - + + +
{load ? ( -
+
) : ( -
-

- {game?.name} -

+
+

+ {game?.name} +

+ +
+
+
+

+ { + game?.category_portals.find( + obj => obj.category.id === catNum + 1 + )?.portal_count + } +

+

+ portals +

+
+ +
+ {game?.category_portals.map((cat, index) => ( + + ))} +
+
+
+
+
+
+ + {curChapter?.chapter.name.split(" - ")[0]} + +
+
+ + {curChapter?.chapter.name.split(" - ")[1]} + + +
+ \
-
-
-

- { - game?.category_portals.find( - obj => obj.category.id === catNum + 1 - )?.portal_count - } -

-

- portals -

-
- -
- {game?.category_portals.map((cat, index) => ( - - ))} -
+ {gameChapters?.chapters.map((chapter, i) => { + return ( +
{ + _fetch_chapters(chapter.id.toString()); + _handle_dropdown_click(); + }} + > + {chapter.name}
+ ); + })}
+
-
-
-
- - {curChapter?.chapter.name.split(" - ")[0]} - -
-
+ {curChapter?.maps.map((map, i) => { + return ( +
+ + + {map.name} + +
- - {curChapter?.chapter.name.split(" - ")[1]} +
+ + {map.is_disabled + ? map.category_portals[0].portal_count + : map.category_portals.find( + obj => obj.category.id === catNum + 1 + )?.portal_count} + + + portals -
- \ -
- {gameChapters?.chapters.map((chapter, i) => { - return ( -
{ - _fetch_chapters(chapter.id.toString()); - _handle_dropdown_click(); - }} - > - {chapter.name} -
- ); - })}
-
- -
- {curChapter?.maps.map((map, i) => { - return ( -
- - - {map.name} - -
-
- - {map.is_disabled - ? map.category_portals[0].portal_count - : map.category_portals.find( - obj => obj.category.id === catNum + 1 - )?.portal_count} - - - portals - -
-
- - {/* Difficulty rating */} -
-
- {[1, 2, 3, 4, 5].map((point) => ( -
- ))} -
-
- -
- ); - })} -
-
+ +
+
+ {[1, 2, 3, 4, 5].map((point) => ( +
+ ))} +
+
+ +
+ ); + })}
+
+
)} ); diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx index 75753ac..50fe03b 100644 --- a/frontend/src/pages/Maps.tsx +++ b/frontend/src/pages/Maps.tsx @@ -64,37 +64,36 @@ const Maps: React.FC = ({ token, isModerator }) => { // loading placeholder return ( <> -
+
-
+
-
+
); @@ -118,47 +117,45 @@ const Maps: React.FC = ({ token, isModerator }) => {
-
+

- + {mapSummaryData.map.map_name}
-
+
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx index 275f9d0..dec0e17 100644 --- a/frontend/src/pages/Rankings.tsx +++ b/frontend/src/pages/Rankings.tsx @@ -12,6 +12,17 @@ import { API } from "@api/Api"; import "@css/Rankings.css"; +enum LeaderboardTypes { + official, + unofficial, +} + +enum RankingCategories { + rankings_overall, + rankings_multiplayer, + rankings_singleplayer, +} + const Rankings: React.FC = () => { const [leaderboardData, setLeaderboardData] = React.useState< Ranking | SteamRanking @@ -19,20 +30,11 @@ const Rankings: React.FC = () => { const [currentLeaderboard, setCurrentLeaderboard] = React.useState< RankingType[] | SteamRankingType[] >(); - enum LeaderboardTypes { - official, - unofficial, - } const [currentRankingType, setCurrentRankingType] = React.useState(LeaderboardTypes.official); const [leaderboardLoad, setLeaderboardLoad] = React.useState(false); - enum RankingCategories { - rankings_overall, - rankings_multiplayer, - rankings_singleplayer, - } const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState(RankingCategories.rankings_singleplayer); const [load, setLoad] = React.useState(false); @@ -100,18 +102,10 @@ const Rankings: React.FC = () => { useEffect(() => { _fetch_rankings(); - if (load) { - _set_current_leaderboard(RankingCategories.rankings_singleplayer); - } - }, [ - load, - RankingCategories.rankings_singleplayer, - _fetch_rankings, - _set_current_leaderboard, - ]); + }, [_fetch_rankings]); return ( -
+
LPHUB | Rankings diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx index 7cdc08b..9c7885c 100644 --- a/frontend/src/pages/Rules.tsx +++ b/frontend/src/pages/Rules.tsx @@ -25,7 +25,7 @@ const Rules: React.FC = () => { }, []); return ( -
+
LPHUB | Rules diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx index 4b8a456..8c699b1 100644 --- a/frontend/src/pages/User.tsx +++ b/frontend/src/pages/User.tsx @@ -97,473 +97,312 @@ const User: React.FC = ({ token, profile, gameData }) => { }, [user, game, chapter, location, _get_game_maps]); if (!user) { - return <>; + return ( +
+ Loading... +
+ ); } return ( -
+
LPHUB | {user.user_name} + {MessageDialogComponent} -
-
- profile-image -
-
+ +
+
+ Profile
-
{user.user_name}
-
- {user.country_code === "XX" ? ( - "" - ) : ( +

+ {user.user_name} +

+ {user.country_code !== "XX" && ( +
{user.country_code} - )} -
-
- {user.titles.map(e => ( + {user.country_code} +
+ )} +
+ {user.titles.map((title, index) => ( - {e.name} + {title.name} ))}
-
- {user.links.steam === "-" ? ( - "" - ) : ( - - Steam +
+ {user.links.steam !== "-" && ( + + Steam )} - {user.links.twitch === "-" ? ( - "" - ) : ( - - Twitch + {user.links.twitch !== "-" && ( + + Twitch )} - {user.links.youtube === "-" ? ( - "" - ) : ( - - Youtube + {user.links.youtube !== "-" && ( + + YouTube )} - {user.links.p2sr === "-" ? ( - "" - ) : ( - - P2SR + {user.links.p2sr !== "-" && ( + + P2SR )}
-
-
- Overall - - {user.rankings.overall.rank === 0 - ? "N/A " - : "#" + user.rankings.overall.rank + " "} - - ({user.rankings.overall.completion_count}/ - {user.rankings.overall.completion_total}) - - + +
+
+
Overall
+
+ {user.rankings.overall.rank === 0 ? "N/A" : `#${user.rankings.overall.rank}`} +
+
+ {user.rankings.overall.completion_count}/{user.rankings.overall.completion_total} +
-
- Singleplayer - - {user.rankings.singleplayer.rank === 0 - ? "N/A " - : "#" + user.rankings.singleplayer.rank + " "} - - ({user.rankings.singleplayer.completion_count}/ - {user.rankings.singleplayer.completion_total}) - - +
+
Singleplayer
+
+ {user.rankings.singleplayer.rank === 0 ? "N/A" : `#${user.rankings.singleplayer.rank}`} +
+
+ {user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total} +
-
- Cooperative - - {user.rankings.cooperative.rank === 0 - ? "N/A " - : "#" + user.rankings.cooperative.rank + " "} - - ({user.rankings.cooperative.completion_count}/ - {user.rankings.cooperative.completion_total}) - - +
+
Cooperative
+
+ {user.rankings.cooperative.rank === 0 ? "N/A" : `#${user.rankings.cooperative.rank}`} +
+
+ {user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total} +
-
- -
-
-
- {gameData === null ? ( - - ) : ( + {navState === 0 && ( +
+
- )} - {game === "0" ? ( - - ) : chapterData === null ? ( - - ) : ( - )} -
-
- - Map Name - - - - Portals - - - - WRΔ - - - - Time - - - - - Rank - - - - Date - - -
-
+
+ +
+
+ Map Name + Sort +
+
+ Portals + Sort +
+
+ WRΔ + Sort +
+
+ Time + Sort +
+
+
+ Rank + Sort +
+
+ Date + Sort +
+
- - {pageNumber}/{pageMax} - + {pageNumber}/{pageMax}
-
-
-
- {game === "0" ? ( - user.records - .sort((a, b) => a.map_id - b.map_id) - .map((r, index) => - Math.ceil((index + 1) / 20) === pageNumber ? ( - - + + {record.scores.length > 1 && ( + - {i === 0 && r.scores.length > 1 ? ( - - ) : ( - "" - )} - - - ))} - - ) : ( - "" + )} +
+
+ ) : null ) - ) - ) : maps ? ( - maps - .filter(e => e.is_disabled === false) - .sort((a, b) => a.id - b.id) - .map((r, index) => { - if (Math.ceil((index + 1) / 20) === pageNumber) { - let record = user.records.find(e => e.map_id === r.id); - return record === undefined ? ( - - ) : ( - - {i === 0 && record!.scores.length > 1 ? ( - - ) : ( - "" )} - - - ))} - + + )} +
+
); - } else { - return null; - } - }) - ) : ( - <>{console.warn(maps)} - )} -
-
+ }) + )} +
+ + )} ); }; -- cgit v1.2.3