From 4edbac5408cb69a7af2aa3b4f4bf9fa2fafdc572 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 28 Aug 2020 17:27:19 +1000
Subject: [PATCH] Moved token lock click detect to time differece as it
 generalises easier to touch

---
 src/components/map/MapToken.js | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index cdc8ce8..77877d1 100644
--- a/src/components/map/MapToken.js
+++ b/src/components/map/MapToken.js
@@ -141,15 +141,14 @@ function MapToken({
   }
 
   const [tokenOpacity, setTokenOpacity] = useState(1);
-  // Store token pointer down position to check for a click when token is locked
-  const tokenPointerDownPositionRef = useRef();
+  // Store token pointer down time to check for a click when token is locked
+  const tokenPointerDownTimeRef = useRef();
   function handlePointerDown(event) {
     if (draggable) {
       setPreventMapInteraction(true);
     }
     if (tokenState.locked && map.owner === userId) {
-      const pointerPosition = { x: event.evt.clientX, y: event.evt.clientY };
-      tokenPointerDownPositionRef.current = pointerPosition;
+      tokenPointerDownTimeRef.current = event.evt.timeStamp;
     }
   }
 
@@ -160,14 +159,9 @@ function MapToken({
     // Check token click when locked and we are the map owner
     // We can't use onClick because that doesn't check pointer distance
     if (tokenState.locked && map.owner === userId) {
-      // If down and up distance is small trigger a click
-      const pointerPosition = { x: event.evt.clientX, y: event.evt.clientY };
-      const distance = Vector2.distance(
-        tokenPointerDownPositionRef.current,
-        pointerPosition,
-        "euclidean"
-      );
-      if (distance < 5) {
+      // If down and up time is small trigger a click
+      const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
+      if (delta < 300) {
         const tokenImage = event.target;
         onTokenMenuOpen(tokenState.id, tokenImage);
       }