Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

client/src/components/info.component.jsx

@@ -112,7 +112,7 @@ function Info(args) {
             const s = cryp.skills[i]
                 ? cryp.skills[i].skill
                 : (<span>&nbsp;</span>);
-            return <button key={i} className="cryp-skill-btn" onClick={skillClick} >{s}</button>;
+            return <button key={i} alt={s} className="cryp-skill-btn" onClick={skillClick} >{s}</button>;
         });
 
         const stats = Object.values(STATS).map((s, j) => (
@@ -153,7 +153,7 @@ function Info(args) {
     }
 
     const infoCryp = activeCryp
-        ? infoCrypElement(activeCryp)
+        ? infoCrypElement(instance.cryps.find(c => c.id === activeCryp.id))
         : null;
 
     const otherInfo = info.length

client/src/components/instance.component.jsx

@@ -1,6 +1,7 @@
 const preact = require('preact');
 // const key = require('keymaster');
 const range = require('lodash/range');
+const mapValues = require('loadsh/mapValues');
 
 const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
@@ -50,6 +51,7 @@ function Cryp(props) {
         e.preventDefault();
 
         if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
+        setInfo(null);
         return setActiveCryp(cryp);
     }
 
@@ -66,12 +68,27 @@ function Cryp(props) {
         );
     });
 
+    const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
+    const colours = mapValues(cryp.colours, c => {
+        if (cTotal === 0) return 245;
+        return Math.floor(c / cTotal * 255);
+    });
+    const alpha = cTotal === 0 ? 1 : 0.75;
+    const thickness = total => {
+        if (total < 3) return 1;
+        if (total < 6) return 2;
+        if (total < 9) return 3;
+        return 4;
+    };
+    const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
+
     return (
         <div
             key={cryp.id}
             className="cryp-box"
             onDragOver={onDragOver}
             onDrop={onDrop}
+            style={border}
             >
             <div className="cryp-box-top">
                 <figure className="img" onClick={onClick}>