feat(nds): add pressed state for all buttons

app/components/Common/Buttons.vue

@@ -13,11 +13,10 @@ const emit = defineEmits<{
   activateB: [];
 }>();
 
-const { onRender, onClick } = useScreen();
-const { assets } = useAssets();
+const { onRender, onClick, onMouseDown } = useScreen();
 
-const BUTTON_WIDTH = assets.images.common.button.rect.width;
-const BUTTON_HEIGHT = assets.images.common.button.rect.height;
+const BUTTON_WIDTH = 80;
+const BUTTON_HEIGHT = 18;
 
 const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
 const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
@@ -31,6 +30,9 @@ let aButtonOffsetY = 0;
 let displayedBLabel = props.bLabel;
 let displayedALabel = props.aLabel;
 
+let bButtonPressed = false;
+let aButtonPressed = false;
+
 const animateLabelChange = (
   setter: (v: number) => void,
   setLabel: (label: string) => void,
@@ -80,25 +82,24 @@ onRender((ctx) => {
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#010101";
 
-  ctx.translate(0, props.yOffset);
+  ctx.translate(0, 172 + props.yOffset);
 
-  const drawButton = (
-    icon: string,
-    text: string,
-    x: number,
-    buttonOffsetY: number,
-  ) => {
-    ctx.save();
-    ctx.translate(0, buttonOffsetY);
-    assets.images.common.button.draw(ctx, x, 172);
-
-    const label = `${icon} ${text}`;
-    fillTextHCentered(ctx, label, x, 185, BUTTON_WIDTH);
-    ctx.restore();
-  };
-
-  drawButton(ICONS.B, displayedBLabel, 31, bButtonOffsetY);
-  drawButton(ICONS.A, displayedALabel, 144, aButtonOffsetY);
+  drawButton(
+    ctx,
+    `${ICONS.B} ${displayedBLabel}`,
+    31,
+    bButtonOffsetY,
+    BUTTON_WIDTH,
+    bButtonPressed,
+  );
+  drawButton(
+    ctx,
+    `${ICONS.A} ${displayedALabel}`,
+    144,
+    aButtonOffsetY,
+    BUTTON_WIDTH,
+    aButtonPressed,
+  );
 }, 60);
 
 onClick((x, y) => {
@@ -110,6 +111,20 @@ onClick((x, y) => {
   }
 });
 
+onMouseDown((x, y) => {
+  if (props.yOffset !== 0) return;
+  if (rectContains(B_BUTTON, [x, y])) {
+    bButtonPressed = true;
+  } else if (rectContains(A_BUTTON, [x, y])) {
+    aButtonPressed = true;
+  }
+});
+
+useMouseUp(() => {
+  bButtonPressed = false;
+  aButtonPressed = false;
+});
+
 useKeyDown(({ key, repeated }) => {
   if (props.yOffset !== 0 || repeated) return;
   switch (key) {