feat(nds): use custom NDS_ keys in events

app/components/NDS.vue

@@ -101,31 +101,35 @@ const { onRender } = useLoop();
 const physicalButtonsDown = new Set<string>();
 let mousePressedButton: string | null = null;
 
-const keyButtonMappings: [key: string, physicalButton: string][] = [
+const keyToButton: Record<string, string> = {
-  // D-pad
+  ArrowUp: "UP",
-  ["ArrowUp", "UP"],
+  ArrowDown: "DOWN",
-  ["ArrowDown", "DOWN"],
+  ArrowLeft: "LEFT",
-  ["ArrowLeft", "LEFT"],
+  ArrowRight: "RIGHT",
-  ["ArrowRight", "RIGHT"],
+  d: "A",
-  ["d", "A"],
+  s: "B",
-  ["s", "B"],
+  w: "X",
-  ["w", "X"],
+  a: "Y",
-  ["a", "Y"],
+  " ": "SELECT",
-  [" ", "SELECT"],
+  Enter: "START",
-  ["Enter", "START"],
+};
-];
-
-const keyToButton = new Map(keyButtonMappings);
-const buttonToKey = new Map(keyButtonMappings.map(([k, b]) => [b, k]));
 
 useKeyDown((key) => {
-  const button = keyToButton.get(key);
+  const button = keyToButton[key];
-  if (button) physicalButtonsDown.add(button);
+  if (button) {
+    physicalButtonsDown.add(button);
+    window.dispatchEvent(
+      new KeyboardEvent("keydown", { key: `NDS_${button}` }),
+    );
+  }
 });
 
 useKeyUp((key) => {
-  const button = keyToButton.get(key);
+  const button = keyToButton[key];
-  if (button) physicalButtonsDown.delete(button);
+  if (button) {
+    physicalButtonsDown.delete(button);
+    window.dispatchEvent(new KeyboardEvent("keyup", { key: `NDS_${button}` }));
+  }
 });
 
 onRender(({ delta }) => {
@@ -176,19 +180,15 @@ onRender(({ delta }) => {
 const pressButton = (button: string) => {
   if (mousePressedButton) {
     physicalButtonsDown.delete(mousePressedButton);
-    const prevKey = buttonToKey.get(mousePressedButton);
+    window.dispatchEvent(
-    if (prevKey) {
+      new KeyboardEvent("keyup", { key: `NDS_${mousePressedButton}` }),
-      window.dispatchEvent(new KeyboardEvent("keyup", { key: prevKey }));
+    );
-    }
   }
 
   physicalButtonsDown.add(button);
   mousePressedButton = button;
 
-  const key = buttonToKey.get(button);
+  window.dispatchEvent(new KeyboardEvent("keydown", { key: `NDS_${button}` }));
-  if (key) {
-    window.dispatchEvent(new KeyboardEvent("keydown", { key }));
-  }
 };
 
 const handleClick = (event: MouseEvent) => {
@@ -285,10 +285,9 @@ const handleMouseUp = () => {
   if (mousePressedButton) {
     physicalButtonsDown.delete(mousePressedButton);
 
-    const key = buttonToKey.get(mousePressedButton);
+    window.dispatchEvent(
-    if (key) {
+      new KeyboardEvent("keyup", { key: `NDS_${mousePressedButton}` }),
-      window.dispatchEvent(new KeyboardEvent("keyup", { key }));
+    );
-    }
 
     mousePressedButton = null;
   }

app/components/Projects/BottomScreen/Buttons.vue

@@ -41,10 +41,10 @@ useScreenMouseWheel((dy) => {
 
 useKeyDown((key) => {
   switch (key) {
-    case "ArrowLeft":
+    case "NDS_LEFT":
       store.scrollProjects("left");
       break;
-    case "ArrowRight":
+    case "NDS_RIGHT":
       store.scrollProjects("right");
       break;
   }

app/composables/useButtonNavigation.ts

@@ -51,14 +51,14 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
     }
   });
 
-  const handleKeyPress = (event: KeyboardEvent) => {
+  useKeyDown((key) => {
     const currentButton = selectedButton.value as keyof T;
     const currentNav = navigation[currentButton];
 
     if (!currentNav) return;
 
-    switch (event.key) {
+    switch (key) {
-      case "ArrowUp":
+      case "NDS_UP":
         if (!currentNav.up) return;
 
         if (currentNav.up === "last") {
@@ -76,7 +76,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
 
         break;
 
-      case "ArrowDown":
+      case "NDS_DOWN":
         if (!currentNav.down) return;
 
         if (currentNav.down === "last") {
@@ -93,7 +93,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
         }
         break;
 
-      case "ArrowLeft":
+      case "NDS_LEFT":
         if (!currentNav.left) return;
 
         if (currentNav.horizontalMode === "preview") {
@@ -103,7 +103,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
         }
         break;
 
-      case "ArrowRight":
+      case "NDS_RIGHT":
         if (!currentNav.right) return;
 
         if (currentNav.horizontalMode === "preview") {
@@ -113,24 +113,13 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
         }
         break;
 
-      case "Enter":
+      case "NDS_A":
-      case " ":
         onButtonClick?.(selectedButton.value);
         break;
 
       default:
         return;
     }
-
-    event.preventDefault();
-  };
-
-  onMounted(() => {
-    window.addEventListener("keydown", handleKeyPress);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("keydown", handleKeyPress);
   });
 
   return {