Grouping stats and labels

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