From 0d5da308b943f70ea459339241e45ee201fb916a Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sun, 22 Feb 2026 22:50:24 +0100
Subject: [PATCH] feat(nds): don't display help button and hints on smaller
 screens (they can't click on the buttons anyway)

---
 app/components/NDS2D.vue | 22 +++++++---------------
 app/pages/index.vue      | 11 +++++++++++
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/app/components/NDS2D.vue b/app/components/NDS2D.vue
index f0a43e8..20df45d 100644
--- a/app/components/NDS2D.vue
+++ b/app/components/NDS2D.vue
@@ -1,23 +1,15 @@
 <script setup lang="ts">
 import gsap from "gsap";
+import { useWindowSize } from "@vueuse/core";
 
 const app = useAppStore();
-const ndsScale = ref(1);
-const hintsContainer = useTemplateRef<HTMLElement>("hintsContainer");
+const windowSize = useWindowSize();
+const hintsContainer = useTemplateRef("hintsContainer");
 
-const updateScale = () => {
-  const scaleX = (window.innerWidth - 40) / 235;
-  const scaleY = (window.innerHeight - 40) / 431;
-  ndsScale.value = Math.min(scaleX, scaleY);
-};
-
-onMounted(() => {
-  updateScale();
-  window.addEventListener("resize", updateScale);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", updateScale);
+const ndsScale = computed(() => {
+  const scaleX = (windowSize.width.value - 40) / 235;
+  const scaleY = (windowSize.height.value - 40) / 431;
+  return Math.min(scaleX, scaleY);
 });
 
 watch(
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 66ff1eb..cde8f1d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useWindowSize } from "@vueuse/core";
 import gsap from "gsap";
 
 const { isReady } = useAssets();
@@ -25,6 +26,16 @@ const toggleFullscreen = () => {
   }
 };
 
+const windowSize = useWindowSize();
+
+watch([windowSize.width, windowSize.height], ([width, height]) => {
+  if (width / height > 614 / 667) {
+    app.allowHints();
+  } else {
+    app.disallowHints();
+  }
+});
+
 const helpButton = useTemplateRef("helpButton");
 let helpAnimation: gsap.core.Timeline | null = null;