fix(v2): stop gamepad B/cancel from backing out of controller test and games

claude · claude · commit c456034657b2 · 2026-06-25T20:25:40.000Z
The global useGamepad loop translated every button into a built-in action regardless of context. On the controller-test screen this meant pressing B (or Circle / Nintendo-A, which share the standard B index) fired "back" and left the page before the press could be inspected. The same happened while a game was running: the emulator owns the pad, but useGamepad still ran "back" on B and quit the game. Suppress the built-in translation in two contexts: - While a game is running (storePlaying.playing), so the emulator owns the pad entirely. - On the controller-test route, so every button can be pressed and inspected in place. Because the test screen no longer exits on B, ControllerDebug owns its own escape: hold a back button (B / Circle or Back / Share) for 700ms to navigate away, with an on-screen hint and a fill indicator. A short tap just registers in the inspector. Fixes #3591 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EdiAR2HMM5pCMVfn2Zhbrx
diff --git a/frontend/src/locales/bg_BG/settings.json b/frontend/src/locales/bg_BG/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Не е открит контролер",
   "controller-debug-right-stick": "Десен стик",
   "controller-debug-slot": "Слот {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Натисни произволен бутон на контролера, за да го събудиш.",
   "conversion": "Конвертиране",
   "copy-link": "Копирай линка",
diff --git a/frontend/src/locales/cs_CZ/settings.json b/frontend/src/locales/cs_CZ/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Nebyl detekován žádný ovladač",
   "controller-debug-right-stick": "Pravá páčka",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Stiskněte libovolné tlačítko na ovladači pro jeho probuzení.",
   "conversion": "Konverze",
   "copy-link": "Kopírovat odkaz",
diff --git a/frontend/src/locales/de_DE/settings.json b/frontend/src/locales/de_DE/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Kein Gamepad erkannt",
   "controller-debug-right-stick": "Rechter Stick",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Drücke eine beliebige Taste auf deinem Controller, um ihn zu aktivieren.",
   "conversion": "Konvertierung",
   "copy-link": "Link kopieren",
diff --git a/frontend/src/locales/en_GB/settings.json b/frontend/src/locales/en_GB/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "No gamepad detected",
   "controller-debug-right-stick": "Right stick",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Press any button on your controller to wake it up.",
   "conversion": "Conversion",
   "copy-link": "Copy link",
diff --git a/frontend/src/locales/en_US/settings.json b/frontend/src/locales/en_US/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "No gamepad detected",
   "controller-debug-right-stick": "Right stick",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Press any button on your controller to wake it up.",
   "conversion": "Conversion",
   "copy-link": "Copy link",
diff --git a/frontend/src/locales/es_ES/settings.json b/frontend/src/locales/es_ES/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "No se detecta mando",
   "controller-debug-right-stick": "Stick derecho",
   "controller-debug-slot": "Ranura {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Pulsa cualquier botón para despertar el mando.",
   "conversion": "Conversión",
   "copy-link": "Copiar enlace",
diff --git a/frontend/src/locales/fr_FR/settings.json b/frontend/src/locales/fr_FR/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Aucune manette détectée",
   "controller-debug-right-stick": "Stick droit",
   "controller-debug-slot": "Emplacement {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Appuyez sur un bouton de votre manette pour la réveiller.",
   "conversion": "Conversion",
   "copy-link": "Copier le lien",
diff --git a/frontend/src/locales/hu_HU/settings.json b/frontend/src/locales/hu_HU/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Nincs észlelt kontroller",
   "controller-debug-right-stick": "Jobb kar",
   "controller-debug-slot": "{n}. csatorna",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Nyomj meg egy gombot a kontrolleren a felébresztéséhez.",
   "conversion": "Átalakítás",
   "copy-link": "Link másolása",
diff --git a/frontend/src/locales/it_IT/settings.json b/frontend/src/locales/it_IT/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Nessun gamepad rilevato",
   "controller-debug-right-stick": "Stick destro",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Premi un pulsante qualsiasi del controller per attivarlo.",
   "conversion": "Conversione",
   "copy-link": "Copia link",
diff --git a/frontend/src/locales/ja_JP/settings.json b/frontend/src/locales/ja_JP/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "ゲームパッドが検出されません",
   "controller-debug-right-stick": "右スティック",
   "controller-debug-slot": "スロット{n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "コントローラーを起動するには、いずれかのボタンを押してください。",
   "conversion": "変換",
   "copy-link": "リンクをコピー",
diff --git a/frontend/src/locales/ko_KR/settings.json b/frontend/src/locales/ko_KR/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "게임패드가 감지되지 않았습니다",
   "controller-debug-right-stick": "오른쪽 스틱",
   "controller-debug-slot": "슬롯 {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "컨트롤러를 깨우려면 아무 버튼이나 누르세요.",
   "conversion": "변환",
   "copy-link": "링크 복사",
diff --git a/frontend/src/locales/pl_PL/settings.json b/frontend/src/locales/pl_PL/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Nie wykryto pada",
   "controller-debug-right-stick": "Prawa gałka",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Naciśnij dowolny przycisk na padzie, aby go aktywować.",
   "conversion": "Konwersja",
   "copy-link": "Kopiuj link",
diff --git a/frontend/src/locales/pt_BR/settings.json b/frontend/src/locales/pt_BR/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Nenhum gamepad detectado",
   "controller-debug-right-stick": "Analógico direito",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Pressione qualquer botão do seu controle para ativá-lo.",
   "conversion": "Conversão",
   "copy-link": "Copiar link",
diff --git a/frontend/src/locales/ro_RO/settings.json b/frontend/src/locales/ro_RO/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Niciun gamepad detectat",
   "controller-debug-right-stick": "Stick dreapta",
   "controller-debug-slot": "Slot {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Apasă orice buton de pe controller pentru a-l activa.",
   "conversion": "Conversie",
   "copy-link": "Copiază linkul",
diff --git a/frontend/src/locales/ru_RU/settings.json b/frontend/src/locales/ru_RU/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Геймпад не обнаружен",
   "controller-debug-right-stick": "Правый стик",
   "controller-debug-slot": "Слот {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Нажмите любую кнопку контроллера, чтобы разбудить его.",
   "conversion": "Конвертация",
   "copy-link": "Копировать ссылку",
diff --git a/frontend/src/locales/tr_TR/settings.json b/frontend/src/locales/tr_TR/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "Oyun kumandası algılanmadı",
   "controller-debug-right-stick": "Sağ analog",
   "controller-debug-slot": "{n}. Slot",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "Uyandırmak için kumandanızdaki herhangi bir düğmeye basın.",
   "conversion": "Dönüştürme",
   "copy-link": "Bağlantıyı kopyala",
diff --git a/frontend/src/locales/zh_CN/settings.json b/frontend/src/locales/zh_CN/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "未检测到手柄",
   "controller-debug-right-stick": "右摇杆",
   "controller-debug-slot": "插槽 {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "按手柄上的任意按钮以将其唤醒。",
   "conversion": "转换",
   "copy-link": "复制链接",
diff --git a/frontend/src/locales/zh_TW/settings.json b/frontend/src/locales/zh_TW/settings.json
@@ -58,6 +58,7 @@
   "controller-debug-no-gamepad": "未偵測到控制器",
   "controller-debug-right-stick": "右搖桿",
   "controller-debug-slot": "插槽 {n}",
+  "controller-debug-test-hint": "Button actions are paused here so you can test every button. Hold B / Back to exit.",
   "controller-debug-wake-hint": "按下控制器上的任一按鈕以喚醒它。",
   "conversion": "轉換",
   "copy-link": "複製連結",
diff --git a/frontend/src/v2/composables/useGamepad/index.ts b/frontend/src/v2/composables/useGamepad/index.ts
@@ -22,8 +22,16 @@
 // so a held face button doesn't shotgun actions. Synthetic-key buttons
 // (arrows) use the v1 console input cadence: 350ms initial delay, 120ms
 // repeat.
+//
+// Two contexts suppress this translation:
+//   * Game running (storePlaying.playing) — the emulator reads the pad
+//     itself, so all translation is off. Otherwise B (shared by Circle /
+//     Nintendo-A in the standard mapping) would quit the game.
+//   * Controller-test screen (ACTIONS_DISABLED_PATHS) — built-in actions
+//     are muted so every button can be pressed and inspected in place.
 import { onBeforeUnmount } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import storePlaying from "@/stores/playing";
 import { useInputModality } from "@/v2/composables/useInputModality";
 import {
   closeTopEscapable,
@@ -34,9 +42,11 @@ import {
 // `src/v2/components/AppShell/AppNav.vue`. LB/RB cycle through these.
 const NAV_SECTIONS = ["/", "/platforms", "/collections", "/search"] as const;
 
-// Routes where LB/RB should NOT trigger section navigation, so the
-// corresponding buttons remain inspectable/usable in-place.
-const SECTION_NAV_DISABLED_PATHS = new Set<string>(["/controller-debug"]);
+// Routes where useGamepad's built-in actions (back, activate, section
+// nav, user menu) must NOT fire, so every button stays inspectable in
+// place. The controller-debug "test" screen needs this: otherwise B
+// pops history and A clicks before the press can even be seen.
+const ACTIONS_DISABLED_PATHS = new Set<string>(["/controller-debug"]);
 
 const INITIAL_DELAY_MS = 350;
 const REPEAT_MS = 120;
@@ -121,9 +131,10 @@ export function useGamepad() {
   const router = useRouter();
   const route = useRoute();
 
+  const playingStore = storePlaying();
+
   function cycleSection(step: -1 | 1) {
     const currentPath = route.path;
-    if (SECTION_NAV_DISABLED_PATHS.has(currentPath)) return;
 
     // Match current section by path prefix so /platform/:id still registers
     // as "/platforms" when LB/RB is pressed from a gallery sub-route.
@@ -235,6 +246,16 @@ export function useGamepad() {
       // mid-browse, or Chrome exposes it once the user moves a stick).
       if (!everSawPad) detectPadPresence();
 
+      // While a game is running the emulator owns the pad directly —
+      // translating presses into navigation here would, for example,
+      // make B (or Circle / Nintendo-A, which share the standard B
+      // index) quit the game. Suppress all built-in translation in that
+      // case; the emulator reads `navigator.getGamepads()` itself.
+      const gameOwnsInput = playingStore.playing;
+      // On the controller-test screen the built-in actions are muted so
+      // every button can be pressed and inspected without side effects.
+      const actionsDisabled = ACTIONS_DISABLED_PATHS.has(route.path);
+
       for (const pad of pads) {
         if (!pad) continue;
         const key = `${pad.index}:${pad.id}`;
@@ -246,20 +267,22 @@ export function useGamepad() {
         // Left stick → ArrowKey equivalents.
         const x = pad.axes[0] ?? 0;
         const y = pad.axes[1] ?? 0;
-        tickAxis(st, "x", x, t, (dir) =>
+        tickAxis(st, "x", x, t, (dir) => {
+          if (gameOwnsInput) return;
           dispatchKey(
             dir < 0
               ? { key: "ArrowLeft", code: "ArrowLeft" }
               : { key: "ArrowRight", code: "ArrowRight" },
-          ),
-        );
-        tickAxis(st, "y", y, t, (dir) =>
+          );
+        });
+        tickAxis(st, "y", y, t, (dir) => {
+          if (gameOwnsInput) return;
           dispatchKey(
             dir < 0
               ? { key: "ArrowUp", code: "ArrowUp" }
               : { key: "ArrowDown", code: "ArrowDown" },
-          ),
-        );
+          );
+        });
 
         // Buttons. Three tracks, evaluated in order:
         //   * BUTTON_MAP → synthetic keyboard event, with repeat cadence.
@@ -277,19 +300,21 @@ export function useGamepad() {
           const prev = (st.buttons[i] ||= { pressed: false, nextRepeatAt: 0 });
           if (button.pressed) {
             if (!prev.pressed) {
-              if (binding) dispatchKey(binding);
-              else action?.();
-              // Fire the CustomEvent on every press edge so views can
-              // bind to buttons we don't otherwise reserve.
-              window.dispatchEvent(
-                new CustomEvent("gamepad:buttondown", {
-                  detail: { index: i, name: BUTTON_NAMES[i] },
-                }),
-              );
+              if (!gameOwnsInput) {
+                if (binding) dispatchKey(binding);
+                else if (!actionsDisabled) action?.();
+                // Fire the CustomEvent on every press edge so views can
+                // bind to buttons we don't otherwise reserve.
+                window.dispatchEvent(
+                  new CustomEvent("gamepad:buttondown", {
+                    detail: { index: i, name: BUTTON_NAMES[i] },
+                  }),
+                );
+              }
               onAnyInput();
               prev.pressed = true;
               prev.nextRepeatAt = t + INITIAL_DELAY_MS;
-            } else if (binding && t >= prev.nextRepeatAt) {
+            } else if (!gameOwnsInput && binding && t >= prev.nextRepeatAt) {
               // Only synthetic-key bindings repeat while held.
               dispatchKey(binding);
               prev.nextRepeatAt = t + REPEAT_MS;
diff --git a/frontend/src/v2/views/ControllerDebug.vue b/frontend/src/v2/views/ControllerDebug.vue
@@ -12,6 +12,7 @@
 import { RBtn, RIcon } from "@v2/lib";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import ControllerPad from "@/v2/components/ControllerDebug/ControllerPad.vue";
 import type { GamepadSnapshot } from "@/v2/components/ControllerDebug/types";
 import SettingsSection from "@/v2/components/Settings/SettingsSection.vue";
@@ -20,8 +21,18 @@ import { useInputModality } from "@/v2/composables/useInputModality";
 defineOptions({ inheritAttrs: false });
 
 const { t } = useI18n();
+const router = useRouter();
 const { modality } = useInputModality();
 
+// useGamepad mutes its built-in actions on this route so every button is
+// free to test (see ACTIONS_DISABLED_PATHS). That also removes the normal
+// B/Back way out, so this screen owns its own escape: hold a "back" button
+// (B / Circle or Back / Share) for HOLD_TO_EXIT_MS to navigate away.
+const BACK_BUTTON_INDICES = [1, 8];
+const HOLD_TO_EXIT_MS = 700;
+const exitHoldStart = ref<number | null>(null);
+const exitHoldProgress = ref(0);
+
 // useGamepad's mapping legend — keep in sync with the composable.
 const KEYBIND_LEGEND: { button: string; key: string }[] = [
   { button: "D-pad Up", key: "ArrowUp" },
@@ -76,6 +87,27 @@ function tick() {
       buttons: p.buttons.map((b) => ({ pressed: b.pressed, value: b.value })),
       axes: [...p.axes],
     }));
+
+  // Hold-to-exit: a held back button leaves the test screen once the
+  // dwell threshold is reached, a tap just registers in the inspector.
+  const backHeld = list.some(
+    (p) => p && BACK_BUTTON_INDICES.some((i) => p.buttons[i]?.pressed),
+  );
+  if (backHeld) {
+    if (exitHoldStart.value === null) exitHoldStart.value = performance.now();
+    const held = performance.now() - exitHoldStart.value;
+    exitHoldProgress.value = Math.min(1, held / HOLD_TO_EXIT_MS);
+    if (held >= HOLD_TO_EXIT_MS) {
+      exitHoldStart.value = null;
+      exitHoldProgress.value = 0;
+      router.back();
+      return;
+    }
+  } else {
+    exitHoldStart.value = null;
+    exitHoldProgress.value = 0;
+  }
+
   rafId.value = requestAnimationFrame(tick);
 }
 
@@ -110,6 +142,17 @@ function formatTime(t: number) {
 
 <template>
   <div class="r-v2-section-stack">
+    <!-- Test-mode hint: actions are muted here, so explain how to leave -->
+    <div class="r-v2-ctrl__hold-hint">
+      <div
+        class="r-v2-ctrl__hold-fill"
+        :style="{ width: `${exitHoldProgress * 100}%` }"
+        aria-hidden="true"
+      />
+      <RIcon icon="mdi-information-outline" size="15" />
+      <span>{{ t("settings.controller-debug-test-hint") }}</span>
+    </div>
+
     <!-- Status -->
     <SettingsSection :title="t('rom.status')" icon="mdi-pulse">
       <div class="r-v2-ctrl__status">
@@ -284,6 +327,32 @@ function formatTime(t: number) {
 </template>
 
 <style scoped>
+/* Test-mode hint --------------------------------------------------- */
+.r-v2-ctrl__hold-hint {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  overflow: hidden;
+  border: 1px solid var(--r-color-border);
+  border-radius: var(--r-radius-md);
+  background: var(--r-color-surface);
+  font-size: 12px;
+  color: var(--r-color-fg-muted);
+}
+/* Fills left-to-right as a back button is held, then exits at 100%. */
+.r-v2-ctrl__hold-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: color-mix(in srgb, var(--r-color-brand-primary) 14%, transparent);
+  pointer-events: none;
+  transition: width 60ms linear;
+}
+.r-v2-ctrl__hold-hint > :not(.r-v2-ctrl__hold-fill) {
+  position: relative;
+}
+
 /* Status section --------------------------------------------------- */
 .r-v2-ctrl__status {
   display: flex;
