validVboxSelect for vbox and inventory

client/src/components/vbox.component.jsx

@@ -3,6 +3,7 @@ const { connect } = require('preact-redux');
 const range = require('lodash/range');
 const countBy = require('lodash/countBy');
 const without = require('lodash/without');
+const forEach = require('lodash/forEach');
 
 const { removeTier } = require('../utils');
 const shapes = require('./shapes');
@@ -82,9 +83,38 @@ const addState = connect(
             setVboxSelected,
         };
     }
-
 );
 
+function validVboxSelect(vbox, itemInfo, shopSelect, stashSelect) {
+    if (shopSelect.length === 0 && stashSelect.length === 0) return false;
+
+    const validSelects = [];
+
+    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 itemCount = countBy(selectedItems, co => co);
+
+    itemInfo.combos.forEach(combo => {
+        const comboCount = countBy(combo.components, co => co);
+        const buyCount = countBy(combo.components, co => co);
+        const valid = selectedItems.every(c => {
+            if (!combo.components.includes(c)) return false;
+            if (itemCount[c] > comboCount[c]) return false;
+            buyCount[c] -= itemCount[c];
+            return true;
+        });
+        if (valid) {
+            forEach(buyCount, (value, key) => {
+                if (value > 0 && !validSelects.includes(key)) validSelects.push(key);
+            });
+        }
+    });
+
+    return validSelects;
+}
+
 class Vbox extends preact.Component {
     shouldComponentUpdate(newProps) {
         // Single variable props
@@ -129,13 +159,14 @@ class Vbox extends preact.Component {
             return setVboxSelected({ shopSelect, stashSelect: newStashSelect });
         }
 
+        const vboxHighlight = validVboxSelect(vbox, itemInfo, shopSelect, stashSelect);
         //
         // VBOX
         //
         function vboxHover(e, v) {
             if (v) {
                 e.stopPropagation();
-                if (shopSelect[0]) return true; // There is a base skill or spec selected in the vbox
+                if (shopSelect.find(c => c[0])) return true; // There is a base skill or spec selected in the vbox
                 if (stashSelect.length !== 0) {
                     const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                     if (base || base === 0) return true;
@@ -159,28 +190,8 @@ class Vbox extends preact.Component {
         function availableBtn(v, group, index) {
             if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
             const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index);
-            // state not yet set in double click handler
-            /*function onDblClick(e) {
-                clearVboxSelected();
-                sendVboxAccept(group, index);
-                e.stopPropagation();
-            }*/
-            console.log(stashSelect);
-            console.log(vboxSelected);
-            const combinerItems = stashSelect.map(j => vbox.bound[j]);
-            const combinerCount = countBy(combinerItems, co => co);
 
-            const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
+            const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
-                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) {
                 e.stopPropagation();
@@ -270,31 +281,12 @@ class Vbox extends preact.Component {
                 return <button key={i} onClick={emptyInvClick} disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
             }
 
-            const combinerItems = stashSelect.map(j => vbox.bound[j]);
+            const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
-            const combinerCount = countBy(combinerItems, co => co);
-
-            const comboItem = itemInfo.combos.find(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;
-            });
-            const comboHighlight = combinerItems.length > 0 && comboItem  ? 'combo-border' : '';
 
             function onClick(type) {
                 if (reclaiming) return sendVboxReclaim(i);
 
                 const combinerContainsIndex = stashSelect.indexOf(i) > -1;
-                // 4 things selected
-                if (stashSelect.length > 2 && !combinerContainsIndex) {
-                    setInfo(vbox.bound[i]);
-                    return combinerChange([i]);
-                }
                 // removing
                 if (combinerContainsIndex) {
                     if (type === 'click') {
@@ -303,13 +295,13 @@ class Vbox extends preact.Component {
                     return true;
                 }
 
-                if (!comboHighlight && !combinerContainsIndex) {
+                if (!comboHighlight) {
                     setInfo(vbox.bound[i]);
-                    return combinerChange([i]);
+                    return setVboxSelected({ shopSelect: [], stashSelect: [i] });
                 }
 
                 stashSelect.push(i);
-                if (stashSelect.length === 3) setInfo(comboItem.item);
+                // if (stashSelect.length === 3) setInfo(comboItem.item);
                 return combinerChange(stashSelect);
             }
 
@@ -340,10 +332,10 @@ class Vbox extends preact.Component {
 
         function combinerBtn() {
             let text = '';
-            let comboItem = '';
+            const combineLength = stashSelect.length + shopSelect.length;
-            if (stashSelect.length < 3) {
+            if (combineLength < 3) {
                 for (let i = 0; i < 3; i++) {
-                    if (stashSelect.length > i) {
+                    if (combineLength > i) {
                         text += '■ ';
                     } else {
                         text += '▫ ';
@@ -351,23 +343,16 @@ class Vbox extends preact.Component {
                 }
             } else {
                 // Since theres 3 items in combiner and you can't have invalid combos we can preview it
-                const combinerItems = stashSelect.map(j => vbox.bound[j]);
+                
-                const combinerCount = countBy(combinerItems, co => co);
+                // comboItem = comboItem.replace('Plus', '+');
-                const comboItemObj = itemInfo.combos.find(combo => combinerItems.every(c => {
+                // text = `Combine - ${comboItem}`;
-                    if (!combo.components.includes(c)) return false;
+                text = 'Combine';
-                    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 (
                 <button
                     class='vbox-btn'
-                    onMouseOver={e => hoverInfo(e, comboItem)}
+                    disabled={combineLength < 3}
                     onClick={e => e.stopPropagation()}
                     onMouseDown={() => sendVboxCombine()}>
                     {text}
@@ -416,9 +401,7 @@ class Vbox extends preact.Component {
         // EVERYTHING
         //
         function hoverInfo(e, newInfo) {
-            e.stopPropagation();
+            if (shopSelect.find(c => c[0])) return true;
-
-            if (shopSelect[0]) return true;
             if (stashSelect.length !== 0) {
                 const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                 if (base || base === 0) return true;