skill info on hover in effect box

client/src/components/game.construct.jsx

@@ -2,10 +2,12 @@ const { connect } = require('preact-redux');
 const { Component } = require('preact');
 const preact = require('preact');
 const range = require('lodash/range');
+const reactStringReplace = require('react-string-replace');
 
 const { STATS } = require('../utils');
 const { ConstructAvatar, ConstructText } = require('./construct');
 const shapes = require('./shapes');
+const { INFO } = require('./../constants');
 
 const SkillBtn = require('./skill.btn');
 
@@ -19,6 +21,9 @@ const addState = connect(
             animFocus,
             animating,
             animText,
+            
+            gameInfo,
+            itemInfo,
         } = state;
 
         function selectSkillTarget(targetConstructId) {
@@ -40,6 +45,9 @@ const addState = connect(
             animText,
             activeSkill,
             selectSkillTarget,
+            
+            gameInfo,
+            itemInfo,
         };
     }
 );
@@ -77,6 +85,9 @@ class GameConstruct extends Component {
             selectSkillTarget,
             animFocus,
             animText,
+            
+            gameInfo,
+            itemInfo,
         } = this.props;
 
         const ko = construct.green_life.value === 0 ? 'ko' : '';
@@ -96,9 +107,23 @@ class GameConstruct extends Component {
         let crypSkills = <div></div>;
         if (player) crypSkills = (<div class="skills"> {skills} </div>);
 
-        const effects = construct.effects.length
-            ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
-            : null;
+
+        const effectBox = () => {
+            if (gameInfo && gameInfo.constructId === construct.id) {
+                const fullInfo = itemInfo.items.find(k => k.item === gameInfo.skill) || INFO[gameInfo.skill];
+                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+                const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                return (
+                    <div class="skill-description">
+                        <h2> {gameInfo.skill} </h2>
+                        <div> {infoDescription} </div>
+                    </div>);
+            }
+            const effects = construct.effects.length
+                ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
+                : null;
+            return (<div class="effects"> {effects} </div>);
+        }
 
         return (
             <div
@@ -107,7 +132,7 @@ class GameConstruct extends Component {
                 class={`game-construct ${ko} ${classes}`} >
                 <div class="left">
                     {crypSkills}
-                    <div class="effects"> {effects} </div>
+                    {effectBox()}
                 </div>
                 <div class="right">
                     <div class="stats"> {stats} </div>

client/src/components/skill.btn.jsx

@@ -23,7 +23,11 @@ const addState = connect(
             dispatch(actions.setActiveSkill(constructId, skill));
         }
 
-        return { setActiveSkill };
+        function setGameInfo(info) {
+            dispatch(actions.setGameInfo(info));
+        }
+
+        return { setActiveSkill, setGameInfo };
     }
 );
 
@@ -35,13 +39,18 @@ function Skill(props) {
         i,
         activeSkill,
         setActiveSkill,
+        setGameInfo,
     } = props;
 
     if (!game) return false;
 
     const s = construct.skills[i];
     const ko = construct.green_life.value === 0 ? 'ko' : '';
-
+    
+    function hoverInfo(e, info) {
+        e.stopPropagation();
+        return setGameInfo(info);
+    }
     if (!s || !game) {
         return (
             <button
@@ -76,6 +85,8 @@ function Skill(props) {
         <button
             disabled={cdText || s.disabled || ko}
             class={`${(targeting || highlight) ? 'active' : ''} ${border}`}
+            onMouseOver={e => hoverInfo(e, { skill: s.skill, constructId: construct.id })}
+            onMouseOut={e => hoverInfo(e, null)}
             type="submit"
             onClick={onClick}>
             {s.skill} {cdText}