more icons

client/src/components/game.component.jsx

@@ -3,6 +3,10 @@ const range = require('lodash/range');
 
 const molecule = require('./molecule');
 
+const { STATS } = require('../utils');
+
+console.log(STATS);
+
 // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
 function GamePanel(props) {
@@ -82,12 +86,9 @@ function GamePanel(props) {
             );
         });
 
-        const stats = [
-            { stat: 'hp', colour: '#1FF01F' },
-            { stat: 'red_shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', colour: '#3498db' },
-        ].map((s, i) => (
+        const stats = Object.values(STATS).map((s, i) => (
             <figure key={i} alt={s.stat}>
+                {s.svg(`stat-icon ${s.colour}`)}
                 <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
             </figure>
         ));
@@ -127,12 +128,9 @@ function GamePanel(props) {
     }
 
     function OpponentCryp(cryp, i) {
-        const stats = [
-            { stat: 'hp', colour: '#1FF01F' },
-            { stat: 'red_shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', colour: '#3498db' },
-        ].map((s, j) => (
+        const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
             <figure key={j} alt={s.stat}>
+                {s.svg(`stat-icon ${s.colour}`)}
                 <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
             </figure>
         ));

client/src/components/instance.component.jsx

@@ -30,7 +30,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         return sendVboxApply(cryp.id, item);
     }
 
-    const stats = STATS.map((s, i) => (
+    const stats = Object.values(STATS).map((s, i) => (
         <figure key={i} alt={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
             <figcaption>{cryp[s.stat].value}</figcaption>