combiner / single item buy cost preview

client/src/components/vbox.component.jsx

@@ -332,8 +332,35 @@ class Vbox extends preact.Component {
 
         function combinerBtn() {
             let text = '';
+            let mouseEvent = false;
             const combineLength = stashSelect.length + shopSelect.length;
-            if (combineLength < 3) {
+            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}`;
+                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 += '■ ';
@@ -341,20 +368,13 @@ class Vbox extends preact.Component {
                         text += '▫ ';
                     }
                 }
-            } else {
-                // Since theres 3 items in combiner and you can't have invalid combos we can preview it
-                
-                // comboItem = comboItem.replace('Plus', '+');
-                // text = `Combine - ${comboItem}`;
-                text = 'Combine';
             }
-
             return (
                 <button
                     class='vbox-btn'
-                    disabled={combineLength < 3}
+                    disabled={!mouseEvent}
                     onClick={e => e.stopPropagation()}
-                    onMouseDown={() => sendVboxCombine()}>
+                    onMouseDown={() => mouseEvent()}>
                     {text}
                 </button>
             );