breakout combiner / inv / store into separate files
This commit is contained in:
Mashy
parent
33420e4231
commit
85592b1516
68
client/src/components/vbox.combiner.jsx
Normal file
68
client/src/components/vbox.combiner.jsx
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
const preact = require('preact');
|
||||||
|
const countBy = require('lodash/countBy');
|
||||||
|
|
||||||
|
function combinerBtn(props) {
|
||||||
|
const {
|
||||||
|
itemInfo,
|
||||||
|
sendVboxCombine,
|
||||||
|
setInfo,
|
||||||
|
stashSelect,
|
||||||
|
shopSelect,
|
||||||
|
vbox,
|
||||||
|
vboxBuySelected,
|
||||||
|
vboxHighlight,
|
||||||
|
} = props;
|
||||||
|
let text = '';
|
||||||
|
let mouseEvent = false;
|
||||||
|
const combineLength = stashSelect.length + shopSelect.length;
|
||||||
|
if (vboxHighlight && vboxHighlight.length === 0) {
|
||||||
|
// The selected items can't be combined with additional items therefore valid combo
|
||||||
|
const stashItems = stashSelect.map(j => vbox.bound[j]);
|
||||||
|
const shopItems = shopSelect.map(j => vbox.free[j[0]][j[1]]);
|
||||||
|
const selectedItems = stashItems.concat(shopItems);
|
||||||
|
const combinerCount = countBy(selectedItems, co => co);
|
||||||
|
|
||||||
|
const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => {
|
||||||
|
if (!combo.components.includes(c)) return false;
|
||||||
|
const comboCount = countBy(combo.components, co => co);
|
||||||
|
if (combinerCount[c] > comboCount[c]) return false;
|
||||||
|
return true;
|
||||||
|
}));
|
||||||
|
let comboItem = comboItemObj ? comboItemObj.item : 'refine';
|
||||||
|
setInfo(comboItem);
|
||||||
|
comboItem = comboItem.replace('Plus', '+');
|
||||||
|
let bits = 0;
|
||||||
|
shopSelect.forEach(item => bits += item[0] + 1);
|
||||||
|
text = bits
|
||||||
|
? `Buy ${comboItem} - ${bits}b`
|
||||||
|
: `Combine - ${comboItem}`;
|
||||||
|
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
|
||||||
|
} else if (stashSelect.length === 0 && shopSelect.length === 1) {
|
||||||
|
const item = shopSelect[0];
|
||||||
|
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
||||||
|
mouseEvent = vboxBuySelected;
|
||||||
|
} else {
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
if (combineLength > i) {
|
||||||
|
text += '■ ';
|
||||||
|
} else {
|
||||||
|
text += '▫ ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div class='combiner'>
|
||||||
|
<div class='vbox-padding'>
|
||||||
|
<button
|
||||||
|
class='vbox-btn'
|
||||||
|
disabled={!mouseEvent}
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
onMouseDown={() => mouseEvent()}>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = combinerBtn;
|
||||||
@ -1,14 +1,13 @@
|
|||||||
const preact = require('preact');
|
const preact = require('preact');
|
||||||
const { connect } = require('preact-redux');
|
const { connect } = require('preact-redux');
|
||||||
const range = require('lodash/range');
|
|
||||||
const countBy = require('lodash/countBy');
|
const countBy = require('lodash/countBy');
|
||||||
const without = require('lodash/without');
|
|
||||||
const forEach = require('lodash/forEach');
|
const forEach = require('lodash/forEach');
|
||||||
|
|
||||||
const { removeTier } = require('../utils');
|
|
||||||
const shapes = require('./shapes');
|
|
||||||
const actions = require('../actions');
|
const actions = require('../actions');
|
||||||
const buttons = require('./buttons');
|
|
||||||
|
const InventoryElement = require('./vbox.inventory');
|
||||||
|
const StoreElement = require('./vbox.store');
|
||||||
|
const CombinerElement = require('./vbox.combiner');
|
||||||
|
|
||||||
const addState = connect(
|
const addState = connect(
|
||||||
function receiveState(state) {
|
function receiveState(state) {
|
||||||
@ -175,66 +174,6 @@ class Vbox extends preact.Component {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function availableBtn(v, group, index) {
|
|
||||||
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
|
||||||
const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index);
|
|
||||||
|
|
||||||
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
|
||||||
|
|
||||||
function onClick(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (!comboHighlight) setInfo(vbox.free[group][index]);
|
|
||||||
if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
|
||||||
return setVboxSelected({ shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!shopSelect.length && !stashSelect.length) return setVboxSelected({ shopSelect: [[group, index]], stashSelect });
|
|
||||||
if (comboHighlight !== 'combo-border') {
|
|
||||||
return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] });
|
|
||||||
}
|
|
||||||
return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect });
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
|
|
||||||
|
|
||||||
const vboxObject = shapes[v] ? shapes[v]() : v;
|
|
||||||
const disabled = vbox.bits <= group;
|
|
||||||
return (
|
|
||||||
<label draggable='true'
|
|
||||||
onDragStart={ev => ev.dataTransfer.setData('text', '')}
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function vboxElement() {
|
|
||||||
return (
|
|
||||||
<div class='shop'
|
|
||||||
onClick={e => e.stopPropagation()}>
|
|
||||||
<div class='vbox-padding'>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function vboxHdr() {
|
function vboxHdr() {
|
||||||
return (
|
return (
|
||||||
<div class="shop-hdr">
|
<div class="shop-hdr">
|
||||||
@ -250,7 +189,8 @@ class Vbox extends preact.Component {
|
|||||||
class='vbox-btn'
|
class='vbox-btn'
|
||||||
onMouseOver={e => vboxHover(e, 'refill')}
|
onMouseOver={e => vboxHover(e, 'refill')}
|
||||||
disabled={vbox.bits < 2
|
disabled={vbox.bits < 2
|
||||||
|| (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
|
|| (tutorial && tutorial < 7
|
||||||
|
&& instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||||
}
|
}
|
||||||
onClick={e => e.stopPropagation()}
|
onClick={e => e.stopPropagation()}
|
||||||
onMouseDown={() => sendVboxDiscard()}>
|
onMouseDown={() => sendVboxDiscard()}>
|
||||||
@ -261,143 +201,6 @@ class Vbox extends preact.Component {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// INVENTORY
|
|
||||||
//
|
|
||||||
|
|
||||||
function inventoryBtn(v, i) {
|
|
||||||
const inventoryHighlight = vboxSelecting || itemUnequip.length;
|
|
||||||
|
|
||||||
if (!v && v !== 0) {
|
|
||||||
const emptyInvClick = () => {
|
|
||||||
if (vboxSelecting) return vboxBuySelected();
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
return <button key={i} onClick={emptyInvClick} disabled={!inventoryHighlight} class={inventoryHighlight ? '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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function combinerBtn() {
|
|
||||||
let text = '';
|
|
||||||
let mouseEvent = false;
|
|
||||||
const combineLength = stashSelect.length + shopSelect.length;
|
|
||||||
if (vboxHighlight && vboxHighlight.length === 0) {
|
|
||||||
// The selected items can't be combined with additional items therefore valid combo
|
|
||||||
const stashItems = stashSelect.map(j => vbox.bound[j]);
|
|
||||||
const shopItems = shopSelect.map(j => vbox.free[j[0]][j[1]]);
|
|
||||||
const selectedItems = stashItems.concat(shopItems);
|
|
||||||
const combinerCount = countBy(selectedItems, co => co);
|
|
||||||
|
|
||||||
const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => {
|
|
||||||
if (!combo.components.includes(c)) return false;
|
|
||||||
const comboCount = countBy(combo.components, co => co);
|
|
||||||
if (combinerCount[c] > comboCount[c]) return false;
|
|
||||||
return true;
|
|
||||||
}));
|
|
||||||
let comboItem = comboItemObj ? comboItemObj.item : 'refine';
|
|
||||||
setInfo(comboItem);
|
|
||||||
comboItem = comboItem.replace('Plus', '+');
|
|
||||||
let bits = 0;
|
|
||||||
shopSelect.forEach(item => bits += item[0] + 1);
|
|
||||||
text = bits
|
|
||||||
? `Buy ${comboItem} - ${bits}b`
|
|
||||||
: `Combine - ${comboItem}`;
|
|
||||||
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
|
|
||||||
} else if (stashSelect.length === 0 && shopSelect.length === 1) {
|
|
||||||
const item = shopSelect[0];
|
|
||||||
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
|
||||||
mouseEvent = vboxBuySelected;
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < 3; i++) {
|
|
||||||
if (combineLength > i) {
|
|
||||||
text += '■ ';
|
|
||||||
} else {
|
|
||||||
text += '▫ ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div class='combiner'>
|
|
||||||
<div class='vbox-padding'>
|
|
||||||
<button
|
|
||||||
class='vbox-btn'
|
|
||||||
disabled={!mouseEvent}
|
|
||||||
onClick={e => e.stopPropagation()}
|
|
||||||
onMouseDown={() => mouseEvent()}>
|
|
||||||
{text}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function inventoryElement() {
|
|
||||||
function inventoryClick(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
class='stash'
|
|
||||||
onMouseDown={inventoryClick}
|
|
||||||
onClick={e => e.stopPropagation()}
|
|
||||||
onDragOver={ev => ev.preventDefault()}
|
|
||||||
onDrop={inventoryClick}
|
|
||||||
>
|
|
||||||
<div class='vbox-padding'>
|
|
||||||
{range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function inventoryHdr() {
|
function inventoryHdr() {
|
||||||
return (
|
return (
|
||||||
@ -414,7 +217,8 @@ class Vbox extends preact.Component {
|
|||||||
const refund = shopSelect.length === 0 && stashSelect.length === 1
|
const refund = shopSelect.length === 0 && stashSelect.length === 1
|
||||||
? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
|
? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
|
||||||
: 0;
|
: 0;
|
||||||
const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1;
|
const tutorialDisabled = tutorial && tutorial < 8
|
||||||
|
&& instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||||
return (
|
return (
|
||||||
<div class='refund'>
|
<div class='refund'>
|
||||||
<div class='vbox-padding'>
|
<div class='vbox-padding'>
|
||||||
@ -434,17 +238,45 @@ class Vbox extends preact.Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
|
||||||
// EVERYTHING
|
// EVERYTHING
|
||||||
//
|
|
||||||
return (
|
return (
|
||||||
<div class='vbox'>
|
<div class='vbox'>
|
||||||
{vboxHdr()}
|
{vboxHdr()}
|
||||||
{vboxElement()}
|
|
||||||
{inventoryHdr()}
|
{inventoryHdr()}
|
||||||
{inventoryElement()}
|
|
||||||
{combinerBtn()}
|
|
||||||
{refundBtn()}
|
{refundBtn()}
|
||||||
|
<StoreElement
|
||||||
|
clearVboxSelected = {clearVboxSelected}
|
||||||
|
setInfo = {setInfo}
|
||||||
|
setVboxSelected = {setVboxSelected}
|
||||||
|
shopSelect = {shopSelect}
|
||||||
|
stashSelect = {stashSelect}
|
||||||
|
vbox = {vbox}
|
||||||
|
vboxHighlight = {vboxHighlight}
|
||||||
|
vboxHover = {vboxHover}
|
||||||
|
/>
|
||||||
|
<InventoryElement
|
||||||
|
combinerChange = {combinerChange}
|
||||||
|
itemUnequip = {itemUnequip}
|
||||||
|
vbox = {vbox}
|
||||||
|
vboxBuySelected = {vboxBuySelected}
|
||||||
|
vboxHighlight = {vboxHighlight}
|
||||||
|
vboxHover = {vboxHover}
|
||||||
|
vboxSelecting = {vboxSelecting}
|
||||||
|
stashSelect = {stashSelect}
|
||||||
|
sendItemUnequip = {sendItemUnequip}
|
||||||
|
setInfo = {setInfo}
|
||||||
|
setVboxSelected = {setVboxSelected}
|
||||||
|
/>
|
||||||
|
<CombinerElement
|
||||||
|
itemInfo = {itemInfo}
|
||||||
|
sendVboxCombine = {sendVboxCombine}
|
||||||
|
setInfo = {setInfo}
|
||||||
|
stashSelect = {stashSelect}
|
||||||
|
shopSelect = {shopSelect}
|
||||||
|
vbox = {vbox}
|
||||||
|
vboxBuySelected = {vboxBuySelected}
|
||||||
|
vboxHighlight = {vboxHighlight}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
108
client/src/components/vbox.inventory.jsx
Normal file
108
client/src/components/vbox.inventory.jsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
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 inventoryElement(props) {
|
||||||
|
const {
|
||||||
|
combinerChange,
|
||||||
|
itemUnequip,
|
||||||
|
vbox,
|
||||||
|
vboxBuySelected,
|
||||||
|
vboxHighlight,
|
||||||
|
vboxHover,
|
||||||
|
vboxSelecting,
|
||||||
|
stashSelect,
|
||||||
|
|
||||||
|
sendItemUnequip,
|
||||||
|
setInfo,
|
||||||
|
setVboxSelected,
|
||||||
|
|
||||||
|
} = props;
|
||||||
|
function inventoryClick(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function inventoryBtn(v, i) {
|
||||||
|
const inventoryHighlight = vboxSelecting || itemUnequip.length;
|
||||||
|
|
||||||
|
if (!v && v !== 0) {
|
||||||
|
const emptyInvClick = () => {
|
||||||
|
if (vboxSelecting) return vboxBuySelected();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
return <button
|
||||||
|
key={i}
|
||||||
|
onClick={emptyInvClick}
|
||||||
|
disabled={!inventoryHighlight}
|
||||||
|
class={inventoryHighlight ? '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={inventoryClick}
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
onDragOver={ev => ev.preventDefault()}
|
||||||
|
onDrop={inventoryClick}
|
||||||
|
>
|
||||||
|
<div class='vbox-padding'>
|
||||||
|
{range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = inventoryElement;
|
||||||
81
client/src/components/vbox.store.jsx
Normal file
81
client/src/components/vbox.store.jsx
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
const preact = require('preact');
|
||||||
|
const range = require('lodash/range');
|
||||||
|
|
||||||
|
const shapes = require('./shapes');
|
||||||
|
|
||||||
|
|
||||||
|
function storeElement(props) {
|
||||||
|
const {
|
||||||
|
clearVboxSelected,
|
||||||
|
setInfo,
|
||||||
|
setVboxSelected,
|
||||||
|
shopSelect,
|
||||||
|
stashSelect,
|
||||||
|
vbox,
|
||||||
|
vboxHighlight,
|
||||||
|
vboxHover,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
function availableBtn(v, group, index) {
|
||||||
|
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
||||||
|
const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index);
|
||||||
|
|
||||||
|
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
||||||
|
|
||||||
|
function onClick(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!comboHighlight) setInfo(vbox.free[group][index]);
|
||||||
|
if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
||||||
|
return setVboxSelected(
|
||||||
|
{ shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!shopSelect.length && !stashSelect.length) {
|
||||||
|
return setVboxSelected({ shopSelect: [[group, index]], stashSelect });
|
||||||
|
}
|
||||||
|
if (comboHighlight !== 'combo-border') {
|
||||||
|
return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] });
|
||||||
|
}
|
||||||
|
return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
|
||||||
|
|
||||||
|
const vboxObject = shapes[v] ? shapes[v]() : v;
|
||||||
|
const disabled = vbox.bits <= group;
|
||||||
|
return (
|
||||||
|
<label draggable='true'
|
||||||
|
onDragStart={ev => ev.dataTransfer.setData('text', '')}
|
||||||
|
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='shop'
|
||||||
|
onClick={e => e.stopPropagation()}>
|
||||||
|
<div class='vbox-padding'>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = storeElement;
|
||||||
Loading…
x
Reference in New Issue
Block a user