From 188e806427ff6c9b302d994fc9c84a0300526688 Mon Sep 17 00:00:00 2001 From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> Date: Mon, 9 Sep 2024 20:10:16 +0300 Subject: refactor: make names clickable throughout the site, fix user pages --- frontend/src/api/Api.tsx | 12 +++++++++++- frontend/src/components/Discussions.tsx | 9 +++++++-- frontend/src/components/Leaderboards.tsx | 13 ++++++++----- frontend/src/components/RankingEntry.tsx | 2 ++ frontend/src/css/Maps.css | 6 +++--- frontend/src/css/Rankings.css | 8 ++++---- frontend/src/pages/Homepage.tsx | 2 +- frontend/src/pages/Maps.tsx | 1 + frontend/src/pages/User.tsx | 2 +- 9 files changed, 38 insertions(+), 17 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx index 1f77088..30c0ad6 100644 --- a/frontend/src/api/Api.tsx +++ b/frontend/src/api/Api.tsx @@ -145,7 +145,17 @@ const get_map_leaderboard = async (map_id: string): Promise { + if (record.host && record.partner) { + return { ...record, kind: 'multiplayer' }; + } else { + return { ...record, kind: 'singleplayer' }; + } + }); + // should be unreachable + return undefined; }; // MAP DISCUSSIONS diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx index 1cd3523..787104b 100644 --- a/frontend/src/components/Discussions.tsx +++ b/frontend/src/components/Discussions.tsx @@ -5,6 +5,7 @@ import { MapDiscussionCommentContent, MapDiscussionContent } from '../types/Cont import { time_ago } from '../utils/Time'; import { API } from '../api/Api'; import "../css/Maps.css" +import { Link } from 'react-router-dom'; interface DiscussionsProps { data?: MapDiscussions; @@ -88,7 +89,9 @@ const Discussions: React.FC = ({ data, isModerator, mapID, onR
- + + +
{discussionThread.discussion.creator.user_name} {time_ago(new Date(discussionThread.discussion.created_at.replace("T", " ").replace("Z", "")))} @@ -98,7 +101,9 @@ const Discussions: React.FC = ({ data, isModerator, mapID, onR discussionThread.discussion.comments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) .map(e => ( <> - + + +
{e.user.user_name} {time_ago(new Date(e.date.replace("T", " ").replace("Z", "")))} diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index badff37..159f3ed 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { DownloadIcon, ThreedotIcon } from '../images/Images'; import { MapLeaderboard } from '../types/Map'; @@ -70,11 +71,13 @@ const Leaderboards: React.FC = ({ data }) => { {r.kind === "multiplayer" ? (
-   {r.host.user_name} -   {r.partner.user_name} +   {r.host.user_name} +   {r.partner.user_name} +
+ ) : r.kind === "singleplayer" && ( +
+   {r.user.user_name}
- ) : ( -
  {r.user.user_name}
)} {r.score_count} @@ -88,7 +91,7 @@ const Leaderboards: React.FC = ({ data }) => { - ) : ( + ) : r.kind === "singleplayer" && ( diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx index b77bb3d..023a896 100644 --- a/frontend/src/components/RankingEntry.tsx +++ b/frontend/src/components/RankingEntry.tsx @@ -11,8 +11,10 @@ const RankingEntry: React.FC = (curRankingData) => {
{curRankingData.curRankingData.placement}
+ {curRankingData.curRankingData.user.user_name} +
{curRankingData.curRankingData.total_score}
diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css index d38eea5..b69f588 100644 --- a/frontend/src/css/Maps.css +++ b/frontend/src/css/Maps.css @@ -399,7 +399,7 @@ text-align: center; height: 44px; } -.leaderboard-record>div>span>img{ +.leaderboard-record>div>a>span>img{ height: 36px; border-radius: 50px; padding: 0; @@ -410,7 +410,7 @@ text-align: center; grid-template-columns: 50% 50%; place-items: left; } -.leaderboard-record>div>span{ +.leaderboard-record>div>a>span{ display: flex; place-items: center; height: 44px; @@ -611,7 +611,7 @@ text-align: center; } -#discussion-thread>div:nth-child(2)>img{ +#discussion-thread>div:nth-child(2)>a>img{ width: 60px; height: 60px; border-radius: 100px; margin: 20px 0 0 0; diff --git a/frontend/src/css/Rankings.css b/frontend/src/css/Rankings.css index 8e49ef9..edc5a00 100644 --- a/frontend/src/css/Rankings.css +++ b/frontend/src/css/Rankings.css @@ -32,11 +32,11 @@ } .nav-1 div { - width: 65%; + width: 60%; } .nav-2 div { - width: 80%; + width: 75%; } .rankings-leaderboard { @@ -73,12 +73,12 @@ text-align: left; } -.leaderboard-entry div { +.leaderboard-entry div a { display: flex; align-items: center; } -.leaderboard-entry div span { +.leaderboard-entry div a span { margin-left: 5px; } diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx index d4f3095..8e5bb4b 100644 --- a/frontend/src/pages/Homepage.tsx +++ b/frontend/src/pages/Homepage.tsx @@ -10,7 +10,7 @@ const Homepage: React.FC = () => {

lphubWelcome to Least Portals Hub!

At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.

The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.

-

By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About P2LP' pages.

+

By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.

); diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx index 5548650..62fc3cc 100644 --- a/frontend/src/pages/Maps.tsx +++ b/frontend/src/pages/Maps.tsx @@ -39,6 +39,7 @@ const Maps: React.FC = ({ profile, isModerator, onUploadRun }) => { const _fetch_map_leaderboards = async () => { const mapLeaderboards = await API.get_map_leaderboard(mapID); + console.log(mapLeaderboards?.records[0]); setMapLeaderboardData(mapLeaderboards); }; diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx index 1f6d8d0..1605ada 100644 --- a/frontend/src/pages/User.tsx +++ b/frontend/src/pages/User.tsx @@ -79,7 +79,7 @@ const User: React.FC = () => { React.useEffect(() => { _fetch_user(); - }, []); + }, [user]); React.useEffect(() => { if (game !== "0") { -- cgit v1.2.3