pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Stevan
2026-02-24 00:17:33 +01:00
parent 6816f173eb
commit b8054c58e1
1 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/NDS2D.vue
View File

@@ -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>