frontend/src/components/RankingEntry.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

import React from 'react';
import { Link } from 'react-router-dom';
import { RankingType, SteamRankingType } from '@customTypes/Ranking';

enum RankingCategories {
  rankings_overall,
  rankings_multiplayer,
  rankings_singleplayer,
}

interface RankingEntryProps {
  curRankingData: RankingType | SteamRankingType;
  currentLeaderboardType: RankingCategories;
}

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}
              alt={`${prop.curRankingData.user.user_name}'s profile picture`}
            ></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.currentLeaderboardType ==
          RankingCategories.rankings_singleplayer
            ? prop.curRankingData.sp_score
            : prop.currentLeaderboardType ==
                RankingCategories.rankings_multiplayer
              ? prop.curRankingData.mp_score
              : prop.curRankingData.overall_score}
        </span>
      </div>
    );
  }
};

export default RankingEntry;