nearly

client/assets/styles/instance.css

@@ -35,7 +35,7 @@
 }
 
 .instance .info {
-    font-size: 75%;
+    /*font-size: 75%;*/
     margin-left: 1em;
     grid-area: info;
     display: flex;
@@ -44,6 +44,10 @@
     white-space: pre-wrap;
 }
 
+.instance .info h2 {
+    text-transform: uppercase;
+}
+
 .instance .cryps {
     grid-area: cryps;
 }
@@ -391,22 +395,22 @@ button.equip {
 
 .thresholds {
     display: flex;
-    flex-flow: column;
+    flex-flow: row-wrap;
-    align-items: center;
+    /*align-items: center;*/
-    /*justify-content: space-around;*/
+    justify-content: space-around;
 }
 
-.spec-goals figure {
+.spec-goals {
-    margin: 1em 0;
 }
 
 .spec-goals figure svg {
-    height: 1em;
+    height: 2em;
 }
 
 .spec-goals .unmet {
     opacity: 0.5;
 }
+
 /* Mobile Nav*/
 #toggle-vbox { display: none; }
 #toggle-vbox-label { display: none; }

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')} >

client/src/constants.jsx

@@ -9,36 +9,45 @@ module.exports = {
     INFO: {
         vbox: {
             item: 'VBOX',
-            description: 'Contains items that are available for you to buy.\nDouble-click to purchase.',
+            description: 'Contains ITEMS that are available for you to buy.\nDouble-click to purchase.',
         },
         inventory: {
             item: 'INVENTORY',
-            description: 'Holds purchased items.',
+            description: 'Holds purchased ITEMS.\nClick to add ITEM to I-COMBINATOR.',
         },
         combiner: {
             item: 'I-COMBINATOR',
-            description: 'Combines purchased items into more powerful variants. Hover over an item to see recipes.',
+            description: 'Combines purchased ITEMS into more powerful variants. Hover over an ITEM to see recipes.',
         },
         reclaim: {
             item: 'RECLAIM',
-            description: 'Reclaim items for half the purchase cost of their combined items.\nClick to enable and click item to reclaim.',
+            description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.',
         },
         refine: {
             item: 'REFINE',
-            description: 'Refine items currently in I-COMBINATOR into more powerful variants',
+            description: 'Refine ITEMS currently in I-COMBINATOR into more powerful variants',
         },
         reroll: {
             item: 'REROLL',
-            description: 'Refill the VBOX with new items.\nCosts 5b.',
+            description: 'Refill the VBOX with new ITEMS.\nCosts 5b.',
         },
         equipSkills: {
             item: 'QUICK ACCESS - SKILLS',
-            description: 'Click to select \nClick target Cryp to equip',
+            description: 'Click to select \nClick target CRYP to equip',
         },
         equipSpecs: {
             item: 'QUICK ACCESS - SPECS',
-            description: 'Click to select \nClick target Cryp to equip',
+            description: 'Click to select \nClick target CRYP to equip',
         },
+        crypSkill: {
+            item: 'SKILLS',
+            description: 'Skills are used by Cryps in-game.\nClick a SKILL above and select a CRYP to equip.',
+        },
+        crypSpecs: {
+            item: 'SPECS',
+            description: 'SPECS increase the STATS of a CRYP.\nSPECS have increased effect once they reach a THRESHOLD across your whole team.\nClick a SPEC above and select a CRYP to equip.',
+        },
+
     },
 
     ITEMS: {