touch events

client/src/components/vbox.component.jsx

@@ -27,35 +27,36 @@ function Vbox(args) {
     const { vbox } = instance;
     if (!instance.vbox) return false;
 
-    // lots of rubbish to make it flow nice
+    //
-    function boundClick(i) {
+    // VBOX
-        if (reclaiming && i) {
+    //
-            return sendVboxReclaim(i);
-        }
-
-        const insert = combiner.findIndex(j => j === null);
-        if (insert === -1) return setCombiner([i, null, null]);
-        combiner[insert] = i;
-        return setCombiner(combiner);
-    }
-
-    function combinerRmv(i) {
-        combiner[i] = null;
-        return setCombiner(combiner);
-    }
-
     const free = [];
     for (let i = 0 ; i < 6; i++) {
         free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
     }
 
+    let freeDbl = false;
+    function freeClick(e, i, j) {
+        // touch + double handling
+        if (!freeDbl) {
+            freeDbl = true;
+            setTimeout(() => {
+                freeDbl = false;
+                if (free[i][j]) setInfo('item', free[i][j]);
+            }, 300);
+            return false;
+        }
+        e.preventDefault();
+        freeDbl = false;
+
+        return sendVboxAccept(j, i);
+    }
+
     const freeRows = free.map((row, i) => {
         const cells = row.map((c, j) => (
             <td
                 key={j}
-                onClick={() => { if (c) return setInfo('item', c)}}
+                onClick={e => freeClick(e, i, j)}
-                onDblClick={() => sendVboxAccept(j, i) }
-                onTouchStart={() => sendVboxAccept(j, i) }
                 >
                 {convertVar(c)}
             </td>
@@ -68,6 +69,32 @@ function Vbox(args) {
         );
     });
 
+    //
+    //  INVENTORY
+    //
+    // lots of rubbish to make it flow nice
+    let boundDbl = false;
+    function boundClick(e, i) {
+        // touch + double handling
+        if (!boundDbl) {
+            boundDbl = true;
+            setTimeout(() => boundDbl = false, 300);
+            return false;
+        }
+        e.preventDefault();
+        boundDbl = false;
+
+        // action
+        if (reclaiming && i) {
+            return sendVboxReclaim(i);
+        }
+
+        const insert = combiner.findIndex(j => j === null);
+        if (insert === -1) return setCombiner([i, null, null]);
+        combiner[insert] = i;
+        return setCombiner(combiner);
+    }
+
     const boundTds = range(0, 9).map(i => {
         if (combiner.indexOf(i) > -1) {
             return (
@@ -82,7 +109,7 @@ function Vbox(args) {
                 key={i}
                 draggable="true"
                 onDragStart={e => e.dataTransfer.setData('text', i)}
-                onClick={() => boundClick(i) }>
+                onClick={e => boundClick(e, i) }>
                 {convertVar(vbox.bound[i])}
             </td>
         );
@@ -106,6 +133,13 @@ function Vbox(args) {
         </tr>,
     ];
 
+    //
+    // COMBINER
+    //
+    function combinerRmv(i) {
+        combiner[i] = null;
+        return setCombiner(combiner);
+    }
     const combinerElement = (
         <table className="vbox-table">
             <tbody>
@@ -118,6 +152,9 @@ function Vbox(args) {
         </table>
     );
 
+    //
+    // EVERYTHING
+    //
     return (
         <div className="vbox" onClick={() => setReclaiming(false)} >
             <div className="vbox-hdr">
@@ -134,7 +171,7 @@ function Vbox(args) {
                     {freeRows}
                 </tbody>
             </table>
-            <span>INVENTORY</span>
+            <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => setReclaiming(!reclaiming)}>