nearly

client/src/components/info.component.jsx

@@ -17,7 +17,6 @@ function Info(args) {
     function Info() {
         if (!info) return false;
         const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
-        console.log(INFO);
         if (!fullInfo) return false;
         const isSkill = fullInfo.skill;
         const isSpec = fullInfo.spec;

client/src/components/instance.cryps.jsx

@@ -67,6 +67,7 @@ function Cryp(props) {
         setItemEquip,
         setVboxHighlight,
         itemInfo,
+        setInfo,
     } = props;
 
     function setHighlight(type) {
@@ -83,6 +84,11 @@ function Cryp(props) {
         return setActiveCryp(cryp);
     }
 
+    function hoverInfo(e, info) {
+        e.stopPropagation();
+        return setInfo(info);
+    }
+
     const { vbox } = player;
     const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
     const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
@@ -105,7 +111,13 @@ function Cryp(props) {
         const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equip' : '';
         const classes = `right ${action} ${equip}`;
         return (
-            <button key={i} className={classes} onClick={skillClick} >{s}</button>
+            <button
+                key={i}
+                className={classes}
+                onClick={skillClick}
+                onMouseOver={e => hoverInfo(e, s)} >
+                {s}
+            </button>
         );
     });
 
@@ -128,7 +140,7 @@ function Cryp(props) {
         }
 
         return (
-            <figure key={i} onClick={specClick}>
+            <figure key={i} onClick={specClick} onMouseOver={e => hoverInfo(e, s)} >
                 {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
                 <figcaption>{SPECS[s].caption}</figcaption>
             </figure>
@@ -157,14 +169,15 @@ function Cryp(props) {
     //     return 4;
     // };
     // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
+
     return (
         <div key={cryp.id} className={crypClass} onClick={onClick} >
             {crypAvatar(cryp.name)}
             <h2 className="name" >{cryp.name}</h2>
-            <div className="skills">
+            <div className="skills" onMouseOver={e => hoverInfo(e, 'crypSkills')} >
                 {skills}
             </div>
-            <div className="specs">
+            <div className="specs" onMouseOver={e => hoverInfo(e, 'crypSpecs')} >
                 {specs}
             </div>
             <div className="stats">

client/src/components/instance.equip.jsx

@@ -74,6 +74,11 @@ function Equipment(props) {
         return sendUnequip(activeCryp.id, itemUnequip);
     }
 
+    function hoverInfo(e, info) {
+        e.stopPropagation();
+        return setInfo(info);
+    }
+
     const skillClass = isSkill ? 'skills highlight' : 'skills';
     const specClass = isSpec ? 'specs highlight' : 'specs';
 
@@ -84,7 +89,7 @@ function Equipment(props) {
         const item = convertItem(vbox.bound[i]);
         if (skillList.includes(item)) {
             return (
-                <button key={i} onClick={e => boundClick(e, i)}>
+                <button key={i} onClick={e => boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
                     {item}
                 </button>
             );
@@ -95,7 +100,7 @@ function Equipment(props) {
         const item = convertItem(vbox.bound[i]);
         if (specList.includes(item)) {
             return (
-                <figure key={i} onClick={e => boundClick(e, i)}>
+                <figure key={i} onClick={e => boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
                     {SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
                     <figcaption>{SPECS[item].caption}</figcaption>
                 </figure>
@@ -103,11 +108,6 @@ function Equipment(props) {
         } return false;
     });
 
-    function hoverInfo(e, info) {
-        e.stopPropagation();
-        return setInfo(info);
-    }
-
     return (
         <div className="equip" >
             <div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >