Unequip and tidy item info

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 = (type, info) => ({ type: SET_INFO, value: type ? { type, info } : null });
+export const setInfo = (item, cryp) => ({ type: SET_INFO, value: (item || cryp) ? { item, cryp } : null });
 
 export const SET_RECLAIMING = 'SET_RECLAIMING';
 export const setReclaiming = value => ({ type: SET_RECLAIMING, value });

client/src/components/info.component.jsx

@@ -4,24 +4,49 @@ const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
 function Info(args) {
     const {
         info,
+        sendUnequip,
     } = args;
-    let desc = null;
+    let itemDetails = null; let cryp = null;
+
     if (info) {
-        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];
             }
         }
 
+        if (info.cryp) {
+            ({ cryp } = info);
+        }
+    }
+    const crypHeader = cryp ? <div> {cryp.name} </div> : null;
+    const stats = 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}: {cryp[s.stat].max}</div>
+    )) : null;
+
+    const itemInfo = itemDetails ? <div>{info.item} - {itemDetails.description}</div> : null;
+
+
+    const unequip = (itemDetails && cryp) ? <button onClick={() => sendUnequip(cryp.id, info.item)}> unequip </button> : null;
+
     return (
         <div className="instance-info">
-            <div> {JSON.stringify(info)} </div>
-            <div> {JSON.stringify(desc)} </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

@@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
 
-        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('item', s)}>{s}</button>;
+        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo(s, cryp)}>{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -52,7 +52,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             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

@@ -56,7 +56,7 @@ function Vbox(args) {
                 onClick={() => {
                     if (c) {
                         sendVboxAccept(j, i);
-                        setInfo('item', c);
+                        setInfo(c, null);
                     }
                 }} >
                 {convertVar(c)}

client/src/events.jsx

@@ -32,6 +32,11 @@ function registerEvents(store) {
         store.dispatch(actions.setActiveSkill(skill));
     }
 
+    function setInfo(info) {
+        store.dispatch(actions.setInfo(info));
+        console.log('event clear item');
+    }
+
     function setMenu() {
         console.log('EVENT ->', 'menu', true);
     }
@@ -197,6 +202,7 @@ function registerEvents(store) {
         setCryps,
         setCrypList,
         setGame,
+        setInfo,
         setMenu,
         setPlayer,
         setInstanceList,

client/src/socket.jsx

@@ -95,6 +95,7 @@ function createSocket(events) {
 
     function sendVboxUnequip(instanceId, crypId, target) {
         send({ method: 'player_vbox_unequip', params: { instance_id: instanceId, cryp_id: crypId, target } });
+        events.setInfo(null);
     }
 
     function sendVboxDiscard(instanceId) {