info updates

client/cryps.css

@@ -399,41 +399,50 @@ header {
     min-width: 300px;
 }
 
+/*
+    INFO
+*/
 .thresholds {
     display: flex;
     flex-direction: row;
     justify-content: left;
 }
 
-.info-skills {
+.info-cryp .skills {
     display: flex;
 }
 
-.info-skills .cryp-skill-btn {
+.info-cryp .skills .cryp-skill-btn {
     border: 1px solid whitesmoke;
 }
 
-.info-stats {
+.info-cryp .stats, .info-cryp .specs {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
 }
 
-.info-stats .speed {
+.info-cryp .stats .speed {
     flex: 1 0 100%;
 }
 
-.info-stats figure {
+.info-cryp .stats figure {
     flex: 0 0 30%;
     border: 0;
     margin: 1em 0;
     text-align: center;
 }
 
-.info-stats .stat-icon {
+.info-cryp .stats .stat-icon {
     height: 2.5em;
 }
 
+.info-cryp .specs figure {
+    border: 0;
+    margin: 1em 0;
+    text-align: center;
+}
+
 
 /* CRYP BOX */
 .cryp-box {
@@ -504,7 +513,7 @@ header {
     border-right-width: 0px;
 }
 
-.skills .cryp-skill-btn:first-child {
+.cryp-list .skills .cryp-skill-btn:first-child {
     border-top-width: 0;
 }
 
@@ -701,7 +710,7 @@ header {
         height: 1em;
     }
 
-    .stats figcaption {
+    .cryp-list .stats figcaption {
         display: none;
     }
 

client/src/components/info.component.jsx

@@ -1,16 +1,18 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
+const { ITEMS: { SKILLS, COLOURS } } = require('./constants');
-const { COLOUR_ICONS, STATS } = require('../utils');
+const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
 
 function Info(args) {
     const {
+        activeCryp,
         info,
         sendUnequip,
         instance,
     } = args;
-    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
+
+    function infoVar(info) {
         let red = 0; let blue = 0; let green = 0;
         instance.cryps.forEach(cryp => {
             red += cryp.colours.red;
@@ -29,7 +31,7 @@ function Info(args) {
                 itemDetails = COLOURS[value];
             }
             return (
-            <div className="instance-info">
+                <div className="info-var">
                     {value} - {itemDetails.description}
                 </div>
             );
@@ -37,15 +39,13 @@ function Info(args) {
 
         if (type === 'skill') {
             return (
-            <div className="instance-info">
+                <div className="info-skill">
-                <div>
                     <div> {value.skill} </div>
                     <div> {SKILLS[value.skill].description} </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                     unequip
                     </button>
                 </div>
-            </div>
             );
         }
 
@@ -71,7 +71,7 @@ function Info(args) {
                 );
             }) : null;
             return (
-            <div className="instance-info">
+                <div className="info-spec">
                     <div>
                         <div> {value.spec} </div>
                         <div> {SPECS[value.spec].description} </div>
@@ -83,11 +83,10 @@ function Info(args) {
                 </div>
             );
         }
+    }
 
-    if (type === 'cryp') {
+    function infoCrypElement(cryp) {
-        const cryp = value;
+        // onClick={() => setInfo('skill', { skill: s, cryp })}
-
-// onClick={() => setInfo('skill', { skill: s, cryp })}
         const skills = range(0, 4).map(i => {
             const s = cryp.skills[i]
                 ? cryp.skills[i].skill
@@ -101,18 +100,45 @@ function Info(args) {
                 <figcaption>{cryp[s.stat].value}</figcaption>
             </figure>
         ));
+
+        const specs = cryp.specs.map((s, i) => (
+            <figure key={i}>
+                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                <figcaption>{SPECS[s].caption}</figcaption>
+            </figure>
+        ));
+
+
         return (
-            <div className="instance-info">
+            <div className="info-cryp">
                 <h5>{cryp.name}</h5>
-                <div className="info-skills">
+                <div className="stats">
-                    {skills}
-                </div>
-                <div className="info-stats">
                     {stats}
                 </div>
+                <div className="specs">
+                    {specs}
+                </div>
+                <div className="skills">
+                    {skills}
+                </div>
             </div>
         );
     }
+
+    const infoCryp = activeCryp
+        ? infoCrypElement(activeCryp)
+        : null;
+
+    const otherInfo = info.length
+        ? infoVar(info)
+        : null;
+
+    return (
+        <div className="instance-info">
+            {infoCryp}
+            {otherInfo}
+        </div>
+    );
 }
 
 module.exports = Info;

client/src/components/info.container.jsx

@@ -6,12 +6,23 @@ const Info = require('./info.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { info, ws, instance } = state;
+        const {
+            activeCryp,
+            info,
+            ws,
+            instance,
+        } = state;
+
         function sendUnequip(crypId, item) {
             return ws.sendVboxUnequip(instance.instance, crypId, item);
         }
 
-        return { info, sendUnequip, instance };
+        return {
+            activeCryp,
+            info,
+            sendUnequip,
+            instance,
+        };
     }
 /*
     function receiveDispatch(dispatch) {

client/src/components/instance.component.jsx

@@ -6,15 +6,28 @@ const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const molecule = require('./molecule');
 
-const shapes = require('./shapes');
+const { SPECS } = require('../utils');
-const { STATS, SPECS } = require('../utils');
+
+function Cryp(props) {
+    const {
+        cryp,
+        sendVboxApply,
+        setInfo,
+        activeVar,
+        setActiveCryp,
+    } = props;
 
-function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
     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" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
+
+        function skillClick() {
+            setInfo('skill', { skill: s, cryp });
+            setActiveCryp(cryp);
+        }
+
+        return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -35,9 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
         e.preventDefault();
 
         if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
-        document.getElementsByClassName('instance-info')[0].scrollIntoView();
+        return setActiveCryp(cryp);
-
-        return setInfo('cryp', cryp);
     }
 
     const specs = cryp.specs.map((s, i) => (
@@ -75,19 +86,27 @@ function InstanceComponent(args) {
         // account,
         instance,
         quit,
+        // clearInfo,
         sendInstanceReady,
         sendVboxApply,
         setInfo,
         activeVar,
         setActiveVar,
+        setActiveCryp,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
+    const cryps = instance.cryps.map((c, i) => Cryp({
+        cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
+    }));
+
+    function onClick(e) {
+        setActiveVar(null);
+    }
 
     return (
-        <main className="instance" onClick={() => setActiveVar(null)} >
+        <main className="instance" onClick={onClick} >
             <div className="instance-hdr">
                 <button
                     className="instance-btn instance-ui-btn menu-btn left"

client/src/components/instance.container.jsx

@@ -19,7 +19,7 @@ const addState = connect(
         return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
     },
 
-    function receiveDispatch(dispatch, { instance, combiner }) {
+    function receiveDispatch(dispatch) {
         function quit() {
             dispatch(actions.setInstance(null));
         }
@@ -32,7 +32,15 @@ const addState = connect(
             dispatch(actions.setActiveVar(value));
         }
 
-        return { quit, setInfo, setActiveVar };
+        function setActiveCryp(value) {
+            dispatch(actions.setActiveCryp(value));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
     }
 
 );

client/src/components/vbox.container.jsx

@@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, combiner, reclaiming, activeVar } = state;
+        const { ws, instance, combiner, reclaiming, activeVar, info } = state;
 
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.instance);
@@ -29,6 +29,7 @@ const addState = connect(
             combiner,
             reclaiming,
             activeVar,
+            info,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,