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

@@ -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);
 });
 

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);
 });
 

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,

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;
         },
       });