highlight potential inv combos

client/assets/styles/colours.less

@@ -82,6 +82,10 @@ svg {
     animation: bg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
 }
 
+.combo-border {
+    animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
+}
+
 @keyframes rg {
     from {
         border-color: @red;
@@ -109,6 +113,15 @@ svg {
     }
 }
 
+@keyframes co {
+    from {
+        border-color: @white;
+    }
+    to {
+        border-color: @gray-box;
+    }
+}
+
 button {
     &.blue {
         border-color: @blue;

client/src/components/vbox.component.jsx

@@ -283,9 +283,22 @@ function Vbox(args) {
             return combinerChange(combiner);
         }
 
+        const combinerItems = combiner.map(j => vbox.bound[j]);
+        const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
+            if (combo.components.includes(v) && combinerItems.every(c => combo.components.includes(c))) {
+                return combinerItems.every(c => {
+                    if (c !== v) return true;
+                    const comboCount = countBy(combo.components, co => co);
+                    const combinerCounts = countBy(combinerItems, co => co);
+                    if (comboCount[c] > combinerCounts[c]) return true;
+                    return false;
+                });
+            } return false;
+        }) ? 'combo-border' : '';
+
         const highlighted = combiner.indexOf(i) > -1;
         const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
-        const classes = `${highlighted ? 'highlight' : border}`;
+        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
         if (shapes[v]) {
             return (
                 <button