WIP: Aghs Tooltip on Hero Page

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') });
 };

src/components/AghsTooltip/index.jsx

@@ -0,0 +1,149 @@
+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 InnerWrapper = styled.div`
+  overflow: hidden;
+`;
+
+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: 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>
+);
+
+AghsTooltip.propTypes = {
+  aghs: propTypes.shape({}).isRequired,
+};
+
+export default AghsTooltip;

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 hero_npc_name={hero.name} skills={heroAbs.skills} img="/apps/dota2/images/abilities/antimage_mana_break_md.png"/>
+      </AbilityItem>
     </Wrapper>
   );
 };

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;

src/components/Hero/Aghs.jsx

@@ -0,0 +1,85 @@
+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`
+  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"/>          
+        </AghsSlot>
+        <ReactTooltip id={ttId} effect="solid" place="bottom">
+            <AghsTooltip place="right" aghs={props}/>
+          </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,
+});
+
+export default connect(mapStateToProps)(Aghs);

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());
 

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,