feat(nds): improve key input system

app/components/Achievements/BottomScreen.vue

@@ -8,7 +8,7 @@ const QUIT_SIZE = assets.images.achievements.quit.rect.width;
 const QUIT_X = Math.floor(LOGICAL_WIDTH / 2 - QUIT_SIZE / 2);
 const QUIT_Y = 135;
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (store.isIntro || store.isOutro) return;
 
   switch (key) {

app/components/Common/Buttons.vue

@@ -110,7 +110,7 @@ onClick((x, y) => {
   }
 });
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (props.yOffset !== 0) return;
   switch (key) {
     case "NDS_START":

app/components/Intro/BottomScreen/BottomScreen.vue

@@ -78,7 +78,7 @@ onClick(() => {
   store.animateOutro();
 });
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (store.isIntro || store.isOutro) return;
 
   switch (key) {

app/components/NDS.vue

@@ -203,38 +203,15 @@ const { onRender } = useLoop();
 const physicalButtonsDown = new Set<string>();
 let mousePressedButton: string | null = null;
 
-const keyToButton: Record<string, string> = {
-  ArrowUp: "UP",
-  ArrowDown: "DOWN",
-  ArrowLeft: "LEFT",
-  ArrowRight: "RIGHT",
-  d: "A",
-  s: "B",
-  w: "X",
-  a: "Y",
-  D: "A",
-  S: "B",
-  W: "X",
-  A: "Y",
-  " ": "SELECT",
-  Enter: "START",
-};
-
-useKeyDown((key) => {
-  const button = keyToButton[key];
-  if (button) {
-    physicalButtonsDown.add(button);
-    window.dispatchEvent(
-      new KeyboardEvent("keydown", { key: `NDS_${button}` }),
-    );
+useKeyDown(({ ndsButton }) => {
+  if (ndsButton) {
+    physicalButtonsDown.add(ndsButton);
   }
 });
 
-useKeyUp((key) => {
-  const button = keyToButton[key];
-  if (button) {
-    physicalButtonsDown.delete(button);
-    window.dispatchEvent(new KeyboardEvent("keyup", { key: `NDS_${button}` }));
+useKeyUp(({ ndsButton }) => {
+  if (ndsButton) {
+    physicalButtonsDown.delete(ndsButton);
   }
 });
 

app/components/Projects/BottomScreen/Buttons.vue

@@ -162,7 +162,7 @@ onRender((ctx) => {
   ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`;
   ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
 });
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (
     currentAnimation ||
     store.isIntro ||

app/components/Projects/BottomScreen/LinkConfirmationPopup.vue

@@ -40,7 +40,7 @@ onMounted(() => {
 
 onUnmounted(() => timeline?.kill());
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (!store.showConfirmationPopup) return;
 
   if (textProgress.value < 1 && key === "NDS_A") {
@@ -73,7 +73,7 @@ useKeyDown((key) => {
   }
 });
 
-useKeyUp((key) => {
+useKeyUp(({ key }) => {
   if (store.showConfirmationPopup && key === "NDS_A") {
     waitingForNdsARelease = false;
   }

app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue

@@ -131,7 +131,7 @@ onClick((x, y) => {
   }
 });
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (isAnimating.value) return;
   if (key === "NDS_X") {
     handleVisitAll();

app/components/Settings/BottomScreen/Menus/Options/2048.vue

@@ -538,7 +538,7 @@ const slide = (rowDir: number, colDir: number) => {
   }
 };
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (isAnimating.value) return;
   switch (key) {
     // TODO: remove this, testing only

app/components/Settings/BottomScreen/Menus/User/Color.vue

@@ -139,7 +139,7 @@ const select = (col: number, row: number) => {
   app.setColor(col, row);
 };
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (isAnimating.value) return;
 
   switch (key) {

app/components/Settings/BottomScreen/Menus/User/Snake.vue

@@ -302,7 +302,7 @@ onRender((ctx) => {
   );
 }, 110);
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (state.value !== "alive") return;
 
   const newDirection = direction.clone();

app/components/Settings/BottomScreen/NumberInput.vue

@@ -212,7 +212,7 @@ onRender((ctx) => {
   );
 }, 10);
 
-useKeyDown((key) => {
+useKeyDown(({ key }) => {
   if (isAnimating.value || !props.selected || props.disabled) return;
   switch (key) {
     case "NDS_UP":