96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
const range = require('lodash/range');
|
|
|
|
const shapes = require('./shapes');
|
|
|
|
const addState = connect(({ vboxHighlight }) => ({ vboxHighlight }));
|
|
|
|
class storeElement extends preact.Component {
|
|
shouldComponentUpdate(newProps) {
|
|
if (newProps.clearVboxSelected !== this.props.clearVboxSelected) return true;
|
|
if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
|
|
if (newProps.vbox !== this.props.vbox) return true;
|
|
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
|
if (newProps.vboxHover !== this.props.vboxHover) return true;
|
|
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
|
return false;
|
|
}
|
|
|
|
render(props) {
|
|
const {
|
|
// passed
|
|
clearVboxSelected,
|
|
setVboxSelected,
|
|
vbox,
|
|
vboxHover,
|
|
vboxSelected,
|
|
// state
|
|
vboxHighlight,
|
|
} = props;
|
|
|
|
const { storeSelect, stashSelect } = vboxSelected;
|
|
|
|
function availableBtn(v, group, index) {
|
|
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
|
const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
|
|
|
|
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
|
|
|
|
function onClick(e) {
|
|
e.stopPropagation();
|
|
if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
|
return setVboxSelected(
|
|
{ storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
|
|
);
|
|
}
|
|
|
|
if (!storeSelect.length && !stashSelect.length) {
|
|
return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
|
|
}
|
|
if (notValidCombo) {
|
|
return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
|
|
}
|
|
return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
|
|
}
|
|
|
|
|
|
const classes = selected
|
|
? `${v.toLowerCase()} highlight`
|
|
: `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;
|
|
|
|
const vboxObject = shapes[v] ? shapes[v]() : v;
|
|
const disabled = vbox.bits <= group;
|
|
return (
|
|
<label
|
|
key={group * 10 + index}
|
|
onDragEnd={clearVboxSelected}>
|
|
<button
|
|
class={classes}
|
|
disabled={disabled}
|
|
onMouseOver={e => vboxHover(e, v)}
|
|
onMouseDown={onClick}
|
|
onClick={e => e.stopPropagation()}
|
|
> {vboxObject}
|
|
</button>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div class='store'
|
|
onClick={e => e.stopPropagation()}>
|
|
<div class="vbox-colours">
|
|
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
|
</div>
|
|
<div class="vbox-items">
|
|
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
|
|
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(storeElement);
|