diff --git a/_sass/styles.scss b/_sass/styles.scss index da2d39e1..c095a4a2 100644 --- a/_sass/styles.scss +++ b/_sass/styles.scss @@ -739,6 +739,21 @@ table tr:nth-child(2n) { padding: 0.8rem; } +.gamepad-browser-warning { + margin-inline: auto; + max-width: 46rem; +} + +.gamepad-browser-warning[hidden] { + display: none; +} + +.gamepad-browser-warning a { + font-weight: 600; + overflow-wrap: anywhere; + text-decoration: underline; +} + .gamepad-device-details > summary { align-items: center; cursor: pointer; @@ -847,6 +862,12 @@ table tr:nth-child(2n) { padding: 0.65rem 0.85rem; } + .gamepad-tester.has-gamepad .gamepad-browser-warning { + margin-top: 0.75rem !important; + max-width: none; + padding: 0.55rem 0.75rem; + } + .gamepad-tester.has-gamepad .gamepad-selector-panel { display: grid; grid-template-columns: 13rem minmax(0, 1fr); diff --git a/assets/js/gamepad-tester.js b/assets/js/gamepad-tester.js index bf9a9583..8d2bacf3 100644 --- a/assets/js/gamepad-tester.js +++ b/assets/js/gamepad-tester.js @@ -5,6 +5,13 @@ function createDPadButtonVisuals(shapes) { })); } +const FIREFOX_SWITCH_GAMEPAD_FIXED_VERSION = 155; + +function getFirefoxMajorVersion(userAgent) { + const match = /\bFirefox\/(\d+)/.exec(userAgent); + return match ? Number.parseInt(match[1], 10) : null; +} + document.addEventListener('DOMContentLoaded', function() { const gamepadHelper = new GamepadHelper() const gamepadHelperVersion = globalThis.gamepadHelperVersion; @@ -17,6 +24,8 @@ document.addEventListener('DOMContentLoaded', function() { const gamepadTester = document.getElementById('GamepadTester'); const gamepadStatus = document.getElementById('gamepad-status'); const gamepadStatusMessage = document.getElementById('gamepad-status-message'); + const firefoxSwitchWarning = document.getElementById('firefox-switch-warning'); + const firefoxMajorVersion = getFirefoxMajorVersion(navigator.userAgent); let gamepadVisualButtons = new Map(); let gamepadVisualSticks = []; let gamepadVisualTriggers = new Map(); @@ -205,7 +214,15 @@ document.addEventListener('DOMContentLoaded', function() { const gamepadIndices = Object.keys(gamepads); const hasGamepads = gamepadIndices.length > 0; + const hasNintendoSwitchController = Object.values(gamepads).some(gamepad => + gamepadHelper.detectControllerType(gamepad.id) === gamepadHelper.CONTROLLER_TYPES.SWITCH + ); gamepadTester.classList.toggle('has-gamepad', hasGamepads); + firefoxSwitchWarning.hidden = !( + firefoxMajorVersion !== null + && firefoxMajorVersion < FIREFOX_SWITCH_GAMEPAD_FIXED_VERSION + && hasNintendoSwitchController + ); if (hasGamepads) { gamepadSelectorContainer.style.removeProperty('display'); diff --git a/gamepad-tester.html b/gamepad-tester.html index 0e52e378..2d56e0cc 100644 --- a/gamepad-tester.html +++ b/gamepad-tester.html @@ -36,6 +36,15 @@