From 98822692735e75712dc22544c79ae5c221f741ac Mon Sep 17 00:00:00 2001
From: skitt skittington <skitttt@gmail.com>
Date: Sun, 28 Mar 2021 19:14:27 -0400
Subject: [PATCH 1/9] add Aghs icon to hero page

---
 src/components/Hero/Abilities.jsx |  7 ++-
 src/components/Hero/Ability.jsx   |  2 +-
 src/components/Hero/Aghs.jsx      | 76 +++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Hero/Aghs.jsx

diff --git a/src/components/Hero/Abilities.jsx b/src/components/Hero/Abilities.jsx
index f1cba0345d..bf9b650c28 100644
--- a/src/components/Hero/Abilities.jsx
+++ b/src/components/Hero/Abilities.jsx
@@ -2,8 +2,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import propTypes from 'prop-types';
+
 import Ability from './Ability';
 import Talents from './Talents';
+import Aghs from './Aghs';
 
 const Wrapper = styled.div`
   align-items: center;
@@ -75,10 +77,13 @@ const Abilities = ({ hero, abilities, heroAbilities }) => {
 
   return (
     <Wrapper>
-      {renderAbilities(heroAbs.skills)}
       <AbilityItem>
         <Talents talents={heroAbs.talents} />
       </AbilityItem>
+      {renderAbilities(heroAbs.skills)}
+      <AbilityItem>
+        <Aghs talents={heroAbs.talents} />
+      </AbilityItem>
     </Wrapper>
   );
 };
diff --git a/src/components/Hero/Ability.jsx b/src/components/Hero/Ability.jsx
index 8d6396aef5..f3b942dfce 100644
--- a/src/components/Hero/Ability.jsx
+++ b/src/components/Hero/Ability.jsx
@@ -38,7 +38,7 @@ const AbilityIcon = styled.img`
 const AbilityManaComsumption = styled.div`
   background: ${constants.colorBlackMuted};
   color: ${constants.colorMana};
-  border-radius: 2px 0 0 0;
+  border-radius:  4px 0 4px 0;
   font-weight: 600;
   bottom: 0;
   font-size: 10px;
diff --git a/src/components/Hero/Aghs.jsx b/src/components/Hero/Aghs.jsx
new file mode 100644
index 0000000000..ea6f941b73
--- /dev/null
+++ b/src/components/Hero/Aghs.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import nanoid from 'nanoid';
+import propTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+
+import constants from '../constants';
+
+const Wrapper = styled.div`
+  background: linear-gradient(to bottom, ${constants.colorBlueMuted}, ${constants.primarySurfaceColor});
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
+  position: relative;
+`;
+
+const AghsSlot = styled.div`
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  opacity: 1;
+  overflow: hidden;
+  transition: opacity .2s, box-shadow .4s, transform .2s;
+  width: 100%;
+
+  &:hover {
+    opacity: 1;
+    box-shadow: 0 0 150px rgba(255, 255, 255, .4);
+    transform: scale(1.1);
+  }
+`;
+
+const ScepterIcon = styled.img`
+  display: block;
+  overflow: hidden;
+  margin-right: auto;
+  margin-left: auto;
+  width: 66%;
+  height: 66%;
+`;
+
+const ShardIcon = styled.img`
+  display: block;
+  overflow: hidden;
+  margin-right: auto;
+  margin-left: auto;
+  width: 66%;
+  height: 66%;
+`;
+
+
+const Aghs = (props) => {
+    const ttId = nanoid();
+  
+    return (
+      <Wrapper data-tip data-for={ttId}>
+        <AghsSlot alt="aghs">
+          <ScepterIcon src="/assets/images/dota2/scepter_1.png"/>
+          <ShardIcon src="/assets/images/dota2/shard_1.png"/>
+          <ReactTooltip place="right" ttId={ttId}>
+            
+          </ReactTooltip>
+        </AghsSlot>
+      </Wrapper>
+    );
+  };
+
+Aghs.propTypes = {
+  aghs: propTypes.oneOfType([
+    propTypes.object,
+    propTypes.string,
+  ]),
+  img: propTypes.string.isRequired,
+};
+
+export default Aghs;

From aa31c52dc4144542a38668bc8dc2f41ee53fc719 Mon Sep 17 00:00:00 2001
From: skitt skittington <skitttt@gmail.com>
Date: Sun, 4 Apr 2021 16:20:00 -0400
Subject: [PATCH 2/9] aghs backend stuff

---
 src/actions/index.js                 |   3 +
 src/components/AghsTooltip/index.jsx | 132 +++++++++++++++++++++++++++
 src/components/Hero/Abilities.jsx    |   2 +-
 src/components/Hero/Aghs.jsx         |  27 ++++--
 src/index.js                         |   3 +-
 src/reducers/index.js                |   1 +
 6 files changed, 157 insertions(+), 11 deletions(-)
 create mode 100644 src/components/AghsTooltip/index.jsx

diff --git a/src/actions/index.js b/src/actions/index.js
index 2d3f5e3a71..d512a51766 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -91,6 +91,9 @@ export const getAbilities = () => async (dispatch) => {
 export const getHeroAbilities = () => async (dispatch) => {
   dispatch({ type: 'heroAbilities', payload: await import('dotaconstants/build/hero_abilities.json') });
 };
+export const getHeroAghs = () => async (dispatch) => {
+  dispatch({ type: 'heroAghs', payload: await import('dotaconstants/build/aghs_desc.json') });
+};
 export const getNeutralAbilities = () => async (dispatch) => {
   dispatch({ type: 'neutralAbilities', payload: await import('dotaconstants/build/neutral_abilities.json') });
 };
diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
new file mode 100644
index 0000000000..98641c5b1b
--- /dev/null
+++ b/src/components/AghsTooltip/index.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import styled from 'styled-components';
+import constants from '../constants';
+
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 300px;
+  background: #131519;
+  background: linear-gradient(135deg, #131519, #1f2228);
+  overflow: hidden;
+  border: 2px solid #27292b;
+
+  & > div:nth-child(2) {
+    position: relative;
+    border-top: 1px solid #080D15;
+  }
+`;
+
+const Header = styled.div`
+background: linear-gradient(to right, #51565F , #303338);
+position: relative;
+`;
+
+const HeaderContent = styled.div`
+    position: relative;
+    height: 50px;
+    padding: 13px;
+    white-space: nowrap;
+  
+    & img {
+        display: inline-block;
+        height: 100%;
+        border: 1px solid #080D15;
+    }
+
+    & .name {
+        display: inline-block;
+        position: relative;
+        left: 15px;
+        bottom: 1px;
+        height: 50px;
+        width: 220px;
+        font-size: ${constants.fontSizeCommon};
+        text-transform: uppercase;  
+        color: ${constants.primaryTextColor};
+        font-weight: bold;
+        text-shadow: 1px 1px black;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 50px;
+        letter-spacing: 1px;
+    }
+`;
+
+const HeaderBgImg = styled.div`
+    position: absolute;
+    left: -20px;
+    height: 100%;
+    width: 20%;
+    background: ${({ img }) => `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('${process.env.REACT_APP_IMAGE_CDN}${img}')`};
+    background-color: transparent;
+    background-repeat: no-repeat;
+    transform: scale(4);
+    filter: blur(15px);
+`;
+
+const HeaderBgImg2 = styled.div`
+    position: absolute;
+    left: -20px;
+    height: 100%;
+    width: 20%;
+    background: ${({ img }) => `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('${process.env.REACT_APP_IMAGE_CDN}${img}')`};
+    background-color: transparent;
+    background-repeat: no-repeat;
+    transform: scale(4);
+    filter: blur(15px);
+`;
+
+
+const Description = styled.div`
+    position: relative;
+    padding: 13px;
+    color: #95a5a6;
+    text-shadow: 1px 1px black;
+`;
+
+
+const Break = styled.div`
+    margin-left: 13px;
+    margin-right: 13px;
+    height: 1px;
+    background-color: #080D15;
+`;
+
+const AghsTooltip = ({aghs}) => (
+  <Wrapper>
+    <HeaderBgImg img={aghs.img} />
+    <Header>
+      
+      <HeaderContent>
+        <img id="ability-img" src="/assets/images/dota2/talent_tree.svg" alt="" />
+        <div className="name">Scepter/Shard...</div>
+      </HeaderContent>
+    </Header>
+    <Description>
+      this is a description...{aghs.hero_npc_name}
+      <Break />
+      2nd desc (after break)
+    </Description>
+    <Header>
+      <HeaderBgImg2 img={aghs.img} />
+      <HeaderContent>
+        <img id="ability-img" src="/assets/images/dota2/talent_tree.svg" alt="" />
+        <div className="name">Scepter/Shard...{aghs.hero_npc_name}</div>
+      </HeaderContent>
+    </Header>
+    <Description>
+      this is a description...
+      <Break />
+      2nd desc (after break)
+    </Description>
+  </Wrapper>
+);
+
+AghsTooltip.propTypes = {
+  aghs: propTypes.shape({}).isRequired,
+};
+
+export default AghsTooltip;
diff --git a/src/components/Hero/Abilities.jsx b/src/components/Hero/Abilities.jsx
index bf9b650c28..00067a3ab1 100644
--- a/src/components/Hero/Abilities.jsx
+++ b/src/components/Hero/Abilities.jsx
@@ -82,7 +82,7 @@ const Abilities = ({ hero, abilities, heroAbilities }) => {
       </AbilityItem>
       {renderAbilities(heroAbs.skills)}
       <AbilityItem>
-        <Aghs talents={heroAbs.talents} />
+        <Aghs hero_npc_name={hero.name} skills={heroAbs.skills} img="/apps/dota2/images/abilities/antimage_mana_break_md.png"/>
       </AbilityItem>
     </Wrapper>
   );
diff --git a/src/components/Hero/Aghs.jsx b/src/components/Hero/Aghs.jsx
index ea6f941b73..6fa0441f2a 100644
--- a/src/components/Hero/Aghs.jsx
+++ b/src/components/Hero/Aghs.jsx
@@ -1,16 +1,22 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
 import nanoid from 'nanoid';
 import propTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 
 import constants from '../constants';
+import AghsTooltip from '../AghsTooltip';
 
 const Wrapper = styled.div`
   background: linear-gradient(to bottom, ${constants.colorBlueMuted}, ${constants.primarySurfaceColor});
   border-radius: 4px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
   position: relative;
+
+  .__react_component_tooltip {
+    opacity: 1 !important;
+    padding: 0px !important;
 `;
 
 const AghsSlot = styled.div`
@@ -56,21 +62,24 @@ const Aghs = (props) => {
       <Wrapper data-tip data-for={ttId}>
         <AghsSlot alt="aghs">
           <ScepterIcon src="/assets/images/dota2/scepter_1.png"/>
-          <ShardIcon src="/assets/images/dota2/shard_1.png"/>
-          <ReactTooltip place="right" ttId={ttId}>
-            
-          </ReactTooltip>
+          <ShardIcon src="/assets/images/dota2/shard_1.png"/>          
         </AghsSlot>
+        <ReactTooltip id={ttId} effect="solid" place="bottom">
+            <AghsTooltip place="right" aghs={props}/>
+          </ReactTooltip>
       </Wrapper>
     );
   };
 
 Aghs.propTypes = {
-  aghs: propTypes.oneOfType([
-    propTypes.object,
-    propTypes.string,
-  ]),
+  heroAghs: propTypes.shape({}).isRequired,
+  skills: propTypes.array.isRequired,
+  hero_npc_name: propTypes.string.isRequired,
   img: propTypes.string.isRequired,
 };
 
-export default Aghs;
+const mapStateToProps = state => ({
+  heroAghs: state.app.heroAghs,
+});
+
+export default connect(mapStateToProps)(Aghs);
diff --git a/src/index.js b/src/index.js
index 84b7a6876f..8ede8f6b01 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import { render, hydrate } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import store from './store';
-import { getMetadata, getStrings, getAbilities, getHeroAbilities, getNeutralAbilities, getAbilityIds } from './actions';
+import { getMetadata, getStrings, getAbilities, getHeroAbilities, getHeroAghs, getNeutralAbilities, getAbilityIds } from './actions';
 import App from './components/App';
 // import { unregister } from './common/serviceWorker';
 
@@ -15,6 +15,7 @@ store.dispatch(getMetadata());
 store.dispatch(getStrings());
 store.dispatch(getAbilities());
 store.dispatch(getHeroAbilities());
+store.dispatch(getHeroAghs());
 store.dispatch(getNeutralAbilities());
 store.dispatch(getAbilityIds());
 
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 7c0f33b0fb..fda28c5c60 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -46,6 +46,7 @@ export default combineReducers({
   strings: (state = {}, action) => ((action && action.type === 'strings') ? action.payload : state),
   abilities: (state = {}, action) => ((action && action.type === 'abilities') ? action.payload : state),
   heroAbilities: (state = {}, action) => ((action && action.type === 'heroAbilities') ? action.payload : state),
+  heroAghs: (state = {}, action) => ((action && action.type === 'heroAghs') ? action.payload : state),
   neutralAbilities: (state = {}, action) => ((action && action.type === 'neutralAbilities') ? action.payload : state),
   abilityIds: (state = {}, action) => ((action && action.type === 'abilityIds') ? action.payload : state),
   form,

From 4acf6781e8cfe3d040f7ba085e462a49150a3a2c Mon Sep 17 00:00:00 2001
From: skitt skittington <skitttt@gmail.com>
Date: Sun, 4 Apr 2021 19:43:58 -0400
Subject: [PATCH 3/9] some update idk. skeleton of aghs tooltip in place

---
 src/components/AghsTooltip/index.jsx | 69 ++++++++++++++++++----------
 1 file changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index 98641c5b1b..8400354091 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -18,6 +18,10 @@ const Wrapper = styled.div`
   }
 `;
 
+const InnerWrapper = styled.div`
+  overflow: hidden;
+`;
+
 const Header = styled.div`
 background: linear-gradient(to right, #51565F , #303338);
 position: relative;
@@ -95,33 +99,48 @@ const Break = styled.div`
     background-color: #080D15;
 `;
 
+function upgradeType(aghs) {
+  if (Array.isArray(values)) {
+    return values.filter(value => value).join(' / ');
+  }
+  return values;
+}
+
 const AghsTooltip = ({aghs}) => (
   <Wrapper>
-    <HeaderBgImg img={aghs.img} />
-    <Header>
-      
-      <HeaderContent>
-        <img id="ability-img" src="/assets/images/dota2/talent_tree.svg" alt="" />
-        <div className="name">Scepter/Shard...</div>
-      </HeaderContent>
-    </Header>
-    <Description>
-      this is a description...{aghs.hero_npc_name}
-      <Break />
-      2nd desc (after break)
-    </Description>
-    <Header>
-      <HeaderBgImg2 img={aghs.img} />
-      <HeaderContent>
-        <img id="ability-img" src="/assets/images/dota2/talent_tree.svg" alt="" />
-        <div className="name">Scepter/Shard...{aghs.hero_npc_name}</div>
-      </HeaderContent>
-    </Header>
-    <Description>
-      this is a description...
-      <Break />
-      2nd desc (after break)
-    </Description>
+    <InnerWrapper>
+      <Header>
+      <HeaderBgImg img={aghs.img} />
+        <HeaderContent>
+          <img id="ability-img" src="https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/antimage_mana_break_md.png" alt="" />
+          <div className="name">Scepter/Shard...</div>
+          {aghs.upgradeType() ?
+            <span classNmae="upgrade_type">New Ability</span> :
+            <span classNmae="upgrade_type">Ability Upgrade</span>
+          }
+          <div className="header2"></div>
+        </HeaderContent>
+      </Header>
+      <Description>
+        this is a description... this is a long ass descriptiong yes yes yes hello{aghs.hero_npc_name}
+        <Break />
+        2nd desc (after break)
+      </Description>
+    </InnerWrapper>
+    <InnerWrapper>
+      <Header>
+        <HeaderBgImg img={aghs.img} />
+        <HeaderContent>
+          <img id="ability-img" src="https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/antimage_mana_break_md.png" alt="" />
+          <div className="name">Scepter/Shard...{aghs.hero_npc_name}</div>
+        </HeaderContent>
+      </Header>
+      <Description>
+        this is a description...
+        <Break />
+        2nd desc (after break)
+      </Description>
+    </InnerWrapper>
   </Wrapper>
 );
 

From 2dea027809d2ad090947c7f0b9c4d10dc5bfc343 Mon Sep 17 00:00:00 2001
From: skitt skittington <skitttt@gmail.com>
Date: Fri, 9 Apr 2021 06:40:53 -0400
Subject: [PATCH 4/9] update aghs tooltip

---
 src/components/AghsTooltip/index.jsx | 36 +++++++++++++---------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index 8400354091..02d0d36515 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -99,40 +99,38 @@ const Break = styled.div`
     background-color: #080D15;
 `;
 
-function upgradeType(aghs) {
-  if (Array.isArray(values)) {
-    return values.filter(value => value).join(' / ');
-  }
-  return values;
-}
-
-const AghsTooltip = ({aghs}) => (
+const AghsTooltip = ({aghs: props}) => (
   <Wrapper>
     <InnerWrapper>
       <Header>
-      <HeaderBgImg img={aghs.img} />
+      <HeaderBgImg img={props.img} />
         <HeaderContent>
-          <img id="ability-img" src="https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/antimage_mana_break_md.png" alt="" />
-          <div className="name">Scepter/Shard...</div>
-          {aghs.upgradeType() ?
-            <span classNmae="upgrade_type">New Ability</span> :
-            <span classNmae="upgrade_type">Ability Upgrade</span>
-          }
+          <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.img}`} alt="" />
+          <div className="name">Scepter</div>
+          {/* {props.heroAghs.scepter.new_skill ?
+            <span className="upgrade_type">New Ability</span> :
+            <span className="upgrade_type">Upgrade</span>
+          } */}
           <div className="header2"></div>
         </HeaderContent>
       </Header>
       <Description>
-        this is a description... this is a long ass descriptiong yes yes yes hello{aghs.hero_npc_name}
+        hero: {props.hero_npc_name}<br/>
+        aghinism:
         <Break />
         2nd desc (after break)
       </Description>
     </InnerWrapper>
     <InnerWrapper>
       <Header>
-        <HeaderBgImg img={aghs.img} />
+        <HeaderBgImg img={props.img} />
         <HeaderContent>
-          <img id="ability-img" src="https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/antimage_mana_break_md.png" alt="" />
-          <div className="name">Scepter/Shard...{aghs.hero_npc_name}</div>
+          <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.img}`} alt="" />
+          <div className="name">Shard</div>
+          {/* {props.shard.new_skill ?
+            <span className="upgrade_type">New Ability</span> :
+            <span className="upgrade_type">Upgrade</span>
+          } */}
         </HeaderContent>
       </Header>
       <Description>

From 10973accc970faae0a566390b1f5b5665ea8a609 Mon Sep 17 00:00:00 2001
From: skitt <skitttt@gmail.com>
Date: Fri, 23 Apr 2021 08:30:04 -0400
Subject: [PATCH 5/9] get data to tooltip

---
 src/components/AghsTooltip/index.jsx | 105 ++++++++++++---------------
 src/components/Hero/Abilities.jsx    |   2 +-
 src/components/Hero/Aghs.jsx         |  48 +++++++-----
 3 files changed, 80 insertions(+), 75 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index 02d0d36515..bfa47ac504 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import propTypes from 'prop-types';
+import propTypes, { string } from 'prop-types';
 import styled from 'styled-components';
 import constants from '../constants';
 
@@ -71,19 +71,6 @@ const HeaderBgImg = styled.div`
     filter: blur(15px);
 `;
 
-const HeaderBgImg2 = styled.div`
-    position: absolute;
-    left: -20px;
-    height: 100%;
-    width: 20%;
-    background: ${({ img }) => `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('${process.env.REACT_APP_IMAGE_CDN}${img}')`};
-    background-color: transparent;
-    background-repeat: no-repeat;
-    transform: scale(4);
-    filter: blur(15px);
-`;
-
-
 const Description = styled.div`
     position: relative;
     padding: 13px;
@@ -99,51 +86,55 @@ const Break = styled.div`
     background-color: #080D15;
 `;
 
-const AghsTooltip = ({aghs: props}) => (
-  <Wrapper>
-    <InnerWrapper>
-      <Header>
-      <HeaderBgImg img={props.img} />
-        <HeaderContent>
-          <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.img}`} alt="" />
-          <div className="name">Scepter</div>
-          {/* {props.heroAghs.scepter.new_skill ?
-            <span className="upgrade_type">New Ability</span> :
-            <span className="upgrade_type">Upgrade</span>
-          } */}
-          <div className="header2"></div>
-        </HeaderContent>
-      </Header>
-      <Description>
-        hero: {props.hero_npc_name}<br/>
-        aghinism:
-        <Break />
-        2nd desc (after break)
-      </Description>
-    </InnerWrapper>
-    <InnerWrapper>
-      <Header>
-        <HeaderBgImg img={props.img} />
-        <HeaderContent>
-          <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.img}`} alt="" />
-          <div className="name">Shard</div>
-          {/* {props.shard.new_skill ?
-            <span className="upgrade_type">New Ability</span> :
-            <span className="upgrade_type">Upgrade</span>
-          } */}
-        </HeaderContent>
-      </Header>
-      <Description>
-        this is a description...
-        <Break />
-        2nd desc (after break)
-      </Description>
-    </InnerWrapper>
-  </Wrapper>
-);
+const AghsTooltip = (props) => {
+
+
+  return (
+    <Wrapper>
+      <InnerWrapper>
+        <Header>
+          <HeaderBgImg img={props.img} />
+          <HeaderContent>
+            <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.aghs.img}`} alt="" />
+            <div className="name">Scepter</div>
+            {/* {props.aghs.scepter.new_skill ?
+              <span className="upgrade_type">New Ability</span> :
+              <span className="upgrade_type">Upgrade</span>
+            } */}
+            <div className="header2"></div>
+          </HeaderContent>
+        </Header>
+        <Description>
+          skill: {props.aghs.scepter.skill_name_loc} - {props.img}
+          <Break />
+          {props.aghs.scepter.desc}
+        </Description>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Header>
+          <HeaderBgImg img={props.img} />
+          <HeaderContent>
+            <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.img}`} alt="" />
+            <div className="name">Shard</div>
+            {/* {props.shard.new_skill ?
+              <span className="upgrade_type">New Ability</span> :
+              <span className="upgrade_type">Upgrade</span>
+            } */}
+          </HeaderContent>
+        </Header>
+        <Description>
+        skill: {props.aghs.shard.skill_name_loc}
+          <Break />
+          {props.aghs.shard.desc}
+        </Description>
+      </InnerWrapper>
+    </Wrapper>
+  );
+}
 
 AghsTooltip.propTypes = {
-  aghs: propTypes.shape({}).isRequired,
+  aghs_desc: string.isRequired,
+  img: string.isRequired,
 };
 
 export default AghsTooltip;
diff --git a/src/components/Hero/Abilities.jsx b/src/components/Hero/Abilities.jsx
index 00067a3ab1..22cfd8665e 100644
--- a/src/components/Hero/Abilities.jsx
+++ b/src/components/Hero/Abilities.jsx
@@ -82,7 +82,7 @@ const Abilities = ({ hero, abilities, heroAbilities }) => {
       </AbilityItem>
       {renderAbilities(heroAbs.skills)}
       <AbilityItem>
-        <Aghs hero_npc_name={hero.name} skills={heroAbs.skills} img="/apps/dota2/images/abilities/antimage_mana_break_md.png"/>
+        <Aghs hero_npc_name={hero.name} skills={heroAbs.skills}/>
       </AbilityItem>
     </Wrapper>
   );
diff --git a/src/components/Hero/Aghs.jsx b/src/components/Hero/Aghs.jsx
index 6fa0441f2a..faeb72da5b 100644
--- a/src/components/Hero/Aghs.jsx
+++ b/src/components/Hero/Aghs.jsx
@@ -55,31 +55,45 @@ const ShardIcon = styled.img`
 `;
 
 
-const Aghs = (props) => {
-    const ttId = nanoid();
-  
-    return (
-      <Wrapper data-tip data-for={ttId}>
-        <AghsSlot alt="aghs">
-          <ScepterIcon src="/assets/images/dota2/scepter_1.png"/>
-          <ShardIcon src="/assets/images/dota2/shard_1.png"/>          
-        </AghsSlot>
-        <ReactTooltip id={ttId} effect="solid" place="bottom">
-            <AghsTooltip place="right" aghs={props}/>
-          </ReactTooltip>
-      </Wrapper>
-    );
-  };
+const Aghs = ({heroAghs, hero_npc_name, skills}) => {
+  const ttId = nanoid();
+
+  const hero_name = hero_npc_name;
+  const agh_element = heroAghs[hero_name];
+  //agh_element.scepter.img = skills[agh_element.scepter.skill_name].data.img;
+
+  // skills.forEach(skill =>
+  //   {
+  //     if(agh_element.scepter.skill_name_loc == skill){
+  //       agh_element.img = skill.img;
+  //     }
+  //   });
+
+  const scepter_img = skills[0].key + skills[0].data.img;
+  const shard_img   = "hat";
+  const desc        = agh_element.scepter.skill_name
+
+  return (
+    <Wrapper data-tip data-for={ttId}>
+      <AghsSlot alt="aghs">
+        <ScepterIcon src="/assets/images/dota2/scepter_1.png"/>
+        <ShardIcon src="/assets/images/dota2/shard_1.png"/>
+      </AghsSlot>
+      <ReactTooltip id={ttId} effect="solid" place="bottom">
+          <AghsTooltip place="right" aghs={agh_element} img={scepter_img}/>
+        </ReactTooltip>
+    </Wrapper>
+  );
+};
 
 Aghs.propTypes = {
   heroAghs: propTypes.shape({}).isRequired,
   skills: propTypes.array.isRequired,
   hero_npc_name: propTypes.string.isRequired,
-  img: propTypes.string.isRequired,
 };
 
 const mapStateToProps = state => ({
-  heroAghs: state.app.heroAghs,
+  heroAghs: state.app.heroAghs
 });
 
 export default connect(mapStateToProps)(Aghs);

From 4a7afcc23ee8642bfff70f1cd6b6a11eb038728c Mon Sep 17 00:00:00 2001
From: skitt <skitttt@gmail.com>
Date: Sun, 16 May 2021 15:49:21 -0400
Subject: [PATCH 6/9] split out tooltips, but broken :(

---
 src/components/AghsTooltip/index.jsx | 52 +++++++++++------------
 src/components/Hero/Aghs.jsx         | 62 +++++++++++++++++++---------
 2 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index bfa47ac504..71ac5d91ac 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import propTypes, { string } from 'prop-types';
 import styled from 'styled-components';
 import constants from '../constants';
-
+import AbilityTooltip from '../AbilityTooltip';
 
 const Wrapper = styled.div`
   position: relative;
@@ -86,16 +86,26 @@ const Break = styled.div`
     background-color: #080D15;
 `;
 
+
 const AghsTooltip = (props) => {
 
+  const aghs = props.aghs;
 
-  return (
-    <Wrapper>
+  const renderToolTip = (aghs) => {
+    if(aghs.new_skill === true) {
+      // display ability type TT
+      return (
+      <AbilityTooltip ability={aghs.skillObj} />
+      )
+    }
+    else{
+      return (
+      // display minimal description
       <InnerWrapper>
         <Header>
-          <HeaderBgImg img={props.img} />
+          <HeaderBgImg img={aghs.skillObj.img} />
           <HeaderContent>
-            <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.aghs.img}`} alt="" />
+            <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${aghs.skillObj.img}`} alt="" />
             <div className="name">Scepter</div>
             {/* {props.aghs.scepter.new_skill ?
               <span className="upgrade_type">New Ability</span> :
@@ -105,36 +115,24 @@ const AghsTooltip = (props) => {
           </HeaderContent>
         </Header>
         <Description>
-          skill: {props.aghs.scepter.skill_name_loc} - {props.img}
-          <Break />
-          {props.aghs.scepter.desc}
-        </Description>
-      </InnerWrapper>
-      <InnerWrapper>
-        <Header>
-          <HeaderBgImg img={props.img} />
-          <HeaderContent>
-            <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${props.img}`} alt="" />
-            <div className="name">Shard</div>
-            {/* {props.shard.new_skill ?
-              <span className="upgrade_type">New Ability</span> :
-              <span className="upgrade_type">Upgrade</span>
-            } */}
-          </HeaderContent>
-        </Header>
-        <Description>
-        skill: {props.aghs.shard.skill_name_loc}
+          skill: {aghs.skill_name_loc}
           <Break />
-          {props.aghs.shard.desc}
+          {aghs.desc}
         </Description>
       </InnerWrapper>
+      )
+    }
+  }
+
+  return (
+    <Wrapper>
+      {renderToolTip(aghs)}
     </Wrapper>
   );
 }
 
 AghsTooltip.propTypes = {
-  aghs_desc: string.isRequired,
-  img: string.isRequired,
+  aghs: propTypes.shape({}).isRequired,
 };
 
 export default AghsTooltip;
diff --git a/src/components/Hero/Aghs.jsx b/src/components/Hero/Aghs.jsx
index faeb72da5b..3a6dbdfbde 100644
--- a/src/components/Hero/Aghs.jsx
+++ b/src/components/Hero/Aghs.jsx
@@ -13,10 +13,6 @@ const Wrapper = styled.div`
   border-radius: 4px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
   position: relative;
-
-  .__react_component_tooltip {
-    opacity: 1 !important;
-    padding: 0px !important;
 `;
 
 const AghsSlot = styled.div`
@@ -29,14 +25,30 @@ const AghsSlot = styled.div`
   transition: opacity .2s, box-shadow .4s, transform .2s;
   width: 100%;
 
+  .solid_line {
+    border-top: 1px solid #1e1e1f;
+    margin: 2px 5px 2px 5px;
+  }
+`;
+
+const IconWrapper = styled.div`
+  display: block;
+  overflow: hidden;
+  margin-right: auto;
+  margin-left: auto;
+
   &:hover {
     opacity: 1;
     box-shadow: 0 0 150px rgba(255, 255, 255, .4);
     transform: scale(1.1);
   }
+
+  .__react_component_tooltip {
+    opacity: 1 !important;
+    padding: 0px !important;
 `;
 
-const ScepterIcon = styled.img`
+const AghsIcon = styled.img`
   display: block;
   overflow: hidden;
   margin-right: auto;
@@ -57,31 +69,41 @@ const ShardIcon = styled.img`
 
 const Aghs = ({heroAghs, hero_npc_name, skills}) => {
   const ttId = nanoid();
+  const ttId2 = nanoid();
 
   const hero_name = hero_npc_name;
   const agh_element = heroAghs[hero_name];
-  //agh_element.scepter.img = skills[agh_element.scepter.skill_name].data.img;
 
-  // skills.forEach(skill =>
-  //   {
-  //     if(agh_element.scepter.skill_name_loc == skill){
-  //       agh_element.img = skill.img;
-  //     }
-  //   });
+  agh_element.scepter.skillObj = skills.find(skill => {
+    return skill.data.dname === agh_element.scepter.skill_name_loc;
+  }).data;
+  agh_element.shard.skillObj = skills.find(skill => {
+    return skill.data.dname === agh_element.shard.skill_name_loc;
+  }).data;
+
+
 
   const scepter_img = skills[0].key + skills[0].data.img;
-  const shard_img   = "hat";
-  const desc        = agh_element.scepter.skill_name
+
 
   return (
-    <Wrapper data-tip data-for={ttId}>
+    <Wrapper>
       <AghsSlot alt="aghs">
-        <ScepterIcon src="/assets/images/dota2/scepter_1.png"/>
-        <ShardIcon src="/assets/images/dota2/shard_1.png"/>
+        <IconWrapper data-tip data-for={ttId}>
+          <AghsIcon src="/assets/images/dota2/scepter_1.png"/>
+          <ReactTooltip id={ttId} effect="solid" place="left">
+            <AghsTooltip place="right" aghs={agh_element.scepter}/>
+          </ReactTooltip>
+        </IconWrapper>
+        <div class="solid_line"/>
+        <IconWrapper data-tip data-for={ttId2}>
+          <ShardIcon src="/assets/images/dota2/shard_1.png"/>
+          <ReactTooltip id={ttId2} effect="solid" place="left">
+            <AghsTooltip place="right" aghs={agh_element.shard}/>
+          </ReactTooltip>
+        </IconWrapper>
       </AghsSlot>
-      <ReactTooltip id={ttId} effect="solid" place="bottom">
-          <AghsTooltip place="right" aghs={agh_element} img={scepter_img}/>
-        </ReactTooltip>
+
     </Wrapper>
   );
 };

From c6b6d79af55c80cf986826b758148b472f58c956 Mon Sep 17 00:00:00 2001
From: skitt <skitttt@gmail.com>
Date: Sun, 16 May 2021 20:30:03 -0400
Subject: [PATCH 7/9] fix tooltips showing up

---
 src/components/AghsTooltip/index.jsx | 32 ++++++++++++++++++++--------
 src/components/Hero/Aghs.jsx         | 27 ++++++++++++-----------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index 71ac5d91ac..86739d23c6 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -40,7 +40,6 @@ const HeaderContent = styled.div`
     }
 
     & .name {
-        display: inline-block;
         position: relative;
         left: 15px;
         bottom: 1px;
@@ -57,8 +56,27 @@ const HeaderContent = styled.div`
         line-height: 50px;
         letter-spacing: 1px;
     }
+
+    & .upgrade_type {
+      background-color: #1c2e50;
+      color: #DDDDDD;
+      display: inline-flex;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      padding: 3px 8px;
+      margin: 3px 0px;
+      border-radius: 4px;
+    }
+`;
+
+const HeaderText = styled.div`
+
+  display: flex;
+  flex-direction: column;
+
 `;
 
+
 const HeaderBgImg = styled.div`
     position: absolute;
     left: -20px;
@@ -106,17 +124,13 @@ const AghsTooltip = (props) => {
           <HeaderBgImg img={aghs.skillObj.img} />
           <HeaderContent>
             <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${aghs.skillObj.img}`} alt="" />
-            <div className="name">Scepter</div>
-            {/* {props.aghs.scepter.new_skill ?
-              <span className="upgrade_type">New Ability</span> :
-              <span className="upgrade_type">Upgrade</span>
-            } */}
-            <div className="header2"></div>
+            <HeaderText>
+              <div className="name">{aghs.skill_name_loc}</div>
+              <div className="upgrade_type"></div>
+            </HeaderText>
           </HeaderContent>
         </Header>
         <Description>
-          skill: {aghs.skill_name_loc}
-          <Break />
           {aghs.desc}
         </Description>
       </InnerWrapper>
diff --git a/src/components/Hero/Aghs.jsx b/src/components/Hero/Aghs.jsx
index 3a6dbdfbde..a542cb4af0 100644
--- a/src/components/Hero/Aghs.jsx
+++ b/src/components/Hero/Aghs.jsx
@@ -13,6 +13,10 @@ const Wrapper = styled.div`
   border-radius: 4px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
   position: relative;
+
+  .__react_component_tooltip {
+    opacity: 1 !important;
+    padding: 0px !important;
 `;
 
 const AghsSlot = styled.div`
@@ -42,10 +46,6 @@ const IconWrapper = styled.div`
     box-shadow: 0 0 150px rgba(255, 255, 255, .4);
     transform: scale(1.1);
   }
-
-  .__react_component_tooltip {
-    opacity: 1 !important;
-    padding: 0px !important;
 `;
 
 const AghsIcon = styled.img`
@@ -83,25 +83,26 @@ const Aghs = ({heroAghs, hero_npc_name, skills}) => {
 
 
 
-  const scepter_img = skills[0].key + skills[0].data.img;
+  //const scepter_img = skills[0].key + skills[0].data.img;
 
 
   return (
     <Wrapper>
       <AghsSlot alt="aghs">
-        <IconWrapper data-tip data-for={ttId}>
+        <IconWrapper data-tip data-for="scepter_tt">
           <AghsIcon src="/assets/images/dota2/scepter_1.png"/>
-          <ReactTooltip id={ttId} effect="solid" place="left">
-            <AghsTooltip place="right" aghs={agh_element.scepter}/>
-          </ReactTooltip>
+         
         </IconWrapper>
+        <ReactTooltip id="scepter_tt" effect="solid" place="left">
+            <AghsTooltip place="right" aghs={agh_element.scepter}/>
+        </ReactTooltip>
         <div class="solid_line"/>
-        <IconWrapper data-tip data-for={ttId2}>
+        <IconWrapper data-tip data-for="shard_tt">
           <ShardIcon src="/assets/images/dota2/shard_1.png"/>
-          <ReactTooltip id={ttId2} effect="solid" place="left">
-            <AghsTooltip place="right" aghs={agh_element.shard}/>
-          </ReactTooltip>
         </IconWrapper>
+        <ReactTooltip id="shard_tt" effect="solid" place="left">
+            <AghsTooltip place="right" aghs={agh_element.shard}/>
+        </ReactTooltip>
       </AghsSlot>
 
     </Wrapper>

From 1fbb0204a430f439ddf7ed5ccca749440d819180 Mon Sep 17 00:00:00 2001
From: skitt <skitttt@gmail.com>
Date: Tue, 18 May 2021 22:42:52 -0400
Subject: [PATCH 8/9] make ability upgrade text. need to flex whitespace of
 text for longer ability names

---
 src/components/AghsTooltip/index.jsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index 86739d23c6..73be74b82c 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -29,6 +29,7 @@ position: relative;
 
 const HeaderContent = styled.div`
     position: relative;
+    display: flex;
     height: 50px;
     padding: 13px;
     white-space: nowrap;
@@ -40,11 +41,6 @@ const HeaderContent = styled.div`
     }
 
     & .name {
-        position: relative;
-        left: 15px;
-        bottom: 1px;
-        height: 50px;
-        width: 220px;
         font-size: ${constants.fontSizeCommon};
         text-transform: uppercase;  
         color: ${constants.primaryTextColor};
@@ -53,24 +49,24 @@ const HeaderContent = styled.div`
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        line-height: 50px;
         letter-spacing: 1px;
     }
 
     & .upgrade_type {
       background-color: #1c2e50;
       color: #DDDDDD;
+      font-size: ${constants.fontSizeTiny};
       display: inline-flex;
       text-transform: uppercase;
       letter-spacing: 1px;
-      padding: 3px 8px;
-      margin: 3px 0px;
+      padding: 2px 4px;
+      margin: 2px 0px;
       border-radius: 4px;
     }
 `;
 
 const HeaderText = styled.div`
-
+  padding-left: 10px;
   display: flex;
   flex-direction: column;
 
@@ -126,7 +122,7 @@ const AghsTooltip = (props) => {
             <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${aghs.skillObj.img}`} alt="" />
             <HeaderText>
               <div className="name">{aghs.skill_name_loc}</div>
-              <div className="upgrade_type"></div>
+              <div className="upgrade_type">Ability Upgrade</div>
             </HeaderText>
           </HeaderContent>
         </Header>

From 55034c448c4fa0e31532af304e383043c7277d80 Mon Sep 17 00:00:00 2001
From: skitt <skitttt@gmail.com>
Date: Sat, 5 Jun 2021 12:46:07 -0400
Subject: [PATCH 9/9] fix ability upgrade background color bleed

---
 src/components/AghsTooltip/index.jsx | 87 ++++++++++++++++------------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/components/AghsTooltip/index.jsx b/src/components/AghsTooltip/index.jsx
index 73be74b82c..865dc1b66f 100644
--- a/src/components/AghsTooltip/index.jsx
+++ b/src/components/AghsTooltip/index.jsx
@@ -23,46 +23,58 @@ const InnerWrapper = styled.div`
 `;
 
 const Header = styled.div`
-background: linear-gradient(to right, #51565F , #303338);
-position: relative;
+  background: linear-gradient(to right, #51565F , #303338);
+  position: relative;
 `;
 
 const HeaderContent = styled.div`
-    position: relative;
-    display: flex;
-    height: 50px;
-    padding: 13px;
-    white-space: nowrap;
-  
-    & img {
-        display: inline-block;
-        height: 100%;
-        border: 1px solid #080D15;
-    }
-
-    & .name {
-        font-size: ${constants.fontSizeCommon};
-        text-transform: uppercase;  
-        color: ${constants.primaryTextColor};
-        font-weight: bold;
-        text-shadow: 1px 1px black;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        letter-spacing: 1px;
-    }
+  position: relative;
+  display: flex;
+  height: 50px;
+  padding: 13px;
+  white-space: nowrap;
+
+  & img {
+      display: inline-block;
+      height: 100%;
+      border: 1px solid #080D15;
+  }
 
-    & .upgrade_type {
-      background-color: #1c2e50;
-      color: #DDDDDD;
-      font-size: ${constants.fontSizeTiny};
-      display: inline-flex;
-      text-transform: uppercase;
+  & .name {
+      font-size: ${constants.fontSizeCommon};
+      text-transform: uppercase;  
+      color: ${constants.primaryTextColor};
+      font-weight: bold;
+      text-shadow: 1px 1px black;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       letter-spacing: 1px;
-      padding: 2px 4px;
-      margin: 2px 0px;
-      border-radius: 4px;
-    }
+  }
+`;
+
+const UpgradeTypeWrapper = styled.div`
+
+  display: flex;
+  flex-direction: row;
+  padding: 2px 0px;
+  margin: 2px 0px;
+  border-radius: 4px;
+
+  & .upgrade_type_text {
+    background-color: #1c2e50;
+    color: #DDDDDD;
+    font-size: ${constants.fontSizeTiny};
+    display: inline-flex;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 2px 4px;
+  }
+
+  & .upgrade_type_filler {
+    display: inline-flex;
+  }
+
 `;
 
 const HeaderText = styled.div`
@@ -122,7 +134,10 @@ const AghsTooltip = (props) => {
             <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${aghs.skillObj.img}`} alt="" />
             <HeaderText>
               <div className="name">{aghs.skill_name_loc}</div>
-              <div className="upgrade_type">Ability Upgrade</div>
+              <UpgradeTypeWrapper>
+                <div className="upgrade_type_text">Ability Upgrade</div>
+                <div className="upgrade_type_filler"/>
+              </UpgradeTypeWrapper>
             </HeaderText>
           </HeaderContent>
         </Header>