From cb18f823b14721b3f2c91b27c03b09c72a058623 Mon Sep 17 00:00:00 2001
From: vakarisz <vakarisz@yahoo.com>
Date: Mon, 4 Apr 2022 16:22:28 +0300
Subject: [PATCH] UI: Move to "react-tsparticles"

react-particles-js got deprecated
---
 monkey/monkey_island/cc/ui/package.json       |  2 +-
 .../ui-components/ParticleBackground.js       |  4 +--
 .../ParticleBackgroundParams.js               | 36 ++++++++++---------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/package.json b/monkey/monkey_island/cc/ui/package.json
index 5f13c1e8a..e6b416cbb 100644
--- a/monkey/monkey_island/cc/ui/package.json
+++ b/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",
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js b/monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js
index 23d607311..97407293a 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js
+++ b/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}/>);
 }
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js b/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js
index 525f1cb71..0eb3d63d0 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js
+++ b/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
+}