Return of the cryp stats

client/instance.css

@@ -7,7 +7,7 @@
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(11, 1fr);
     grid-template-areas: 
-        "n v v v v v v v x x x x"
+        ". v v v v v v v x x x x"
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
@@ -23,7 +23,7 @@
 .instance-hdr {
     grid-area: n;
     display: flex;
-    flex-flow: row;
+    flex-flow: column;
     flex: 0 0 100%;
 }
 
@@ -180,15 +180,14 @@
 .instance-cryp {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(4, 1fr);
+    grid-template-rows: repeat(5, 1fr);
     grid-template-areas: 
+        "sp sp sp sp sp"
         "av av av sk sk"
         "av av av sk sk"
         "av av av sk sk"
-        "sp sp sp sp sp";
+        "st st st st st";
 
-    max-width: 350px;
-    max-height: 350px;
     margin-left: 1em;
     border: 1px solid whitesmoke;
     transition-property: all;
@@ -201,12 +200,11 @@
     grid-area: av;
     display: flex;
     flex: 1 1 auto;
-    justify-content: center;
 }
 
 .instance-cryp .avatar figure {
     margin: 0;
-    height: 75%;
+    height: 100%;
     text-align: center;
     box-sizing: border-box;
 }
@@ -215,12 +213,23 @@
     font-size: 90%;
 }
 
+.instance-cryp .skills {
+    grid-area: sk;
+    display: flex;
+    flex-flow: column;
+}
+
+.instance-cryp .skills button {
+    height: 100%;
+    width: 100%;
+}
+
 .instance-cryp .specs {
     grid-area: sp;
     display: flex;
     flex: 1;
     justify-content: center;
-    border-top: 1px solid whitesmoke;
+    border-bottom: 1px solid whitesmoke;
 }
 
 .instance-cryp .specs figure {
@@ -235,13 +244,22 @@
     font-size: 75%;
 }
 
-.instance-cryp .skills {
-    grid-area: sk;
+.instance-cryp .stats {
+    grid-area: st;
     display: flex;
-    flex-flow: column;
+    flex: 1;
+    justify-content: center;
+    border-top: 1px solid whitesmoke;
 }
 
-.instance-cryp .skills button {
-    height: 100%;
-    width: 100%;
+.instance-cryp .stats figure {
+    flex: 1;
+    border: 0;
+    align-items: center;
+    padding: 0.5em 0 0 0;
+    text-align: center;
+}
+
+.instance-cryp .stats figcaption {
+    font-size: 75%;
 }

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 = {