From 1b760a28930b3733efada19af7e4c3b24bf9a66d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 24 Nov 2019 11:51:02 +1000
Subject: [PATCH] fade invalid combo selections

---
 client/assets/styles/vbox.less       |  5 ++++-
 client/src/components/vbox.stash.jsx |  8 +++++---
 client/src/components/vbox.store.jsx | 10 +++++-----
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index aefd4f28..d0e8e0a3 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -134,11 +134,14 @@
         width: 100%;
 
         // text-transform: none;
-
         &.empty {
             border-style: dashed;
         }
 
+        &.fade {
+            opacity: 0.4;
+        }
+
         &.highlight {
             color: black;
             background: @white;
diff --git a/client/src/components/vbox.stash.jsx b/client/src/components/vbox.stash.jsx
index bfca1d29..18dd6b78 100644
--- a/client/src/components/vbox.stash.jsx
+++ b/client/src/components/vbox.stash.jsx
@@ -44,7 +44,7 @@ function stashElement(props) {
                 class={stashHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
         }
 
-        const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
+        const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
 
         function onClick(type) {
             const combinerContainsIndex = stashSelect.indexOf(i) > -1;
@@ -56,7 +56,7 @@ function stashElement(props) {
                 return true;
             }
 
-            if (!comboHighlight) {
+            if (notValidCombo) {
                 setInfo(vbox.bound[i]);
                 return setVboxSelected({ storeSelect: [], stashSelect: [i] });
             }
@@ -68,7 +68,9 @@ function stashElement(props) {
 
         const highlighted = stashSelect.indexOf(i) > -1;
         const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
-        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
+        const classes = highlighted
+            ? 'highlight'
+            : `${border} ${notValidCombo ? 'fade' : ''}`;
 
         const invObject = shapes[v] ? shapes[v]() : v;
 
diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx
index cc2e286b..4dfda70a 100644
--- a/client/src/components/vbox.store.jsx
+++ b/client/src/components/vbox.store.jsx
@@ -7,7 +7,6 @@ const shapes = require('./shapes');
 function storeElement(props) {
     const {
         clearVboxSelected,
-        setInfo,
         setVboxSelected,
         storeSelect,
         stashSelect,
@@ -20,11 +19,10 @@ function storeElement(props) {
         if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
         const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
 
-        const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
+        const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
 
         function onClick(e) {
             e.stopPropagation();
-            if (!comboHighlight) setInfo(vbox.free[group][index]);
             if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) {
                 return setVboxSelected(
                     { storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
@@ -34,14 +32,16 @@ function storeElement(props) {
             if (!storeSelect.length && !stashSelect.length) {
                 return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
             }
-            if (comboHighlight !== 'combo-border') {
+            if (notValidCombo) {
                 return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
             }
             return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
         }
 
 
-        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
+        const classes = selected
+            ? `${v.toLowerCase()} highlight`
+            : `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;
 
         const vboxObject = shapes[v] ? shapes[v]() : v;
         const disabled = vbox.bits <= group;