highlights

client/src/components/instance.cryps.jsx

@@ -64,7 +64,7 @@ function Cryp(props) {
             : (<span>&nbsp;</span>);
 
         function skillClick() {
-            if (!skill) return false;
+            if (!skill) return setInfo('highlight', 'skill');
             setInfo('skill', { skill: skill.skill, cryp });
             return setActiveCryp(cryp);
         }

client/src/components/vbox.component.jsx

@@ -11,6 +11,8 @@ function Vbox(args) {
         activeCryp,
         player,
         instance,
+        info,
+        vboxInfo,
         combiner,
         reclaiming,
         sendVboxAccept,
@@ -129,6 +131,7 @@ function Vbox(args) {
     }
 
     const boundTds = range(0, 9).map(i => {
+        const value = vbox.bound[i];
         if (combiner.indexOf(i) > -1) {
             return (
                 <td
@@ -137,18 +140,27 @@ function Vbox(args) {
                 </td>
             );
         }
+
+        const highlight = () => {
+            if (!value || !info[0] || info[0] !== 'highlight') return false;
+            const v = vboxInfo.vars.find(vi => vi.v === value);
+            if (info[1] === 'skill') return v.skill;
+            if (info[1] === 'spec') return v.spec;
+            return false;
+        };
+
         return (
             <td
                 key={i}
                 draggable="true"
                 onDragStart={e => e.dataTransfer.setData('text', i)}
-
+                className={`${highlight() ? 'highlight' : ''}`}
                 onTouchStart={e => boundTouchStart(e, i)}
                 onTouchEnd={e => boundTouchEnd(e, i)}
                 onTouchMove={e => boundTouchMove(e)}
 
                 onClick={e => boundClick(e, i) }>
-                {convertVar(vbox.bound[i])}
+                {convertVar(value)}
             </td>
         );
     });

client/src/components/vbox.container.jsx

@@ -15,6 +15,7 @@ const addState = connect(
             activeVar,
             activeCryp,
             info,
+            vboxInfo,
         } = state;
 
         function sendVboxDiscard() {
@@ -41,6 +42,7 @@ const addState = connect(
             activeVar,
             activeCryp,
             info,
+            vboxInfo,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,