add some names

client/cryps.css

@@ -20,6 +20,7 @@ html, body, .cryps {
     height: 99%;
     max-height: 99%;
     min-height: 99%;
+    /*padding: 0 20%;*/
 }
 
 html {

client/src/components/game.cryp.jsx

@@ -62,12 +62,15 @@ function GameCryp(props) {
     const skills = range(0, 3)
         .map(i => <SkillBtn key={i} cryp={cryp} i={i} />);
 
-    const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
-        <figure key={j} alt={s.stat}>
+
+    const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => {
+        // i've seen this happen ;/
+        if (cryp[s.stat].value < 0) console.warn(cryp);
+        return <figure key={j} alt={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
             <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
         </figure>
-    ));
+    });
 
 
     function onClick(e) {