diff --git a/src/App.js b/src/App.js index 1731ba3..e9971c2 100644 --- a/src/App.js +++ b/src/App.js @@ -103,13 +103,14 @@ function App() { }; wait(200); - + const latinSquareOrder = getLatinSquareOrder(PARTICIPANT_NUMBER); return ( +
{ 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
{props.children}
; } export function getHeatmapData() { - return heatmapInstance.getData(); + return (heatmapInstance !== undefined) ? heatmapInstance.getData() : {}; } diff --git a/src/core/Constants.jsx b/src/core/Constants.jsx index 8ecf8f4..8cc3e5d 100644 --- a/src/core/Constants.jsx +++ b/src/core/Constants.jsx @@ -1,5 +1,4 @@ export const MOUSE_MODE = true; export const HEATMAP_MAX = 999; - export const PARTICIPANT_NUMBER = 7; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 74f50d2..9a3ef30 100644 --- a/src/index.css +++ b/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; } diff --git a/src/pages/study_site_1/StartPage1.jsx b/src/pages/study_site_1/StartPage1.jsx index 07f1d1a..53774e9 100644 --- a/src/pages/study_site_1/StartPage1.jsx +++ b/src/pages/study_site_1/StartPage1.jsx @@ -44,7 +44,7 @@ function StartPage1({ redirectLoc }) { 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.