clear vboxselect and combiner on unequip select && highlight unequip

client/assets/styles/instance.less

@@ -162,6 +162,23 @@
 }
 
 .construct-list {
+    button {
+        &.highlight {
+            color: black;
+            background: @white;
+            // border: 1px solid @white; (this bangs around the vbox)
+
+            // overwrite the classes on white svg elements
+            svg {
+                stroke-width: 0.75em;
+            }
+
+            .white {
+                stroke: black;
+            }
+        }
+    }
+
     .name {
         grid-area: name;
         margin-bottom: 0.5em;

client/src/components/instance.constructs.jsx

@@ -71,6 +71,8 @@ const addState = connect(
         }
 
         function setItemUnequip(v) {
+            dispatch(actions.setVboxSelected([]));
+            dispatch(actions.setCombiner([]));
             return dispatch(actions.setItemUnequip(v));
         }
 
@@ -138,7 +140,7 @@ function Construct(props) {
 
         function skillClick(e) {
             if (!skill) return false;
-            setItemUnequip([construct.id, skill.skill]);
+            setItemUnequip([construct.id, skill.skill, i]);
             e.stopPropagation();
             return true;
         }
@@ -161,7 +163,9 @@ function Construct(props) {
             return borderFn();
         };
 
-        const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''} ${border()}`;
+        const highlight = itemUnequip[0] === construct.id && itemUnequip[1] === s ? 'highlight' : '';
+
+        const classes = `${highlight} ${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''} ${border()}`;
         return (
             <label onDragStart={ev => {
                 ev.dataTransfer.setData('text', '');
@@ -195,7 +199,7 @@ function Construct(props) {
 
         function specClick(e) {
             e.stopPropagation();
-            setItemUnequip([construct.id, s]);
+            setItemUnequip([construct.id, s, i]);
         }
 
         function specDblClick(e) {
@@ -205,8 +209,7 @@ function Construct(props) {
             e.preventDefault();
             return true;
         }
-
+        const highlight = itemUnequip[0] === construct.id && itemUnequip[1] === s && i === itemUnequip[2];
-
         return (
             <label onDragStart={ev => {
                 ev.dataTransfer.setData('text', '');
@@ -214,6 +217,7 @@ function Construct(props) {
             }} key={i} draggable="true" onDragEnd={() => setItemUnequip([])}>
                 <button
                     key={i}
+                    class={`${highlight ? 'highlight' : ''}`}
                     onClick={specClick}
                     onDblClick={specDblClick}
                     onMouseOver={e => hoverInfo(e, s)} >