130 lines
3.6 KiB
JavaScript
130 lines
3.6 KiB
JavaScript
const { connect } = require('preact-redux');
|
|
const preact = require('preact');
|
|
const range = require('lodash/range');
|
|
|
|
const actions = require('../actions');
|
|
const { convertItem, SPECS } = require('./../utils');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { player, activeCryp, itemInfo, info, ws, instance, itemUnequip } = state;
|
|
|
|
function sendUnequip(crypId, item) {
|
|
return ws.sendVboxUnequip(instance.id, crypId, item);
|
|
}
|
|
|
|
return { player, itemInfo, info, sendUnequip, activeCryp, itemUnequip };
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setInfo(item) {
|
|
dispatch(actions.setInfo(item));
|
|
}
|
|
|
|
function clearInfo() {
|
|
return dispatch(actions.setInfo(null));
|
|
}
|
|
|
|
function setItemEquip(v) {
|
|
return dispatch(actions.setItemEquip(v));
|
|
}
|
|
|
|
function setItemUnequip(v) {
|
|
return dispatch(actions.setItemUnequip(v));
|
|
}
|
|
|
|
return { setInfo, setItemEquip, setItemUnequip, clearInfo };
|
|
}
|
|
|
|
);
|
|
|
|
function Equipment(props) {
|
|
const {
|
|
player,
|
|
|
|
itemUnequip,
|
|
setItemEquip,
|
|
setItemUnequip,
|
|
activeCryp,
|
|
|
|
itemInfo,
|
|
sendUnequip,
|
|
|
|
setInfo,
|
|
} = props;
|
|
|
|
const { vbox } = player;
|
|
|
|
const fullInfo = itemInfo.items.find(i => i.item === itemUnequip);
|
|
const isSkill = fullInfo && fullInfo.skill;
|
|
const isSpec = fullInfo && fullInfo.spec;
|
|
|
|
function boundClick(e, i) {
|
|
if (itemUnequip && activeCryp) return false;
|
|
const value = vbox.bound[i];
|
|
setItemEquip(i);
|
|
return false;
|
|
}
|
|
|
|
function unequipClick(e) {
|
|
e.stopPropagation();
|
|
if (!itemUnequip) return false;
|
|
if (!activeCryp) return false;
|
|
setItemUnequip(null);
|
|
return sendUnequip(activeCryp.id, itemUnequip);
|
|
}
|
|
|
|
const skillClass = isSkill ? 'skills highlight' : 'skills';
|
|
const specClass = isSpec ? 'specs highlight' : 'specs';
|
|
|
|
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
|
|
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
|
|
|
|
const skills = range(0, 9).map(i => {
|
|
const item = convertItem(vbox.bound[i]);
|
|
if (skillList.includes(item)) {
|
|
return (
|
|
<button key={i} onClick={e => boundClick(e, i)}>
|
|
{item}
|
|
</button>
|
|
);
|
|
} return false;
|
|
});
|
|
|
|
const specs = range(0, 9).map(i => {
|
|
const item = convertItem(vbox.bound[i]);
|
|
if (specList.includes(item)) {
|
|
return (
|
|
<figure key={i} onClick={e => boundClick(e, i)}>
|
|
{SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
|
|
<figcaption>{SPECS[item].caption}</figcaption>
|
|
</figure>
|
|
);
|
|
} return false;
|
|
});
|
|
|
|
function hoverInfo(e, info) {
|
|
e.stopPropagation();
|
|
return setInfo(info);
|
|
}
|
|
|
|
return (
|
|
<div className="equip" >
|
|
<div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
|
|
<h3>Skills</h3>
|
|
<div className ="items">
|
|
{skills}
|
|
</div>
|
|
</div>
|
|
<div className={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
|
|
<h3>Specs</h3>
|
|
<div className ="items">
|
|
{specs}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Equipment);
|