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