vboxUnequipApply aka swap construct items

client/src/components/instance.constructs.jsx

@@ -19,6 +19,7 @@ const addState = connect(
             account,
             itemInfo,
             itemEquip,
+            itemUnequip,
             navInstance,
             vboxSelected,
             tutorial,
@@ -36,14 +37,20 @@ const addState = connect(
             return ws.sendVboxUnequip(instance.id, constructId, item);
         }
 
+        function sendVboxUnequipApply(targetConstructId) {
+            return ws.sendVboxUnequipApply(instance.id, itemUnequip[0], itemUnequip[1], targetConstructId);
+        }
+
         return {
             instance,
             player,
             account,
             sendVboxAcceptEquip,
+            sendVboxUnequipApply,
             sendVboxApply,
             itemInfo,
             itemEquip,
+            itemUnequip,
             navInstance,
             sendUnequip,
             vboxSelected,
@@ -83,6 +90,7 @@ function Construct(props) {
         construct,
         iter,
         itemEquip,
+        itemUnequip,
         instance,
         mobileVisible,
         player,
@@ -93,13 +101,13 @@ function Construct(props) {
         // Function Calls
         sendVboxApply,
         sendVboxAcceptEquip,
+        sendVboxUnequipApply,
         sendUnequip,
         setActiveConstruct,
         setItemUnequip,
         setItemEquip,
         setInfo,
     } = props;
-
     const { vbox } = player;
 
     const duplicateSkill = construct.skills.length !== 0 && construct.skills.every(sk => {
@@ -108,15 +116,16 @@ function Construct(props) {
         return sk.skill === vbox.bound[itemEquip];
     });
     const tutorialDisableEquip = tutorialShouldDisableEquip(tutorial, iter, instance, construct);
-
     function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
         if (duplicateSkill || tutorialDisableEquip) return true;
-        if (vboxSelected[0]) sendVboxAcceptEquip(construct.id);
         if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
+        if (vboxSelected[0]) sendVboxAcceptEquip(construct.id);
+        if (itemUnequip.length && itemUnequip[0] !== construct.id) sendVboxUnequipApply(construct.id);
         setItemEquip(null);
-        return setActiveConstruct(construct);
+        setItemUnequip([]);
+        return true;
     }
 
     function hoverInfo(e, info) {
@@ -259,6 +268,7 @@ function Construct(props) {
 class InstanceConstructs extends preact.Component {
     shouldComponentUpdate(newProps) {
         if (newProps.itemEquip !== this.props.itemEquip) return true;
+        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.navInstance !== this.props.navInstance) return true;
         // JSON or Array objects
@@ -272,6 +282,7 @@ class InstanceConstructs extends preact.Component {
         const {
             // Changing state variables
             itemEquip,
+            itemUnequip,
             instance,
             navInstance,
             player,
@@ -284,6 +295,7 @@ class InstanceConstructs extends preact.Component {
             setActiveConstruct,
             sendVboxApply,
             sendVboxAcceptEquip,
+            sendVboxUnequipApply,
             setVboxHighlight,
             setItemUnequip,
             setItemEquip,
@@ -301,12 +313,14 @@ class InstanceConstructs extends preact.Component {
                 iter: i,
                 construct: player.constructs[i],
                 itemEquip,
+                itemUnequip,
                 instance,
                 setItemUnequip,
                 setItemEquip,
                 player,
                 sendVboxApply,
                 sendVboxAcceptEquip,
+                sendVboxUnequipApply,
                 setInfo,
                 setActiveConstruct,
                 itemInfo,