ggkkk

client/assets/styles/instance.css

@@ -109,6 +109,16 @@
 .vbox-hdr .bits {
     font-size: 2em;
     line-height: 1em;
+    animation: bits 1s ease-out;
+}
+
+@keyframes action {
+    0% {
+        color: palegoldenrod;
+    }
+    100% {
+        color: whitesmoke;
+    }
 }
 
 .vbox button {
@@ -298,7 +308,6 @@
 /* Equipment */
 .equip {
     display: flex;
-    margin: 1em 0;
     text-align: center;
 }
 

client/src/components/info.component.jsx

@@ -73,7 +73,7 @@ function Info(args) {
 
             return (
                 <div className="info-spec">
-                    <div>{info}</div>
+                    <h2>{info}</h2>
                     <div>{fullInfo.description}</div>
                     <div className="thresholds">
                         {thresholdEl}

client/src/components/instance.component.jsx

@@ -40,10 +40,16 @@ function Instance(args) {
 
     if (!instance) return false;
 
+    function hoverInfo(e, info) {
+        e.stopPropagation();
+        return setInfo(info);
+    }
+
     const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
     const readyBtn = (
         <button
             className={rdyClasses}
+            onMouseOver={e => hoverInfo(e, 'ready')}
             onClick={() => sendInstanceReady()}>
             Ready
         </button>

client/src/components/instance.cryps.jsx

@@ -38,10 +38,6 @@ const addState = connect(
             return dispatch(actions.setInfo(null));
         }
 
-        function setVboxHighlight(v) {
-            dispatch(actions.setVboxHighlight(v));
-        }
-
         function setItemEquip(v) {
             return dispatch(actions.setItemEquip(v));
         }
@@ -50,7 +46,7 @@ const addState = connect(
             return dispatch(actions.setItemUnequip(v));
         }
 
-        return { quit, clearInfo, setInfo, setActiveCryp, setItemUnequip, setItemEquip, setVboxHighlight };
+        return { quit, clearInfo, setInfo, setActiveCryp, setItemUnequip, setItemEquip };
     }
 
 );
@@ -65,17 +61,10 @@ function Cryp(props) {
         setActiveCryp,
         setItemUnequip,
         setItemEquip,
-        setVboxHighlight,
         itemInfo,
         setInfo,
     } = props;
 
-    function setHighlight(type) {
-        if (type === 'skill') return setVboxHighlight(itemInfo.items.filter(v => v.skill).map(v => v.item));
-        if (type === 'spec') return setVboxHighlight(itemInfo.items.filter(v => v.spec).map(v => v.item));
-        return false;
-    }
-
     function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -85,6 +74,8 @@ function Cryp(props) {
     }
 
     function hoverInfo(e, info) {
+        console.log(info);
+        if (!info) return false;
         e.stopPropagation();
         return setInfo(info);
     }
@@ -107,15 +98,15 @@ function Cryp(props) {
             return true;
         }
 
-        const action = skill ? '' : 'action';
+        // const action = skill ? '' : 'action';
         const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equip' : '';
-        const classes = `right ${action} ${equip}`;
+        const classes = `${equip}`;
         return (
             <button
                 key={i}
                 className={classes}
                 onClick={skillClick}
-                onMouseOver={e => hoverInfo(e, s)} >
+                onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
                 {s}
             </button>
         );

client/src/components/vbox.component.jsx

@@ -286,7 +286,7 @@ function Vbox(args) {
             <div className='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
                 <div className="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
-                    <div className="bits" >{vbox.bits}b</div>
+                    <div className="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <button
                     className="instance-btn instance-ui-btn vbox-btn"

client/src/constants.jsx

@@ -19,6 +19,14 @@ module.exports = {
             item: 'I-COMBINATOR',
             description: 'Combines purchased ITEMS into more powerful variants. Hover over an ITEM to see recipes.',
         },
+        bits: {
+            item: 'BITS',
+            description: 'The VBOX currency.\nColours: 1b\nSkills: 2b\nSpecs: 3b\nWin: +12b\nLose: +9b',
+        },
+        ready: {
+            item: 'READY',
+            description: 'Ends the VBOX PHASE. If your opponent is also ready the GAME PHASE begins.',
+        },
         reclaim: {
             item: 'RECLAIM',
             description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.',
@@ -39,7 +47,7 @@ module.exports = {
             item: 'QUICK ACCESS - SPECS',
             description: 'Click to select \nClick target CRYP to equip',
         },
-        crypSkill: {
+        crypSkills: {
             item: 'SKILLS',
             description: 'Skills are used by Cryps in-game.\nClick a SKILL above and select a CRYP to equip.',
         },