Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

client/src/components/info.component.jsx

@@ -4,34 +4,48 @@ const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
 function Info(args) {
     const {
         info,
+        sendUnequip,
     } = args;
-    let desc = null;
     if (!info) return (<div className="instance-info">&nbsp;</div>);
+    let itemDetails = null;
 
-    if (info.type === 'item') {
-        if (SKILLS[info.info]) {
-            desc = SKILLS[info.info];
-        } else if (SPECS[info.info]) {
-            desc = SPECS[info.info];
-        } else if (COLOURS[info.info]) {
-            desc = COLOURS[info.info];
+    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 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)
+        ? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
+        : null;
 
-    if (info.type === 'cryp') {
-        const cryp = info.info;
-        return (
-            <div className="instance-info">
-                <h5>{cryp.name}</h5>
-            </div>
-        );
-    }
 
     return (
         <div className="instance-info">
-            <h5>{info.info}</h5>
-            <div>{desc.description}</div>
-            <div>{desc.upgrades}</div>
+            {crypHeader}
+            {stats}
+            {itemInfo}
+            {unequip}
         </div>
     );
 }

client/src/components/info.container.jsx

@@ -6,8 +6,12 @@ const Info = require('./info.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { info } = state;
-        return { info };
+        const { info, ws, instance } = state;
+        function sendUnequip(crypId, item) {
+            return ws.sendVboxUnequip(instance.instance, crypId, item);
+        }
+
+        return { info, sendUnequip };
     }
 /*
     function receiveDispatch(dispatch) {

client/src/components/instance.component.jsx

@@ -12,8 +12,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('skill', s)}>{s}</button>;
+        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo(s, cryp)}>{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -48,12 +47,11 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         <div
             key={cryp.id}
             className="cryp-box"
-            onClick={() => setInfo('cryp', cryp)}
             onDragOver={onDragOver}
             onDrop={onDrop}
             >
             <div className="cryp-box-top">
-                <figure className="img">
+                <figure className="img" onClick={() => setInfo(null, cryp)}>
                     {molecule}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>

client/src/components/instance.container.jsx

@@ -24,8 +24,8 @@ const addState = connect(
             dispatch(actions.setInstance(null));
         }
 
-        function setInfo(type, info) {
-            dispatch(actions.setInfo(type, info));
+        function setInfo(item, cryp) {
+            dispatch(actions.setInfo(item, cryp));
         }
 
         return { quit, setInfo };

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('item', c) }}
+                onClick={() => { if (c) return setInfo(c, null) }}
                 onDblClick={() => sendVboxAccept(j, i) }
                 >
                 {convertVar(c)}