From db0547d9f9f7bf9168926e3f6866e47887a1d272 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Mon, 22 Dec 2025 17:14:24 +0100
Subject: [PATCH] feat: dispatch key up event when in 2d mode

---
 app/pages/index.vue | 41 +++++++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 93e6a2e..84f4321 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -17,24 +17,25 @@ const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
 const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
 const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
 
+const keyToButton: Record<string, string> = {
+  ArrowUp: "UP",
+  ArrowDown: "DOWN",
+  ArrowLeft: "LEFT",
+  ArrowRight: "RIGHT",
+  d: "A",
+  s: "B",
+  w: "X",
+  a: "Y",
+  " ": "SELECT",
+  Enter: "START",
+};
+
+// events are dispatched from NDS.vue in 3d mode
+// events are dispatched from here in 2d mode
+// that's a bit dirty but who cares, there is a lot of dirty things going on here
+// like who choose Nuxt to build such an app
 useKeyDown((key) => {
-  // events are dispatched from NDS.vue in 3d mode
-  // events are dispatched from here in 2d mode
-  // that's a bit dirty but who cares, there is a lot of dirty things going on here
-  // like who choose Nuxt to build such an app
   if (ENABLE_3D) return;
-  const keyToButton: Record<string, string> = {
-    ArrowUp: "UP",
-    ArrowDown: "DOWN",
-    ArrowLeft: "LEFT",
-    ArrowRight: "RIGHT",
-    d: "A",
-    s: "B",
-    w: "X",
-    a: "Y",
-    " ": "SELECT",
-    Enter: "START",
-  };
   const button = keyToButton[key];
   if (button) {
     window.dispatchEvent(
@@ -42,6 +43,14 @@ useKeyDown((key) => {
     );
   }
 });
+
+useKeyUp((key) => {
+  if (ENABLE_3D) return;
+  const button = keyToButton[key];
+  if (button) {
+    window.dispatchEvent(new KeyboardEvent("keyup", { key: `NDS_${button}` }));
+  }
+});
 </script>
 
 <template>