diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 17fdfa21..2bb0d31b 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -112,7 +112,7 @@ function Info(args) { const s = cryp.skills[i] ? cryp.skills[i].skill : ( ); - return ; + return ; }); 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 diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 2081f55c..d9b4b769 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'); @@ -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 (