refactor: rankings page

3 files changed, 111 insertions, 22 deletions

diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index 023a896..58a6aa6 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,24 +1,46 @@
 import React from 'react';
 import { Link } from "react-router-dom";
-import { RankingType } from '../types/Ranking';
+import { RankingType, SteamRanking, SteamRankingType } from '../types/Ranking';
+
+enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer
+}
 
 interface RankingEntryProps {
-    curRankingData: RankingType;
+    curRankingData: RankingType | SteamRankingType;
+    currentLeaderboardType: RankingCategories
 };
 
-const RankingEntry: React.FC<RankingEntryProps> = (curRankingData) => {
-    return (
-        <div className='leaderboard-entry'>
-            <span>{curRankingData.curRankingData.placement}</span>
-            <div>
-            <Link to={`/users/${curRankingData.curRankingData.user.steam_id}`}>           
-                <img src={curRankingData.curRankingData.user.avatar_link}></img>
-                <span>{curRankingData.curRankingData.user.user_name}</span>
-            </Link>
+const RankingEntry: React.FC<RankingEntryProps> = (prop) => {
+    if ("placement" in prop.curRankingData) {
+        return (
+            <div className='leaderboard-entry'>
+                <span>{prop.curRankingData.placement}</span>
+                <div>
+                <Link to={`/users/${prop.curRankingData.user.steam_id}`}>           
+                    <img src={prop.curRankingData.user.avatar_link}></img>
+                    <span>{prop.curRankingData.user.user_name}</span>
+                </Link>
+                </div>
+                <span>{prop.curRankingData.total_score}</span>
+            </div>
+        )
+    } else {
+        return (
+            <div className='leaderboard-entry'>
+                <span>{prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank}</span>
+                <div>
+                <Link to={`/users/${prop.curRankingData.steam_id}`}>           
+                    <img src={prop.curRankingData.avatar_link}></img>
+                    <span>{prop.curRankingData.user_name}</span>
+                </Link>
+                </div>
+                <span>{prop.curRankingData.overall_score}</span>
             </div>
-            <span>{curRankingData.curRankingData.total_score}</span>
-        </div>
-    )
+        )
+    }
 }
 
 export default RankingEntry;
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>
diff --git a/frontend/src/types/Ranking.tsx b/frontend/src/types/Ranking.tsx
index ad4d8ae..b3b26c6 100644
--- a/frontend/src/types/Ranking.tsx
+++ b/frontend/src/types/Ranking.tsx
@@ -6,8 +6,26 @@ export interface RankingType {
     total_score: number;
 }
 
+export interface SteamRankingType {
+    user_name: string;
+    avatar_link: string;
+    steam_id: string;
+    sp_score: number;
+    mp_score: number;
+    overall_score: number;
+    sp_rank: number;
+    mp_rank: number;
+    overall_rank: number;
+}
+
 export interface Ranking {
     rankings_overall: RankingType[];
     rankings_singleplayer: RankingType[];
     rankings_multiplayer: RankingType[];
+}
+
+export interface SteamRanking {
+    rankings_overall: SteamRankingType[];
+    rankings_singleplayer: SteamRankingType[];
+    rankings_multiplayer: SteamRankingType[];
 }
\ No newline at end of file