feat(nds): add pressed state for all buttons

app/components/Settings/BottomScreen/Menus/Clock/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,46 +15,29 @@ 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.clock);
 
 const isOpen = computed(
-  () => settingsStore.currentMenu === "clock" && settingsStore.menuExpanded,
+  () => store.currentMenu === "clock" && store.menuExpanded,
 );
-const isAnyOtherMenuOpen = computed(() => {
-  if (settingsStore.currentSubMenu) {
-    return !settingsStore.currentSubMenu.startsWith("clock");
-  }
-  if (menusContext.isSubmenuSelected.value) {
-    return menusContext.selectedSubmenuParent.value !== "clock";
-  }
-  return false;
-});
 
 const animation = useMenuAnimation("clock", 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.clock.time.draw(
+    (props.pressed === "clockTime" ? assets.timePressed : assets.time).draw(
       ctx,
       48 - animation.stage2Offset,
       -48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
     );
-    assets.images.settings.topScreen.clock.date.draw(
+    (props.pressed === "clockDate" ? assets.datePressed : assets.date).draw(
       ctx,
       0,
       -96 +
@@ -59,17 +45,26 @@ onRender((ctx) => {
         animation.stage1Offset +
         submenuExtraOffset("clockDate"),
     );
-    assets.images.settings.topScreen.clock.achievements.draw(
+    (props.pressed === "clockAchievements"
+      ? assets.achievementsPressed
+      : assets.achievements
+    ).draw(
       ctx,
       0,
       -48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
     );
 
-    assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);
-  } else if (isAnyOtherMenuOpen.value) {
-    assets.images.settings.topScreen.clock.clockDisabled.draw(ctx, 0, 0);
+    (props.pressed === "clock" ? assets.clockPressed : assets.clockActive).draw(
+      ctx,
+      0,
+      0,
+    );
+  } else if (props.pressed === "clock") {
+    assets.clockPressed.draw(ctx, 0, 0);
+  } else if (props.isAnyOtherMenuOpen) {
+    assets.clockDisabled.draw(ctx, 0, 0);
   } else {
-    assets.images.settings.topScreen.clock.clock.draw(ctx, 0, 0);
+    assets.clock.draw(ctx, 0, 0);
   }
 });