effect descriptions, skill speed in game info, fix block stages

client/src/components/game.construct.jsx

@@ -8,6 +8,7 @@ const { STATS } = require('../utils');
 const { ConstructAvatar, ConstructText } = require('./construct');
 const shapes = require('./shapes');
 const { INFO } = require('./../constants');
+const actions = require('../actions');
 
 const SkillBtn = require('./skill.btn');
 
@@ -21,8 +22,7 @@ const addState = connect(
             animFocus,
             animating,
             animText,
-            
-            gameInfo,
+            gameSkillInfo,
             itemInfo,
         } = state;
 
@@ -45,11 +45,19 @@ const addState = connect(
             animText,
             activeSkill,
             selectSkillTarget,
-            
-            gameInfo,
+            gameSkillInfo,
             itemInfo,
         };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setGameEffectInfo(info) {
+            dispatch(actions.setGameEffectInfo(info));
+        }
+
+        return { setGameEffectInfo };
     }
+
 );
 
 const eventClasses = (animating, animFocus, construct, postSkill) => {
@@ -85,8 +93,9 @@ class GameConstruct extends Component {
             selectSkillTarget,
             animFocus,
             animText,
-            
-            gameInfo,
+
+            setGameEffectInfo,
+            gameSkillInfo,
             itemInfo,
         } = this.props;
 
@@ -107,20 +116,30 @@ class GameConstruct extends Component {
         let crypSkills = <div></div>;
         if (player) crypSkills = (<div class="skills"> {skills} </div>);
 
-
+        function hoverInfo(e, info) {
+            e.stopPropagation();
+            return setGameEffectInfo(info);
+        }
         const effectBox = () => {
-            if (gameInfo && gameInfo.constructId === construct.id) {
-                const fullInfo = itemInfo.items.find(k => k.item === gameInfo.skill) || INFO[gameInfo.skill];
+            if (gameSkillInfo && gameSkillInfo.constructId === construct.id) {
+                const fullInfo = itemInfo.items.find(k => k.item === gameSkillInfo.skill) || INFO[gameSkillInfo.skill];
                 const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
                 const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
                 return (
                     <div class="skill-description">
-                        <h2> {gameInfo.skill} </h2>
+                        <h2> {gameSkillInfo.skill} </h2>
                         <div> {infoDescription} </div>
+                        {speed}
                     </div>);
             }
             const effects = construct.effects.length
-                ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
+                ? construct.effects.map(c =>
+                    <div 
+                        key={c.effect}
+                        onMouseOver={e => hoverInfo(e, c)}
+                        onMouseOut={e => hoverInfo(e, null)}
+                    > {c.effect} - {c.duration}T</div>)
                 : null;
             return (<div class="effects"> {effects} </div>);
         }

client/src/components/skill.btn.jsx

@@ -23,11 +23,11 @@ const addState = connect(
             dispatch(actions.setActiveSkill(constructId, skill));
         }
 
-        function setGameInfo(info) {
-            dispatch(actions.setGameInfo(info));
+        function setGameSkillInfo(info) {
+            dispatch(actions.setGameSkillInfo(info));
         }
 
-        return { setActiveSkill, setGameInfo };
+        return { setActiveSkill, setGameSkillInfo };
     }
 );
 
@@ -40,18 +40,18 @@ function Skill(props) {
         i,
         activeSkill,
         setActiveSkill,
-        setGameInfo,
+        setGameSkillInfo,
     } = props;
 
     if (!game) return false;
 
     const s = construct.skills[i];
     const ko = construct.green_life.value === 0 ? 'ko' : '';
-    
+
     function hoverInfo(e, info) {
         e.stopPropagation();
         if (animating) return false;
-        return setGameInfo(info);
+        return setGameSkillInfo(info);
     }
     if (!s || !game) {
         return (

client/src/components/targeting.arrows.jsx

@@ -6,11 +6,11 @@ const reactStringReplace = require('react-string-replace');
 const throttle = require('lodash/throttle');
 
 const shapes = require('./shapes');
-const { removeTier } = require('../utils');
+const { effectInfo, removeTier } = require('../utils');
 
 const addState = connect(
-    ({ game, account, animSkill, animating, itemInfo }) =>
-        ({ game, account, animSkill, animating, itemInfo })
+    ({ game, account, animSkill, animating, itemInfo, gameEffectInfo }) =>
+        ({ game, account, animSkill, animating, itemInfo, gameEffectInfo })
 );
 
 class TargetSvg extends Component {
@@ -28,10 +28,24 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animating, animSkill, itemInfo } = props;
+        const { game, account, animating, animSkill, itemInfo, gameEffectInfo } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
 
+        // Whenever someones looking at effects throw it up here
+        if (gameEffectInfo) {
+            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+            const infoString = effectInfo(gameEffectInfo);
+            const infoDescription = reactStringReplace(infoString, regEx, match => shapes[match]());
+
+            return (
+                <div class="resolving-skill">
+                    <h1>{gameEffectInfo.effect}</h1>
+                    <div> {infoDescription} </div>
+                </div>
+            );
+        }
+
         // resolutions happening
         // just put skill name up
         if (animating) {