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) {
: ( );
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 (
);
}
+
+ 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 (
| 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)}
|
);
});
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));