shits fked

client/src/actions.jsx

@@ -26,7 +26,7 @@ export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
 export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
 
 export const SET_INFO = 'SET_INFO';
-export const setInfo = (item, cryp) => ({ type: SET_INFO, value: (item || cryp) ? { item, cryp } : null });
+export const setInfo = (type, value) => ({ type: SET_INFO, value: type ? { type, value } : null });
 
 export const SET_RECLAIMING = 'SET_RECLAIMING';
 export const setReclaiming = value => ({ type: SET_RECLAIMING, value });

client/src/components/info.component.jsx

@@ -7,19 +7,23 @@ function Info(args) {
         sendUnequip,
     } = args;
     if (!info) return (<div className="instance-info">&nbsp;</div>);
-    let itemDetails = null;
 
-    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];
+    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
+                </button>
+            </div>
+        );
     }
-    }
-    const crypHeader = info.cryp ? <h5> {info.cryp.name} </h5> : null;
-    const stats = info.cryp ? [
+    if (info.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' },
@@ -28,26 +32,35 @@ 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.cryp[s.stat].max}</div>
-    )) : null;
-    
-    const itemInfo = itemDetails
-        ? <div>{info.item} - {itemDetails.description}</div>
-        : null;
-    
-    const unequip = (itemDetails && info.cryp)
-        ? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
-        : null;
-
+            <div key={i}>{s.disp}: {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">
-            {crypHeader}
+                <h5> {info.value.name} </h5>
                 {stats}
-            {itemInfo}
-            {unequip}
+                {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

@@ -14,7 +14,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         const s = cryp.skills[i]
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
-        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo(s, cryp)}>{s}</button>;
+        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -45,7 +45,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             onDrop={onDrop}
             >
             <div className="cryp-box-top">
-                <figure className="img" onClick={() => setInfo(null, cryp)}>
+                <figure className="img" onClick={() => setInfo('cryp', cryp)}>
                     {molecule}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>

client/src/components/vbox.component.jsx

@@ -53,7 +53,7 @@ function Vbox(args) {
         const cells = row.map((c, j) => (
             <td
                 key={j}
-                onClick={() => { if (c) return setInfo(c, null) }}
+                onClick={() => { if (c) return setInfo('item', c)}}
                 onDblClick={() => sendVboxAccept(j, i) }
                 >
                 {convertVar(c)}