cryp animations

client/package.json

@@ -12,6 +12,8 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
+    "anime": "^0.1.2",
+    "animejs": "^3.0.1",
     "async": "^2.6.2",
     "borc": "^2.0.3",
     "bulma-toast": "^1.2.0",

client/src/events.jsx

@@ -1,5 +1,7 @@
 const toast = require('izitoast');
 const eachSeries = require('async/eachSeries');
+const anime = require('animejs').default;
+const range = require('lodash/range');
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
@@ -9,12 +11,30 @@ function registerEvents(store) {
 
     // timeout handlers
     store.subscribe(() => {
-        const { game, instance, ws} = store.getState();
+        const { game, instance, cryps, ws} = store.getState();
 
         if (!game) ws.clearGameStateTimeout();
         if (!instance) ws.clearInstanceStateTimeout();
     });
 
+
+    // cryp animations
+    function crypAnimations() {
+        anime({
+            targets: 'img',
+            translateX: () => anime.random(-20, 20),
+            translateY: () => anime.random(-20, 20),
+            rotate: () => anime.random(-90, 90),
+            duration: () => anime.random(5000, 6000),
+            delay: () => anime.random(0, 1000),
+            direction: 'alternate',
+            easing: 'linear',
+            loop: true,
+        });
+    }
+    setInterval(crypAnimations, 5000);
+    crypAnimations();
+
     function setCryps(cryps) {
         console.log('EVENT ->', 'cryps', cryps);
     }