altered participant array to accomodate for stats in the frontend

server/controllers/apiController.js

@@ -69,18 +69,19 @@ const apiController = {
  }
  participantsArray.forEach((player) => {
  let userName = player.summonerName;
+ let playerStats = {};
+ playerStats.name = userName;
+ playerStats.totalDamageDealt = player.totalDamageDealt;
+ playerStats.killParticipation = player.KillParticipation;
+ playerStats.totalMinionsKilledt = player.totalMinionsKilled;
+ playerStats.visionScore = player.visionScore;
  //determine which team each player is in
- if (player.teamId === 100) filteredMatchInfo.participants.blue.push(player.userName)
- else if (player.teamId === 200) filteredMatchInfo.participants.red.push(player.userName)
-
- //pentagon chart data
- //initiate object
- filteredMatchInfo[userName] = {}
- filteredMatchInfo[userName].totalDamageDealt = player.totalDamageDealt;
- filteredMatchInfo[userName].deaths = player.deaths;
- filteredMatchInfo[userName].KillParticipation = player.challenges.KillParticipation;
- filteredMatchInfo[userName].totalMinionsKilled = player.totalMinionsKilled;
- filteredMatchInfo[userName].visionScore = player.visionScore;
+ if (player.teamId === 100) {
+ filteredMatchInfo.participants.blue.push(playerStats)
+ }
+ else if (player.teamId === 200) {
+ filteredMatchInfo.participants.red.push(playerStats)
+ }
  })
 
  filteredMatchInfo.gameDuration = matchInfo.info.gameDuration;

src/components/MatchCard.tsx

@@ -67,7 +67,7 @@ function MatchCard (props:any) {
  setQueueType(idToQueueType[props.match.queueId]);
  setTimeDiff(calculateTimeDifference(props.match.gameEndTime));
  setTimeDuration(convertRiotTimesDuration(props.match.gameDuration));
- setParticipants(props.match.participants)
+ setParticipants(() => props.match.participants)
  setMatchStatus(() => {
  return props.match.matchStatus === true ? 'VICTORY' : 'DEFEAT';
  });
@@ -96,7 +96,7 @@ function MatchCard (props:any) {
  {participants?.blue.map((player, index) => (
  <li key={index} className="whitespace-nowrap">
  <button>
- {player}
+ {player.name}
  </button>
  </li>
  ) )}
@@ -105,7 +105,7 @@ function MatchCard (props:any) {
  {participants?.red.map((player, index) => (
  <li key={index} className="whitespace-nowrap">
  <button>
- {player}
+ {player.name}
  </button>
  </li>
  ) )}

src/components/PentagonalGraph.tsx

@@ -4,7 +4,7 @@ import * as d3 from "d3";
 function PentagonalGraph (props) {
  const chartRef = useRef();
  const data = props.matchStats;
- console.log('totalDamage:', data[0])
+
  useEffect(() => {
  // Clear the previous SVG if it exists
  d3.select(chartRef.current).selectAll('svg').remove();