fix: hide help buttons on screen too small to click on physical buttons

app/stores/app.ts

@@ -1,4 +1,5 @@
 import { z } from "zod/mini";
+import { useWindowSize } from "@vueuse/core";
 import type * as THREE from "three";
 
 export const LOGICAL_WIDTH = 256;
@@ -18,6 +19,24 @@ export const APP_COLORS = [
 
 const STORAGE_ID = "nds-settings";
 
+// 2d nds is 414x431, scaled so the screens fit, it overflows horizontally on narrow viewports
+export const getNDS2DScale = (width: number, height: number) =>
+  Math.min((width - 40) / 235, (height - 40) / 431);
+
+// 3d: fixed vertical fov, so buttons clip at a fixed aspect ratio (measured: 810px wide at 865px tall)
+const HINTS_MIN_ASPECT_RATIO_3D = 810 / 865;
+// 2d: horizontal span of the physical buttons (A button is ~14px from the edge)
+const NDS2D_BUTTONS_SPAN = 386;
+
+const screenFitsHints = (
+  width: number,
+  height: number,
+  renderingMode: "3d" | "2d",
+) =>
+  renderingMode === "3d"
+    ? width / height > HINTS_MIN_ASPECT_RATIO_3D
+    : NDS2D_BUTTONS_SPAN * getNDS2DScale(width, height) <= width;
+
 const settingsSchema = z.object({
   color: z.object({
     col: z.number(),
@@ -55,7 +74,9 @@ export const useAppStore = defineStore("app", {
       visitedGallery: false,
       camera: null as THREE.Camera | null,
       hintsVisible: false,
-      hintsAllowed: false,
+      // hints wanted by the current app state (intro done, not in gallery)
+      hintsRequested: false,
+      windowSize: useWindowSize(),
       lagDetected: false,
       lagModalOpen: false,
     };
@@ -96,12 +117,11 @@ export const useAppStore = defineStore("app", {
     },
 
     allowHints() {
-      this.hintsAllowed = true;
+      this.hintsRequested = true;
     },
 
     disallowHints() {
-      this.hintsAllowed = false;
-      this.hintsVisible = false;
+      this.hintsRequested = false;
     },
 
     showHints() {
@@ -128,5 +148,14 @@ export const useAppStore = defineStore("app", {
       row: state.settings.color.row,
       hex: APP_COLORS[state.settings.color.row]![state.settings.color.col]!,
     }),
+
+    // hints wanted and screen large enough
+    hintsAllowed: (state) =>
+      state.hintsRequested &&
+      screenFitsHints(
+        state.windowSize.width,
+        state.windowSize.height,
+        state.settings.renderingMode,
+      ),
   },
 });

app/stores/intro.ts

@@ -67,9 +67,7 @@ export const useIntroStore = defineStore("intro", {
         )
         .call(() => {
           const app = useAppStore();
-          if (window.innerWidth / window.innerHeight > 614 / 667) {
-            app.allowHints();
-          }
+          app.allowHints();
         });
     },