fix: Fixed bugged heatmap tracking.

src/App.js

@@ -110,6 +110,7 @@ function App() {
     <GeistProvider>
       <React.Suspense fallback="loading">
         <RouteTracker />
+        <div id="heatmapOverlay"></div>
         <Routes>
           <Route
             path="/"

src/components/webpage_container/StudySite.jsx

@@ -1,13 +1,10 @@
 import React, { useEffect } from "react";
 import h337 from "heatmap.js";
-import { MOUSE_MODE, HEATMAP_MAX } from "../../core/Constants";
+import { HEATMAP_MAX } from "../../core/Constants";
 
 var stopInput = false;
 
-var heatmapInstance = h337.create({
-  container: document.body,
-  radius: 20,
-});
+var heatmapInstance;
 
 const visualiseMouseData = (mouseData) => {
   mouseData.max = mouseData.data.length + 1;
@@ -16,53 +13,154 @@ const visualiseMouseData = (mouseData) => {
   stopInput = true;
 };
 
+var ongoingTouches = [];
+
 export function StudySite(props) {
   useEffect(() => {
     window.visualiseMouseData = visualiseMouseData;
-    heatmapInstance.setDataMax(HEATMAP_MAX);
-    var addData;
 
-    if (MOUSE_MODE) {
-      const mouseDataFunc = function (ev) {
-        if (!stopInput) {
+    var body = document.getElementById("root");
+    var html = document.documentElement;
+
+    var height = Math.max(
+      body.scrollHeight,
+      body.offsetHeight,
+      body.clientHeight,
+      html.clientHeight,
+      html.scrollHeight,
+      html.offsetHeight
+    );
+
+    document.body.style.height = height;
+    document.documentElement.style.height = height;
+
+    if (heatmapInstance === undefined) {
+      heatmapInstance = h337.create({
+        container: document.getElementById("studySiteContainer"),
+        radius: 40,
+      });
+      heatmapInstance.setDataMax(HEATMAP_MAX);
+    }
+
+    document.addEventListener("mousemove", function (event) {
+      var x = event.pageX;
+      var y = event.pageY;
+
+      // Add data to the heatmap
+      heatmapInstance.addData({ x: x, y: y, value: 1 });
+    });
+
+    // Function to capture clicks
+    document.addEventListener("click", function (event) {
+      var x = event.pageX;
+      var y = event.pageY;
+
+      // Add more value for clicks
+      heatmapInstance.addData({ x: x, y: y, value: 5 });
+    });
+
+    // Function to update heatmap container size on resize
+    function updateHeatmapSize() {
+      var container = document.getElementById("heatmapOverlay");
+      container.style.width = document.body.scrollWidth + "px";
+      container.style.height = document.body.scrollHeight + "px";
+    }
+
+    const handleStart = (evt) => {
+      const touches = evt.changedTouches;
+
+      for (let i = 0; i < touches.length; i++) {
+        ongoingTouches.push(copyTouch(touches[i]));
+        heatmapInstance.addData({
+          x: touches[i].pageX,
+          y: touches[i].pageY,
+          value: 5,
+        });
+      }
+    };
+
+    const handleMove = (evt) => {
+      const touches = evt.changedTouches;
+
+      for (let i = 0; i < touches.length; i++) {
+        const idx = ongoingTouchIndexById(touches[i].identifier);
+
+        if (idx >= 0) {
           heatmapInstance.addData({
-            x: ev.x,
-            y: ev.y,
-            value: 1,
+            x: touches[i].pageX,
+            y: touches[i].pageY,
+            value: 5,
           });
+
+          ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
+        } else {
+          console.log("can't figure out which touch to continue");
         }
-      };
+      }
+    };
+
+    const handleEnd = (evt) => {
+      const touches = evt.changedTouches;
+
+      for (let i = 0; i < touches.length; i++) {
+        let idx = ongoingTouchIndexById(touches[i].identifier);
 
-      addData = mouseDataFunc;
-    } else {
-      const touchDataFunc = function (ev) {
-        if (!stopInput) {
+        if (idx >= 0) {
           heatmapInstance.addData({
-            x: ev.layerX,
-            y: ev.layerY,
-            value: 1,
+            x: touches[i].pageX,
+            y: touches[i].pageY,
+            value: 5,
           });
+
+          ongoingTouches.splice(idx, 1); // remove it; we're done
+        } else {
+          console.log("can't figure out which touch to end");
         }
-      };
-      addData = touchDataFunc;
-    }
+      }
+    };
 
-    if (MOUSE_MODE) {
-      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);
-    }
+    const ongoingTouchIndexById = (idToFind) => {
+      for (let i = 0; i < ongoingTouches.length; i++) {
+        const id = ongoingTouches[i].identifier;
+
+        if (id === idToFind) {
+          return i;
+        }
+      }
+      return -1; // not found
+    };
+
+    const copyTouch = ({ identifier, pageX, pageY }) => {
+      return { identifier, pageX, pageY };
+    };
+
+    const handleCancel = (evt) => {
+      const touches = evt.changedTouches;
+
+      for (let i = 0; i < touches.length; i++) {
+        let idx = ongoingTouchIndexById(touches[i].identifier);
+        ongoingTouches.splice(idx, 1); // remove it; we're done
+      }
+    };
+
+    document.body.ontouchstart = handleStart;
+    document.body.ontouchend = handleEnd;
+    document.body.ontouchcancel = handleCancel;
+    document.body.ontouchmove = handleMove;
+
+    // Update the size initially and on resize
+    updateHeatmapSize();
+    window.addEventListener("resize", updateHeatmapSize);
+    window.addEventListener("scroll", updateHeatmapSize);
 
     return () => {
       delete window.visualiseMouseData;
     };
   });
 
-  return <>{props.children}</>;
+  return <div id="studySiteContainer">{props.children}</div>;
 }
 
 export function getHeatmapData() {
-  return heatmapInstance.getData();
+  return (heatmapInstance !== undefined) ? heatmapInstance.getData() : {};
 }

src/core/Constants.jsx

@@ -1,5 +1,4 @@
 export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;
 
-
 export const PARTICIPANT_NUMBER = 7;

src/index.css

@@ -1,4 +1,4 @@
-html, body { height: 100%; }
+html, body { padding: 5px; }
 
 body {
   margin: 0;
@@ -14,6 +14,15 @@ code {
     monospace;
 }
 
+#heatmapOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Ensure it doesn't interfere with page interaction */
+}
+
 .heatmap-canvas {
   pointer-events: none;
 }

src/pages/study_site_1/StartPage1.jsx

@@ -44,7 +44,7 @@ function StartPage1({ redirectLoc }) {
         <Collapse title="Can I make a name change after I have booked?">
           <Text>
             It is not possible to make a retroactive name change for a booking.
-            Lufthansa shall provide the transport service to the passenger named
+            BudgetBird Airlines shall provide the transport service to the passenger named
             in the ticket only. The BudgetBird Service Team will be happy to
             help you if you require further information.
           </Text>