Click item -> click cryp for equip

client/instance.css

@@ -321,6 +321,18 @@
     justify-content: center;
 }
 
+.instance-equip .items {
+    display: flex;
+    justify-content: center;
+}
+
+.instance-equip .label {
+    display: flex;
+    justify-content: center;
+    font-size: 20pt;
+    padding: 15px;
+
+}
 .instance-equip .skills {
     display: flex;
     min-height: 100px;
@@ -341,26 +353,12 @@
 
 }
 
-
 .instance-equip .specs {
     display: flex;
     padding-left: 50px;
     flex-direction: column;
 }
 
-.instance-equip .items {
-    display: flex;
-    justify-content: center;
-}
-
-.instance-equip .label {
-    display: flex;
-    justify-content: center;
-    font-size: 20pt;
-    padding: 15px;
-
-}
-
 .instance-equip .specs figure {
     flex: 1;
     border: 0;

client/src/components/instance.cryps.jsx

@@ -8,7 +8,7 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, vboxHidden, vboxInfo } = state;
+        const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.id);
@@ -18,7 +18,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.id, crypId, i);
         }
 
-        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar };
     },
 
     function receiveDispatch(dispatch) {
@@ -49,11 +49,13 @@ const addState = connect(
 
 function Cryp(props) {
     const {
+        activeVar,
         cryp,
+        sendVboxApply,
         setInfo,
         setActiveCryp,
-        vboxInfo,
         setVboxHighlight,
+        vboxInfo,
     } = props;
 
     function setHighlight(type) {
@@ -69,6 +71,7 @@ function Cryp(props) {
             : (<span>&nbsp;</span>);
 
         function skillClick(e) {
+            if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar);
             if (!skill) setHighlight('skill');
             else setInfo('skill', { skill: skill.skill, cryp });
             e.stopPropagation();
@@ -84,6 +87,7 @@ function Cryp(props) {
     function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
+        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
         return setActiveCryp(cryp);
     }
 
@@ -92,8 +96,9 @@ function Cryp(props) {
 
         function blankSpecClick(e) {
             e.stopPropagation();
-            setActiveCryp(cryp);
+            if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
             setHighlight('spec');
+            return setActiveCryp(cryp);
         }
 
         if (!s) {
@@ -193,9 +198,9 @@ function Cryp(props) {
 
 function InstanceCryps(props) {
     const {
+        activeVar,
         player,
         instance,
-
         // clearInfo,
         setInfo,
         setActiveCryp,
@@ -210,7 +215,7 @@ function InstanceCryps(props) {
     if (instance.phase === 'Lobby') return false;
 
     const cryps = player.cryps.map((c, i) => Cryp({
-        cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
+        activeVar, cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;

client/src/components/instance.equip.jsx

@@ -21,7 +21,11 @@ const addState = connect(
             return dispatch(actions.setInfo([]));
         }
 
-        return { setInfo, clearInfo };
+        function setActiveVar(v) {
+            return dispatch(actions.setActiveVar(v));
+        }
+
+        return { setInfo, setActiveVar, clearInfo };
     }
 
 );
@@ -29,8 +33,9 @@ const addState = connect(
 function Equipment(props) {
     const {
         player,
-        setInfo,
         vboxInfo,
+        setInfo,
+        setActiveVar,
     } = props;
 
     const { vbox } = player;
@@ -38,7 +43,7 @@ function Equipment(props) {
     function boundClick(e, i) {
         const value = vbox.bound[i];
         setInfo('item', value);
-
+        setActiveVar(i);
         return false;
     }
 
@@ -68,13 +73,15 @@ function Equipment(props) {
             );
         } return false;
     });
-    // const specLabel = specs.every(i => i === false) ? '' : 'Specs';
+
+    const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
+    const specLabel = specs.every(i => i === false) ? '' : 'Specs';
 
     return (
         <div className="instance-equip" >
             <div className="skills">
                 <div className="label">
-                    Skills
+                    {skillLabel}
                 </div>
                 <div className ="items">
                     {skills}
@@ -82,7 +89,7 @@ function Equipment(props) {
             </div>
             <div className="specs">
                 <div className="label">
-                    Specs
+                    {specLabel}
                 </div>
                 <div className ="items">
                     {specs}