better vbox touches

client/src/components/vbox.component.jsx

@@ -192,6 +192,7 @@ function Vbox(args) {
 
         function onClick(e) {
             e.stopPropagation();
+            setCombiner([]);
             if (selected) return clearVboxSelected();
             return setVboxSelected([group, index]);
         }
@@ -204,6 +205,7 @@ function Vbox(args) {
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
                     onMouseDown={onClick}
+                    onClick={e => e.stopPropagation()}
                     onDblClick={onDblClick} >
                     {shapes[v]()}
                 </button>
@@ -214,6 +216,7 @@ function Vbox(args) {
             <button
                 class={classes}
                 onMouseDown={onClick}
+                onClick={e => e.stopPropagation()}
                 onDblClick={onDblClick}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
@@ -226,6 +229,7 @@ function Vbox(args) {
         return (
             <div class='vbox-vbox'
                 onMouseDown={() => setReclaiming(false)}
+                onClick={e => e.stopPropagation()}
                 onMouseOver={e => hoverInfo(e, 'vbox')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
@@ -241,6 +245,7 @@ function Vbox(args) {
                 <button
                     class='vbox-btn'
                     onMouseOver={e => hoverInfo(e, 'refill')}
+                    onClick={e => e.stopPropagation()}
                     onMouseDown={() => sendVboxDiscard()}>
                     refill - 2b
                 </button>
@@ -251,32 +256,6 @@ function Vbox(args) {
     //
     //  INVENTORY
     //
-
-    // const boundTds = range(0, 9).map(i => {
-    //     const value = vbox.bound[i];
-    //     if (combiner.indexOf(i) > -1) {
-    //         return (
-    //             <td
-    //                 key={i}>
-    //                 &nbsp;
-    //             </td>
-    //         );
-    //     }
-
-    //     const highlighted = value && vboxHighlight.includes(value);
-
-    //     return (
-    //         <td
-    //             key={i}
-    //             class={`${highlighted ? 'highlight' : ''}`}
-    //             onMouseOver={(e) => vboxHover(e, value)}
-    //             onMouseDown={e => boundClick(e, i, highlighted) }>
-    //             {convertItem(value)}
-    //         </td>
-    //     );
-    // });
-
-
     function reclaimClick(e) {
         e.stopPropagation();
         return setReclaiming(!reclaiming);
@@ -292,6 +271,7 @@ function Vbox(args) {
         }
 
         function onClick(e) {
+            if (vboxSelecting) clearVboxSelected();
             if (reclaiming) return sendVboxReclaim(i);
 
             const combinerIndex = combiner.indexOf(i);
@@ -310,6 +290,7 @@ function Vbox(args) {
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
+                    onClick={e => e.stopPropagation()}
                     onMouseDown={onClick}>
                     {shapes[v]()}
                 </button>
@@ -320,6 +301,7 @@ function Vbox(args) {
             <button
                 class={classes}
                 onMouseDown={onClick}
+                onClick={e => e.stopPropagation()}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
             </button>
@@ -346,6 +328,7 @@ function Vbox(args) {
                 class='vbox-btn'
                 disabled={combiner.length !== 3}
                 onMouseOver={e => hoverInfo(e, 'refine')}
+                onClick={e => e.stopPropagation()}
                 onMouseDown={() => sendVboxCombine()}>
                 {text}
             </button>
@@ -364,6 +347,7 @@ function Vbox(args) {
         return (
             <div class={inventoryClass}
                 onMouseDown={inventoryClick}
+                onClick={e => e.stopPropagation()}
                 style={vboxSelecting || itemUnequip.length ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
@@ -371,6 +355,7 @@ function Vbox(args) {
                     <button
                         class='vbox-btn reclaim'
                         onMouseOver={e => hoverInfo(e, 'reclaim')}
+                        onClick={e => e.stopPropagation()}
                         onMouseDown={reclaimClick}>
                         reclaim
                     </button>