better highlighting

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}>