fix: reset store + animate intro on mount, and fix wrong opacity/positions

app/components/Contact/BottomScreen/Background.vue

@@ -4,8 +4,6 @@ const store = useContactStore();
 const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
 const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
 
-callOnce("contactIntro", store.animateIntro);
-
 useRender((ctx) => {
   if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
 

app/components/Contact/TopScreen/TopScreen.vue

@@ -2,6 +2,13 @@
 import Background from "./Background.vue";
 import LeftBar from "./LeftBar.vue";
 import Title from "./Title.vue";
+
+const store = useContactStore();
+
+onMounted(() => {
+  store.$reset();
+  store.animateIntro();
+});
 </script>
 
 <template>

app/components/Home/BottomScreen/Buttons/Buttons.vue

@@ -46,7 +46,8 @@ const getButtonOffset = (button: ButtonType) => {
 const getOpacity = (button?: ButtonType) => {
   if (store.isIntro) return store.intro.stage1Opacity;
   if (selectedButton.value === button) return 1;
-  return store.outro.stage1Opacity;
+  if (store.isOutro) return store.outro.stage1Opacity;
+  return 1;
 };
 </script>
 

app/components/Home/TopScreen/Calendar.vue

@@ -29,7 +29,9 @@ useRender((ctx) => {
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.outro.stage1Opacity;
+    : store.isOutro
+      ? store.outro.stage1Opacity
+      : 1;
   ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
 
   const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
@@ -39,7 +41,9 @@ useRender((ctx) => {
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.outro.stage2Opacity;
+    : store.isOutro
+      ? store.outro.stage2Opacity
+      : 1;
   for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
     for (let row = 0; row < CALENDAR_COLS; row += 1) {
       const cellIndex = col * CALENDAR_COLS + row;

app/components/Home/TopScreen/Clock.vue

@@ -56,12 +56,16 @@ useRender((ctx) => {
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.outro.stage1Opacity;
+    : store.isOutro
+      ? store.outro.stage1Opacity
+      : 1;
   ctx.drawImage(clockImage.value, 13, 45);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.outro.stage2Opacity;
+    : store.isOutro
+      ? store.outro.stage2Opacity
+      : 1;
   const now = new Date();
 
   const renderHand = (

app/components/Home/TopScreen/StatusBar.vue

@@ -6,9 +6,6 @@ const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
 const startupModeImage = useTemplateRef("startupModeImage");
 const batteryImage = useTemplateRef("batteryImage");
 
-// TODO: don't call it here
-callOnce("intro", () => store.animateIntro());
-
 useRender((ctx) => {
   if (
     !statusBarImage.value ||
@@ -20,9 +17,9 @@ useRender((ctx) => {
 
   const TEXT_Y = 11;
 
-  ctx.translate(0, store.intro.statusBarY);
+  ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
 
-  ctx.globalAlpha = store.outro.stage2Opacity;
+  ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
   ctx.drawImage(statusBarImage.value, 0, 0);
 
   ctx.fillStyle = "#ffffff";

app/components/Home/TopScreen/TopScreen.vue

@@ -3,6 +3,13 @@ import Background from "./Background.vue";
 import Calendar from "./Calendar.vue";
 import Clock from "./Clock.vue";
 import StatusBar from "./StatusBar.vue";
+
+const store = useHomeStore();
+
+onMounted(() => {
+  store.$reset();
+  store.animateIntro();
+});
 </script>
 
 <template>