133 lines
4.6 KiB
JavaScript
133 lines
4.6 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const range = require('lodash/range');
|
|
const without = require('lodash/without');
|
|
|
|
const shapes = require('./shapes');
|
|
const buttons = require('./buttons');
|
|
const { removeTier } = require('../utils');
|
|
|
|
const addState = connect(
|
|
({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));
|
|
|
|
class stashElement extends preact.Component {
|
|
shouldComponentUpdate(newProps) {
|
|
if (newProps.sendItemUnequip !== this.props.sendItemUnequip) return true;
|
|
if (newProps.setInfo !== this.props.setInfo) return true;
|
|
if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
|
|
if (newProps.vbox !== this.props.vbox) return true;
|
|
if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
|
|
if (newProps.vboxHover !== this.props.vboxHover) return true;
|
|
|
|
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
|
|
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
|
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
|
return false;
|
|
}
|
|
|
|
render(props) {
|
|
const {
|
|
// passed props
|
|
sendItemUnequip,
|
|
setInfo,
|
|
setVboxSelected,
|
|
vbox,
|
|
vboxBuySelected,
|
|
vboxHover,
|
|
// connect state props
|
|
itemUnequip,
|
|
vboxHighlight,
|
|
vboxSelected,
|
|
} = props;
|
|
|
|
const { storeSelect, stashSelect } = vboxSelected;
|
|
|
|
const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;
|
|
|
|
function stashClick(e) {
|
|
e.stopPropagation();
|
|
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
|
if (vboxSelecting) return vboxBuySelected();
|
|
return true;
|
|
}
|
|
|
|
function stashBtn(v, i) {
|
|
const stashHighlight = vboxSelecting || itemUnequip.length;
|
|
|
|
if (!v && v !== 0) {
|
|
const emptyInvClick = () => {
|
|
if (vboxSelecting) return vboxBuySelected();
|
|
return false;
|
|
};
|
|
return <button
|
|
key={i}
|
|
onClick={emptyInvClick}
|
|
disabled={!stashHighlight}
|
|
class={stashHighlight ? 'receiving' : 'empty'} > </button>;
|
|
}
|
|
|
|
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
|
|
|
|
function onClick(type, e) {
|
|
e.stopPropagation();
|
|
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
|
// removing
|
|
if (combinerContainsIndex) {
|
|
if (type === 'click') {
|
|
return setVboxSelected({ storeSelect, stashSelect: without(stashSelect, i) });
|
|
}
|
|
return true;
|
|
}
|
|
|
|
if (notValidCombo) {
|
|
setInfo(vbox.stash[i]);
|
|
return setVboxSelected({ storeSelect: [], stashSelect: [i] });
|
|
}
|
|
|
|
return setVboxSelected({ storeSelect, stashSelect: [...stashSelect, i] });
|
|
}
|
|
|
|
const highlighted = stashSelect.indexOf(i) > -1;
|
|
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
|
|
const classes = highlighted
|
|
? 'highlight'
|
|
: `${border} ${notValidCombo ? 'fade' : ''}`;
|
|
|
|
const invObject = shapes[v] ? shapes[v]() : v;
|
|
|
|
return (
|
|
<label
|
|
key={i}
|
|
draggable='true'
|
|
onDragStart={ev => {
|
|
onClick('drag', ev);
|
|
ev.dataTransfer.setData('text', '');
|
|
}}>
|
|
<button
|
|
class={classes}
|
|
onMouseOver={e => vboxHover(e, v)}
|
|
onClick={e => e.stopPropagation()}
|
|
onMouseDown={e => onClick('click', e)}>
|
|
{invObject}
|
|
</button>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class='stash'
|
|
onMouseDown={stashClick}
|
|
onClick={e => e.stopPropagation()}
|
|
onDragOver={ev => ev.preventDefault()}
|
|
onDrop={stashClick}
|
|
>
|
|
{range(0, 6).map(i => stashBtn(vbox.stash[i], i.toString()))}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(stashElement);
|