info skills

client/cryps.css

@@ -10,7 +10,11 @@ html, body, .cryps {
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 16pt;
+
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 
     /* this is the sweet nectar to keep it full page*/
     height: 99%;
@@ -401,6 +405,14 @@ header {
     justify-content: left;
 }
 
+.info-skills {
+    display: flex;
+}
+
+.info-skills .cryp-skill-btn {
+    border: 1px solid whitesmoke;
+}
+
 .info-stats {
     display: flex;
     flex-flow: row wrap;
@@ -492,7 +504,7 @@ header {
     border-right-width: 0px;
 }
 
-.cryp-skill-btn:first-child {
+.skills .cryp-skill-btn:first-child {
     border-top-width: 0;
 }
 
@@ -581,6 +593,10 @@ header {
         order: 99;
     }
 
+    header {
+        font-size: 0.5em;
+    }
+
     .header-username {
         display: none;
     }

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.preventDefault();
-        e.stopPropagation();
+        // 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;
     }