feat(nds): add pressed state for all buttons

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

@@ -246,13 +246,21 @@ onRender((ctx) => {
 
 onRender((ctx) => {
   ctx.translate(0, intro.scoreOffsetY);
-  drawButton(ctx, `${$t("settings.options.2048.score")}: ${score}`, 10, 2, 118);
+  drawButton(
+    ctx,
+    `${$t("settings.options.2048.score")}: ${score}`,
+    10,
+    2,
+    118,
+    false,
+  );
   drawButton(
     ctx,
     `${$t("settings.options.2048.highScore")}: ${savedState.value.highScore}`,
     138,
     2,
     108,
+    false,
   );
 }, 110);
 

app/components/Settings/BottomScreen/Menus/Options/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,32 @@ 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.options);
 
 const isOpen = computed(
-  () => settingsStore.currentMenu === "options" && settingsStore.menuExpanded,
+  () => store.currentMenu === "options" && store.menuExpanded,
 );
-const isAnyOtherMenuOpen = computed(() => {
-  if (settingsStore.currentSubMenu) {
-    return !settingsStore.currentSubMenu.startsWith("options");
-  }
-  if (menusContext.isSubmenuSelected.value) {
-    return menusContext.selectedSubmenuParent.value !== "options";
-  }
-  return false;
-});
 
 const animation = useMenuAnimation("options", 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.options._2048.draw(
+    (props.pressed === "options2048" ? assets._2048Pressed : assets._2048).draw(
       ctx,
       48 - animation.stage2Offset,
       -48 + animation.stage1Offset + submenuExtraOffset("options2048"),
     );
-    assets.images.settings.topScreen.options.renderingMode.draw(
+    (props.pressed === "optionsRenderingMode"
+      ? assets.renderingModePressed
+      : assets.renderingMode
+    ).draw(
       ctx,
       0,
       -96 +
@@ -59,17 +48,25 @@ onRender((ctx) => {
         animation.stage1Offset +
         submenuExtraOffset("optionsRenderingMode"),
     );
-    assets.images.settings.topScreen.options.language.draw(
+    (props.pressed === "optionsLanguage"
+      ? assets.languagePressed
+      : assets.language
+    ).draw(
       ctx,
       0,
       -48 + animation.stage1Offset + submenuExtraOffset("optionsLanguage"),
     );
 
-    assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);
-  } else if (isAnyOtherMenuOpen.value) {
-    assets.images.settings.topScreen.options.optionsDisabled.draw(ctx, 0, 0);
+    (props.pressed === "options"
+      ? assets.optionsPressed
+      : assets.optionsActive
+    ).draw(ctx, 0, 0);
+  } else if (props.pressed === "options") {
+    assets.optionsPressed.draw(ctx, 0, 0);
+  } else if (props.isAnyOtherMenuOpen) {
+    assets.optionsDisabled.draw(ctx, 0, 0);
   } else {
-    assets.images.settings.topScreen.options.options.draw(ctx, 0, 0);
+    assets.options.draw(ctx, 0, 0);
   }
 });