Added the rest of the specs to SVG table

client/cryps.css

@@ -116,6 +116,15 @@ svg {
     stroke: #FFD123;
 }
 
+.purple {
+    color: #A25AC1;
+    stroke: #A25AC1;
+}
+
+.cyan {
+    color: #6AD1BF;
+    stroke: #6AD1BF;
+}
 
 /*
     LOGIN

client/src/components/constants.jsx

@@ -184,21 +184,98 @@ module.exports = {
 
         SPECS: {
             Damage: {
-                description: 'Increase red / green / blue power stats cryp',
+                description: 'Increase red / green / blue damage stats cryp',
                 upgrades: 'combine with 2 red / blue / green',
-
             },
 
-            Hp: {
+            GreenDamageI: {
-                description: 'Increases health of cryp',
+                description: 'Increases green damage',
-                upgrades: 'combine with 2 red / blue / green',
+            },
 
+            RedDamageI: {
+                description: 'Increased red damage',
+            },
+
+            BlueDamageI: {
+                description: 'Increased blue damage',
+            },
+
+            GRDI: {
+                description: 'Increased green and red damage',
+            },
+
+            GBDI: {
+                description: 'Increased green and blue damage',
+            },
+
+            RBDI: {
+                description: 'Increased red and blue damage',
             },
 
             Speed: {
                 description: 'Increases speed of cryp',
                 upgrades: 'combine with 2 red / blue / green',
             },
+
+
+            Hp: {
+                description: 'Increases life',
+                upgrades: 'combine with 2 red / blue / green',
+
+            },
+
+            LifeI: {
+                description: 'Increases life',
+            },
+
+            RedShieldI: {
+                description: 'Increased red shield',
+            },
+
+            BlueShieldI: {
+                description: 'Increased blue shield',
+            },
+
+            LRSI: {
+                description: 'Increased life and red shield',
+            },
+
+            LBSI: {
+                description: 'Increased life and blue shield',
+            },
+
+            RBSI: {
+                description: 'Increased red and blue shield',
+            },
+
+            Speed: {
+                description: 'Increases speed of cryp',
+                upgrades: 'combine with 2 red / blue / green',
+            },
+
+            RedSpeedI: {
+                description: 'Increases red speed',
+            },
+
+            BlueSpeedI: {
+                description: 'Increases blue speed',
+            },
+
+            GreenSpeedI: {
+                description: 'Increases green speed',
+            },
+
+            GRSpeedI: {
+                description: 'Increases green and red speed',
+            },
+
+            GBSpeedI: {
+                description: 'Increases green and blue speed',
+            },
+
+            RBSpeedI: {
+                description: 'Increases red and blue speed',
+            },
         },
 
         COLOURS: {

client/src/components/info.component.jsx

@@ -10,9 +10,17 @@ function Info(args) {
 
     const [type, value] = info;
     if (type === 'item') {
+        let itemDetails;
+        if (SKILLS[value]) {
+            itemDetails = SKILLS[value];
+        } else if (SPECS[value]) {
+            itemDetails = SPECS[value];
+        } else if (COLOURS[value]) {
+            itemDetails = COLOURS[value];
+        } console.log(itemDetails);
         return (
             <div className="instance-info">
-                {info.value} - what does it do?
+                {value} - {itemDetails.description}
             </div>
         );
     }
@@ -54,27 +62,14 @@ function Info(args) {
             { 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} - {value[s.stat].max}</div>
+            <div key={i}>{s.disp}: {value[s.stat].base} {String.fromCharCode(8594)} {value[s.stat].max}</div>
         ));
-        const cryp = value;
-        const skills = cryp.skills.map((s, i) => <button key={i} className="instance-btn"
-            onClick={() => sendUnequip(cryp.id, s.skill)} >{s.skill}</button>);
-
-        const specs = cryp.specs.map((s, i) => <button key={i} className="instance-btn"
-            onClick={() => sendUnequip(cryp.id, s) }>{s}</button>);
-
         return (
             <div className="instance-info">
-                <h5>{cryp.name}</h5>
+                <h5>{value.name}</h5>
                 <div className="info-stats">
                     {stats}
                 </div>
-                <div className="info-skills">
-                    {skills}
-                </div>
-                <div className="info-specs">
-                    {specs}
-                </div>
             </div>
         );
     }

client/src/components/instance.component.jsx

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

client/src/utils.jsx

@@ -65,9 +65,30 @@ const STATS = {
 };
 
 const SPECS = {
-    Hp: { colour: 'green', svg: shapes.square },
+    Hp: { colour: 'white', caption: 'Hp', svg: shapes.square },
-    Damage: { colour: 'red', svg: shapes.hexagon },
+    RedShieldI: { colour: 'red', caption: 'HpI', svg: shapes.square },
-    Speed: { colour: 'yellow', svg: shapes.diamond },
+    BlueShieldI: { colour: 'blue', caption: 'HpI', svg: shapes.square },
+    LifeI: { colour: 'green', caption: 'HpI', svg: shapes.square },
+    LRSI: { colour: 'yellow', caption: 'HpI', svg: shapes.square },
+    LBSI: { colour: 'cyan', caption: 'HpI', svg: shapes.square },
+    RBSI: { colour: 'purple', caption: 'HpI', svg: shapes.square },
+
+    Damage: { colour: 'white', caption: 'Damage', svg: shapes.hexagon },
+    RedDamageI: { colour: 'red', caption: 'DamageI', svg: shapes.hexagon },
+    BlueDamageI: { colour: 'blue', caption: 'DamageI', svg: shapes.hexagon },
+    GreenDamageI: { colour: 'green', caption: 'DamageI', svg: shapes.hexagon },
+    GRDI: { colour: 'yellow', caption: 'DamageI', svg: shapes.hexagon },
+    GBDI: { colour: 'cyan', caption: 'DamageI', svg: shapes.hexagon },
+    RBDI: { colour: 'purple', caption: 'DamageI', svg: shapes.hexagon },
+
+    Speed: { colour: 'white', caption: 'Speed', svg: shapes.diamond },
+    RedSpeed: { colour: 'red', caption: 'SpeedI', svg: shapes.diamond },
+    BlueSpeedI: { colour: 'blue', caption: 'SpeedI', svg: shapes.diamond },
+    GreenSpeedI: { colour: 'green', caption: 'speed', svg: shapes.diamond },
+    GRSpeedI: { colour: 'yellow', caption: 'SpeedI', svg: shapes.diamond },
+    GBSpeedI: { colour: 'cyan', caption: 'SpeedI', svg: shapes.diamond },
+    RBSpeedI: { colour: 'purple', caption: 'SpeedI', svg: shapes.diamond },
+
 };
 
 module.exports = {