Add deaths summary table to Combat tab

src/components/Match/StyledMatch.tsx

@@ -231,6 +231,32 @@ export const StyledPlayersDeath = styled.div`
     height: 29px;
   }
 `;
+export const StyledDeathsSummary = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: 260px;
+
+  & .death {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 34px;
+
+    & img,
+    & svg {
+      height: 18px;
+      width: auto;
+      border-radius: 2px;
+    }
+
+    & span {
+      font-size: 10px;
+      margin-top: 1px;
+      color: ${constants.colorMutedLight};
+    }
+  }
+`;
 export const StyledEmote = styled.img.attrs<{ emote?: string }>({
   alt: (props: { emote?: string }) => props.emote,
   src: (props: { emote?: string }) =>

src/components/Match/matchColumns.tsx

@@ -29,6 +29,7 @@ import {
   StyledAbilityUpgrades,
   StyledBackpack,
   StyledCosmetic,
+  StyledDeathsSummary,
   StyledDivClearBoth,
   StyledPlayersDeath,
   StyledRunes,
@@ -37,6 +38,8 @@ import {
   StyledLevel,
   StyledLineWinnerSpan,
 } from "./StyledMatch";
+import sword from "../Icons/Sword.svg";
+import lightning from "../Icons/Lightning.svg";
 import TargetsBreakdown from "./TargetsBreakdown";
 import HeroImage from "./../Visualizations/HeroImage";
 import ItemTooltip from "../ItemTooltip/ItemTooltip";
@@ -1426,6 +1429,105 @@ export default (strings: Strings, beta = false) => {
       })),
   );
 
+  const deathIcon = (key: string) => {
+    const killer = heroNames[key];
+    if (killer) {
+      return <HeroImage id={killer.id} isIcon />;
+    }
+    if (
+      key &&
+      (key.includes("tower") || key.includes("rax") || key.includes("fort"))
+    ) {
+      return <img src={lightning} alt="" />;
+    }
+    return <img src={sword} alt="" />;
+  };
+
+  const deathsColumns = [
+    heroTdColumn,
+    {
+      displayName: strings.th_deaths,
+      field: "deaths_log",
+      sortFn: (row: MatchPlayer) => (row.deaths_log || []).length,
+      displayFn: (row: MatchPlayer, col: any, value: any) => value || "-",
+      relativeBars: true,
+      sumFn: (acc: number, row: MatchPlayer) =>
+        (acc || 0) + (row.deaths_log || []).length,
+    },
+    {
+      displayName: strings.th_gold_lost,
+      field: "deaths_log",
+      sortFn: (row: MatchPlayer) =>
+        (row.deaths_log || []).reduce((s, d) => s + (d.gold_lost || 0), 0),
+      displayFn: (row: MatchPlayer, col: any, value: any) =>
+        value ? abbreviateNumber(value) : "-",
+      relativeBars: true,
+      sumFn: (acc: number, row: MatchPlayer) =>
+        (acc || 0) +
+        (row.deaths_log || []).reduce((s, d) => s + (d.gold_lost || 0), 0),
+    },
+    {
+      displayName: strings.th_time_dead,
+      field: "deaths_log",
+      sortFn: (row: MatchPlayer) =>
+        (row.deaths_log || []).reduce((s, d) => s + (d.time_dead || 0), 0),
+      displayFn: (row: MatchPlayer, col: any, value: any) =>
+        value ? formatSeconds(value) : "-",
+      relativeBars: true,
+      sumFn: (acc: number, row: MatchPlayer) =>
+        (acc || 0) +
+        (row.deaths_log || []).reduce((s, d) => s + (d.time_dead || 0), 0),
+      displaySumFn: (total: number) => formatSeconds(total || 0),
+    },
+    {
+      displayName: strings.th_killed_by,
+      field: "deaths_log",
+      displayFn: (row: MatchPlayer, col: any, field: any) => {
+        if (!field || !field.length) {
+          return "-";
+        }
+        return (
+          <StyledDeathsSummary>
+            {field.map((death: any, i: number) => {
+              const killer = heroNames[death.key];
+              const killerName = killer
+                ? killer.localized_name
+                : (death.key || "")
+                    .replace(/^npc_dota_(goodguys_|badguys_)?/, "")
+                    .replace(/_/g, " ");
+              const tooltip = [
+                formatTemplateToString(strings.tooltip_death_killed_by, {
+                  killer: killerName,
+                  time: formatSeconds(death.time),
+                }),
+                death.gold_lost
+                  ? formatTemplateToString(strings.tooltip_death_gold_lost, {
+                      gold: death.gold_lost,
+                    })
+                  : null,
+                death.time_dead != null
+                  ? formatTemplateToString(strings.tooltip_death_time_dead, {
+                      time: formatSeconds(death.time_dead),
+                    })
+                  : null,
+              ]
+                .filter(Boolean)
+                .join(" · ");
+              return (
+                <Tooltip title={tooltip} key={i}>
+                  <div className="death">
+                    {deathIcon(death.key)}
+                    <span>{formatSeconds(death.time)}</span>
+                  </div>
+                </Tooltip>
+              );
+            })}
+          </StyledDeathsSummary>
+        );
+      },
+    },
+  ];
+
   const inflictorsColumns = [
     heroTdColumn,
     {
@@ -1900,6 +2002,7 @@ export default (strings: Strings, beta = false) => {
     benchmarksColumns,
     castsColumns,
     cosmeticsColumns,
+    deathsColumns,
     fantasyColumns,
     goldReasonsColumns,
     heroTd,

src/components/Match/matchPages.tsx

@@ -63,6 +63,7 @@ const matchPages = (
     cosmeticsColumns,
     // goldReasonsColumns,
     // xpReasonsColumns,
+    deathsColumns,
     objectiveDamageColumns,
     // analysisColumns,
     inflictorsColumns,
@@ -170,6 +171,17 @@ const matchPages = (
               <CrossTable match={match} field1="damage" field2="damage_taken" />
             </StyledFlexElement>
           </StyledFlexContainer>
+          {match.players.some((p) => p.deaths_log?.length) && (
+            <TeamTable
+              players={match.players}
+              columns={deathsColumns}
+              heading={strings.heading_deaths}
+              radiantTeam={match.radiant_team}
+              direTeam={match.dire_team}
+              radiantWin={match.radiant_win}
+              summable
+            />
+          )}
           <TeamTable
             players={match.players}
             columns={inflictorsColumns}

src/global.d.ts

@@ -98,6 +98,7 @@ type MatchPlayer = {
   killed_by: Record<string, any>;
   damage_taken: Record<string, number>;
   kills_log: any[];
+  deaths_log: any[];
   player_slot: number;
   damage: Record<string, any>;
   name: string;

src/lang/en-US.json

@@ -821,6 +821,12 @@
   "th_kills": "K",
   "th_kills_per_min": "KPM",
   "th_deaths": "D",
+  "th_gold_lost": "Gold Lost",
+  "th_time_dead": "Time Dead",
+  "th_killed_by": "Killed By",
+  "tooltip_death_killed_by": "Died to {killer} at {time}",
+  "tooltip_death_gold_lost": "{gold} gold lost",
+  "tooltip_death_time_dead": "{time} dead",
   "th_assists": "A",
   "th_last_hits": "LH",
   "th_last_hits_per_min": "LHM",