1 files changed, 57 insertions, 8 deletions

diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 377222f..6dbf3d3 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -1,29 +1,68 @@
 import React, { useEffect } from "react";
 
 import RankingEntry from "../components/RankingEntry";
-import { Ranking, RankingType } from "../types/Ranking";
+import { Ranking, SteamRanking, RankingType, SteamRankingType } from "../types/Ranking";
 import { API } from "../api/Api";
 
 import "../css/Rankings.css";
 
 const Rankings: React.FC = () => {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking>();
-    const [currentLeaderboardCat, setCurrentLeaderboardCat] = React.useState<RankingCategories>();
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[]>();
-    const [load, setLoad] = React.useState<boolean>(false);
+    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
+    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
+    enum LeaderboardTypes {
+        official,
+        unofficial
+    }
 
     enum RankingCategories {
         rankings_overall,
         rankings_multiplayer,
         rankings_singleplayer
     }
+    const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+    const [load, setLoad] = React.useState<boolean>(false);
+
+    interface ResponseSTUPID {
+        success: boolean;
+        message: string;
+        data: SteamRanking;
+    }
 
     const _fetch_rankings = async () => {
         const rankings = await API.get_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)
+        }
         setLoad(true);
     }
 
+    const __dev_fetch_unofficial_rankings = async () => {
+        try {
+            const response = await fetch("/response.json");
+            const result: ResponseSTUPID = await response.json();
+
+            if (result.success) {
+                const unofficialRanking: SteamRanking = result.data;
+                setLeaderboardData(unofficialRanking);
+                if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+                    // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+                    setCurrentLeaderboard(unofficialRanking.rankings_singleplayer)
+                } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+                    setCurrentLeaderboard(unofficialRanking.rankings_multiplayer)
+                } else {
+                    setCurrentLeaderboard(unofficialRanking.rankings_overall)
+                }
+            }
+        } catch (e) {
+            console.log(e)
+        }
+    }
+
     const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
         if (ranking_cat == RankingCategories.rankings_singleplayer) {
             setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
@@ -32,6 +71,16 @@ const Rankings: React.FC = () => {
         } else {
             setCurrentLeaderboard(leaderboardData!.rankings_overall);
         }
+
+        setCurrentLeaderboardType(ranking_cat);
+    }
+
+    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+        if (leaderboard_type == LeaderboardTypes.official) {
+            _fetch_rankings();
+        } else {
+            
+        }
     }
 
     useEffect(() => {
@@ -45,10 +94,10 @@ const Rankings: React.FC = () => {
         <main>
             <section className="nav-container nav-1">
                 <div>
-                    <button className="nav-1-btn">
+                    <button onClick={() => _fetch_rankings()} className="nav-1-btn">
                         <span>Official (LPHUB)</span>
                     </button>
-                    <button className="nav-1-btn">
+                    <button onClick={() => __dev_fetch_unofficial_rankings()} className="nav-1-btn">
                         <span>Unofficial (Steam)</span>
                     </button>
                 </div>
@@ -79,7 +128,7 @@ const Rankings: React.FC = () => {
                     <div className="splitter"></div>
 
                     {currentLeaderboard?.map((curRankingData, i) => {
-                        return <RankingEntry curRankingData={curRankingData} key={i}></RankingEntry>
+                        return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
                     })
                     }
                 </div>