Grouping stats and labels

client/instance.css

@@ -29,7 +29,6 @@
 
 .instance-info {
     grid-area: x;
-    justify-self: start;
     flex: 0 0 50%;
 }
 
@@ -40,7 +39,8 @@
     display: flex;
     flex-flow: row;
     padding: 0 2em 0 2em;
-    justify-content: center;
+    align-content: flex-start;
+
     min-width: 300px;
 
     overflow: hidden;
@@ -187,7 +187,8 @@
         "av av av sk sk"
         "av av av sk sk"
         "st st st st st";
-
+    max-height: 450px;
+    max-width: 450px;
     margin-left: 1em;
     border: 1px solid whitesmoke;
     transition-property: all;
@@ -204,7 +205,7 @@
 
 .instance-cryp .avatar figure {
     margin: 0;
-    height: 100%;
+    height: 80%;
     text-align: center;
     box-sizing: border-box;
 }
@@ -246,9 +247,12 @@
 
 .instance-cryp .stats {
     grid-area: st;
-    display: flex;
-    flex: 1;
-    justify-content: center;
+    display: grid;
+    grid-template-rows: 1fr 3fr;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-areas: 
+        "dl dl dl sl ll ll ll"
+        "di di di si li li li";
     border-top: 1px solid whitesmoke;
 }
 
@@ -263,3 +267,48 @@
 .instance-cryp .stats figcaption {
     font-size: 75%;
 }
+
+.instance-cryp .stats .damage-label {
+    grid-area: dl;
+    display: flex;
+    justify-content: center;
+}
+
+.instance-cryp .stats .damage-icons {
+    grid-area: di;
+    display: flex;
+    flex-flow: row;
+    flex: 1;
+    justify-content: center;
+}
+
+.instance-cryp .stats .speed-label {
+    grid-area: sl;
+    display: flex;
+    justify-content: center;
+
+}
+
+.instance-cryp .stats .speed-icons {
+    grid-area: si;
+    display: flex;
+    flex-flow: row;
+    flex: 1;
+    justify-content: center;
+}
+
+.instance-cryp .stats .life-label {
+    grid-area: ll;
+    display: flex;
+    justify-content: center;
+}
+
+.instance-cryp .stats .life-icons {
+    grid-area: li;
+    display: flex;
+    flex-flow: row;
+    flex: 1;
+    justify-content: center;
+}
+
+

client/src/components/instance.cryps.jsx

@@ -119,12 +119,27 @@ function Cryp(props) {
         );
     });
 
-    const stats = Object.values(STATS).map((s, j) => (
-        <figure key={j} alt={s.stat} className={s.stat}>
+    const damage = Object.values(STATS).slice(0, 3).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
             <figcaption>{cryp[s.stat].value}</figcaption>
         </figure>
     ));
+
+    const speed = Object.values(STATS).slice(3, 4).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
+    const life = Object.values(STATS).slice(4, 8).map(s => (
+        <figure key={s.stat} 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;
@@ -138,7 +153,6 @@ function Cryp(props) {
     //     return 4;
     // };
     // 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 className="avatar">
@@ -154,7 +168,24 @@ function Cryp(props) {
                 {specs}
             </div>
             <div className="stats">
-                {stats}
+                <div className="damage-label">
+                    Damage
+                </div>
+                <div className="damage-icons">
+                    {damage}
+                </div>
+                <div className="speed-label">
+                    Speed
+                </div>
+                <div className="speed-icons">
+                    {speed}
+                </div>
+                <div className="life-label">
+                    Life
+                </div>
+                <div className="life-icons">
+                    {life}
+                </div>
             </div>
         </div>
     );

client/src/utils.jsx

@@ -68,10 +68,10 @@ const STATS = {
     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 },
+    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
     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 = {