From 5dbdc3762f69e04f8fe8cab6920b225daed493fe Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 16 Oct 2019 14:20:44 +1000
Subject: [PATCH] highlight potential inv combos

---
 client/assets/styles/colours.less        | 13 +++++++++++++
 client/src/components/vbox.component.jsx | 15 ++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less
index 39b757f3..497e5161 100644
--- a/client/assets/styles/colours.less
+++ b/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;
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index e9ae7830..115a542b 100644
--- a/client/src/components/vbox.component.jsx
+++ b/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