info skills

client/src/components/info.component.jsx

@@ -1,4 +1,6 @@
 const preact = require('preact');
+const range = require('lodash/range');
+
 const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
 const { COLOUR_ICONS, STATS } = require('../utils');
 
@@ -84,6 +86,15 @@ function Info(args) {
 
     if (type === 'cryp') {
         const cryp = value;
+
+// onClick={() => setInfo('skill', { skill: s, cryp })}
+        const skills = range(0, 4).map(i => {
+            const s = cryp.skills[i]
+                ? cryp.skills[i].skill
+                : (<span>&nbsp;</span>);
+            return <button key={i} className="cryp-skill-btn right" >{s}</button>;
+        });
+
         const stats = Object.values(STATS).map((s, j) => (
             <figure key={j} alt={s.stat} className={s.stat}>
                 {s.svg(`stat-icon ${s.colour}`)}
@@ -93,6 +104,9 @@ function Info(args) {
         return (
             <div className="instance-info">
                 <h5>{cryp.name}</h5>
+                <div className="info-skills">
+                    {skills}
+                </div>
                 <div className="info-stats">
                     {stats}
                 </div>

client/src/components/vbox.component.jsx

@@ -88,14 +88,11 @@ function Vbox(args) {
 
     let boundTimer;
     function boundTouchStart(e, i) {
-        e.preventDefault();
-        e.stopPropagation();
+        // e.preventDefault();
+        // 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);
+            return setActiveVar(i);
         }, LONG_TOUCH_TIME));
         return true;
     }
@@ -105,7 +102,12 @@ function Vbox(args) {
             clearTimeout(boundTimer);
 
             if (reclaiming && i) sendVboxReclaim(i);
-            else if (vbox.bound[i]) setActiveVar(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;
     }