feat(settings): menu animations

app/components/Settings/BottomScreen/Menus/OptionsMenu.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
+import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/options/options-active.png";
+import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/options/options-disabled.png";
 import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
 import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
 import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
@@ -8,24 +10,48 @@ const props = defineProps<{
   x: number;
   y: number;
   isOpen: boolean;
+  isAnyOtherMenuOpen: boolean;
 }>();
 
-const [menuImage, gbaModeImage, languageImage, startUpImage] = useImages(
+const [
+  menuImage,
+  menuActiveImage,
+  menuDisabledImage,
+  gbaModeImage,
+  languageImage,
+  startUpImage,
+] = useImages(
   MENU_IMAGE,
+  MENU_ACTIVE_IMAGE,
+  MENU_DISABLED_IMAGE,
   GBA_MODE_IMAGE,
   LANGUAGE_IMAGE,
   START_UP_IMAGE,
 );
 
+const animation = useMenuAnimation(toRef(() => props.isOpen));
+
 useRender((ctx) => {
   ctx.translate(props.x, props.y);
 
-  ctx.drawImage(menuImage!, 0, 0);
+  if (props.isOpen || animation.playing) {
+    ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
+    ctx.drawImage(
+      gbaModeImage!,
+      48 - animation.stage2Offset,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(
+      startUpImage!,
+      0,
+      -96 + animation.stage2Offset + animation.stage1Offset,
+    );
 
-  if (props.isOpen) {
-    ctx.drawImage(languageImage!, 0, -48);
-    ctx.drawImage(gbaModeImage!, 48, -48);
-    ctx.drawImage(startUpImage!, 0, -96);
+    ctx.drawImage(menuActiveImage!, 0, 0);
+  } else if (props.isAnyOtherMenuOpen) {
+    ctx.drawImage(menuDisabledImage!, 0, 0);
+  } else {
+    ctx.drawImage(menuImage!, 0, 0);
   }
 });