feat: require click on the loading screen, and make intro animation faster

app/components/Intro/TopScreen/TopScreen.vue

@@ -2,7 +2,6 @@
 const { onRender } = useScreen();
 const { assets } = useAssets();
 const store = useIntroStore();
-
 const frames = Object.keys(assets.images.intro.logoAnimated).sort();
 
 onMounted(() => {

app/components/LoadingScreen.vue

@@ -1,11 +1,22 @@
+<script setup lang="ts">
+const app = useAppStore();
+const { isReady } = useAssets();
+const { t } = useI18n();
+</script>
+
 <template>
-  <div class="fixed inset-0 bg-[#181818] flex items-center justify-center">
+  <div
+    class="fixed inset-0 bg-[#181818] flex flex-col items-center justify-center gap-4"
+    :class="{ 'cursor-pointer': isReady }"
+    @click="isReady && (app.userHasInteracted = true)"
+  >
     <svg
       viewBox="0 0 512 512"
       xmlns="http://www.w3.org/2000/svg"
-      class="size-20 animate-pulse"
+      class="size-20 transition-[fill] duration-500 animate-pulse"
+      :style="{ fill: isReady ? '#888888' : '#2a2a2a' }"
     >
-      <g fill="#2a2a2a">
+      <g>
         <path
           d="M488,32c0-17.645-14.355-32-32-32H56C38.355,0,24,14.355,24,32v215c0,0.113,0.012,0.223,0.017,0.334
           C24.011,247.556,24,247.777,24,248c0,7.331,3.307,13.9,8.504,18.306C27.23,272.013,24,279.635,24,288v192c0,17.645,14.355,32,32,32
@@ -99,6 +110,13 @@
         />
       </g>
     </svg>
+    <span
+      class="select-none transition-colors duration-500 animate-pulse"
+      :style="{ color: isReady ? '#888888' : '#2a2a2a', fontFamily: 'NDS10' }"
+    >
+      {{
+        isReady ? t("loadingScreen.clickToStart") : t("loadingScreen.loading")
+      }}
+    </span>
   </div>
 </template>
-

app/components/NDS3D.vue

@@ -614,6 +614,10 @@ const handleTouchEnd = (event: TouchEvent) => {
 onMounted(() => {
   app.ready = true;
 
+  if (app.userHasInteracted) {
+    animateIntro();
+  }
+
   if (renderer) {
     renderer.instance.domElement.addEventListener("mousedown", handleMouseDown);
     renderer.instance.domElement.addEventListener("click", handleClick);

app/pages/index.vue

@@ -154,7 +154,7 @@ useKeyDown(async ({ key, repeated }) => {
 </script>
 
 <template>
-  <LoadingScreen v-if="!isReady" />
+  <LoadingScreen v-if="!isReady || !app.userHasInteracted" />
   <div v-else>
     <TresCanvas
       v-if="app.settings.renderingMode === '3d'"

app/stores/app.ts

@@ -46,6 +46,7 @@ export const useAppStore = defineStore("app", {
     return {
       ready: false,
       booted: false,
+      userHasInteracted: false,
       settings,
       previousScreen: "home" as AppScreen,
       screen: "home" as AppScreen,

app/stores/intro.ts

@@ -21,6 +21,8 @@ export const useIntroStore = defineStore("intro", {
       this.isIntro = true;
 
       const { assets } = useAssets();
+      const app = useAppStore();
+      const delay = app.settings.renderingMode === "2d" ? 1 : 3;
       const totalFrames = Object.keys(assets.images.intro.logoAnimated).length;
       const logoDuration = totalFrames / 25;
 
@@ -37,7 +39,7 @@ export const useIntroStore = defineStore("intro", {
             duration: 0.1,
             ease: "none",
           },
-          4.1,
+          delay,
         )
         .to(
           this.intro,
@@ -46,7 +48,7 @@ export const useIntroStore = defineStore("intro", {
             duration: logoDuration,
             ease: "steps(" + (totalFrames - 1) + ")",
           },
-          4.1,
+          delay,
         )
         .call(() => {
           const app = useAppStore();

i18n/locales/en.json

@@ -44,11 +44,9 @@
   "settings": {
     "title": "Settings",
     "description": "Change system settings here. Select\nthe settings you'd like to change.",
-
     "options": {
       "title": "Options",
       "description": "Change other settings.",
-
       "renderingMode": {
         "title": "Rendering",
         "description": "Change the app rendering mode\nbetween 2D and 3D.",
@@ -77,7 +75,6 @@
     "clock": {
       "title": "Clock",
       "description": "Change date, time, and achievement\nsettings.",
-
       "achievements": {
         "title": "Achievements",
         "description": "Manage your achievements.",
@@ -87,7 +84,6 @@
         "obtained": "Obtained",
         "total": "Total"
       },
-
       "date": {
         "title": "Date",
         "description": "Today's date.",
@@ -95,7 +91,6 @@
         "day": "Day",
         "year": "Year"
       },
-
       "time": {
         "title": "Time",
         "description": "Current time.",
@@ -106,7 +101,6 @@
     "user": {
       "title": "User",
       "description": "Enter user informations.",
-
       "color": {
         "title": "Color",
         "description": "Select your favorite color.",
@@ -181,5 +175,9 @@
       "no": "no",
       "text": "Open {url}?"
     }
+  },
+  "loadingScreen": {
+    "loading": "Loading...",
+    "clickToStart": "Click to start"
   }
 }