feat(nds): don't display help button and hints on smaller screens (they can't click on the buttons anyway)

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 windowSize = useWindowSize();
-const hintsContainer = useTemplateRef<HTMLElement>("hintsContainer");
+const hintsContainer = useTemplateRef("hintsContainer");
 
-const updateScale = () => {
+const ndsScale = computed(() => {
-  const scaleX = (window.innerWidth - 40) / 235;
+  const scaleX = (windowSize.width.value - 40) / 235;
-  const scaleY = (window.innerHeight - 40) / 431;
+  const scaleY = (windowSize.height.value - 40) / 431;
-  ndsScale.value = Math.min(scaleX, scaleY);
+  return Math.min(scaleX, scaleY);
-};
-
-onMounted(() => {
-  updateScale();
-  window.addEventListener("resize", updateScale);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", updateScale);
 });
 
 watch(

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;