From fa0856cedd846d82bcbd3f54dd491419b2c41910 Mon Sep 17 00:00:00 2001 From: Wolfboy248 Date: Mon, 16 Sep 2024 18:13:12 +0200 Subject: refactor: rankings page --- frontend/src/components/RankingEntry.tsx | 50 +++++++++++++++++------- frontend/src/pages/Rankings.tsx | 65 ++++++++++++++++++++++++++++---- frontend/src/types/Ranking.tsx | 18 +++++++++ 3 files changed, 111 insertions(+), 22 deletions(-) (limited to 'frontend/src') 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 = (curRankingData) => { - return ( -
- {curRankingData.curRankingData.placement} -
- - - {curRankingData.curRankingData.user.user_name} - +const RankingEntry: React.FC = (prop) => { + if ("placement" in prop.curRankingData) { + return ( +
+ {prop.curRankingData.placement} +
+ + + {prop.curRankingData.user.user_name} + +
+ {prop.curRankingData.total_score} +
+ ) + } else { + return ( +
+ {prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank} +
+ + + {prop.curRankingData.user_name} + +
+ {prop.curRankingData.overall_score}
- {curRankingData.curRankingData.total_score} -
- ) + ) + } } 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(); - const [currentLeaderboardCat, setCurrentLeaderboardCat] = React.useState(); - const [currentLeaderboard, setCurrentLeaderboard] = React.useState(); - const [load, setLoad] = React.useState(false); + const [leaderboardData, setLeaderboardData] = React.useState(); + const [currentLeaderboard, setCurrentLeaderboard] = React.useState(); + enum LeaderboardTypes { + official, + unofficial + } enum RankingCategories { rankings_overall, rankings_multiplayer, rankings_singleplayer } + const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState(RankingCategories.rankings_singleplayer); + const [load, setLoad] = React.useState(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 = () => {
- -
@@ -79,7 +128,7 @@ const Rankings: React.FC = () => {
{currentLeaderboard?.map((curRankingData, i) => { - return + return }) }
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 -- cgit v1.2.3