Return of the cryp stats

client/src/components/instance.component.jsx

@@ -88,8 +88,8 @@ function InstanceComponent(args) {
                     <div>&nbsp;</div>
                 </div>
                 {actionBtn}
+                {timer}
             </div>
-            {timer}
             <VboxContainer />
             <InstanceCrypsContainer />
             <InfoContainer />

client/src/components/instance.cryps.jsx

@@ -3,7 +3,7 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const shapes = require('./shapes');
-const { SPECS, crypAvatar } = require('../utils');
+const { SPECS, STATS, crypAvatar } = require('../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -119,6 +119,12 @@ function Cryp(props) {
         );
     });
 
+    const stats = Object.values(STATS).map((s, j) => (
+        <figure key={j} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
     // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
     // const colours = mapValues(cryp.colours, c => {
     //     if (cTotal === 0) return 245;
@@ -147,6 +153,9 @@ function Cryp(props) {
             <div className="specs">
                 {specs}
             </div>
+            <div className="stats">
+                {stats}
+            </div>
         </div>
     );
 }