mob styles

client/src/components/info.component.jsx

@@ -1,6 +1,6 @@
 const preact = require('preact');
 const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
-const { COLOUR_ICONS } = require('../utils');
+const { COLOUR_ICONS, STATS } = require('../utils');
 
 function Info(args) {
     const {
@@ -83,20 +83,16 @@ function Info(args) {
     }
 
     if (type === 'cryp') {
-        const stats = [
-            { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
-            { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
-            { stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
-            { stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
-            { stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
-            { stat: 'speed', disp: 'Speed', colour: '#FFD123' },
-        ].map((s, i) => (
-            <div key={i}>{s.disp}: {value[s.stat].base} {String.fromCharCode(8594)} {value[s.stat].max}</div>
+        const cryp = value;
+        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>
         ));
         return (
             <div className="instance-info">
-                <h5>{value.name}</h5>
+                <h5>{cryp.name}</h5>
                 <div className="info-stats">
                     {stats}
                 </div>

client/src/components/instance.component.jsx

@@ -40,12 +40,12 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
         return setInfo('cryp', cryp);
     }
 
-    const specs = (cryp.specs.length > 0) ? cryp.specs.map((s, i) => (
+    const specs = cryp.specs.map((s, i) => (
         <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
             {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
             <figcaption>{SPECS[s].caption}</figcaption>
         </figure>
-    )) : null;
+    ));
 
     return (
         <div