From 2d4210b0314fef7f9bee7fe80b7909f609b130ae Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Tue, 24 Feb 2026 16:17:43 +0100
Subject: [PATCH] feat(3d-nds): lag detection

---
 app/components/LagModal.vue   | 28 ++++++++++++++++++++++++++++
 app/components/NDS3D.vue      | 29 +++++++++++++++++++++++++++--
 app/composables/useKeyDown.ts |  4 ++++
 app/pages/index.vue           | 11 +++++++++++
 app/stores/app.ts             |  2 ++
 i18n/locales/en.json          |  6 ++++++
 6 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 app/components/LagModal.vue

diff --git a/app/components/LagModal.vue b/app/components/LagModal.vue
new file mode 100644
index 0000000..1cde7f2
--- /dev/null
+++ b/app/components/LagModal.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>();
+
+const app = useAppStore();
+
+const keep3d = () => {
+  app.lagDetected = false;
+  emit("close");
+};
+
+const switch2d = () => {
+  app.setRenderingMode("2d");
+  emit("close");
+};
+</script>
+
+<template>
+  <UModal :open="true" :dismissible="false" :title="$t('lagModal.title')" :ui="{ footer: 'justify-end' }">
+    <template #body>
+      {{ $t('lagModal.body') }}
+    </template>
+
+    <template #footer>
+      <UButton variant="ghost" color="neutral" :label="$t('lagModal.keep3d')" @click="keep3d" />
+      <UButton color="neutral" :label="$t('lagModal.switch2d')" @click="switch2d" />
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/NDS3D.vue b/app/components/NDS3D.vue
index 85a6332..a4bda4a 100644
--- a/app/components/NDS3D.vue
+++ b/app/components/NDS3D.vue
@@ -195,7 +195,12 @@ watch(
   { immediate: true },
 );
 
-const { onRender } = useLoop();
+const { onRender, onBeforeRender } = useLoop();
+
+const LAG_FPS_THRESHOLD = 440;
+const LAG_DURATION_SECS = 1;
+let lagSeconds = 0;
+let lagCheckDone = false;
 
 const HINT_SPRITE_SCALE = 2;
 const HINT_SPRITE_DPR = 4;
@@ -337,10 +342,30 @@ useKeyUp(({ ndsButton }) => {
   }
 });
 
-onRender(({ delta }) => {
+// lag detection
+onBeforeRender(({ delta }) => {
+  if (!lagCheckDone) {
+    const fps = 1 / delta;
+    if (fps < LAG_FPS_THRESHOLD) {
+      lagSeconds += delta;
+      if (lagSeconds >= LAG_DURATION_SECS) {
+        lagCheckDone = true;
+        app.lagDetected = true;
+      }
+    } else {
+      lagSeconds = 0;
+    }
+  }
+});
+
+// upate screens
+onRender(() => {
   if (topScreenTexture) topScreenTexture.needsUpdate = true;
   if (bottomScreenTexture) bottomScreenTexture.needsUpdate = true;
+});
 
+// update physical buttons
+onBeforeRender(({ delta }) => {
   // cross
   const crossButton = meshes.get(CROSS_BUTTON);
   if (crossButton) {
diff --git a/app/composables/useKeyDown.ts b/app/composables/useKeyDown.ts
index 5761611..e92080b 100644
--- a/app/composables/useKeyDown.ts
+++ b/app/composables/useKeyDown.ts
@@ -7,7 +7,11 @@ export type KeyDownCallback = (params: {
 }) => void;
 
 export const useKeyDown = (callback: KeyDownCallback) => {
+  const app = useAppStore();
+
   const handleKeyDown = (event: KeyboardEvent) => {
+    if (app.lagDetected) return;
+
     const ndsButton = mapCodeToNDS(event.code);
     callback({
       key: ndsButton ? `NDS_${ndsButton}` : event.key,
diff --git a/app/pages/index.vue b/app/pages/index.vue
index afd062e..f7a3c3c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,11 +1,22 @@
 <script setup lang="ts">
 import { useWindowSize } from "@vueuse/core";
 import gsap from "gsap";
+import { LazyLagModal } from "#components";
 
 const { isReady } = useAssets();
 
 const app = useAppStore();
 
+const overlay = useOverlay();
+const lagModal = overlay.create(LazyLagModal);
+
+watch(
+  () => app.lagDetected,
+  (detected) => {
+    if (detected) lagModal.open();
+  },
+);
+
 const topScreen = useTemplateRef("topScreen");
 const bottomScreen = useTemplateRef("bottomScreen");
 
diff --git a/app/stores/app.ts b/app/stores/app.ts
index 0ad7e7a..f4866b8 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -54,6 +54,7 @@ export const useAppStore = defineStore("app", {
       camera: null as THREE.Camera | null,
       hintsVisible: false,
       hintsAllowed: false,
+      lagDetected: false,
     };
   },
 
@@ -65,6 +66,7 @@ export const useAppStore = defineStore("app", {
     setRenderingMode(mode: Settings["renderingMode"]) {
       this.ready = mode === "2d";
       this.settings.renderingMode = mode;
+      if (mode === "3d") this.lagDetected = false;
       this.save();
     },
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 58fe1a6..bc90546 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,10 @@
 {
+  "lagModal": {
+    "title": "Performance issues detected",
+    "body": "Your device seems to be struggling with 3D rendering. Switch to 2D mode for a smoother experience.",
+    "keep3d": "Keep 3D",
+    "switch2d": "Switch to 2D"
+  },
   "common": {
     "cancel": "Cancel",
     "confirm": "Confirm",