From b8789f831c9ef4ced5d3dc6453529f6ed10076de Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 8 Apr 2019 14:02:22 +1000
Subject: [PATCH 1/3] Dynamic cryp box colour

---
 client/src/components/instance.component.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 9826a901..17a567d3 100644
--- a/client/src/components/instance.component.jsx
+++ b/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');
@@ -46,6 +47,13 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
             <figcaption>{SPECS[s].caption}</figcaption>
         </figure>
     ));
+    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 border = { border: `1px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
 
     return (
         <div
@@ -53,6 +61,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
             className="cryp-box"
             onDragOver={onDragOver}
             onDrop={onDrop}
+            style={border}
             >
             <div className="cryp-box-top">
                 <figure className="img" onClick={onClick}>

From c597dc63a1c3439f3a2b2b89af47ad78cd6c4b2f Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 8 Apr 2019 14:23:36 +1000
Subject: [PATCH 2/3] merge

---
 client/src/components/info.component.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 1219003e..d865b3cf 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -41,9 +41,9 @@ function Info(args) {
         if (type === 'skill') {
             return (
                 <div className="info-skill">
-                    <div> {value.skill.skill} </div>
-                    <div> {SKILLS[value.skill.skill].description} </div>
-                    <button onClick={() => sendUnequip(value.cryp.id, value.skill.skill)}>
+                    <div> {value.skill} </div>
+                    <div> {SKILLS[value.skill].description} </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                     unequip
                     </button>
                 </div>

From b98004755d45f5b5178d5349abd30367ad9ecca1 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 8 Apr 2019 15:15:09 +1000
Subject: [PATCH 3/3] render cryp info from instance object, clear obj info on
 cryp click

---
 client/src/components/info.component.jsx     | 4 ++--
 client/src/components/instance.component.jsx | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index d865b3cf..2a835c04 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -98,7 +98,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) => (
@@ -139,7 +139,7 @@ function Info(args) {
     }
 
     const infoCryp = activeCryp
-        ? infoCrypElement(activeCryp)
+        ? infoCrypElement(instance.cryps.find(c => c.id === activeCryp.id))
         : null;
 
     const otherInfo = info.length
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 71b8c219..d9b4b769 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -51,6 +51,7 @@ function Cryp(props) {
         e.preventDefault();
 
         if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
+        setInfo(null);
         return setActiveCryp(cryp);
     }
 
@@ -73,7 +74,13 @@ function Cryp(props) {
         return Math.floor(c / cTotal * 255);
     });
     const alpha = cTotal === 0 ? 1 : 0.75;
-    const border = { border: `1px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
+    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