diff --git a/client/instance.css b/client/instance.css index a53cc675..609ead8b 100644 --- a/client/instance.css +++ b/client/instance.css @@ -321,6 +321,18 @@ justify-content: center; } +.instance-equip .items { + display: flex; + justify-content: center; +} + +.instance-equip .label { + display: flex; + justify-content: center; + font-size: 20pt; + padding: 15px; + +} .instance-equip .skills { display: flex; min-height: 100px; @@ -341,26 +353,12 @@ } - .instance-equip .specs { display: flex; padding-left: 50px; flex-direction: column; } -.instance-equip .items { - display: flex; - justify-content: center; -} - -.instance-equip .label { - display: flex; - justify-content: center; - font-size: 20pt; - padding: 15px; - -} - .instance-equip .specs figure { flex: 1; border: 0; diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 8e7756f0..94307376 100644 --- a/client/src/components/instance.cryps.jsx +++ b/client/src/components/instance.cryps.jsx @@ -8,7 +8,7 @@ const actions = require('../actions'); const addState = connect( function receiveState(state) { - const { ws, instance, player, account, vboxHidden, vboxInfo } = state; + const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar } = state; function sendInstanceReady() { return ws.sendInstanceReady(instance.id); @@ -18,7 +18,7 @@ const addState = connect( return ws.sendVboxApply(instance.id, crypId, i); } - return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo }; + return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar }; }, function receiveDispatch(dispatch) { @@ -49,11 +49,13 @@ const addState = connect( function Cryp(props) { const { + activeVar, cryp, + sendVboxApply, setInfo, setActiveCryp, - vboxInfo, setVboxHighlight, + vboxInfo, } = props; function setHighlight(type) { @@ -69,6 +71,7 @@ function Cryp(props) { : ( ); function skillClick(e) { + if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar); if (!skill) setHighlight('skill'); else setInfo('skill', { skill: skill.skill, cryp }); e.stopPropagation(); @@ -84,6 +87,7 @@ function Cryp(props) { function onClick(e) { e.stopPropagation(); e.preventDefault(); + if (activeVar !== null) return sendVboxApply(cryp.id, activeVar); return setActiveCryp(cryp); } @@ -92,8 +96,9 @@ function Cryp(props) { function blankSpecClick(e) { e.stopPropagation(); - setActiveCryp(cryp); + if (activeVar !== null) return sendVboxApply(cryp.id, activeVar); setHighlight('spec'); + return setActiveCryp(cryp); } if (!s) { @@ -193,9 +198,9 @@ function Cryp(props) { function InstanceCryps(props) { const { + activeVar, player, instance, - // clearInfo, setInfo, setActiveCryp, @@ -210,7 +215,7 @@ function InstanceCryps(props) { if (instance.phase === 'Lobby') return false; const cryps = player.cryps.map((c, i) => Cryp({ - cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight, + activeVar, cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight, })); const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`; diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx index 1275eb5b..53ee434a 100644 --- a/client/src/components/instance.equip.jsx +++ b/client/src/components/instance.equip.jsx @@ -21,7 +21,11 @@ const addState = connect( return dispatch(actions.setInfo([])); } - return { setInfo, clearInfo }; + function setActiveVar(v) { + return dispatch(actions.setActiveVar(v)); + } + + return { setInfo, setActiveVar, clearInfo }; } ); @@ -29,8 +33,9 @@ const addState = connect( function Equipment(props) { const { player, - setInfo, vboxInfo, + setInfo, + setActiveVar, } = props; const { vbox } = player; @@ -38,7 +43,7 @@ function Equipment(props) { function boundClick(e, i) { const value = vbox.bound[i]; setInfo('item', value); - + setActiveVar(i); return false; } @@ -68,13 +73,15 @@ function Equipment(props) { ); } return false; }); - // const specLabel = specs.every(i => i === false) ? '' : 'Specs'; + + const skillLabel = skills.every(i => i === false) ? '' : 'Skills'; + const specLabel = specs.every(i => i === false) ? '' : 'Specs'; return (
- Skills + {skillLabel}
{skills} @@ -82,7 +89,7 @@ function Equipment(props) {
- Specs + {specLabel}
{specs}