feat(achievements): black fade in and out from home and settings screen

app/components/Achievements/BottomScreen.vue

@@ -29,21 +29,14 @@ onClick((x, y) => {
 });
 
 onRender((ctx) => {
-  assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
-
-  ctx.globalAlpha = store.isIntro
-    ? store.intro.stage1Opacity
-    : store.isOutro
-      ? store.outro.stage1Opacity
-      : 1;
   ctx.fillStyle = "#000000";
   ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
 
   // achievement list (reversed iteration because they appear in cascade)
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage2Opacity
+    ? store.intro.stage1Opacity
     : store.isOutro
-      ? store.outro.stage2Opacity
+      ? store.outro.stage1Opacity
       : 1;
   ctx.font = "7px NDS7";
   ctx.textBaseline = "top";
@@ -78,9 +71,9 @@ onRender((ctx) => {
   }
 
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage2Opacity
+    ? store.intro.stage1Opacity
     : store.isOutro
-      ? store.outro.stage3Opacity
+      ? store.outro.stage2Opacity
       : 1;
   assets.images.achievements.quit.draw(ctx, QUIT_X, QUIT_Y);
 });

app/components/Achievements/FadeToBlack.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useAchievementsScreen();
+
+onRender((ctx) => {
+  if (!store.fadeToBlack.active) return;
+  if (store.fadeToBlack.isOutro && store.fadeToBlack.opacity === 0) return;
+
+  ctx.globalAlpha = store.fadeToBlack.opacity;
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+}, 9999);
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Achievements/TopScreen.vue

@@ -2,7 +2,6 @@
 const { onRender } = useScreen();
 const store = useAchievementsScreen();
 const achievementsStore = useAchievementsStore();
-const { assets } = useAssets();
 
 const PROGRESS_BAR_WIDTH = 140;
 const PROGRESS_BAR_HEIGHT = 10;
@@ -15,21 +14,14 @@ onMounted(() => {
 });
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-
-  ctx.globalAlpha = store.isIntro
-    ? store.intro.stage1Opacity
-    : store.isOutro
-      ? store.outro.stage1Opacity
-      : 1;
   ctx.fillStyle = "#000000";
   ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
 
   // header
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage2Opacity
+    ? store.intro.stage1Opacity
     : store.isOutro
-      ? store.outro.stage3Opacity
+      ? store.outro.stage2Opacity
       : 1;
   ctx.fillStyle = "#ffffff";
   ctx.textBaseline = "top";
@@ -87,9 +79,9 @@ onRender((ctx) => {
 
   // achievement list (reversed iteration because they appear in cascade)
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage2Opacity
+    ? store.intro.stage1Opacity
     : store.isOutro
-      ? store.outro.stage2Opacity
+      ? store.outro.stage1Opacity
       : 1;
   ctx.font = "7px NDS7";
   for (let i = ACHIEVEMENTS_TOP_SCREEN_COUNT - 1; i >= 0; i--) {

app/components/Home/BottomScreen/BottomScreen.vue

@@ -5,6 +5,6 @@ import Buttons from "./Buttons.vue";
 
 <template>
   <Background />
-
   <Buttons />
+  <AchievementsFadeToBlack />
 </template>

app/components/Home/BottomScreen/Buttons.vue

@@ -17,7 +17,7 @@ const { selected, selectorPosition } = useButtonNavigation({
     settings: [112, 167, 31, 26],
     achievements: [225, 167, 31, 26],
   },
-  initialButton: "projects",
+  initialButton: store.selectedButton,
   onButtonClick: (button) => {
     if (button === "theme") throw new Error(`Not implemented: ${button}`);
 
@@ -64,6 +64,10 @@ const { selected, selectorPosition } = useButtonNavigation({
   },
 });
 
+watch(selected, (newSelected) => {
+  store.selectedButton = newSelected;
+});
+
 const getButtonOffset = (button: (typeof selected)["value"]) => {
   if (selected.value === button) return store.outro.buttonOffsetY;
   return 0;

app/components/Home/TopScreen/TopScreen.vue

@@ -7,8 +7,7 @@ import StatusBar from "./StatusBar.vue";
 const store = useHomeStore();
 
 onMounted(() => {
-  store.$reset();
-  store.animateIntro();
+  store.reset();
 });
 </script>
 
@@ -17,4 +16,5 @@ onMounted(() => {
   <Calendar />
   <Clock />
   <StatusBar />
+  <AchievementsFadeToBlack />
 </template>

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -8,4 +8,5 @@ import Menus from "./Menus/Menus.vue";
   <CommonBars />
   <Menus />
   <CommonConfirmationModal />
+  <AchievementsFadeToBlack />
 </template>

app/components/Settings/BottomScreen/Menus/Clock/Alarm.vue

@@ -28,6 +28,7 @@ const { onRender, onClick } = useScreen();
 const app = useAppStore();
 const store = useSettingsStore();
 const achievements = useAchievementsStore();
+const achievementsScreen = useAchievementsScreen();
 const confirmationModal = useConfirmationModal();
 
 const handleCancel = () => {
@@ -44,7 +45,7 @@ const handleReset = () => {
 };
 
 const handleVisitAll = () => {
-  throw new Error("Not implemented");
+  achievementsScreen.animateFadeToBlackIntro();
 };
 
 onClick((x, y) => {

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

@@ -52,7 +52,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
 
     touchScreen: [175, 119, 49, 49],
   },
-  initialButton: "options",
+  initialButton: settingsStore.selectedButton,
   onButtonClick: (buttonName) => {
     if (isSubMenu(buttonName)) {
       settingsStore.openSubMenu(buttonName);
@@ -154,6 +154,8 @@ provide("menusContext", {
 watch(
   selected,
   (newSelected) => {
+    settingsStore.selectedButton = newSelected;
+
     if (settingsStore.currentSubMenu === null) {
       if (isMainMenu(newSelected)) {
         settingsStore.openMenu(newSelected, false);

app/components/Settings/TopScreen/TopScreen.vue

@@ -12,4 +12,5 @@ import Notifications from "./Notifications.vue";
   <Clock />
   <StatusBar />
   <Notifications />
+  <AchievementsFadeToBlack />
 </template>