feat(nds): add pressed state for all buttons

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

@@ -4,6 +4,9 @@ const props = withDefaults(
     x: number;
     y: number;
     opacity?: number;
+    pressed: string | null;
+    isAnyOtherMenuOpen: boolean;
+    submenuExtraOffsetY: number;
   }>(),
   {
     opacity: 1,
@@ -12,51 +15,37 @@ const props = withDefaults(
 
 const { onRender } = useScreen();
 
-const settingsStore = useSettingsStore();
-const menusContext = inject<{
-  isSubmenuSelected: ComputedRef<boolean>;
-  selectedSubmenuParent: ComputedRef<string | null>;
-  selectedSubmenuExtraOffsetY: ComputedRef<number>;
-}>("menusContext")!;
-
-const { assets } = useAssets();
+const store = useSettingsStore();
+const { assets } = useAssets((a) => a.images.settings.topScreen.user);
 
 const isOpen = computed(
-  () => settingsStore.currentMenu === "user" && settingsStore.menuExpanded,
+  () => store.currentMenu === "user" && store.menuExpanded,
 );
-const isAnyOtherMenuOpen = computed(() => {
-  if (settingsStore.currentSubMenu) {
-    return !settingsStore.currentSubMenu.startsWith("user");
-  }
-  if (menusContext.isSubmenuSelected.value) {
-    return menusContext.selectedSubmenuParent.value !== "user";
-  }
-  return false;
-});
 
 const animation = useMenuAnimation("user", isOpen);
 
 const submenuExtraOffset = (submenu: string) =>
-  settingsStore.selectedButton === submenu
-    ? menusContext.selectedSubmenuExtraOffsetY.value
-    : 0;
+  store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
 
 onRender((ctx) => {
   ctx.globalAlpha = props.opacity;
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {
-    assets.images.settings.topScreen.user.birthday.draw(
+    (props.pressed === "userBirthday"
+      ? assets.birthdayPressed
+      : assets.birthday
+    ).draw(
       ctx,
       -48 + animation.stage2Offset,
       -48 + animation.stage1Offset + submenuExtraOffset("userBirthday"),
     );
-    assets.images.settings.topScreen.user.snake.draw(
+    (props.pressed === "userSnake" ? assets.snakePressed : assets.snake).draw(
       ctx,
       48 - animation.stage2Offset,
       -48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
     );
-    assets.images.settings.topScreen.user.color.draw(
+    (props.pressed === "userColor" ? assets.colorPressed : assets.color).draw(
       ctx,
       0,
       -96 +
@@ -64,17 +53,26 @@ onRender((ctx) => {
         animation.stage1Offset +
         submenuExtraOffset("userColor"),
     );
-    assets.images.settings.topScreen.user.userName.draw(
+    (props.pressed === "userUserName"
+      ? assets.userNamePressed
+      : assets.userName
+    ).draw(
       ctx,
       0,
       -48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
     );
 
-    assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
-  } else if (isAnyOtherMenuOpen.value) {
-    assets.images.settings.topScreen.user.userDisabled.draw(ctx, 0, 0);
+    (props.pressed === "user" ? assets.userPressed : assets.userActive).draw(
+      ctx,
+      0,
+      0,
+    );
+  } else if (props.pressed === "user") {
+    assets.userPressed.draw(ctx, 0, 0);
+  } else if (props.isAnyOtherMenuOpen) {
+    assets.userDisabled.draw(ctx, 0, 0);
   } else {
-    assets.images.settings.topScreen.user.user.draw(ctx, 0, 0);
+    assets.user.draw(ctx, 0, 0);
   }
 });