equip from highlight

client/src/components/instance.cryps.jsx

@@ -62,9 +62,10 @@ function Cryp(props) {
             ? skill.skill
             : (<span>&nbsp;</span>);
 
-        function skillClick() {
-            if (!skill) return setInfo('highlight', 'skill');
-            setInfo('skill', { skill: skill.skill, cryp });
+        function skillClick(e) {
+            if (!skill) setInfo('highlight', 'skill');
+            else setInfo('skill', { skill: skill.skill, cryp });
+            e.stopPropagation();
             return setActiveCryp(cryp);
         }
 
@@ -97,16 +98,23 @@ function Cryp(props) {
     const specs = range(0, 6).map(i => {
         const s = cryp.specs[i];
 
+        function blankSpecClick(e) {
+            e.stopPropagation();
+            setActiveCryp(cryp);
+            setInfo('highlight', 'spec')
+        }
+
         if (!s) {
             return (
-                <figure key={i} className="gray" onClick={() => setInfo('highlight', 'spec')}>
+                <figure key={i} className="gray" onClick={blankSpecClick}>
                     {shapes.diamond('stat-icon gray')}
-                    <figcaption>-</figcaption>
+                    <figcaption>&nbsp;</figcaption>
                 </figure>
             );
         }
 
-        function specClick() {
+        function specClick(e) {
+            e.stopPropagation();
             setActiveCryp(cryp);
             setInfo('spec', { spec: s, cryp });
         }
@@ -181,7 +189,7 @@ function InstanceCryps(props) {
     }));
 
     return (
-        <div className={crypListClass}>
+        <div className={crypListClass} onClick={() => setActiveCryp(null)}>
             {cryps}
         </div>
     );

client/src/components/vbox.component.jsx

@@ -19,9 +19,9 @@ function Vbox(args) {
         sendVboxDiscard,
         sendVboxReclaim,
         sendVboxCombine,
+        sendVboxApply,
         setCombiner,
         setReclaiming,
-        setActiveVar,
         setInfo,
     } = args;
 
@@ -85,46 +85,13 @@ function Vbox(args) {
     //
     //  INVENTORY
     //
-
-    let boundTimer;
-    function boundTouchStart(e, i) {
-        // e.preventDefault();
-        // e.stopPropagation();
-        boundTimer = (setTimeout(() => {
-            boundTimer = null;
-            return setActiveVar(i);
-        }, LONG_TOUCH_TIME));
-        return true;
-    }
-
-    function boundTouchEnd(e, i) {
-        if (boundTimer) {
-            clearTimeout(boundTimer);
-
-            if (reclaiming && vbox.bound[i]) sendVboxReclaim(i);
-            else if (vbox.bound[i]) {
-                const insert = combiner.findIndex(j => j === null);
-                if (insert === -1) return setCombiner([i, null, null]);
-                combiner[insert] = i;
-                return setCombiner(combiner);
-            }
-        }
-        return true;
-    }
-
-    function boundTouchMove(e) {
-        if (boundTimer) clearTimeout(boundTimer);
-        e.stopPropagation();
-        return true;
-    }
-
-    function boundClick(e, i) {
+    function boundClick(e, i, highlight) {
         if (reclaiming && vbox.bound[i]) sendVboxReclaim(i);
+        else if (highlight && activeCryp) sendVboxApply(i);
         else if (vbox.bound[i]) {
             const insert = combiner.findIndex(j => j === null);
             if (insert === -1) return setCombiner([i, null, null]);
             combiner[insert] = i;
-            boundTimer = null;
             return setCombiner(combiner);
         }
         return false;
@@ -141,7 +108,7 @@ function Vbox(args) {
             );
         }
 
-        const highlight = () => {
+        const highlighted = () => {
             if (!value || !info[0] || info[0] !== 'highlight') return false;
             const v = vboxInfo.vars.find(vi => vi.v === value);
             console.log(v);
@@ -150,17 +117,15 @@ function Vbox(args) {
             return false;
         };
 
+        const highlight = highlighted();
+
         return (
             <td
                 key={i}
                 draggable="true"
                 onDragStart={e => e.dataTransfer.setData('text', i)}
-                className={`${highlight() ? 'highlight' : ''}`}
-                onTouchStart={e => boundTouchStart(e, i)}
-                onTouchEnd={e => boundTouchEnd(e, i)}
-                onTouchMove={e => boundTouchMove(e)}
-
-                onClick={e => boundClick(e, i) }>
+                className={`${highlight ? 'highlight' : ''}`}
+                onClick={e => boundClick(e, i, highlight) }>
                 {convertVar(value)}
             </td>
         );
@@ -218,7 +183,7 @@ function Vbox(args) {
         return setReclaiming(!reclaiming);
     }
 
-    const classes = `vbox ${activeVar !== null || activeCryp ? 'hidden' : ''}`;
+    const classes = `vbox`;
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;
 
     return (

client/src/components/vbox.container.jsx

@@ -18,6 +18,10 @@ const addState = connect(
             vboxInfo,
         } = state;
 
+        function sendVboxApply(i) {
+            return ws.sendVboxApply(instance.id, activeCryp.id, i);
+        }
+
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.id);
         }
@@ -47,6 +51,7 @@ const addState = connect(
             sendVboxDiscard,
             sendVboxReclaim,
             sendVboxCombine,
+            sendVboxApply,
         };
     },