From 1591f315e12aff78c9e19124a9bc9f75568f2cc1 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Mon, 17 Nov 2025 01:22:13 +0100
Subject: [PATCH] fix: reset store + animate intro on mount, and fix wrong
 opacity/positions

---
 app/components/Contact/BottomScreen/Background.vue   | 2 --
 app/components/Contact/TopScreen/TopScreen.vue       | 7 +++++++
 app/components/Home/BottomScreen/Buttons/Buttons.vue | 3 ++-
 app/components/Home/TopScreen/Calendar.vue           | 8 ++++++--
 app/components/Home/TopScreen/Clock.vue              | 8 ++++++--
 app/components/Home/TopScreen/StatusBar.vue          | 7 ++-----
 app/components/Home/TopScreen/TopScreen.vue          | 7 +++++++
 app/stores/contact.ts                                | 2 +-
 app/stores/home.ts                                   | 6 +++---
 9 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/app/components/Contact/BottomScreen/Background.vue b/app/components/Contact/BottomScreen/Background.vue
index e6266c5..cfa8d2c 100644
--- a/app/components/Contact/BottomScreen/Background.vue
+++ b/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;
 
diff --git a/app/components/Contact/TopScreen/TopScreen.vue b/app/components/Contact/TopScreen/TopScreen.vue
index f6b36e5..2dae452 100644
--- a/app/components/Contact/TopScreen/TopScreen.vue
+++ b/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>
diff --git a/app/components/Home/BottomScreen/Buttons/Buttons.vue b/app/components/Home/BottomScreen/Buttons/Buttons.vue
index ca9a549..ffe5519 100644
--- a/app/components/Home/BottomScreen/Buttons/Buttons.vue
+++ b/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>
 
diff --git a/app/components/Home/TopScreen/Calendar.vue b/app/components/Home/TopScreen/Calendar.vue
index 9b97616..387d456 100644
--- a/app/components/Home/TopScreen/Calendar.vue
+++ b/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;
diff --git a/app/components/Home/TopScreen/Clock.vue b/app/components/Home/TopScreen/Clock.vue
index da1c9db..32da937 100644
--- a/app/components/Home/TopScreen/Clock.vue
+++ b/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 = (
diff --git a/app/components/Home/TopScreen/StatusBar.vue b/app/components/Home/TopScreen/StatusBar.vue
index dd15def..354b96d 100644
--- a/app/components/Home/TopScreen/StatusBar.vue
+++ b/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";
diff --git a/app/components/Home/TopScreen/TopScreen.vue b/app/components/Home/TopScreen/TopScreen.vue
index 111d4a9..1e5e180 100644
--- a/app/components/Home/TopScreen/TopScreen.vue
+++ b/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>
diff --git a/app/stores/contact.ts b/app/stores/contact.ts
index 08c6f2c..1a0e7b4 100644
--- a/app/stores/contact.ts
+++ b/app/stores/contact.ts
@@ -13,7 +13,7 @@ export const useContactStore = defineStore("contact", {
       bottomBarY: SCREEN_HEIGHT + 20,
     },
 
-    isIntro: false,
+    isIntro: true,
   }),
 
   actions: {
diff --git a/app/stores/home.ts b/app/stores/home.ts
index 6475b48..2c4c30e 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -9,11 +9,11 @@ export const useHomeStore = defineStore("home", {
 
     outro: {
       buttonOffsetY: 0,
-      stage1Opacity: 1,
-      stage2Opacity: 1,
+      stage1Opacity: 0,
+      stage2Opacity: 0,
     },
 
-    isIntro: false,
+    isIntro: true,
     isOutro: false,
   }),