diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 0ea7db27..0c5db9ce 100644 --- a/client/src/actions.jsx +++ b/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 }); diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 091ddc02..71ca942e 100644 --- a/client/src/components/info.component.jsx +++ b/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 ?
{cryp.name}
: 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) => ( +
{s.disp}: {cryp[s.stat].max}
+ )) : null; + + const itemInfo = itemDetails ?
{info.item} - {itemDetails.description}
: null; + + + const unequip = (itemDetails && cryp) ? : null; return (
-
{JSON.stringify(info)}
-
{JSON.stringify(desc)}
+ {crypHeader} + {stats} + {itemInfo} + {unequip}
); } diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx index a45e921a..e98b7cc0 100644 --- a/client/src/components/info.container.jsx +++ b/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) { diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index cd272803..a997f2e9 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) { ? cryp.skills[i].skill : ( ); - return ; + return ; }); // needed for ondrop to fire @@ -52,7 +52,7 @@ function Cryp(cryp, sendVboxApply, setInfo) { onDrop={onDrop} >
-
+
setInfo(null, cryp)}> {molecule}
{cryp.name}
diff --git a/client/src/components/instance.container.jsx b/client/src/components/instance.container.jsx index 0554681d..4ae4e971 100644 --- a/client/src/components/instance.container.jsx +++ b/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 }; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 4c704646..14864406 100644 --- a/client/src/components/vbox.component.jsx +++ b/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)} diff --git a/client/src/events.jsx b/client/src/events.jsx index 5c5e0a99..cbc3a632 100644 --- a/client/src/events.jsx +++ b/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, diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 01e666ef..9c2c6b27 100644 --- a/client/src/socket.jsx +++ b/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) {