feat(nds): handle swipes

app/components/Screen.vue

@@ -69,6 +69,57 @@ const handleCanvasWheel = (event: WheelEvent) => {
   }
 };
 
+const SWIPE_THRESHOLD = 30;
+let swipeStartX = 0;
+let swipeStartY = 0;
+
+const dispatchSwipe = (endX: number, endY: number) => {
+  const deltaX = endX - swipeStartX;
+  const deltaY = endY - swipeStartY;
+  const absDeltaX = Math.abs(deltaX);
+  const absDeltaY = Math.abs(deltaY);
+
+  if (Math.max(absDeltaX, absDeltaY) < SWIPE_THRESHOLD) return;
+
+  let direction: string;
+  if (absDeltaX > absDeltaY) {
+    direction = deltaX > 0 ? "RIGHT" : "LEFT";
+  } else {
+    direction = deltaY > 0 ? "DOWN" : "UP";
+  }
+
+  window.dispatchEvent(
+    new KeyboardEvent("keydown", { key: `NDS_SWIPE_${direction}` }),
+  );
+};
+
+const handleTouchStart = (event: TouchEvent) => {
+  const touch = event.touches[0];
+  if (!touch) return;
+  swipeStartX = touch.clientX;
+  swipeStartY = touch.clientY;
+};
+
+const handleTouchEnd = (event: TouchEvent) => {
+  const touch = event.changedTouches[0];
+  if (!touch) return;
+  dispatchSwipe(touch.clientX, touch.clientY);
+};
+
+let mouseSwiping = false;
+
+const handleSwipeMouseDown = (event: MouseEvent) => {
+  mouseSwiping = true;
+  swipeStartX = event.clientX;
+  swipeStartY = event.clientY;
+};
+
+const handleSwipeMouseUp = (event: MouseEvent) => {
+  if (!mouseSwiping) return;
+  mouseSwiping = false;
+  dispatchSwipe(event.clientX, event.clientY);
+};
+
 const renderFrame = (timestamp: number) => {
   if (!ctx) return;
 
@@ -122,6 +173,12 @@ 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("touchend", handleTouchEnd, { passive: true });
+  canvas.value.addEventListener("mousedown", handleSwipeMouseDown);
+  document.addEventListener("mouseup", handleSwipeMouseUp);
 
   animationFrameId = requestAnimationFrame(renderFrame);
 });
@@ -135,7 +192,11 @@ onUnmounted(() => {
     canvas.value.removeEventListener("click", handleCanvasClick);
     canvas.value.removeEventListener("mousedown", handleCanvasMouseDown);
     canvas.value.removeEventListener("wheel", handleCanvasWheel);
+    canvas.value.removeEventListener("touchstart", handleTouchStart);
+    canvas.value.removeEventListener("touchend", handleTouchEnd);
+    canvas.value.removeEventListener("mousedown", handleSwipeMouseDown);
   }
+  document.removeEventListener("mouseup", handleSwipeMouseUp);
 });
 
 defineExpose({