vbox second buy method

client/assets/styles/instance.less

@@ -348,7 +348,7 @@
 //     opacity: 0;
 // }
 
-.equipping {
+.equipping, .receiving {
     transition: border-color 0.5s ease-in;
     border-color: whitesmoke;
     border-width: 2px;

client/src/components/vbox.component.jsx

@@ -98,7 +98,7 @@ function Vbox(args) {
         sendVboxCombine,
         sendVboxDiscard,
         sendVboxReclaim,
-        vboxHighlight,
+        // vboxHighlight,
 
         setCombiner,
         setInfo,
@@ -114,6 +114,7 @@ function Vbox(args) {
 
     if (!player) return false;
     const { vbox } = player;
+    const vboxSelecting = vboxSelected.length;
 
     // function setHighlight(type) {
     //     if (type === 'skill') return setVboxHighlight(itemInfo.items.filter(v => v.skill).map(v => v.item));
@@ -157,23 +158,34 @@ function Vbox(args) {
         return true;
     }
 
+    function vboxBuySelected() {
+        if (!vboxSelecting) return false;
+        document.activeElement.blur();
+        setVboxSelected([]);
+        sendVboxAccept(vboxSelected[0], vboxSelected[1]);
+        return true;
+    }
+
     function availableBtn(v, group, index) {
         if (!v) return <button disabled class='empty' >&nbsp;</button>;
 
+        const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+
         function onClick() {
             // double clicked
-            if (vboxSelected[0] === group && vboxSelected[1] === index) {
-                document.activeElement.blur();
-                setVboxSelected([]);
-                return sendVboxAccept(group, index);
+            if (selected) {
+                return vboxBuySelected();
             }
 
             return setVboxSelected([group, index]);
         }
 
+        const classes = `${selected ? 'highlight' : ''}`;
+
         if (shapes[v]) {
             return (
                 <button
+                    class={classes}
                     onMouseOver={e => vboxHover(e, v)}
                     onClick={onClick}>
                     {shapes[v]()}
@@ -183,6 +195,7 @@ function Vbox(args) {
 
         return (
             <button
+                class={classes}
                 onClick={onClick}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
@@ -254,7 +267,9 @@ function Vbox(args) {
     const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     function inventoryBtn(v, i) {
-        if (!v && v !== 0) return <button disabled class='empty' >&nbsp;</button>;
+        if (!v && v !== 0) {
+            return <button disabled={!vboxSelecting} class={vboxSelecting ? 'receiving' : 'empty'} >&nbsp;</button>;
+        }
 
         function onClick(e) {
             if (reclaiming) return sendVboxReclaim(i);
@@ -319,9 +334,15 @@ function Vbox(args) {
     }
 
     function inventoryElement() {
+        function inventoryClick() {
+            setReclaiming(false);
+            if (vboxSelecting) vboxBuySelected();
+            return true;
+        }
+
         return (
             <div class='vbox-section'
-                onClick={() => setReclaiming(false)}
+                onClick={inventoryClick}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
@@ -343,8 +364,6 @@ function Vbox(args) {
     //
     // EVERYTHING
     //
-
-
     function hoverInfo(e, info) {
         e.stopPropagation();
         return setInfo(info);