fix(nds): wrong touch detection

app/components/Screen.vue

@@ -33,16 +33,19 @@ const registerScreenMouseWheelCallback = (
   return () => screenMouseWheelCallbacks.delete(callback);
 };
 
-const handleCanvasClick = (event: MouseEvent) => {
-  if (!canvas.value) return;
-
-  const rect = canvas.value.getBoundingClientRect();
+const toLogicalCoords = (clientX: number, clientY: number) => {
+  const rect = canvas.value!.getBoundingClientRect();
   const scaleX = LOGICAL_WIDTH / rect.width;
   const scaleY = LOGICAL_HEIGHT / rect.height;
+  return [
+    (clientX - rect.left) * scaleX,
+    (clientY - rect.top) * scaleY,
+  ] as const;
+};
 
-  const x = (event.clientX - rect.left) * scaleX;
-  const y = (event.clientY - rect.top) * scaleY;
-
+const handleCanvasClick = (event: MouseEvent) => {
+  if (!canvas.value) return;
+  const [x, y] = toLogicalCoords(event.clientX, event.clientY);
   for (const callback of screenClickCallbacks) {
     callback(x, y);
   }
@@ -50,14 +53,7 @@ const handleCanvasClick = (event: MouseEvent) => {
 
 const handleCanvasMouseDown = (event: MouseEvent) => {
   if (!canvas.value) return;
-
-  const rect = canvas.value.getBoundingClientRect();
-  const scaleX = LOGICAL_WIDTH / rect.width;
-  const scaleY = LOGICAL_HEIGHT / rect.height;
-
-  const x = (event.clientX - rect.left) * scaleX;
-  const y = (event.clientY - rect.top) * scaleY;
-
+  const [x, y] = toLogicalCoords(event.clientX, event.clientY);
   for (const callback of screenMouseDownCallbacks) {
     callback(x, y);
   }
@@ -97,6 +93,7 @@ const handleTouchStart = (event: TouchEvent) => {
   const touch = event.touches[0];
   if (!touch) return;
 
+  event.preventDefault();
   swipeStartX = touch.clientX;
   swipeStartY = touch.clientY;
 
@@ -113,6 +110,14 @@ const handleTouchEnd = (event: TouchEvent) => {
   if (!touch) return;
 
   dispatchSwipe(touch.clientX, touch.clientY);
+
+  canvas.value?.dispatchEvent(
+    new MouseEvent("click", {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+    }),
+  );
+
   document.dispatchEvent(
     new MouseEvent("mouseup", {
       clientX: touch.clientX,
@@ -188,9 +193,7 @@ onMounted(() => {
   canvas.value.addEventListener("click", handleCanvasClick);
   canvas.value.addEventListener("mousedown", handleCanvasMouseDown);
   canvas.value.addEventListener("wheel", handleCanvasWheel, { passive: true });
-  canvas.value.addEventListener("touchstart", handleTouchStart, {
-    passive: true,
-  });
+  canvas.value.addEventListener("touchstart", handleTouchStart);
   canvas.value.addEventListener("touchend", handleTouchEnd, { passive: true });
   canvas.value.addEventListener("mousedown", handleSwipeMouseDown);
   canvas.value.addEventListener("mouseup", handleSwipeMouseUp);