feat(nds): add pressed state for all buttons

app/utils/canvas.ts

@@ -162,6 +162,7 @@ export const drawButton = (
   x: number,
   y: number,
   width: number,
+  pressed: boolean,
 ) => {
   const { assets } = useAssets((a) => a.images.common);
 
@@ -175,13 +176,21 @@ export const drawButton = (
   ctx.save();
   ctx.translate(x, y);
 
-  assets.buttonLeft.draw(ctx, 0, 0);
+  (pressed ? assets.buttonLeftPressed : assets.buttonLeft).draw(ctx, 0, 0);
 
   for (let i = 0; i < bodyCount; i++) {
-    assets.buttonBody.draw(ctx, LEFT_WIDTH + i * BODY_WIDTH, 0);
+    (pressed ? assets.buttonBodyPressed : assets.buttonBody).draw(
+      ctx,
+      LEFT_WIDTH + i * BODY_WIDTH,
+      0,
+    );
   }
 
-  assets.buttonRight.draw(ctx, width - RIGHT_WIDTH, 0);
+  (pressed ? assets.buttonRightPressed : assets.buttonRight).draw(
+    ctx,
+    width - RIGHT_WIDTH,
+    0,
+  );
 
   ctx.textBaseline = "top";
   ctx.font = "10px NDS10";

app/utils/input.ts

@@ -15,3 +15,13 @@ export const mapKeyToNDS = (key: string): string | null => {
   key = key.length === 1 ? key.toUpperCase() : key;
   return KEY_TO_NDS_BUTTON[key] ?? null;
 };
+
+export const useMouseUp = (callback: () => void) => {
+  onMounted(() => {
+    document.addEventListener("mouseup", callback);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener("mouseup", callback);
+  });
+};