preview combiner

client/src/components/vbox.component.jsx

@@ -20,6 +20,7 @@ const addState = connect(
             itemInfo,
             itemUnequip,
             navInstance,
+            info,
         } = state;
 
         function sendVboxDiscard() {
@@ -56,6 +57,7 @@ const addState = connect(
             itemUnequip,
             sendItemUnequip,
             navInstance,
+            info,
         };
     },
 
@@ -115,6 +117,7 @@ function Vbox(args) {
         sendItemUnequip,
 
         setReclaiming,
+        info,
     } = args;
 
     if (!player) return false;
@@ -138,7 +141,7 @@ function Vbox(args) {
     //
     function vboxHover(e, v) {
         if (v) {
-            setInfo(v);
+            if (info !== v) setInfo(v);
             e.stopPropagation();
         }
         return true;
@@ -329,7 +332,7 @@ function Vbox(args) {
 
     function combinerBtn() {
         let text = '';
-
+        let comboItem = 'refine';
         if (combiner.length < 3) {
             for (let i = 0; i < 3; i++) {
                 if (combiner.length > i) {
@@ -339,14 +342,17 @@ function Vbox(args) {
                 }
             }
         } else {
-            text = 'combine';
+            // Since theres 3 items in combiner and you can't have valid combos we can preview it
+            const combinerItems = combiner.map(j => vbox.bound[j]);
+            comboItem = itemInfo.combos.find(combo => combinerItems.every(c => combo.components.includes(c))).item;
+            text = `Combine - ${comboItem}`;
         }
 
         return (
             <button
                 class='vbox-btn'
                 disabled={combiner.length !== 3}
-                onMouseOver={e => hoverInfo(e, 'refine')}
+                onMouseOver={e => hoverInfo(e, comboItem)}
                 onClick={e => e.stopPropagation()}
                 onMouseDown={() => sendVboxCombine()}>
                 {text}
@@ -390,9 +396,10 @@ function Vbox(args) {
     //
     // EVERYTHING
     //
-    function hoverInfo(e, info) {
+    function hoverInfo(e, newInfo) {
         e.stopPropagation();
-        return setInfo(info);
+        if (info === newInfo) return true;
+        return setInfo(newInfo);
     }
 
     const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;