110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
const preact = require('preact');
|
|
const range = require('lodash/range');
|
|
const without = require('lodash/without');
|
|
|
|
const shapes = require('./shapes');
|
|
const buttons = require('./buttons');
|
|
const { removeTier } = require('../utils');
|
|
|
|
function stashElement(props) {
|
|
const {
|
|
combinerChange,
|
|
itemUnequip,
|
|
vbox,
|
|
vboxBuySelected,
|
|
vboxHighlight,
|
|
vboxHover,
|
|
vboxSelecting,
|
|
stashSelect,
|
|
|
|
sendItemUnequip,
|
|
setInfo,
|
|
setVboxSelected,
|
|
|
|
} = props;
|
|
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 comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
|
|
|
function onClick(type) {
|
|
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
|
// removing
|
|
if (combinerContainsIndex) {
|
|
if (type === 'click') {
|
|
return combinerChange(without(stashSelect, i));
|
|
}
|
|
return true;
|
|
}
|
|
|
|
if (!comboHighlight) {
|
|
setInfo(vbox.bound[i]);
|
|
return setVboxSelected({ shopSelect: [], stashSelect: [i] });
|
|
}
|
|
|
|
stashSelect.push(i);
|
|
// if (stashSelect.length === 3) setInfo(comboItem.item);
|
|
return combinerChange(stashSelect);
|
|
}
|
|
|
|
const highlighted = stashSelect.indexOf(i) > -1;
|
|
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
|
|
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
|
|
|
|
const invObject = shapes[v] ? shapes[v]() : v;
|
|
|
|
return (
|
|
<label
|
|
key={i}
|
|
draggable='true'
|
|
onDragStart={ev => {
|
|
onClick('drag');
|
|
ev.dataTransfer.setData('text', '');
|
|
}}>
|
|
<button
|
|
class={classes}
|
|
onMouseOver={e => vboxHover(e, v)}
|
|
onClick={e => e.stopPropagation()}
|
|
onMouseDown={() => onClick('click')}>
|
|
{invObject}
|
|
</button>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class='stash'
|
|
onMouseDown={stashClick}
|
|
onClick={e => e.stopPropagation()}
|
|
onDragOver={ev => ev.preventDefault()}
|
|
onDrop={stashClick}
|
|
>
|
|
<div class='vbox-padding'>
|
|
{range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = stashElement;
|