Refactor matches

__tests__/src/coh3/helpers.test.ts

@@ -38,29 +38,148 @@ describe("getMatchDuration", () => {
   });
 });
 
+// German
+const playerReport1 = {
+  profile_id: 307276,
+  resulttype: 0,
+  teamid: 0,
+  race_id: 137123,
+  counters: "",
+  profile: {
+    profile_id: 307276,
+    name: "/steam/76561197993870136",
+    alias: "Gaz",
+    personal_statgroup_id: 196427,
+    xp: 861,
+    level: 861,
+    leaderboardregion_id: 2074389,
+    country: "gb",
+  },
+  matchhistorymember: {
+    profile_id: 307276,
+    race_id: 137123,
+    statgroup_id: 196427,
+    teamid: 0,
+    wins: 4,
+    losses: 5,
+    streak: -1,
+    arbitration: 2,
+    outcome: 0,
+    oldrating: 1022,
+    newrating: 986,
+    reporttype: 3,
+  },
+};
+
+// British
+const playerReport2 = {
+  profile_id: 816,
+  resulttype: 1,
+  teamid: 1,
+  race_id: 203852,
+  counters: "",
+  profile: {
+    profile_id: 816,
+    name: "/steam/76561198046481660",
+    alias: "SoE-Sturmpanther",
+    personal_statgroup_id: 2331,
+    xp: 1851,
+    level: 1851,
+    leaderboardregion_id: 2074389,
+    country: "de",
+  },
+  matchhistorymember: {
+    profile_id: 816,
+    race_id: 203852,
+    statgroup_id: 2331,
+    teamid: 1,
+    wins: 1,
+    losses: 0,
+    streak: 1,
+    arbitration: 1,
+    outcome: 1,
+    oldrating: 1000,
+    newrating: 1049,
+    reporttype: 1,
+  },
+};
+
+// German
+const playerReport3 = {
+  profile_id: 180818,
+  resulttype: 0,
+  teamid: 0,
+  race_id: 137123,
+  counters: "",
+  profile: {
+    profile_id: 180818,
+    name: "/steam/76561198067153567",
+    alias: "Ket00",
+    personal_statgroup_id: 37991,
+    xp: 431,
+    level: 431,
+    leaderboardregion_id: 2074389,
+    country: "nl",
+  },
+  matchhistorymember: {
+    profile_id: 180818,
+    race_id: 137123,
+    statgroup_id: 37991,
+    teamid: 0,
+    wins: 9,
+    losses: 9,
+    streak: -2,
+    arbitration: 2,
+    outcome: 0,
+    oldrating: 1044,
+    newrating: 1023,
+    reporttype: 3,
+  },
+};
+
+// British
+const playerReport4 = {
+  profile_id: 114534,
+  resulttype: 1,
+  teamid: 1,
+  race_id: 203852,
+  counters: "",
+  profile: {
+    profile_id: 114534,
+    name: "/steam/76561197997634975",
+    alias: "Gorobag",
+    personal_statgroup_id: 242385,
+    xp: 321,
+    level: 321,
+    leaderboardregion_id: 2074389,
+    country: "fr",
+  },
+  matchhistorymember: {
+    profile_id: 114534,
+    race_id: 203852,
+    statgroup_id: 242385,
+    teamid: 1,
+    wins: 5,
+    losses: 3,
+    streak: 1,
+    arbitration: 1,
+    outcome: 1,
+    oldrating: 1043,
+    newrating: 1081,
+    reporttype: 1,
+  },
+};
+
 describe("getMatchPlayersByFaction", () => {
-  const reportedPlayerResults = [
-    { race_id: 129494, name: "Player 1", score: 100 },
-    { race_id: 137123, name: "Player 2", score: 200 },
-    { race_id: 203852, name: "Player 3", score: 300 },
-    { race_id: 198437, name: "Player 4", score: 400 },
-    { race_id: 129494, name: "Player 5", score: 500 },
-  ];
+  const reportedPlayerResults = [playerReport1, playerReport2, playerReport3, playerReport4];
 
   test('should return all axis players when "axis" is passed as the faction', () => {
     const result = getMatchPlayersByFaction(reportedPlayerResults, "axis");
-    expect(result).toEqual([
-      { race_id: 137123, name: "Player 2", score: 200 },
-      { race_id: 198437, name: "Player 4", score: 400 },
-    ]);
+    expect(result).toEqual([playerReport1, playerReport3]);
   });
 
   test('should return all allies players when "allies" is passed as the faction', () => {
     const result = getMatchPlayersByFaction(reportedPlayerResults, "allies");
-    expect(result).toEqual([
-      { race_id: 129494, name: "Player 1", score: 100 },
-      { race_id: 203852, name: "Player 3", score: 300 },
-      { race_id: 129494, name: "Player 5", score: 500 },
-    ]);
+    expect(result).toEqual([playerReport2, playerReport4]);
   });
 });

components/other/ellipsis-text.tsx

@@ -0,0 +1,29 @@
+import { Tooltip } from "@mantine/core";
+
+interface EllipsisTextProps {
+  text: string;
+  maxWidth?: string;
+}
+
+const EllipsisText = ({ text, maxWidth }: EllipsisTextProps) => {
+  maxWidth = maxWidth || "18ch";
+
+  const style = {
+    float: "left",
+    maxWidth: maxWidth,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  };
+
+  return (
+    <>
+      <Tooltip label={text}>
+        {/*@ts-ignore*/}
+        <span style={style}>{text}</span>
+      </Tooltip>
+    </>
+  );
+};
+
+export default EllipsisText;

components/player-card/player-recent-matches.tsx

@@ -5,15 +5,15 @@ import dynamic from "next/dynamic";
 import { DataTable, DataTableSortStatus } from "mantine-datatable";
 import React from "react";
 import { maps, matchTypesAsObject, raceIDs } from "../../src/coh3/coh3-data";
-import { MatchHistory, raceID } from "../../src/coh3/coh3-types";
+import { PlayerReport, ProcessedMatch, raceID } from "../../src/coh3/coh3-types";
 import { getMatchDuration, getMatchPlayersByFaction } from "../../src/coh3/helpers";
 import ErrorCard from "../error-card";
 import FactionIcon from "../faction-icon";
 import { IconInfoCircle } from "@tabler/icons";
 import sortBy from "lodash/sortBy";
 import cloneDeep from "lodash/cloneDeep";
-import config from "../../config";
 import FilterableHeader from "./filterable-header";
+import EllipsisText from "../other/ellipsis-text";
 
 /**
  * Timeago is causing issues with SSR, move to client side
@@ -32,7 +32,7 @@ const PlayerRecentMatches = ({
   error,
 }: {
   profileID: string;
-  playerMatchesData: Array<MatchHistory>;
+  playerMatchesData: Array<ProcessedMatch>;
   error: string;
 }) => {
   const isPlayerVictorious = (matchRecord: any): boolean => {
@@ -170,13 +170,11 @@ const PlayerRecentMatches = ({
     );
   };
 
-  const renderPlayers = (arrayOfPlayerReports: Array<any>, matchHistoryMember: Array<any>) => {
+  const renderPlayers = (arrayOfPlayerReports: Array<PlayerReport>) => {
     return (
       <>
-        {arrayOfPlayerReports.map((playerInfo: Record<string, any>) => {
-          const matchHistory = matchHistoryMember.find(
-            (e) => e.profile_id === playerInfo.profile_id,
-          );
+        {arrayOfPlayerReports.map((playerInfo: PlayerReport) => {
+          const matchHistory = playerInfo.matchhistorymember;
           const ratingPlayedWith = matchHistory.oldrating;
           const ratingChange = matchHistory.newrating - matchHistory.oldrating;
           const ratingChangeAsElement =
@@ -186,23 +184,36 @@ const PlayerRecentMatches = ({
               <Text color={"red"}>{ratingChange}</Text>
             );
 
+          const displayRating = matchHistory.losses + matchHistory.wins >= 10;
+          const ratingElement = displayRating ? (
+            <>
+              <span style={{ width: "4ch", textAlign: "left" }}>{ratingPlayedWith}</span>
+              <span>{ratingChangeAsElement}</span>
+            </>
+          ) : (
+            <Text color={"dimmed"} fz={"xs"}>
+              UNRANKED
+            </Text>
+          );
+
           return (
             <div key={playerInfo.profile_id}>
               <Group spacing={"xs"}>
                 <FactionIcon name={raceIDs[playerInfo?.race_id as raceID]} width={20} />
-                <>
-                  {" "}
-                  {ratingPlayedWith} {ratingChangeAsElement}
-                </>
+                <> {ratingElement}</>
                 <Anchor
                   key={playerInfo.profile_id}
                   component={Link}
                   href={`/players/${playerInfo.profile_id}`}
                 >
                   {`${playerInfo.profile_id}` === `${profileID}` ? (
-                    <Text fw={700}>{playerInfo.profile["alias"]}</Text>
+                    <Text fw={700}>
+                      <EllipsisText text={playerInfo.profile["alias"]} />
+                    </Text>
                   ) : (
-                    <Text>{playerInfo.profile["alias"]}</Text>
+                    <Text>
+                      <EllipsisText text={playerInfo.profile["alias"]} />
+                    </Text>
                   )}
                 </Anchor>
               </Group>
@@ -295,7 +306,7 @@ const PlayerRecentMatches = ({
                 record.matchhistoryreportresults,
                 "axis",
               );
-              return renderPlayers(axisPlayers, record.matchhistorymember);
+              return renderPlayers(axisPlayers);
             },
           },
           {
@@ -305,11 +316,11 @@ const PlayerRecentMatches = ({
             textAlignment: "center",
             width: "50%",
             render: (record) => {
-              const axisPlayers = getMatchPlayersByFaction(
+              const alliesPlayers = getMatchPlayersByFaction(
                 record.matchhistoryreportresults,
                 "allies",
               );
-              return renderPlayers(axisPlayers, record.matchhistorymember);
+              return renderPlayers(alliesPlayers);
             },
           },
           {
@@ -360,7 +371,7 @@ const PlayerRecentMatches = ({
           {
             title: "Debug",
             accessor: "debug",
-            hidden: !config.isDevEnv(),
+            hidden: true,
             render: (record) => {
               return (
                 <>

pages/players/[playerID].tsx

@@ -17,7 +17,7 @@ import { processPlayerInfoAPIResponse } from "../../src/players/standings";
 import PlayerStandings from "../../components/player-card/player-standings";
 import Head from "next/head";
 import React from "react";
-import { PlayerCardDataType } from "../../src/coh3/coh3-types";
+import { PlayerCardDataType, ProcessedMatch } from "../../src/coh3/coh3-types";
 import { getPlayerCardInfo, getPlayerRecentMatches } from "../../src/coh3stats-api";
 import { GetServerSideProps } from "next";
 
@@ -44,7 +44,7 @@ const PlayerCard = ({
   playerID: string;
   playerData: PlayerCardDataType;
   error: string;
-  playerMatchesData: any;
+  playerMatchesData: Array<ProcessedMatch>;
 }) => {
   const { push, query } = useRouter();
   const { view } = query;