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,163 @@
+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;
+  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;
+  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;
+  }
+`;
+
+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`
+  padding-left: 10px;
+  display: flex;
+  flex-direction: column;
+
+`;
+
+
+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 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 = (props) => {
+
+  const aghs = props.aghs;
+
+  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={aghs.skillObj.img} />
+          <HeaderContent>
+            <img id="ability-img" src={`${process.env.REACT_APP_IMAGE_CDN}${aghs.skillObj.img}`} alt="" />
+            <HeaderText>
+              <div className="name">{aghs.skill_name_loc}</div>
+              <UpgradeTypeWrapper>
+                <div className="upgrade_type_text">Ability Upgrade</div>
+                <div className="upgrade_type_filler"/>
+              </UpgradeTypeWrapper>
+            </HeaderText>
+          </HeaderContent>
+        </Header>
+        <Description>
+          {aghs.desc}
+        </Description>
+      </InnerWrapper>
+      )
+    }
+  }
+
+  return (
+    <Wrapper>
+      {renderToolTip(aghs)}
+    </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}/>
+      </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,122 @@
+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%;
+
+  .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);
+  }
+`;
+
+const AghsIcon = 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 = ({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.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;
+
+
+  return (
+    <Wrapper>
+      <AghsSlot alt="aghs">
+        <IconWrapper data-tip data-for="scepter_tt">
+          <AghsIcon src="/assets/images/dota2/scepter_1.png"/>
+
+        </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="shard_tt">
+          <ShardIcon src="/assets/images/dota2/shard_1.png"/>
+        </IconWrapper>
+        <ReactTooltip id="shard_tt" effect="solid" place="left">
+            <AghsTooltip place="right" aghs={agh_element.shard}/>
+        </ReactTooltip>
+      </AghsSlot>
+
+    </Wrapper>
+  );
+};
+
+Aghs.propTypes = {
+  heroAghs: propTypes.shape({}).isRequired,
+  skills: propTypes.array.isRequired,
+  hero_npc_name: 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,