better match history, added most picked/banned heroes

OpenAngelArena · Aug 15, 2024 · 0c9f45c · 0c9f45c
1 parent 42167a0
commit 0c9f45c
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 43 deletions.
diff --git a/src/components/hero-icon.jsx b/src/components/hero-icon.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+export const HeroNameMap = {
+  electrician: 'chatterjee'
+};
+
+export const CustomHeroImage = {
+  electrician: "https://raw.githubusercontent.com/OpenAngelArena/oaa/master/content/panorama/images/heroes/npc_dota_hero_electrician.png",
+  sohei: "https://raw.githubusercontent.com/OpenAngelArena/oaa/master/content/panorama/images/heroes/npc_dota_hero_sohei.png",
+};
+
+export function imgUrlForHero(hero) {
+  if (hero.startsWith('npc_dota_hero_')) {
+    hero = hero.substr(14);
+  }
+
+  if (CustomHeroImage[hero]) {
+    return CustomHeroImage[hero];
+  }
+  return `https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/${hero}.png`
+}
+
+export function heroName(hero) {
+  if (hero.startsWith('npc_dota_hero_')) {
+    hero = hero.substr(14);
+  }
+
+  if (HeroNameMap[hero]) {
+    hero = HeroNameMap[hero];
+  }
+
+  return hero
+    .replace(/_/g, ' ')
+    .split(' ')
+    .map((part) => {
+      if (!part || !part.length) {
+        return part;
+      }
+      return part[0].toUpperCase() + part.substr(1).toLowerCase();
+    })
+    .join(' ');
+}
+
+export default function HeroIcon(props) {
+  const { hero, ...otherProps } = props;
+  let finalHero = hero;
+
+  if (finalHero.startsWith('npc_dota_hero_')) {
+    finalHero = finalHero.substr(14);
+  }
+
+  return (
+    <img
+      {...otherProps}
+      src={imgUrlForHero(finalHero)}
+      alt={finalHero}
+    />
+  );
+}
diff --git a/src/components/pages/match-history/index.jsx b/src/components/pages/match-history/index.jsx
@@ -12,9 +12,6 @@ import Match from './match';
 import StandardPage from "../standard-page";
 
 import { useUserState } from "../../auth";
-
-import { getTopPlayers } from "../../../api/top";
-import { getMatch } from "../../../api/match";
 import { getUser } from "../../../api/user";
 
 export default function MatchHistory() {

diff --git a/src/components/pages/match-history/match.jsx b/src/components/pages/match-history/match.jsx
@@ -10,46 +10,17 @@ import Divider from '@material-ui/core/Divider';
 
 import EmojiEventsIcon from "@material-ui/icons/EmojiEvents";
 import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+import CasinoIcon from "@material-ui/icons/Casino";
+import ShuffleIcon from "@material-ui/icons/Shuffle";
+import HelpIcon from "@material-ui/icons/Help";
 
 import { timeAgo } from "short-time-ago";
 
 import { useUserState } from "../../auth";
+import HeroIcon, {heroName} from '../../hero-icon';
 import { getMatch } from "../../../api/match";
 import { CloudDownload } from "@material-ui/icons";
 
-const HeroNameMap = {
-  electrician: 'chatterjee'
-};
-
-const CustomHeroImage = {
-  electrician: "https://raw.githubusercontent.com/OpenAngelArena/oaa/master/content/panorama/images/heroes/npc_dota_hero_electrician.png",
-  sohei: "https://raw.githubusercontent.com/OpenAngelArena/oaa/master/content/panorama/images/heroes/npc_dota_hero_sohei.png",
-};
-
-function imgUrlForHero(hero) {
-  if (CustomHeroImage[hero]) {
-    return CustomHeroImage[hero];
-  }
-  return `https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/${hero}.png`
-}
-
-function heroName(hero) {
-  if (HeroNameMap[hero]) {
-    hero = HeroNameMap[hero];
-  }
-
-  return hero
-    .replace(/_/g, ' ')
-    .split(' ')
-    .map((part) => {
-      if (!part || !part.length) {
-        return part;
-      }
-      return part[0].toUpperCase() + part.substr(1).toLowerCase();
-    })
-    .join(' ');
-}
-
 export default function Match({ matchId }) {
   const [matchData, setMatchData] = useState(null);
   const [{ user }] = useUserState();
@@ -108,10 +79,11 @@ export default function Match({ matchId }) {
   return (
     <Grid container>
       <Grid item xs={2} sm={2} md={1}>
-        {startDate}
+        {(new Date(startDate)).toLocaleDateString()}
       </Grid>
       <Grid item xs={3} sm={2} md={1}>
-        <EmojiEventsIcon style={{color: didWin ? "#00ff00" : "#ff0000"}} />
+        {matchData.outcome && <EmojiEventsIcon style={{color: didWin ? "#00ff00" : "#ff0000"}} />}
+        {!matchData.outcome && <HelpIcon />}
         {" "}
         <img height={32} src={`/${teamName}.png`} alt={heroName(teamName)}/>
       </Grid>
@@ -122,8 +94,10 @@ export default function Match({ matchId }) {
       <Grid item xs={5} sm={6} md={2}>
         {myHeroPick && (
           <>
-            <img height={24} src={imgUrlForHero(myHeroName)} alt={heroName(myHeroName)}/>
-            {randomText} {heroName(myHeroName)}
+            <HeroIcon height={24} hero={myHeroName} />
+            {myHeroPick.random && <CasinoIcon />}
+            {myHeroPick.rerandom && <ShuffleIcon />}
+            {/* heroName(myHeroName) */}
           </>
         )}
       </Grid>
@@ -134,7 +108,7 @@ export default function Match({ matchId }) {
             {matchData.teams.radiant.map((steamid) => {
               const pick = matchData.heroPicks[steamid];
               if (pick) {
-                return <img key={steamid} height={24} src={imgUrlForHero(pick.hero.substr(14))} alt={heroName(pick.hero.substr(14))}/>
+                return <HeroIcon height={24} hero={pick.hero} />
               }
               return null;
             })}
@@ -146,7 +120,7 @@ export default function Match({ matchId }) {
             {matchData.teams.dire.map((steamid) => {
               const pick = matchData.heroPicks[steamid];
               if (pick) {
-                return <img key={steamid} style={{height: '24px'}} src={imgUrlForHero(pick.hero.substr(14))} alt={heroName(pick.hero.substr(14))}/>
+                return <HeroIcon height={24} hero={pick.hero} />
               }
               return null;
             })}

diff --git a/src/components/pages/overview.jsx b/src/components/pages/overview.jsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
 import { makeStyles } from '@material-ui/core/styles';
 
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
+import { getUser } from "../../api/user";
 import { useUserState } from '../auth';
+import HeroIcon, { heroName } from '../hero-icon';
 import StandardPage from './standard-page';
 
 const useStyles = makeStyles(theme => ({
@@ -17,6 +19,18 @@ const useStyles = makeStyles(theme => ({
 function Overview() {
   const [userState] = useUserState();
   const classes = useStyles();
+  const [userProfile, setUserProfile] = useState(null);
+  const { user } = userState;
+
+  useEffect(() => {
+    async function fetchData() {
+      const userData = getUser(user.steamid);
+
+      setUserProfile(await userData);
+    }
+    fetchData();
+  }, []);
+
 
   const {
     mmr,
@@ -74,7 +88,52 @@ function Overview() {
             </Paper>
           </Grid>
         ))}
+
+        <Grid item xs={12} md={6}>
+          <Paper className={ classes.statBox }>
+            <Typography variant="h5">
+              Most picked heroes
+            </Typography>
+            {userProfile && Object.keys(userProfile.heroPicks)
+              .sort((heroA, heroB) => userProfile.heroPicks[heroA] - userProfile.heroPicks[heroB])
+              .slice(0, 20)
+              .map((hero) => (
+                <Grid container spacing={2} key={hero}>
+                  <Grid item xs={4}>
+                    <HeroIcon height={48} hero={hero} />
+                  </Grid>
+                  <Grid item xs={8} style={{ textAlign: 'left' }}>
+                    {heroName(hero)}
+                  </Grid>
+                </Grid>
+              ))
+            }
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Paper className={ classes.statBox }>
+            <Typography variant="h5">
+              Most banned heroes
+            </Typography>
+            {userProfile && Object.keys(userProfile.heroBans)
+              .sort((heroA, heroB) => userProfile.heroBans[heroA] - userProfile.heroBans[heroB])
+              .slice(0, 20)
+              .map((hero) => (
+                <Grid container spacing={2} key={hero}>
+                  <Grid item xs={4}>
+                    <HeroIcon height={48} hero={hero} />
+                  </Grid>
+                  <Grid item xs={8} style={{ textAlign: 'left' }}>
+                    {heroName(hero)}
+                  </Grid>
+                </Grid>
+              ))
+            }
+          </Paper>
+        </Grid>
       </Grid>
+      <br />
+      <br />
     </StandardPage>
   );
 }