From c8dab1ae9e1583cd1f128655464775f3675b8f92 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Mon, 12 Jan 2026 16:36:30 +0100
Subject: [PATCH] feat(home): play the white -> background fade only once

NOTE: it's not correctly done, i'm using app state for that, i might move to intro but it's fine for now
---
 app/components/Home/BottomScreen/Background.vue | 4 ++--
 app/components/Home/TopScreen/Background.vue    | 4 ++--
 app/stores/app.ts                               | 2 ++
 app/stores/home.ts                              | 3 +++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/components/Home/BottomScreen/Background.vue b/app/components/Home/BottomScreen/Background.vue
index a018654..8fc8a5a 100644
--- a/app/components/Home/BottomScreen/Background.vue
+++ b/app/components/Home/BottomScreen/Background.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
-const store = useHomeStore();
 const app = useAppStore();
+const store = useHomeStore();
 
 const { assets } = useAssets();
 
@@ -10,7 +10,7 @@ onRender((ctx) => {
   ctx.fillStyle = "#fbfbfb"
   ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
   
-  ctx.globalAlpha = store.isIntro? store.intro.stage1Opacity:1;
+  ctx.globalAlpha = store.isIntro && !app.homeIntroPlayed ? store.intro.stage1Opacity : 1;
   assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
 });
 
diff --git a/app/components/Home/TopScreen/Background.vue b/app/components/Home/TopScreen/Background.vue
index 8c61cab..cec5fcf 100644
--- a/app/components/Home/TopScreen/Background.vue
+++ b/app/components/Home/TopScreen/Background.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
-const store = useHomeStore();
 const app = useAppStore();
+const store = useHomeStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
   ctx.fillStyle = "#fbfbfb"
   ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
   
-  ctx.globalAlpha = store.isIntro? store.intro.stage1Opacity:1;
+  ctx.globalAlpha = store.isIntro && !app.homeIntroPlayed ? store.intro.stage1Opacity : 1;
   assets.images.home.topScreen.background.draw(ctx, 0, 0);
 });
 
diff --git a/app/stores/app.ts b/app/stores/app.ts
index f1397ab..1eede45 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -28,6 +28,8 @@ export const useAppStore = defineStore("app", {
 
     return {
       booted: false,
+      // shitty but who cares
+      homeIntroPlayed: false,
       settings,
       screen: "home" as AppScreen,
       camera: null as THREE.Camera | null,
diff --git a/app/stores/home.ts b/app/stores/home.ts
index 3c0d0d5..3d65ce8 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -25,6 +25,9 @@ export const useHomeStore = defineStore("home", {
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isIntro = false;
+          
+          const app = useAppStore();
+          app.homeIntroPlayed = true;
         },
       });