@@ -434,17 +238,45 @@ class Vbox extends preact.Component {
);
}
- //
// EVERYTHING
- //
return (
{vboxHdr()}
- {vboxElement()}
{inventoryHdr()}
- {inventoryElement()}
- {combinerBtn()}
{refundBtn()}
+
+
+
);
}
diff --git a/client/src/components/vbox.inventory.jsx b/client/src/components/vbox.inventory.jsx
new file mode 100644
index 00000000..f4f80e06
--- /dev/null
+++ b/client/src/components/vbox.inventory.jsx
@@ -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
;
+ }
+
+ 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 (
+
+ );
+ }
+
+ return (
+
e.stopPropagation()}
+ onDragOver={ev => ev.preventDefault()}
+ onDrop={inventoryClick}
+ >
+
+ {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
+
+
+ );
+}
+
+module.exports = inventoryElement;
diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx
new file mode 100644
index 00000000..410cf491
--- /dev/null
+++ b/client/src/components/vbox.store.jsx
@@ -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
;
+ 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 (
+
+ );
+ }
+
+ return (
+
e.stopPropagation()}>
+
+
+ {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
+
+
+ {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
+ {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
+
+
+
+ );
+}
+
+module.exports = storeElement;