UI: Move to "react-tsparticles"

react-particles-js got deprecated

monkey/monkey_island/cc/ui/package.json

@@ -106,12 +106,12 @@
     "react-hot-loader": "^4.13.0",
     "react-json-tree": "^0.12.1",
     "react-jsonschema-form-bs4": "^1.7.1",
-    "react-particles-js": "^3.5.3",
     "react-redux": "^5.1.2",
     "react-router-dom": "^5.3.0",
     "react-spinners": "^0.9.0",
     "react-table": "^6.10.3",
     "react-tooltip-lite": "^1.12.0",
+    "react-tsparticles": "^1.42.4",
     "redux": "^4.1.1",
     "sha3": "^2.1.4",
     "source-map-loader": "^1.1.2",

monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js

@@ -1,7 +1,7 @@
-import Particles from 'react-particles-js';
+import Particles from "react-tsparticles";
 import {particleParams} from '../../styles/components/particle-component/ParticleBackgroundParams';
 import React from 'react';
 
 export default function ParticleBackground() {
-  return (<Particles className={'particle-background'} params={particleParams}/>);
+  return (<Particles className={'particle-background'} options={particleParams}/>);
 }

monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js

@@ -1,18 +1,20 @@
 export const particleParams = {
-    particles: {
-      color: {
-        value: '#2b2b2b'
-      },
-      line_linked: {
-        color: {
-          value: '#555555'
-        }
-      },
-      number: {
-        value: 150
-      },
-      size: {
-        value: 3
-      }
-    }
-  }
+  "fps_limit": 60,
+  "particles": {
+    "color": {"value": "#646464"},
+    "links": {"color": "#555555", "distance": 150, "enable": true, "opacity": 0.4, "width": 1},
+    "move": {
+      "bounce": false,
+      "direction": "none",
+      "enable": true,
+      "outMode": "out",
+      "random": false,
+      "speed": 2,
+      "straight": false
+    },
+    "number": {"density": {"enable": true, "area": 800}, "value": 50},
+    "shape": {"type": "circle"},
+    "size": {"value": 3}
+  },
+  "detectRetina": true
+}