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>
     );
 }

client/src/utils.jsx

@@ -65,13 +65,13 @@ function crypAvatar(name) {
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
-    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
     redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle },
     greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle },
     blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
     redLife: { stat: 'red_life', colour: 'red', svg: shapes.square },
     greenLife: { stat: 'green_life', colour: 'green', svg: shapes.square },
     blueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square },
+    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
 };
 
 const SPECS = {