1 files changed, 124 insertions, 124 deletions
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..12dcab4 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -8,140 +8,140 @@ import { API } from "@api/Api";
 import "@css/Rankings.css";
 const Rankings: React.FC = () => {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
+  const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
+  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
-    enum LeaderboardTypes {
+  enum LeaderboardTypes {
-        official,
+    official,
-        unofficial
+    unofficial
+  }
+  const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+  enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer
+  }
+  const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  const [load, setLoad] = React.useState<boolean>(false);
+  const _fetch_rankings = async () => {
+    setLeaderboardLoad(false);
+    const rankings = await API.get_official_rankings();
+    setLeaderboardData(rankings);
+    if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(rankings.rankings_singleplayer)
+    } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+      setCurrentLeaderboard(rankings.rankings_multiplayer)
+    } else {
+      setCurrentLeaderboard(rankings.rankings_overall)
    }
-    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+    setLoad(true);
+    setLeaderboardLoad(true);
-    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+  }
-    enum RankingCategories {
+  const __dev_fetch_unofficial_rankings = async () => {
-        rankings_overall,
+    try {
-        rankings_multiplayer,
+      setLeaderboardLoad(false);
-        rankings_singleplayer
+      const rankings = await API.get_unofficial_rankings();
+      setLeaderboardData(rankings);
+      if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+        setCurrentLeaderboard(rankings.rankings_singleplayer)
+      } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+        setCurrentLeaderboard(rankings.rankings_multiplayer)
+      } else {
+        setCurrentLeaderboard(rankings.rankings_overall)
+      }
+      setLeaderboardLoad(true);
+    } catch (e) {
+      console.log(e)
    }
-    const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  }
-    const [load, setLoad] = React.useState<boolean>(false);
+  const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
-    const _fetch_rankings = async () => {
+    if (ranking_cat == RankingCategories.rankings_singleplayer) {
-        setLeaderboardLoad(false);
+      setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-        const rankings = await API.get_official_rankings();
+    } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
-        setLeaderboardData(rankings);
+      setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-        if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+    } else {
-            setCurrentLeaderboard(rankings.rankings_singleplayer)
+      setCurrentLeaderboard(leaderboardData!.rankings_overall);
-        } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(rankings.rankings_multiplayer)
-        } else {
-            setCurrentLeaderboard(rankings.rankings_overall)
-        }
-        setLoad(true);
-        setLeaderboardLoad(true);
    }
-    const __dev_fetch_unofficial_rankings = async () => {
+    setCurrentLeaderboardType(ranking_cat);
-        try {
+  }
-            setLeaderboardLoad(false);
-            const rankings = await API.get_unofficial_rankings();
-            setLeaderboardData(rankings);
-            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
-                setCurrentLeaderboard(rankings.rankings_singleplayer)
-            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-                setCurrentLeaderboard(rankings.rankings_multiplayer)
-            } else {
-                setCurrentLeaderboard(rankings.rankings_overall)
-            }
-            setLeaderboardLoad(true);
-        } catch (e) {
-            console.log(e)
-        }
-    }
-    const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
+  const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
-        if (ranking_cat == RankingCategories.rankings_singleplayer) {
+    if (leaderboard_type == LeaderboardTypes.official) {
-            setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
+      _fetch_rankings();
-        } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
+    } else {
-            setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-        } else {
-            setCurrentLeaderboard(leaderboardData!.rankings_overall);
-        }
-        setCurrentLeaderboardType(ranking_cat);
    }
+  }
-    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+  useEffect(() => {
-        if (leaderboard_type == LeaderboardTypes.official) {
+    _fetch_rankings();
-            _fetch_rankings();
+    if (load) {
-        } else {
+      _set_current_leaderboard(RankingCategories.rankings_singleplayer);
-        }
    }
+  }, [load])
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Rankings</title>
+      </Helmet>
+      <section className="nav-container nav-1">
+        <div>
+          <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
+            <span>Official (LPHUB)</span>
+          </button>
+          <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+            <span>Unofficial (Steam)</span>
+          </button>
+        </div>
+      </section>
+      <section className="nav-container nav-2">
+        <div>
+          <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
+            <span>Singleplayer</span>
+          </button>
+          <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
+            <span>Cooperative</span>
+          </button>
+          <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
+            <span>Overall</span>
+          </button>
+        </div>
+      </section>
+      {load ?
+        <section className="rankings-leaderboard">
+          <div className="ranks-container">
+            <div className="leaderboard-entry header">
+              <span>Rank</span>
+              <span>Player</span>
+              <span>Portals</span>
+            </div>
+            <div className="splitter"></div>
+            {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
+              return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
+            })
+            }
-    useEffect(() => {
+            {leaderboardLoad ? null :
-        _fetch_rankings();
+              <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
-        if (load) {
+                <span className="loader"></span>
-            _set_current_leaderboard(RankingCategories.rankings_singleplayer);
+              </div>
-        }
+            }
-    }, [load])
+          </div>
+        </section>
-    return (
+        : null}
-        <main>
+    </main>
-            <Helmet>
+  )
-                <title>LPHUB | Rankings</title>
-            </Helmet>
-            <section className="nav-container nav-1">
-                <div>
-                    <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
-                        <span>Official (LPHUB)</span>
-                    </button>
-                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
-                        <span>Unofficial (Steam)</span>
-                    </button>
-                </div>
-            </section>
-            <section className="nav-container nav-2">
-                <div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
-                        <span>Singleplayer</span>
-                    </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
-                        <span>Cooperative</span>
-                    </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
-                        <span>Overall</span>
-                    </button>
-                </div>
-            </section>
-            {load ?
-                <section className="rankings-leaderboard">
-                    <div className="ranks-container">
-                        <div className="leaderboard-entry header">
-                            <span>Rank</span>
-                            <span>Player</span>
-                            <span>Portals</span>
-                        </div>
-                        <div className="splitter"></div>
-                        {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
-                            return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
-                        })
-                        }
-                        {leaderboardLoad ? null :
-                            <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
-                                <span className="loader"></span>
-                            </div>
-                        }
-                    </div>
-                </section>
-                : null}
-        </main>
-    )
 }
 export default Rankings;

diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx index 71aa427..12dcab4 100644 --- a/frontend/src/pages/Rankings.tsx +++ b/frontend/src/pages/Rankings.tsx
@@ -8,140 +8,140 @@ import { API } from "@api/Api";
8	import "@css/Rankings.css";	8	import "@css/Rankings.css";
9		9
10	const Rankings: React.FC = () => {	10	const Rankings: React.FC = () => {
11	const [leaderboardData, setLeaderboardData] = React.useState<Ranking \| SteamRanking>();	11	const [leaderboardData, setLeaderboardData] = React.useState<Ranking \| SteamRanking>();
12	const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] \| SteamRankingType[]>();	12	const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] \| SteamRankingType[]>();
13	enum LeaderboardTypes {	13	enum LeaderboardTypes {
14	official,	14	official,
15	unofficial	15	unofficial
		16	}
		17	const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
		18
		19	const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
		20
		21	enum RankingCategories {
		22	rankings_overall,
		23	rankings_multiplayer,
		24	rankings_singleplayer
		25	}
		26	const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
		27	const [load, setLoad] = React.useState<boolean>(false);
		28
		29	const _fetch_rankings = async () => {
		30	setLeaderboardLoad(false);
		31	const rankings = await API.get_official_rankings();
		32	setLeaderboardData(rankings);
		33	if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
		34	setCurrentLeaderboard(rankings.rankings_singleplayer)
		35	} else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
		36	setCurrentLeaderboard(rankings.rankings_multiplayer)
		37	} else {
		38	setCurrentLeaderboard(rankings.rankings_overall)
16	}	39	}
17	const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);	40	setLoad(true);
18		41	setLeaderboardLoad(true);
19	const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);	42	}
20		43
21	enum RankingCategories {	44	const __dev_fetch_unofficial_rankings = async () => {
22	rankings_overall,	45	try {
23	rankings_multiplayer,	46	setLeaderboardLoad(false);
24	rankings_singleplayer	47	const rankings = await API.get_unofficial_rankings();
		48	setLeaderboardData(rankings);
		49	if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
		50	// console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
		51	setCurrentLeaderboard(rankings.rankings_singleplayer)
		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)
25	}	60	}
26	const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);	61	}
27	const [load, setLoad] = React.useState<boolean>(false);	62
28		63	const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
29	const _fetch_rankings = async () => {	64	if (ranking_cat == RankingCategories.rankings_singleplayer) {
30	setLeaderboardLoad(false);	65	setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
31	const rankings = await API.get_official_rankings();	66	} else if (ranking_cat == RankingCategories.rankings_multiplayer) {
32	setLeaderboardData(rankings);	67	setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
33	if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {	68	} else {
34	setCurrentLeaderboard(rankings.rankings_singleplayer)	69	setCurrentLeaderboard(leaderboardData!.rankings_overall);
35	} else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
36	setCurrentLeaderboard(rankings.rankings_multiplayer)
37	} else {
38	setCurrentLeaderboard(rankings.rankings_overall)
39	}
40	setLoad(true);
41	setLeaderboardLoad(true);
42	}	70	}
43		71
44	const __dev_fetch_unofficial_rankings = async () => {	72	setCurrentLeaderboardType(ranking_cat);
45	try {	73	}
46	setLeaderboardLoad(false);
47	const rankings = await API.get_unofficial_rankings();
48	setLeaderboardData(rankings);
49	if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
50	// console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
51	setCurrentLeaderboard(rankings.rankings_singleplayer)
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	}
62		74
63	const _set_current_leaderboard = (ranking_cat: RankingCategories) => {	75	const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
64	if (ranking_cat == RankingCategories.rankings_singleplayer) {	76	if (leaderboard_type == LeaderboardTypes.official) {
65	setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);	77	_fetch_rankings();
66	} else if (ranking_cat == RankingCategories.rankings_multiplayer) {	78	} else {
67	setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
68	} else {
69	setCurrentLeaderboard(leaderboardData!.rankings_overall);
70	}
71		79
72	setCurrentLeaderboardType(ranking_cat);
73	}	80	}
		81	}
74		82
75	const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {	83	useEffect(() => {
76	if (leaderboard_type == LeaderboardTypes.official) {	84	_fetch_rankings();
77	_fetch_rankings();	85	if (load) {
78	} else {	86	_set_current_leaderboard(RankingCategories.rankings_singleplayer);
79
80	}
81	}	87	}
		88	}, [load])
		89
		90	return (
		91	<main>
		92	<Helmet>
		93	<title>LPHUB \| Rankings</title>
		94	</Helmet>
		95	<section className="nav-container nav-1">
		96	<div>
		97	<button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
		98	<span>Official (LPHUB)</span>
		99	</button>
		100	<button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
		101	<span>Unofficial (Steam)</span>
		102	</button>
		103	</div>
		104	</section>
		105	<section className="nav-container nav-2">
		106	<div>
		107	<button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
		108	<span>Singleplayer</span>
		109	</button>
		110	<button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
		111	<span>Cooperative</span>
		112	</button>
		113	<button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
		114	<span>Overall</span>
		115	</button>
		116	</div>
		117	</section>
		118
		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	}
82		134
83	useEffect(() => {	135	{leaderboardLoad ? null :
84	_fetch_rankings();	136	<div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
85	if (load) {	137	<span className="loader"></span>
86	_set_current_leaderboard(RankingCategories.rankings_singleplayer);	138	</div>
87	}	139	}
88	}, [load])	140	</div>
89		141	</section>
90	return (	142	: null}
91	<main>	143	</main>
92	<Helmet>	144	)
93	<title>LPHUB \| Rankings</title>
94	</Helmet>
95	<section className="nav-container nav-1">
96	<div>
97	<button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
98	<span>Official (LPHUB)</span>
99	</button>
100	<button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
101	<span>Unofficial (Steam)</span>
102	</button>
103	</div>
104	</section>
105	<section className="nav-container nav-2">
106	<div>
107	<button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
108	<span>Singleplayer</span>
109	</button>
110	<button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
111	<span>Cooperative</span>
112	</button>
113	<button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
114	<span>Overall</span>
115	</button>
116	</div>
117	</section>
118
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	}	145	}
146		146
147	export default Rankings;	147	export default Rankings;