mostly working

client/src/components/instance.cryps.jsx

@@ -8,7 +8,7 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar } = state;
+        const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar, activeCryp } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.id);
@@ -18,7 +18,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.id, crypId, i);
         }
 
-        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar, activeCryp };
     },
 
     function receiveDispatch(dispatch) {
@@ -49,6 +49,7 @@ const addState = connect(
 
 function Cryp(props) {
     const {
+        activeCryp,
         activeVar,
         cryp,
         player,
@@ -137,6 +138,8 @@ function Cryp(props) {
             <figcaption>{cryp[s.stat].value}</figcaption>
         </figure>
     ));
+    const activeId = activeCryp ? activeCryp.id : false;
+    const crypClass = activeId === cryp.id ? 'instance-cryp-active' : 'instance-cryp';
 
     // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
     // const colours = mapValues(cryp.colours, c => {
@@ -152,7 +155,7 @@ function Cryp(props) {
     // };
     // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
     return (
-        <div key={cryp.id} className="instance-cryp" onClick={onClick} >
+        <div key={cryp.id} className={crypClass} onClick={onClick} >
             {crypAvatar(cryp.name)}
             <h2 className="name" >{cryp.name}</h2>
             <div className="skills">
@@ -181,6 +184,7 @@ function Cryp(props) {
 
 function InstanceCryps(props) {
     const {
+        activeCryp,
         activeVar,
         player,
         instance,
@@ -198,7 +202,7 @@ function InstanceCryps(props) {
     if (instance.phase === 'Lobby') return false;
 
     const cryps = player.cryps.map((c, i) => Cryp({
-        activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
+        activeCryp, activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;