From 7e815328eb5cfd58d84523ff5036179f64f5fa9a Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Wed, 14 Jan 2026 11:59:13 +0100
Subject: [PATCH] feat(intro): play home intro once in the intro screen instead
 of having weird boolean in app store

---
 app/components/Home/BottomScreen/Background.vue  |  8 --------
 app/components/Home/TopScreen/Background.vue     |  7 -------
 .../Intro/BottomScreen/BottomScreen.vue          | 16 +++++++---------
 app/components/Intro/TopScreen/TopScreen.vue     |  3 +++
 app/pages/index.vue                              |  6 ++++--
 app/stores/app.ts                                |  2 --
 app/stores/home.ts                               |  7 ++-----
 app/stores/intro.ts                              |  7 +++++++
 8 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/app/components/Home/BottomScreen/Background.vue b/app/components/Home/BottomScreen/Background.vue
index 8fc8a5a..62b3930 100644
--- a/app/components/Home/BottomScreen/Background.vue
+++ b/app/components/Home/BottomScreen/Background.vue
@@ -1,16 +1,8 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
-
-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 && !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 cec5fcf..aff484d 100644
--- a/app/components/Home/TopScreen/Background.vue
+++ b/app/components/Home/TopScreen/Background.vue
@@ -1,15 +1,8 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
-
-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 && !app.homeIntroPlayed ? store.intro.stage1Opacity : 1;
   assets.images.home.topScreen.background.draw(ctx, 0, 0);
 });
 
diff --git a/app/components/Intro/BottomScreen/BottomScreen.vue b/app/components/Intro/BottomScreen/BottomScreen.vue
index 6802066..ea4c8b0 100644
--- a/app/components/Intro/BottomScreen/BottomScreen.vue
+++ b/app/components/Intro/BottomScreen/BottomScreen.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import gsap from "gsap";
 
-const app = useAppStore();
 const store = useIntroStore();
 const { onRender, onClick } = useScreen();
 const { assets } = useAssets();
@@ -36,7 +35,9 @@ onRender((ctx) => {
   ctx.font = "12px NDS12 Bold";
   ctx.letterSpacing = "1px";
 
-  const { actualBoundingBoxRight: width } = ctx.measureText($t("intro.copyright"));
+  const { actualBoundingBoxRight: width } = ctx.measureText(
+    $t("intro.copyright"),
+  );
 
   const logoWidth = assets.images.intro.warning.rect.width;
   const logoX = Math.floor(LOGICAL_WIDTH / 2 - (width + logoWidth + 3) / 2);
@@ -65,13 +66,10 @@ onRender((ctx) => {
     : store.isOutro
       ? store.outro.textOpacity
       : hintTextOpacity.value;
-  fillTextHCentered(
-    ctx,
-    $t("intro.hint"),
-    0,
-    HINT_Y,
-    LOGICAL_WIDTH,
-  );
+  fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y, LOGICAL_WIDTH);
+
+  ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
 });
 
 onClick(() => {
diff --git a/app/components/Intro/TopScreen/TopScreen.vue b/app/components/Intro/TopScreen/TopScreen.vue
index 7d25f64..4d0b3c3 100644
--- a/app/components/Intro/TopScreen/TopScreen.vue
+++ b/app/components/Intro/TopScreen/TopScreen.vue
@@ -27,6 +27,9 @@ onRender((ctx) => {
   const frame = assets.images.intro.logoAnimated[frameKey];
 
   frame.draw(ctx, 0, 0);
+
+  ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
 });
 </script>
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1d1808f..c69bd4a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -70,7 +70,8 @@ useKeyUp((key) => {
     <div :style="{ visibility: ENABLE_3D ? 'hidden' : 'visible' }">
       <div>
         <Screen ref="topScreen">
-          <HomeTopScreen v-if="app.screen === 'home'" />
+          <IntroTopScreen v-if="!app.booted" />
+          <HomeTopScreen v-else-if="app.screen === 'home'" />
           <ContactTopScreen v-else-if="app.screen === 'contact'" />
           <ProjectsTopScreen v-else-if="app.screen === 'projects'" />
           <SettingsTopScreen v-else-if="app.screen === 'settings'" />
@@ -79,7 +80,8 @@ useKeyUp((key) => {
       </div>
       <div>
         <Screen ref="bottomScreen">
-          <HomeBottomScreen v-if="app.screen === 'home'" />
+          <IntroBottomScreen v-if="!app.booted" />
+          <HomeBottomScreen v-else-if="app.screen === 'home'" />
           <ContactBottomScreen v-else-if="app.screen === 'contact'" />
           <ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
           <SettingsBottomScreen v-else-if="app.screen === 'settings'" />
diff --git a/app/stores/app.ts b/app/stores/app.ts
index 1eede45..f1397ab 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -28,8 +28,6 @@ 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 3d65ce8..c487d9c 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -25,9 +25,6 @@ export const useHomeStore = defineStore("home", {
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isIntro = false;
-          
-          const app = useAppStore();
-          app.homeIntroPlayed = true;
         },
       });
 
@@ -40,7 +37,7 @@ export const useHomeStore = defineStore("home", {
             duration: 0.5,
             ease: "none",
           },
-          0.5,
+          0,
         )
         .fromTo(
           this.intro,
@@ -50,7 +47,7 @@ export const useHomeStore = defineStore("home", {
             duration: 0.15,
             ease: "none",
           },
-          0.85,
+          0.35,
         );
     },
 
diff --git a/app/stores/intro.ts b/app/stores/intro.ts
index f18caf4..70875ad 100644
--- a/app/stores/intro.ts
+++ b/app/stores/intro.ts
@@ -9,6 +9,7 @@ export const useIntroStore = defineStore("intro", {
 
     outro: {
       textOpacity: 1,
+      backgroundOpacity: 0,
     },
 
     isIntro: true,
@@ -59,6 +60,12 @@ export const useIntroStore = defineStore("intro", {
           duration: 0.25,
           ease: "none",
         })
+        .to(this.outro, {
+          backgroundOpacity: 1,
+          duration: 0.5,
+          delay: 0.5,
+          ease: "none",
+        })
         .call(() => {
           const app = useAppStore();
           app.booted = true;