vbox highlight for combiner

client/src/components/vbox.component.jsx

@@ -169,12 +169,28 @@ function Vbox(args) {
 
         function onClick(e) {
             e.stopPropagation();
+            setItemEquip(null);
             setCombiner([]);
+
             if (selected) return clearVboxSelected();
             return setVboxSelected([group, index]);
         }
 
-        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''}`;
+        const combinerItems = combiner.map(j => vbox.bound[j]);
+        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);
+                    const combinerCount = countBy(combinerItems, 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 (