vbox actions

client/src/components/instance.component.jsx

@@ -20,8 +20,19 @@ const addState = connect(
             return dispatch(actions.setInfo(c));
         }
 
+        function clearItems() {
+            dispatch(actions.setCombiner([]));
+            dispatch(actions.setReclaiming(false));
+            dispatch(actions.setItemEquip(null));
+            dispatch(actions.setItemUnequip([]));
+            dispatch(actions.setVboxHighlight([]));
+            dispatch(actions.setVboxSelected([]));
+            return true;
+        }
+
         return {
             setInfo,
+            clearItems,
         };
     }
 );
@@ -30,6 +41,7 @@ function Instance(args) {
     const {
         instance,
         setInfo,
+        clearItems,
 
         nav,
     } = args;
@@ -44,9 +56,14 @@ function Instance(args) {
         );
     }
 
+    function instanceClick(e) {
+        e.stopPropagation();
+        clearItems();
+    }
+
     const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
     return (
-        <main class={instanceClasses} onMouseOver={() => setInfo(null)} >
+        <main class={instanceClasses} onClick={instanceClick} onMouseOver={() => setInfo(null)} >
             <Vbox />
             <InfoContainer />
             <InstanceConstructsContainer />

client/src/components/instance.constructs.jsx

@@ -107,7 +107,7 @@ function Construct(props) {
 
         function skillClick(e) {
             if (!skill) return false;
-            setItemUnequip(skill.skill);
+            setItemUnequip([construct.id, skill.skill]);
             setActiveConstruct(construct);
             e.stopPropagation();
             return true;
@@ -117,7 +117,7 @@ function Construct(props) {
             if (!skill) return false;
             sendUnequip(construct.id, skill.skill);
             setActiveConstruct(null);
-            setItemUnequip(null);
+            setItemUnequip([]);
             e.stopPropagation();
             e.preventDefault();
             return true;
@@ -156,14 +156,14 @@ function Construct(props) {
 
         function specClick(e) {
             e.stopPropagation();
-            setItemUnequip(s);
+            setItemUnequip([construct.id, s]);
             setActiveConstruct(construct);
         }
 
         function specDblClick(e) {
             sendUnequip(construct.id, s);
             setActiveConstruct(null);
-            setItemUnequip(null);
+            setItemUnequip([]);
             e.stopPropagation();
             e.preventDefault();
             return true;

client/src/components/instance.equip.jsx

@@ -74,7 +74,7 @@ function Equipment(props) {
         e.stopPropagation();
         if (!itemUnequip) return false;
         if (!activeConstruct) return false;
-        setItemUnequip(null);
+        setItemUnequip([]);
         return sendUnequip(activeConstruct.id, itemUnequip);
     }
 

client/src/components/nav.jsx

@@ -52,7 +52,7 @@ const addState = connect(
             dispatch(actions.setActiveConstruct(null));
             dispatch(actions.setInfo(null));
             dispatch(actions.setItemEquip(null));
-            dispatch(actions.setItemUnequip(null));
+            dispatch(actions.setItemUnequip([]));
             dispatch(actions.setVboxHighlight([]));
 
             return dispatch(actions.setNav(place));

client/src/components/vbox.component.jsx

@@ -17,6 +17,7 @@ const addState = connect(
             vboxHighlight,
             vboxSelected,
             itemInfo,
+            itemUnequip,
         } = state;
 
         function sendVboxDiscard() {
@@ -35,6 +36,10 @@ const addState = connect(
             return ws.sendVboxReclaim(instance.id, i);
         }
 
+        function sendItemUnequip([constructId, item]) {
+            return ws.sendVboxUnequip(instance.id, constructId, item);
+        }
+
         return {
             combiner,
             instance,
@@ -47,6 +52,8 @@ const addState = connect(
             vboxHighlight,
             vboxSelected,
             itemInfo,
+            itemUnequip,
+            sendItemUnequip
         };
     },
 
@@ -107,6 +114,8 @@ function Vbox(args) {
         setVboxSelected,
 
         setItemEquip,
+        itemUnequip,
+        sendItemUnequip,
 
         setReclaiming,
         setVboxHighlight,
@@ -158,10 +167,14 @@ function Vbox(args) {
         return true;
     }
 
+    function clearVboxSelected() {
+        setVboxSelected([]);
+    }
+
     function vboxBuySelected() {
         if (!vboxSelecting) return false;
         document.activeElement.blur();
-        setVboxSelected([]);
+        clearVboxSelected();
         sendVboxAccept(vboxSelected[0], vboxSelected[1]);
         return true;
     }
@@ -171,7 +184,8 @@ function Vbox(args) {
 
         const selected = vboxSelected[0] === group && vboxSelected[1] === index;
 
-        function onClick() {
+        function onClick(e) {
+            e.stopPropagation();
             // double clicked
             if (selected) {
                 return vboxBuySelected();
@@ -267,8 +281,10 @@ function Vbox(args) {
     const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     function inventoryBtn(v, i) {
+        const inventoryHighlight = vboxSelecting || itemUnequip.length;
+
         if (!v && v !== 0) {
-            return <button disabled={!vboxSelecting} class={vboxSelecting ? 'receiving' : 'empty'} >&nbsp;</button>;
+            return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
         }
 
         function onClick(e) {
@@ -334,15 +350,18 @@ function Vbox(args) {
     }
 
     function inventoryElement() {
-        function inventoryClick() {
+        function inventoryClick(e) {
+            e.stopPropagation();
             setReclaiming(false);
-            if (vboxSelecting) vboxBuySelected();
+            if (vboxSelecting) return vboxBuySelected();
+            if (itemUnequip.length) return sendItemUnequip(itemUnequip);
             return true;
         }
 
         return (
             <div class='vbox-section'
                 onClick={inventoryClick}
+                style={vboxSelecting ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>