From 491e470d6cd96d4c20234577ff7f488e902fa325 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 6 May 2019 00:39:52 +1000
Subject: [PATCH] highlights

---
 client/src/components/instance.cryps.jsx |  2 +-
 client/src/components/vbox.component.jsx | 16 +++++++++--
 client/src/components/vbox.container.jsx |  2 ++
 client/src/events.jsx                    | 36 ++++++++++++------------
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 35c9cbf3..d1808bd3 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/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);
         }
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 9ff01840..e0ad5e23 100644
--- a/client/src/components/vbox.component.jsx
+++ b/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>
         );
     });
diff --git a/client/src/components/vbox.container.jsx b/client/src/components/vbox.container.jsx
index d2e09ce4..950ce438 100644
--- a/client/src/components/vbox.container.jsx
+++ b/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,
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 79ab20cb..b66b5f68 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -18,24 +18,24 @@ function registerEvents(store) {
     });
 
 
-    // // cryp animations
-    // function crypAnimations() {
-    //     const cryps = document.querySelectorAll('img');
-    //     if (!cryps.length) return window.requestAnimationFrame(crypAnimations);
-    //     return anime({
-    //         targets: 'img',
-    //         translateX: () => anime.random(-20, 20),
-    //         translateY: () => anime.random(0, -40),
-    //         rotate: () => anime.random(-15, 15),
-    //         duration: () => anime.random(5000, 6000),
-    //         delay: () => anime.random(0, 1000),
-    //         direction: 'alternate',
-    //         easing: 'linear',
-    //         loop: true,
-    //     });
-    // }
-    // setInterval(crypAnimations, 5000);
-    // crypAnimations();
+    // cryp animations
+    function crypAnimations() {
+        const cryps = document.querySelectorAll('img');
+        if (!cryps.length) return window.requestAnimationFrame(crypAnimations);
+        return anime({
+            targets: 'img',
+            translateX: () => anime.random(-20, 20),
+            translateY: () => anime.random(0, -40),
+            rotate: () => anime.random(-15, 15),
+            duration: () => anime.random(5000, 6000),
+            delay: () => anime.random(0, 1000),
+            direction: 'alternate',
+            easing: 'linear',
+            loop: true,
+        });
+    }
+    setInterval(crypAnimations, 10000);
+    crypAnimations();
 
     function setPing(ping) {
        store.dispatch(actions.setPing(ping));