Fix formatting for offensive matches in MatchCard & MatchTable

src/components/MatchCard/MatchCard.tsx

@@ -23,6 +23,17 @@ type MatchCardProps = {
   clanId?: string;
 };
 
+const matchMode = (match: Match, clanId: string): string => {
+  let factionRe = /(Allie)s/;
+  let mode = " ("
+  if (match?.offensive) {
+    const side = match?.clans1_ids.includes(clanId) ? match?.side1 : match?.side2;
+    mode += side ? side.replace(factionRe, "$1d") + " " : ""
+    return mode + "Offensive)"
+  }
+  return mode + "Warfare)"
+}
+
 export const MatchCard: FC<MatchCardProps> = ({ match, clanId }) => {
   const [sortedMatch, setSortedMatch] = useState<SortedMatch>();
   const { getTag } = useClanTags();
@@ -61,7 +72,7 @@ export const MatchCard: FC<MatchCardProps> = ({ match, clanId }) => {
             friendlyCaps={sortedMatch?.friendlyCaps}
             enemyCaps={sortedMatch?.enemyCaps}
             offensive={sortedMatch?.offensive}
-            attacker={match?.clans1_ids.includes(clanId || "")}
+            attacker={match?.clans1_ids.includes(clanId)}
           />
           <AutoTextSkeleton className="text-2xl min-w-[3rem] text-center font-mono grid grid-cols-[1fr_min-content_1fr] flex-1">
             {sortedMatch && (
@@ -119,7 +130,7 @@ export const MatchCard: FC<MatchCardProps> = ({ match, clanId }) => {
           </AutoTextSkeleton>
           <AutoTextSkeleton className="min-w-[3rem] text-center">
             {match?.map}
-            {match?.offensive && ` (Offensive ${match.side1})`}
+            {matchMode(match)}
           </AutoTextSkeleton>
 
           <AutoTextSkeleton className="min-w-[3rem] text-center ">

src/components/MatchCard/WinLooseBanner.tsx

@@ -23,7 +23,7 @@ export const WinLoseBanner: FC<WinLoseBannerProps> = ({
     text = "\u200B";
     background = "bg-gray-700";
   } else if (
-    (offensive && (attacker ? friendlyCaps : enemyCaps) === MAX_CAPS) ||
+    (offensive && (attacker ? friendlyCaps === MAX_CAPS : enemyCaps !== MAX_CAPS)) ||
     (!offensive && friendlyCaps > enemyCaps)
   ) {
     text = "VICTORY";

src/components/MatchesTable/MatchesTable.tsx

@@ -12,15 +12,19 @@ import { FC, useState } from "react";
 import DataTable, { TableColumn } from "react-data-table-component";
 
 const DEFAULT_PER_PAGE = 25;
+const CAPS_TO_WIN = 3;
 
 export type FormattedMatch = Match & {
   id: string;
   allies: string[];
   enemies: string[];
   side: Factions;
+  enemy: Factions;
   caps: number;
   formattedDate: string;
   formattedDuration: string;
+  offensive?: boolean;
+  attacker?: boolean;
 };
 
 const matchFormatter = (match: Match, clanId: string): FormattedMatch => {
@@ -30,16 +34,21 @@ const matchFormatter = (match: Match, clanId: string): FormattedMatch => {
     formattedDuration: `${match.duration} min`,
     ...match,
   };
+  formattedMatch.offensive = match.offensive !== undefined ? match.offensive : false;
   if (match.clans1_ids.includes(clanId)) {
     formattedMatch.allies = match.clans1_ids.filter((f) => f !== clanId);
     formattedMatch.enemies = match.clans2_ids;
     formattedMatch.side = match.side1;
+    formattedMatch.enemy = match.side2;
     formattedMatch.caps = match.caps1;
+    formattedMatch.attacker = formattedMatch.offensive ? true : false;
   } else {
     formattedMatch.allies = match.clans2_ids.filter((f) => f !== clanId);
     formattedMatch.enemies = match.clans1_ids;
     formattedMatch.side = match.side2;
+    formattedMatch.enemy = match.side1;
     formattedMatch.caps = match.caps2;
+    formattedMatch.attacker = false;
   }
   return formattedMatch as FormattedMatch;
 };
@@ -88,6 +97,16 @@ export const MatchesTable: FC<MatchesTableProps> = ({
     }
   );
   const { getTag } = useClanTags();
+  const setResult = (match) => {
+    let result = "Defeat";
+    if (
+      (match.offensive && (match.attacker ? match.caps == 5 : match.caps >= 0)) ||
+       (!match.offensive && match.caps >= CAPS_TO_WIN)
+    ) {
+      result = "Victory"
+    }
+    return result;
+  };
 
   const defaultColumns: TableColumn<FormattedMatch>[] = [
     {
@@ -108,6 +127,10 @@ export const MatchesTable: FC<MatchesTableProps> = ({
       ),
       id: "date",
     },
+    (clanId ? {
+      name: "Result",
+      selector: (match) => setResult(match),
+    } : null),
     {
       name: "Side 1",
       selector: (match) => match.clans1_ids[0],
@@ -174,7 +197,24 @@ export const MatchesTable: FC<MatchesTableProps> = ({
         <MatchLinkCell tag={match.match_id} value={match.duration} />
       ),
     },
-  ];
+    {
+      name: "Mode",
+      selector: (match) => {
+        let factionRe = /(Allie)s/;
+        let mode = "Warfare";
+        if (match.offensive) {
+          mode = "Offensive";
+          if (match.attacker && match?.side) {
+	    mode = `${match.side.replace(factionRe, "$1d")} Offensive`;
+          } else if (!match.attacker && match?.enemy) {
+	    mode = `${match.enemy.replace(factionRe, "$1d")} Offensive`;
+          }
+        }
+        return mode;
+      },
+      sortable: true,
+    },
+  ].filter(Boolean);
 
   const handlePageChange = (page: number) => {
     setTableMeta({ ...tableMeta, page });