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

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(() => {

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>