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,9 +7,45 @@ function Info(args) {
         sendUnequip,
     } = args;
     if (!info) return (<div className="instance-info">&nbsp;</div>);
-    let itemDetails = null;
 
-    if (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>
+        );
+    }
+    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' },
+            { stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
+            { stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
+            { 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>
+        ));
+        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]) {
@@ -17,37 +53,14 @@ function Info(args) {
         } else if (COLOURS[info.item]) {
             itemDetails = COLOURS[info.item];
         }
-    }
+    }*/
-    const crypHeader = info.cryp ? <h5> {info.cryp.name} </h5> : null;
-    const stats = info.cryp ? [
-        { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
-        { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
-        { stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
-        { stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
-        { stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
-        { 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)
+/*    const unequip = (itemDetails && info.cryp)
         ? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
         : null;
+*/
 
-
-    return (
-        <div className="instance-info">
-            {crypHeader}
-            {stats}
-            {itemInfo}
-            {unequip}
-        </div>
-    );
 }
 
 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)}