feat: Added rudimentary mouse/touch tracking with heat map.

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "heatmap.js": "^2.0.5",
         "i18next": "^23.11.3",
         "i18next-browser-languagedetector": "^7.2.1",
         "i18next-http-backend": "^2.5.1",
@@ -9211,6 +9212,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heatmap.js": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/heatmap.js/-/heatmap.js-2.0.5.tgz",
+      "integrity": "sha512-CG2gYFP5Cv9IQCXEg3ZRxnJDyAilhWnQlAuHYGuWVzv6mFtQelS1bR9iN80IyDmFECbFPbg6I0LR5uAFHgCthw=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "heatmap.js": "^2.0.5",
     "i18next": "^23.11.3",
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "^2.5.1",

src/App.js

@@ -1,11 +1,56 @@
-import React from "react"
-import { Route, Routes } from "react-router-dom"
+import React, {useEffect} from "react";
+import { Route, Routes } from "react-router-dom";
+
+import h337 from "heatmap.js";
 
 const NoPageFound = React.lazy(() => import("./pages/NoPageFound"));
-const TestPage = React.lazy(() => import("./pages/TestPage"))
+const TestPage = React.lazy(() => import("./pages/TestPage"));
+
+const mouseMode = true;
 
 function App() {
 
+
+  useEffect(() => {
+    var heatmapInstance = h337.create({
+      container: document.body,
+      radius: 20
+    });
+
+    heatmapInstance.setDataMax(9999);
+
+    var addData;
+
+    if(mouseMode) {
+      const mouseDataFunc = function(ev) {
+        heatmapInstance.addData({
+          x: ev.layerX,
+          y: ev.layerY,
+          value: 1
+        });
+      };
+
+      addData = mouseDataFunc;
+    } else {
+      const touchDataFunc = function(ev) {
+        heatmapInstance.addData({
+          x: ev.layerX,
+          y: ev.layerY,
+          value: 1
+        });
+      };
+      addData = touchDataFunc;
+    }
+
+    if(mouseMode) {
+      document.body.addEventListener("mousemove", addData, false);
+    }else {
+    document.body.addEventListener("touchmove", addData, false);
+    document.body.addEventListener("touchstart", addData, false);
+    document.body.addEventListener("touchend", addData, false);
+    }
+ })
+
   // TODO FIX... 
   /*
     There is an weird interaction/error with the lazy loading of the routers

src/index.css

@@ -1,3 +1,5 @@
+html, body { height: 100%; }
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',