aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/pages/Rankings.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages/Rankings.tsx')
-rw-r--r--frontend/src/pages/Rankings.tsx320
1 files changed, 188 insertions, 132 deletions
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..dec0e17 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -2,146 +2,202 @@ import React, { useEffect } from "react";
2import { Helmet } from "react-helmet"; 2import { Helmet } from "react-helmet";
3 3
4import RankingEntry from "@components/RankingEntry"; 4import RankingEntry from "@components/RankingEntry";
5import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking"; 5import {
6 Ranking,
7 SteamRanking,
8 RankingType,
9 SteamRankingType,
10} from "@customTypes/Ranking";
6import { API } from "@api/Api"; 11import { API } from "@api/Api";
7 12
8import "@css/Rankings.css"; 13import "@css/Rankings.css";
9 14
10const Rankings: React.FC = () => { 15enum LeaderboardTypes {
11 const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>(); 16 official,
12 const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>(); 17 unofficial,
13 enum LeaderboardTypes { 18}
14 official,
15 unofficial
16 }
17 const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
18 19
19 const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false); 20enum RankingCategories {
21 rankings_overall,
22 rankings_multiplayer,
23 rankings_singleplayer,
24}
20 25
21 enum RankingCategories { 26const Rankings: React.FC = () => {
22 rankings_overall, 27 const [leaderboardData, setLeaderboardData] = React.useState<
23 rankings_multiplayer, 28 Ranking | SteamRanking
24 rankings_singleplayer 29 >();
30 const [currentLeaderboard, setCurrentLeaderboard] = React.useState<
31 RankingType[] | SteamRankingType[]
32 >();
33 const [currentRankingType, setCurrentRankingType] =
34 React.useState<LeaderboardTypes>(LeaderboardTypes.official);
35
36 const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
37
38 const [currentLeaderboardType, setCurrentLeaderboardType] =
39 React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
40 const [load, setLoad] = React.useState<boolean>(false);
41
42 const _fetch_rankings = React.useCallback(async () => {
43 setLeaderboardLoad(false);
44 const rankings = await API.get_official_rankings();
45 setLeaderboardData(rankings);
46 if (currentLeaderboardType === RankingCategories.rankings_singleplayer) {
47 setCurrentLeaderboard(rankings.rankings_singleplayer);
48 } else if (
49 currentLeaderboardType === RankingCategories.rankings_multiplayer
50 ) {
51 setCurrentLeaderboard(rankings.rankings_multiplayer);
52 } else {
53 setCurrentLeaderboard(rankings.rankings_overall);
25 } 54 }
26 const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer); 55 setLoad(true);
27 const [load, setLoad] = React.useState<boolean>(false); 56 setLeaderboardLoad(true);
28 57 }, [currentLeaderboardType]);
29 const _fetch_rankings = async () => { 58
30 setLeaderboardLoad(false); 59 const __dev_fetch_unofficial_rankings = async () => {
31 const rankings = await API.get_official_rankings(); 60 try {
32 setLeaderboardData(rankings); 61 setLeaderboardLoad(false);
33 if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { 62 const rankings = await API.get_unofficial_rankings();
34 setCurrentLeaderboard(rankings.rankings_singleplayer) 63 setLeaderboardData(rankings);
35 } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) { 64 if (currentLeaderboardType === RankingCategories.rankings_singleplayer) {
36 setCurrentLeaderboard(rankings.rankings_multiplayer) 65 // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
37 } else { 66 setCurrentLeaderboard(rankings.rankings_singleplayer);
38 setCurrentLeaderboard(rankings.rankings_overall) 67 } else if (
39 } 68 currentLeaderboardType === RankingCategories.rankings_multiplayer
40 setLoad(true); 69 ) {
41 setLeaderboardLoad(true); 70 setCurrentLeaderboard(rankings.rankings_multiplayer);
71 } else {
72 setCurrentLeaderboard(rankings.rankings_overall);
73 }
74 setLeaderboardLoad(true);
75 } catch (e) {
76 console.log(e);
42 } 77 }
43 78 };
44 const __dev_fetch_unofficial_rankings = async () => { 79
45 try { 80 const _set_current_leaderboard = React.useCallback(
46 setLeaderboardLoad(false); 81 (ranking_cat: RankingCategories) => {
47 const rankings = await API.get_unofficial_rankings(); 82 if (ranking_cat === RankingCategories.rankings_singleplayer) {
48 setLeaderboardData(rankings); 83 setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
49 if (currentLeaderboardType == RankingCategories.rankings_singleplayer) { 84 } else if (ranking_cat === RankingCategories.rankings_multiplayer) {
50 // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer)) 85 setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
51 setCurrentLeaderboard(rankings.rankings_singleplayer) 86 } else {
52 } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) { 87 setCurrentLeaderboard(leaderboardData!.rankings_overall);
53 setCurrentLeaderboard(rankings.rankings_multiplayer) 88 }
54 } else { 89
55 setCurrentLeaderboard(rankings.rankings_overall) 90 setCurrentLeaderboardType(ranking_cat);
91 },
92 [leaderboardData]
93 );
94
95 // unused func
96 // const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
97 // if (leaderboard_type === LeaderboardTypes.official) {
98 // _fetch_rankings();
99 // } else {
100 // }
101 // };
102
103 useEffect(() => {
104 _fetch_rankings();
105 }, [_fetch_rankings]);
106
107 return (
108 <main className="*:text-foreground">
109 <Helmet>
110 <title>LPHUB | Rankings</title>
111 </Helmet>
112 <section className="nav-container nav-1">
113 <div>
114 <button
115 onClick={() => {
116 _fetch_rankings();
117 setCurrentRankingType(LeaderboardTypes.official);
118 }}
119 className={`nav-1-btn ${currentRankingType === LeaderboardTypes.official ? "selected" : ""}`}
120 >
121 <span>Official (LPHUB)</span>
122 </button>
123 <button
124 onClick={() => {
125 __dev_fetch_unofficial_rankings();
126 setCurrentRankingType(LeaderboardTypes.unofficial);
127 }}
128 className={`nav-1-btn ${currentRankingType === LeaderboardTypes.unofficial ? "selected" : ""}`}
129 >
130 <span>Unofficial (Steam)</span>
131 </button>
132 </div>
133 </section>
134 <section className="nav-container nav-2">
135 <div>
136 <button
137 onClick={() =>
138 _set_current_leaderboard(RankingCategories.rankings_singleplayer)
56 } 139 }
57 setLeaderboardLoad(true); 140 className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_singleplayer ? "selected" : ""}`}
58 } catch (e) { 141 >
59 console.log(e) 142 <span>Singleplayer</span>
60 } 143 </button>
61 } 144 <button
62 145 onClick={() =>
63 const _set_current_leaderboard = (ranking_cat: RankingCategories) => { 146 _set_current_leaderboard(RankingCategories.rankings_multiplayer)
64 if (ranking_cat == RankingCategories.rankings_singleplayer) { 147 }
65 setCurrentLeaderboard(leaderboardData!.rankings_singleplayer); 148 className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_multiplayer ? "selected" : ""}`}
66 } else if (ranking_cat == RankingCategories.rankings_multiplayer) { 149 >
67 setCurrentLeaderboard(leaderboardData!.rankings_multiplayer); 150 <span>Cooperative</span>
68 } else { 151 </button>
69 setCurrentLeaderboard(leaderboardData!.rankings_overall); 152 <button
70 } 153 onClick={() =>
71 154 _set_current_leaderboard(RankingCategories.rankings_overall)
72 setCurrentLeaderboardType(ranking_cat); 155 }
73 } 156 className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_overall ? "selected" : ""}`}
74 157 >
75 const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => { 158 <span>Overall</span>
76 if (leaderboard_type == LeaderboardTypes.official) { 159 </button>
77 _fetch_rankings(); 160 </div>
78 } else { 161 </section>
79 162
80 } 163 {load ? (
81 } 164 <section className="rankings-leaderboard">
82 165 <div className="ranks-container">
83 useEffect(() => { 166 <div className="leaderboard-entry header">
84 _fetch_rankings(); 167 <span>Rank</span>
85 if (load) { 168 <span>Player</span>
86 _set_current_leaderboard(RankingCategories.rankings_singleplayer); 169 <span>Portals</span>
87 } 170 </div>
88 }, [load]) 171
89 172 <div className="splitter"></div>
90 return ( 173
91 <main> 174 {leaderboardLoad &&
92 <Helmet> 175 currentLeaderboard?.map((curRankingData, i) => {
93 <title>LPHUB | Rankings</title> 176 return (
94 </Helmet> 177 <RankingEntry
95 <section className="nav-container nav-1"> 178 currentLeaderboardType={currentLeaderboardType}
96 <div> 179 curRankingData={curRankingData}
97 <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}> 180 key={i}
98 <span>Official (LPHUB)</span> 181 ></RankingEntry>
99 </button> 182 );
100 <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}> 183 })}
101 <span>Unofficial (Steam)</span> 184
102 </button> 185 {leaderboardLoad ? null : (
103 </div> 186 <div
104 </section> 187 style={{
105 <section className="nav-container nav-2"> 188 display: "flex",
106 <div> 189 justifyContent: "center",
107 <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}> 190 margin: "30px 0px",
108 <span>Singleplayer</span> 191 }}
109 </button> 192 >
110 <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}> 193 <span className="loader"></span>
111 <span>Cooperative</span> 194 </div>
112 </button> 195 )}
113 <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}> 196 </div>
114 <span>Overall</span> 197 </section>
115 </button> 198 ) : null}
116 </div> 199 </main>
117 </section> 200 );
118 201};
119 {load ?
120 <section className="rankings-leaderboard">
121 <div className="ranks-container">
122 <div className="leaderboard-entry header">
123 <span>Rank</span>
124 <span>Player</span>
125 <span>Portals</span>
126 </div>
127
128 <div className="splitter"></div>
129
130 {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
131 return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
132 })
133 }
134
135 {leaderboardLoad ? null :
136 <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
137 <span className="loader"></span>
138 </div>
139 }
140 </div>
141 </section>
142 : null}
143 </main>
144 )
145}
146 202
147export default Rankings; 203export default Rankings;
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 19:20:19 +0000