Show equipped specs

client/src/components/info.component.jsx

@@ -8,13 +8,20 @@ function Info(args) {
     } = args;
     if (!info) return (<div className="instance-info">&nbsp;</div>);
 
+    if (info.type === 'item') {
+        return (
+            <div className="instance-info">
+                {info.value} - what does it do?
+            </div>
+        );
+    }
+
     if (info.type === 'skill') {
         return (
             <div className="instance-info">
                 <div>
                     <div> {info.value.skill} </div>
                     <div> {SKILLS[info.value.skill].description} </div>
-                    <div> {SKILLS[info.value.skill].upgrades} </div>
                 </div>
                 <button onClick={() => sendUnequip(info.value.cryp.id, info.value.skill)}>
                     unequip
@@ -22,6 +29,20 @@ function Info(args) {
             </div>
         );
     }
+    if (info.type === 'spec') {
+        return (
+            <div className="instance-info">
+                <div>
+                    <div> {info.value.spec} </div>
+                    <div> {SPECS[info.value.spec].description} </div>
+                </div>
+                <button onClick={() => sendUnequip(info.value.cryp.id, info.value.spec)}>
+                    unequip
+                </button>
+            </div>
+        );
+    }
+
     if (info.type === 'cryp') {
         const stats = [
             { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
@@ -32,35 +53,16 @@ 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}: {info.value[s.stat].max}</div>
+            <div key={i}>{s.disp}: {info.value[s.stat].base} -> {info.value[s.stat].max}</div>
         ));
-        const skills = info.value.skills.map((s, i) => <button key={i} onClick={() => sendUnequip(info.value.id, s.skill)}> {s.skill} </button>);
-
         return (
             <div className="instance-info">
                 <h5> {info.value.name} </h5>
                 {stats}
-                {skills}
             </div>
         );
     }
 
-    /*if (info.item) {
-        if (SKILLS[info.item]) {
-            itemDetails = SKILLS[info.item];
-        } else if (SPECS[info.item]) {
-            itemDetails = SPECS[info.item];
-        } else if (COLOURS[info.item]) {
-            itemDetails = COLOURS[info.item];
-        }
-    }*/
-
-
-/*    const unequip = (itemDetails && info.cryp)
-        ? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
-        : null;
-*/
-
 }
 
 module.exports = Info;

client/src/components/instance.component.jsx

@@ -7,7 +7,7 @@ const InfoContainer = require('./info.container');
 const molecule = require('./molecule');
 
 const shapes = require('./shapes');
-const { STATS } = require('../utils');
+const { STATS, SPECS } = require('../utils');
 
 function Cryp(cryp, sendVboxApply, setInfo) {
     const skills = range(0, 4).map(i => {
@@ -29,11 +29,10 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         const item = parseInt(e.dataTransfer.getData('text'), 10);
         return sendVboxApply(cryp.id, item);
     }
-
-    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>
+    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>{i}</figcaption>
         </figure>
     ));
 
@@ -54,7 +53,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
                 </div>
             </div>
             <div className="stats">
-                {stats}
+                {specs}
             </div>
         </div>
     );

client/src/utils.jsx

@@ -64,6 +64,12 @@ const STATS = {
     speed: { stat: 'speed', colour: 'yellow', svg: shapes.triangle },
 };
 
+const SPECS = {
+    Hp: { colour: 'green', svg: shapes.square },
+    Damage: { colour: 'red', svg: shapes.hexagon },
+    Speed: { colour: 'yellow', svg: shapes.diamond },
+};
+
 module.exports = {
     stringSort,
     numSort,
@@ -71,4 +77,5 @@ module.exports = {
     requestAvatar,
     NULL_UUID,
     STATS,
+    SPECS,
 };