move mobile

client/cryps.css

@@ -659,4 +659,7 @@ header {
         display: none;
     }
 
+    .hidden {
+        display: none;
+    }
 }

client/src/components/instance.component.jsx

@@ -79,6 +79,7 @@ function InstanceComponent(args) {
         sendVboxApply,
         setInfo,
         activeVar,
+        setActiveVar,
     } = args;
 
     if (!instance) return <div>...</div>;
@@ -86,7 +87,7 @@ function InstanceComponent(args) {
     const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
 
     return (
-        <main className="instance" >
+        <main className="instance" onClick={() => setActiveVar(null)} >
             <div className="instance-hdr">
                 <button
                     className="instance-btn instance-ui-btn menu-btn left"

client/src/components/instance.container.jsx

@@ -28,7 +28,11 @@ const addState = connect(
             dispatch(actions.setInfo([item, value]));
         }
 
-        return { quit, setInfo };
+        function setActiveVar(value) {
+            dispatch(actions.setActiveVar(value));
+        }
+
+        return { quit, setInfo, setActiveVar };
     }
 
 );

client/src/components/vbox.component.jsx

@@ -28,7 +28,6 @@ function Vbox(args) {
 
     const { vbox } = instance;
     if (!instance.vbox) return false;
-    if (activeVar) return false;
 
     //
     // VBOX
@@ -38,28 +37,37 @@ function Vbox(args) {
         free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
     }
 
-    let freeDbl = -1;
-    function freeClick(e, i, j) {
-        // touch + double handling
-        if (freeDbl !== j) {
-            freeDbl = j;
-            setTimeout(() => {
-                freeDbl = -1;
-                if (free[i][j]) setInfo('item', free[i][j]);
-            }, 300);
-            return false;
-        }
+    let vboxTimer;
+    const LONG_TOUCH_TIME = 500;
+    function vboxTouchStart(e, i, j) {
         e.preventDefault();
-        freeDbl = -1;
+        e.stopPropagation();
+        vboxTimer = (setTimeout(() => {
+            sendVboxAccept(j, i);
+            vboxTimer = null;
+        }, LONG_TOUCH_TIME));
+        return true;
+    }
 
-        return sendVboxAccept(j, i);
+    function vboxTouchEnd(e, i, j) {
+        if (vboxTimer) {
+            clearTimeout(vboxTimer);
+            if (free[i][j]) setInfo('item', free[i][j]);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        return true;
     }
 
     const freeRows = free.map((row, i) => {
         const cells = row.map((c, j) => (
             <td
                 key={j}
-                onClick={e => freeClick(e, i, j)}
+                onTouchStart={e => vboxTouchStart(e, i, j)}
+                onTouchEnd={e => vboxTouchEnd(e, i, j)}
+
+                onClick={() => { if (c) return setInfo('item', c); }}
+                onDblClick={() => sendVboxAccept(j, i) }
                 >
                 {convertVar(c)}
             </td>
@@ -75,31 +83,36 @@ function Vbox(args) {
     //
     //  INVENTORY
     //
-    // lots of rubbish to make it flow nice
-    let boundDbl = -1;
-    function boundClick(e, i) {
-        // touch + double handling
-        if (boundDbl !== i) {
-            boundDbl = i;
-            setTimeout(() => {
-                if (vbox.bound[i]) setActiveVar(i);
-                boundDbl = -1;
-                return true;
-            }, 300);
-            return false;
-        }
+
+    let boundTimer;
+    function boundTouchStart(e, i) {
         e.preventDefault();
-        boundDbl = -1;
+        e.stopPropagation();
+        boundTimer = (setTimeout(() => {
+            const insert = combiner.findIndex(j => j === null);
+            if (insert === -1) return setCombiner([i, null, null]);
+            combiner[insert] = i;
+            boundTimer = null;
+            return setCombiner(combiner);
+        }, LONG_TOUCH_TIME));
+        return true;
+    }
 
-        // action
-        if (reclaiming && i) {
-            return sendVboxReclaim(i);
+    function boundTouchEnd(e, i) {
+        if (boundTimer) {
+            clearTimeout(boundTimer);
+
+            if (reclaiming && i) sendVboxReclaim(i);
+            else if (vbox.bound[i]) setActiveVar(i);
         }
+        e.stopPropagation();
+        e.preventDefault();
+        return true;
+    }
 
-        const insert = combiner.findIndex(j => j === null);
-        if (insert === -1) return setCombiner([i, null, null]);
-        combiner[insert] = i;
-        return setCombiner(combiner);
+    function boundClick(e, i) {
+        if (reclaiming && i) sendVboxReclaim(i);
+        else if (vbox.bound[i]) setActiveVar(i);
     }
 
     const boundTds = range(0, 9).map(i => {
@@ -116,6 +129,10 @@ function Vbox(args) {
                 key={i}
                 draggable="true"
                 onDragStart={e => e.dataTransfer.setData('text', i)}
+
+                onTouchStart={e => boundTouchStart(e, i)}
+                onTouchEnd={e => boundTouchEnd(e, i)}
+
                 onClick={e => boundClick(e, i) }>
                 {convertVar(vbox.bound[i])}
             </td>
@@ -162,8 +179,9 @@ function Vbox(args) {
     //
     // EVERYTHING
     //
+    const classes = `vbox ${activeVar !== null ? 'hidden' : ''}`;
     return (
-        <div className="vbox" onClick={() => setReclaiming(false)} >
+        <div className={classes} onClick={() => setReclaiming(false)} >
             <div className="vbox-hdr">
                 <div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
                 <div className="bits" >{vbox.bits}b</div>