feat(2d-nds): handle touches on the physical buttons

app/components/NDS2D.vue

@@ -49,6 +49,20 @@ useKeyUp(({ ndsButton }) => {
 
 useMouseUp(releaseButton);
 
+const handleTouchEnd = (event: TouchEvent) => {
+  releaseButton();
+
+  const touch = event.changedTouches[0];
+  if (!touch) return;
+
+  document.dispatchEvent(
+    new MouseEvent("mouseup", {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+    }),
+  );
+};
+
 const ndsScale = computed(() => {
   const scaleX = (windowSize.width.value - 40) / 235;
   const scaleY = (windowSize.height.value - 40) / 431;
@@ -118,21 +132,29 @@ watch(
               class="nds2d-d-pad-tip nds2d-tip-up"
               :class="{ pressed: buttonsDown.has('UP') }"
               @mousedown.prevent="pressButton('UP')"
+              @touchstart.prevent="pressButton('UP')"
+              @touchend="handleTouchEnd"
             ></div>
             <div
               class="nds2d-d-pad-tip nds2d-tip-down"
               :class="{ pressed: buttonsDown.has('DOWN') }"
               @mousedown.prevent="pressButton('DOWN')"
+              @touchstart.prevent="pressButton('DOWN')"
+              @touchend="handleTouchEnd"
             ></div>
             <div
               class="nds2d-d-pad-tip nds2d-tip-left"
               :class="{ pressed: buttonsDown.has('LEFT') }"
               @mousedown.prevent="pressButton('LEFT')"
+              @touchstart.prevent="pressButton('LEFT')"
+              @touchend="handleTouchEnd"
             ></div>
             <div
               class="nds2d-d-pad-tip nds2d-tip-right"
               :class="{ pressed: buttonsDown.has('RIGHT') }"
               @mousedown.prevent="pressButton('RIGHT')"
+              @touchstart.prevent="pressButton('RIGHT')"
+              @touchend="handleTouchEnd"
             ></div>
             <div class="nds2d-d-pad-marker nds2d-dpm-up"></div>
             <div class="nds2d-d-pad-marker nds2d-dpm-down"></div>
@@ -145,6 +167,8 @@ watch(
           class="nds2d-button nds2d-btn-x"
           :class="{ pressed: buttonsDown.has('X') }"
           @mousedown.prevent="pressButton('X')"
+          @touchstart.prevent="pressButton('X')"
+          @touchend="handleTouchEnd"
         >
           X
         </div>
@@ -152,6 +176,8 @@ watch(
           class="nds2d-button nds2d-btn-a"
           :class="{ pressed: buttonsDown.has('A') }"
           @mousedown.prevent="pressButton('A')"
+          @touchstart.prevent="pressButton('A')"
+          @touchend="handleTouchEnd"
         >
           A
         </div>
@@ -159,6 +185,8 @@ watch(
           class="nds2d-button nds2d-btn-b"
           :class="{ pressed: buttonsDown.has('B') }"
           @mousedown.prevent="pressButton('B')"
+          @touchstart.prevent="pressButton('B')"
+          @touchend="handleTouchEnd"
         >
           B
         </div>
@@ -166,6 +194,8 @@ watch(
           class="nds2d-button nds2d-btn-y"
           :class="{ pressed: buttonsDown.has('Y') }"
           @mousedown.prevent="pressButton('Y')"
+          @touchstart.prevent="pressButton('Y')"
+          @touchend="handleTouchEnd"
         >
           Y
         </div>
@@ -174,12 +204,16 @@ watch(
           class="nds2d-small-button nds2d-start"
           :class="{ pressed: buttonsDown.has('START') }"
           @mousedown.prevent="pressButton('START')"
+          @touchstart.prevent="pressButton('START')"
+          @touchend="handleTouchEnd"
         ></div>
         <div class="nds2d-small-button-label nds2d-start-label">START</div>
         <div
           class="nds2d-small-button nds2d-select"
           :class="{ pressed: buttonsDown.has('SELECT') }"
           @mousedown.prevent="pressButton('SELECT')"
+          @touchstart.prevent="pressButton('SELECT')"
+          @touchend="handleTouchEnd"
         ></div>
         <div class="nds2d-small-button-label nds2d-select-label">SELECT</div>