From 5c0a76b9a617b252a6c361e8887e92a3068a93b0 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 19 Nov 2019 21:40:14 +1000
Subject: [PATCH] clear vboxselect and combiner on unequip select && highlight
 unequip

---
 client/assets/styles/instance.less            | 17 +++++++++++++++++
 client/src/components/instance.constructs.jsx | 14 +++++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index b94ad2d9..e54bf31e 100644
--- a/client/assets/styles/instance.less
+++ b/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;
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index e7c848a2..42d95444 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/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)} >