From 7ac60d186f639fb19501a73641e0c99aa2cbc6a2 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 24 Feb 2026 12:07:14 +0100
Subject: [PATCH] feat: require click on the loading screen, and make intro
 animation faster

---
 app/components/Intro/TopScreen/TopScreen.vue |  1 -
 app/components/LoadingScreen.vue             | 26 +++++++++++++++++---
 app/components/NDS3D.vue                     |  4 +++
 app/pages/index.vue                          |  2 +-
 app/stores/app.ts                            |  1 +
 app/stores/intro.ts                          |  6 +++--
 i18n/locales/en.json                         | 10 +++-----
 7 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/app/components/Intro/TopScreen/TopScreen.vue b/app/components/Intro/TopScreen/TopScreen.vue
index 4d0b3c3..0eab607 100644
--- a/app/components/Intro/TopScreen/TopScreen.vue
+++ b/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(() => {
diff --git a/app/components/LoadingScreen.vue b/app/components/LoadingScreen.vue
index 54ac527..2a3c93e 100644
--- a/app/components/LoadingScreen.vue
+++ b/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>
-
diff --git a/app/components/NDS3D.vue b/app/components/NDS3D.vue
index 7173368..85a6332 100644
--- a/app/components/NDS3D.vue
+++ b/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);
diff --git a/app/pages/index.vue b/app/pages/index.vue
index cde8f1d..f4314bc 100644
--- a/app/pages/index.vue
+++ b/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'"
diff --git a/app/stores/app.ts b/app/stores/app.ts
index 72d121a..0ad7e7a 100644
--- a/app/stores/app.ts
+++ b/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,
diff --git a/app/stores/intro.ts b/app/stores/intro.ts
index 8ead7a1..9d2949c 100644
--- a/app/stores/intro.ts
+++ b/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();
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index cd7c4e0..91797ad 100644
--- a/i18n/locales/en.json
+++ b/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"
   }
 }