From 24ffae70fc59c60b1df60ed097b00c0b354bdb3e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 6 May 2019 20:14:37 +1000
Subject: [PATCH] better highlighting

---
 client/src/components/vbox.component.jsx | 28 ++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 6f29bb49..2ebf8209 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -60,10 +60,30 @@ function Vbox(args) {
         return true;
     }
 
+    const freeHighlight = () => {
+        if (!info[0] || info[0] !== 'highlight') return false;
+        return vbox.bound.some(b => {
+            const v = vboxInfo.vars.find(vi => vi.v === b);
+            if (info[1] === 'skill') return v.skill;
+            if (info[1] === 'spec') return v.spec;
+            return false;
+        });
+    };
+
+    const freeShouldHighlight = freeHighlight();
+
     const freeRows = free.map((row, i) => {
-        const cells = row.map((c, j) => (
-            <td
+        const cells = row.map((c, j) => {
+            const highlighted = () => {
+                if (!c || !freeShouldHighlight) return false;
+                if (info[1] === 'skill') return j === 1;
+                if (info[1] === 'spec') return j === 2;
+                return false;
+            };
+
+            return <td
                 key={j}
+                className={`${highlighted() ? 'highlight' : ''}`}
                 onTouchStart={e => vboxTouchStart(e, i, j)}
                 onTouchEnd={e => vboxTouchEnd(e, i, j)}
                 onTouchMove={e => vboxTouchMove(e)}
@@ -72,8 +92,8 @@ function Vbox(args) {
                 onDblClick={() => sendVboxAccept(j, i) }
                 >
                 {convertVar(c)}
-            </td>
-        ));
+            </td>;
+        });
 
         return (
             <tr key={i}>