yew

client/assets/styles/vbox.less

@@ -45,19 +45,19 @@
         background-color: @gray;
         border-width: 0;
 
-        .reclaim {
-            height: auto;
-
-            :hover {
-                color: @red;
-            };
-        }
-
         :active, :hover, :focus {
             color: white;
         }
 
-        .reclaiming, .reclaiming:hover, .reclaiming:active {
+        &.reclaim {
+            height: auto;
+
+            &:hover {
+                color: @red;
+            };
+        }
+
+        &.reclaiming, &.reclaiming:hover, &.reclaiming:active {
             background: @red;
             color: black;
         }

client/src/components/instance.constructs.jsx

@@ -81,11 +81,15 @@ function Construct(props) {
         sendUnequip,
     } = props;
 
+    const fullInfo = itemInfo.items.find(i => i.item === itemEquip);
+    const isSkill = fullInfo && fullInfo.skill;
+    const isSpec = fullInfo && fullInfo.spec;
+    const equipping = itemEquip && (isSkill || isSpec);
+
     function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
-        console.log('const click eA')
-        if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
+        if (equipping) sendVboxApply(construct.id, itemEquip);
         setItemEquip(null);
         return setActiveConstruct(construct);
     }
@@ -124,13 +128,11 @@ function Construct(props) {
             return true;
         }
 
-        // const action = skill ? '' : 'action';
-        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
-        const classes = `${equip}`;
+        const classes = `${equipping ? 'equipping' : ''}`;
         return (
             <button
                 key={i}
-                disabled={!skill && itemEquip === null}
+                disabled={!skill && !equipping}
                 class={classes}
                 onClick={skillClick}
                 onDblClick={skillDblClick}
@@ -153,8 +155,6 @@ function Construct(props) {
             );
         }
 
-        const specInfo = itemInfo.items.find(i => i.item === s);
-
         function specClick(e) {
             e.stopPropagation();
             setItemUnequip(s);

client/src/components/nav.jsx

@@ -52,7 +52,7 @@ const addState = connect(
         function setNav(place) {
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
-            dispatch(actions.setCombiner([null, null, null]));
+            dispatch(actions.setCombiner([]));
             dispatch(actions.setReclaiming(false));
             dispatch(actions.setActiveSkill(null));
             dispatch(actions.setActiveConstruct(null));

client/src/components/vbox.component.jsx

@@ -71,12 +71,17 @@ const addState = connect(
             return dispatch(actions.setVboxSelected(v));
         }
 
+        function setItemEquip(v) {
+            return dispatch(actions.setItemEquip(v));
+        }
+
         return {
             setCombiner,
             setReclaiming,
             setInfo,
             setVboxHighlight,
             setVboxSelected,
+            setItemEquip,
         };
     }
 
@@ -101,6 +106,8 @@ function Vbox(args) {
         vboxSelected,
         setVboxSelected,
 
+        setItemEquip,
+
         setReclaiming,
         setVboxHighlight,
     } = args;
@@ -116,6 +123,13 @@ function Vbox(args) {
 
     function combinerChange(newCombiner) {
         setCombiner(newCombiner);
+
+        if (combiner.length === 1) {
+            setItemEquip(newCombiner[0]);
+        } else {
+            setItemEquip(null);
+        }
+
         if (newCombiner.every(c => c === null)) return setVboxHighlight([]);
 
         const combinerValues = newCombiner.map(cv => player.vbox.bound[cv]).filter(cv => cv);