feat(intro): play home intro once in the intro screen instead of having weird boolean in app store

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

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

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(
+  fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y, LOGICAL_WIDTH);
-    ctx,
+
-    $t("intro.hint"),
+  ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
-    0,
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-    HINT_Y,
-    LOGICAL_WIDTH,
-  );
 });
 
 onClick(() => {

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>
 

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'" />

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,

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

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;