From 31372d84148c5f7181f364b6a9a74f7fb44dc5e0 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Fri, 3 May 2024 17:56:33 +0200
Subject: [PATCH] feat: Added rudimentary mouse/touch tracking with heat map.

---
 package-lock.json |  6 ++++++
 package.json      |  1 +
 src/App.js        | 51 ++++++++++++++++++++++++++++++++++++++++++++---
 src/index.css     |  2 ++
 4 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3549d1b..11e8dc3 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d27c3c0..bc8e3b5 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.js b/src/App.js
index 911dae0..340dbad 100644
--- a/src/App.js
+++ b/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
diff --git a/src/index.css b/src/index.css
index ec2585e..1d4ba57 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+html, body { height: 100%; }
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',