skill info on hover in effect box

WORKLOG.md

@@ -3,10 +3,8 @@
 
 *PRODUCTION*
 
-* border colours for skills e.g. strike red border, slay half red half green
 * rename vbox to shop
 * combat phase info system
-* drag and drop buy / equip / unequip items
 
 * mobile styles
 * mobile info page
@@ -71,6 +69,7 @@ $$$
   * Highlight (dota) colour
   * fx colours + styles
 
+* ??? (PROBS NOT) drag and drop buy / equip / unequip items ???
 * modules
   * troll life -> dmg
   * prince of peace

client/assets/styles/game.less

@@ -204,6 +204,7 @@
 
 .resolving-skill {
     grid-area: target;
+    text-align: center;
     align-self: center;
     height: auto;
     svg {
@@ -213,6 +214,17 @@
     }
 }
 
+.skill-description {
+    padding-left: 1em;
+    padding-right: 1em;
+    text-align: center;
+    svg {
+        display: inline;
+        height: 1em;
+        margin-right: 0.1em
+    }
+}
+
 /* some stupid bug in chrome makes it fill the entire screen */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     #targeting {

client/src/actions.jsx

@@ -18,6 +18,7 @@ export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', val
 export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
 export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', value });
 export const setGame = value => ({ type: 'SET_GAME', value });
+export const setGameInfo = value => ({ type: 'SET_GAME_INFO', value });
 export const setInfo = value => ({ type: 'SET_INFO', value });
 export const setEmail = value => ({ type: 'SET_EMAIL', value });
 export const setInvite = value => ({ type: 'SET_INVITE', value });

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,6 +39,7 @@ function Skill(props) {
         i,
         activeSkill,
         setActiveSkill,
+        setGameInfo,
     } = props;
 
     if (!game) return false;
@@ -42,6 +47,10 @@ function Skill(props) {
     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}

client/src/reducers.jsx

@@ -29,6 +29,7 @@ module.exports = {
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),
     constructRename:    createReducer(null, 'SET_CONSTRUCT_RENAME'),
     game:               createReducer(null, 'SET_GAME'),
+    gameInfo:           createReducer(null, 'SET_GAME_INFO'),
     email:              createReducer(null, 'SET_EMAIL'),
     invite:             createReducer(null, 'SET_INVITE'),
     info:               createReducer(null, 'SET_INFO'),