e.stopPropagation()}
- style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
- onMouseOver={e => hoverInfo(e, 'inventory')}>
-
-
e.target.scrollIntoView(true)}>INVENTORY
+ //
+ // VBOX
+ //
+ function vboxHover(e, v) {
+ if (v) {
+ if (info !== v) setInfo(v);
+ e.stopPropagation();
+ }
+ return true;
+ }
+
+ function clearVboxSelected() {
+ setVboxSelected([]);
+ }
+
+ function vboxBuySelected() {
+ if (!vboxSelecting) return false;
+ document.activeElement.blur();
+ clearVboxSelected();
+ sendVboxAccept(vboxSelected[0], vboxSelected[1]);
+ return true;
+ }
+
+ function availableBtn(v, group, index) {
+ if (!v) return
;
+ const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+
+ // state not yet set in double click handler
+ function onDblClick(e) {
+ clearVboxSelected();
+ sendVboxAccept(group, index);
+ e.stopPropagation();
+ }
+
+ function onClick(e) {
+ e.stopPropagation();
+ setItemEquip(null);
+ setCombiner([]);
+
+ if (selected) return clearVboxSelected();
+ return setVboxSelected([group, index]);
+ }
+
+ const combinerItems = combiner.map(j => vbox.bound[j]);
+ const combinerCount = countBy(combinerItems, co => co);
+
+ const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
+ if (combo.components.includes(v)) {
+ return combinerItems.every(c => {
+ if (!combo.components.includes(c)) return false;
+ const comboCount = countBy(combo.components, co => co);
+ if (combinerCount[c] > comboCount[c]) return false;
+ if (c === v && combinerCount[c] + 1 > comboCount[c]) return false;
+ return true;
+ });
+ } return false;
+ }) ? 'combo-border' : '';
+
+ const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
+
+ if (shapes[v]) {
+ return (
+ );
+ }
+
+ return (
+
+ );
+ }
+
+
+ function vboxElement() {
+ return (
+
setReclaiming(false)}
+ onClick={e => e.stopPropagation()}
+ onMouseOver={e => hoverInfo(e, 'vbox')}>
+
+
e.target.scrollIntoView(true)}>VBOX
+
hoverInfo(e, 'bits')} >{vbox.bits}b
+
+
+ {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))}
+
+
-
- {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+ );
+ }
+
+ //
+ // INVENTORY
+ //
+ function reclaimClick(e) {
+ e.stopPropagation();
+ return setReclaiming(!reclaiming);
+ }
+
+ const inventoryClass = `vbox-section ${reclaiming ? 'reclaiming' : ''}`;
+
+ function inventoryBtn(v, i) {
+ const inventoryHighlight = vboxSelecting || itemUnequip.length;
+
+ if (!v && v !== 0) {
+ return
;
+ }
+
+ const combinerItems = combiner.map(j => vbox.bound[j]);
+ const combinerCount = countBy(combinerItems, co => co);
+
+ const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
+ if (combo.components.includes(v)) {
+ return combinerItems.every(c => {
+ if (!combo.components.includes(c)) return false;
+ const comboCount = countBy(combo.components, co => co);
+ if (combinerCount[c] > comboCount[c]) return false;
+ if (c === v && combinerCount[c] + 1 > comboCount[c]) return false;
+ return true;
+ });
+ } return false;
+ }) ? 'combo-border' : '';
+
+ function onClick(e) {
+ if (vboxSelecting) clearVboxSelected();
+ if (reclaiming) return sendVboxReclaim(i);
+
+ // 4 things selected
+ if (combiner.length > 2) return combinerChange([i]);
+
+ // removing
+ const combinerIndex = combiner.indexOf(i);
+ if (combinerIndex > -1) {
+ return combinerChange(without(combiner, i));
+ }
+
+ combiner.push(i);
+
+ if (!comboHighlight) {
+ return combinerChange([i]);
+ }
+
+ return combinerChange(combiner);
+ }
+
+ const highlighted = combiner.indexOf(i) > -1;
+ const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
+ const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
+ if (shapes[v]) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
+ function combinerBtn() {
+ let text = '';
+ let comboItem = '';
+ if (combiner.length < 3) {
+ for (let i = 0; i < 3; i++) {
+ if (combiner.length > i) {
+ text += '■ ';
+ } else {
+ text += '▫ ';
+ }
+ }
+ } else {
+ // Since theres 3 items in combiner and you can't have invalid combos we can preview it
+ const combinerItems = combiner.map(j => vbox.bound[j]);
+ const combinerCount = countBy(combinerItems, co => co);
+ const comboItemObj = itemInfo.combos.find(combo => combinerItems.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;
+ }));
+ comboItem = comboItemObj ? comboItemObj.item : 'refine';
+ comboItem = comboItem.replace('Plus', '+');
+ text = `Combine - ${comboItem}`;
+ }
+
+ return (
+
+ );
+ }
+
+ function inventoryElement() {
+ function inventoryClick(e) {
+ e.stopPropagation();
+ setReclaiming(false);
+ if (vboxSelecting) return vboxBuySelected();
+ if (itemUnequip.length) return sendItemUnequip(itemUnequip);
+ return true;
+ }
+
+ return (
+
e.stopPropagation()}
+ style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
+ onMouseOver={e => hoverInfo(e, 'inventory')}>
+
+
e.target.scrollIntoView(true)}>INVENTORY
+
+
+
+ {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+
+ {combinerBtn()}
- {combinerBtn()}
+ );
+ }
+
+ //
+ // EVERYTHING
+ //
+ function hoverInfo(e, newInfo) {
+ e.stopPropagation();
+ if (info === newInfo) return true;
+ return setInfo(newInfo);
+ }
+
+ const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
+ return (
+
+ {vboxElement()}
+
⮞
+ {inventoryElement()}
);
}
-
- //
- // EVERYTHING
- //
- function hoverInfo(e, newInfo) {
- e.stopPropagation();
- if (info === newInfo) return true;
- return setInfo(newInfo);
- }
-
- const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
- return (
-
- {vboxElement()}
-
⮞
- {inventoryElement()}
-
- );
}
module.exports = addState(Vbox);