1- function createDPadButtonVisuals ( centerX , centerY ) {
2- return [
3- { index : 12 , tag : 'rect' , attributes : { x : centerX - 50 , y : centerY - 150 , width : 100 , height : 115 , rx : 18 } } ,
4- { index : 13 , tag : 'rect' , attributes : { x : centerX - 50 , y : centerY + 40 , width : 100 , height : 115 , rx : 18 } } ,
5- { index : 14 , tag : 'rect' , attributes : { x : centerX - 155 , y : centerY - 50 , width : 115 , height : 100 , rx : 18 } } ,
6- { index : 15 , tag : 'rect' , attributes : { x : centerX + 40 , y : centerY - 50 , width : 115 , height : 100 , rx : 18 } }
7- ] ;
1+ function createDPadButtonVisuals ( shapes ) {
2+ return shapes . map ( ( shape , index ) => ( {
3+ index : index + 12 ,
4+ ...shape
5+ } ) ) ;
6+ }
7+
8+ const FIREFOX_SWITCH_GAMEPAD_FIXED_VERSION = 155 ;
9+
10+ function getFirefoxMajorVersion ( userAgent ) {
11+ const match = / \b F i r e f o x \/ ( \d + ) / . exec ( userAgent ) ;
12+ return match ? Number . parseInt ( match [ 1 ] , 10 ) : null ;
813}
914
1015document . addEventListener ( 'DOMContentLoaded' , function ( ) {
@@ -19,6 +24,8 @@ document.addEventListener('DOMContentLoaded', function() {
1924 const gamepadTester = document . getElementById ( 'GamepadTester' ) ;
2025 const gamepadStatus = document . getElementById ( 'gamepad-status' ) ;
2126 const gamepadStatusMessage = document . getElementById ( 'gamepad-status-message' ) ;
27+ const firefoxSwitchWarning = document . getElementById ( 'firefox-switch-warning' ) ;
28+ const firefoxMajorVersion = getFirefoxMajorVersion ( navigator . userAgent ) ;
2229 let gamepadVisualButtons = new Map ( ) ;
2330 let gamepadVisualSticks = [ ] ;
2431 let gamepadVisualTriggers = new Map ( ) ;
@@ -43,7 +50,12 @@ document.addEventListener('DOMContentLoaded', function() {
4350 { index : 9 , tag : 'circle' , attributes : { cx : 2173 , cy : 808 , r : 52 } } ,
4451 { index : 10 , tag : 'circle' , attributes : { cx : 1602 , cy : 816 , r : 105 } } ,
4552 { index : 11 , tag : 'circle' , attributes : { cx : 2276 , cy : 1073 , r : 105 } } ,
46- ...createDPadButtonVisuals ( 1816 , 1091 ) ,
53+ ...createDPadButtonVisuals ( [
54+ { tag : 'rect' , attributes : { x : 1771 , y : 964 , width : 92 , height : 82 , rx : 13 } } ,
55+ { tag : 'rect' , attributes : { x : 1771 , y : 1139 , width : 92 , height : 82 , rx : 13 } } ,
56+ { tag : 'rect' , attributes : { x : 1692 , y : 1046 , width : 79 , height : 93 , rx : 13 } } ,
57+ { tag : 'rect' , attributes : { x : 1863 , y : 1046 , width : 82 , height : 93 , rx : 13 } }
58+ ] ) ,
4759 { index : 16 , tag : 'circle' , attributes : { cx : 2049 , cy : 637 , r : 65 } }
4860 ] ,
4961 sticks : [
@@ -68,9 +80,14 @@ document.addEventListener('DOMContentLoaded', function() {
6880 { index : 9 , tag : 'rect' , attributes : { x : 2470 , y : 530 , width : 80 , height : 145 , rx : 35 , transform : 'rotate(8 2510 602)' } } ,
6981 { index : 10 , tag : 'circle' , attributes : { cx : 1724 , cy : 1094 , r : 115 } } ,
7082 { index : 11 , tag : 'circle' , attributes : { cx : 2370 , cy : 1093 , r : 115 } } ,
71- ...createDPadButtonVisuals ( 1425 , 819 ) ,
83+ ...createDPadButtonVisuals ( [
84+ { tag : 'path' , attributes : { d : 'M1449.18,658.32s-11.48-1.24-24-1.24-24,1.24-24,1.24-26.51,1.17-28.49,23.66l1.59,48.59a24.8,24.8,0,0,0,5.44,14.73l35,38.58a6.74,6.74,0,0,0,4.16,2.45,40.6,40.6,0,0,0,6.35.53,41.32,41.32,0,0,0,7.07-.67,4.91,4.91,0,0,0,3-1.79l34.52-38a28.88,28.88,0,0,0,6.33-17.17l1.55-47.22C1475.15,659.49,1449.18,658.32,1449.18,658.32Z' } } ,
85+ { tag : 'path' , attributes : { d : 'M1401.18,976.94s11.47,1.25,24,1.25,24-1.25,24-1.25,26.5-1.17,28.48-23.65l-1.59-48.6a24.79,24.79,0,0,0-5.43-14.73l-35-38.58a6.68,6.68,0,0,0-4.16-2.44,39.28,39.28,0,0,0-6.34-.53,41.49,41.49,0,0,0-7.08.66,5,5,0,0,0-3,1.79l-34.51,38a28.85,28.85,0,0,0-6.34,17.17l-1.55,47.23C1375.2,975.77,1401.18,976.94,1401.18,976.94Z' } } ,
86+ { tag : 'path' , attributes : { d : 'M1265.87,793.63s-1.25,11.48-1.25,24,1.25,24,1.25,24,1.17,26.51,23.65,28.49l48.6-1.6a24.73,24.73,0,0,0,14.73-5.43l38.58-35a6.68,6.68,0,0,0,2.44-4.16,39.42,39.42,0,0,0,.53-6.35,41.46,41.46,0,0,0-.66-7.07,5.06,5.06,0,0,0-1.79-3l-38-34.51a28.87,28.87,0,0,0-17.18-6.33l-47.22-1.55C1267,767.65,1265.87,793.63,1265.87,793.63Z' } } ,
87+ { tag : 'path' , attributes : { d : 'M1584.48,841.63s1.25-11.47,1.25-24-1.25-24-1.25-24-1.17-26.5-23.65-28.48l-48.6,1.59a24.79,24.79,0,0,0-14.72,5.43l-38.59,35a6.77,6.77,0,0,0-2.44,4.16,39.28,39.28,0,0,0-.53,6.34,41.21,41.21,0,0,0,.67,7.07,5,5,0,0,0,1.78,3l38,34.51a28.94,28.94,0,0,0,17.18,6.34l47.22,1.55C1583.31,867.61,1584.48,841.63,1584.48,841.63Z' } }
88+ ] ) ,
7289 { index : 16 , tag : 'circle' , attributes : { cx : 2048 , cy : 1094 , r : 70 } } ,
73- { index : 17 , tag : 'rect ' , attributes : { x : 1650 , y : 465 , width : 795 , height : 480 , rx : 80 } }
90+ { index : 17 , tag : 'path ' , attributes : { d : 'M2446.36,528.91l-.06-.3c.6-17-2.64-40.77-23.6-49.54-7.28-3.05-28.57-5.62-57.54-7.79-96.28-9.84-316.91-10.41-316.91-10.41h-.45s-220.63.57-316.91,10.41c-29,2.17-50.27,4.74-57.54,7.79-21,8.77-24.2,32.57-23.6,49.54,0,.1,0,.2-.07.3l.1.48a105.85,105.85,0,0,0,2.21,17.72l52.22,255.56q1.63,5.87,3.63,11.19A112,112,0,0,0,1718,834.93a106.93,106.93,0,0,0,26,29.1,110.63,110.63,0,0,0,34.7,18.12,119.88,119.88,0,0,0,15.93,4c2.53.46,5.11.87,7.78,1.21h491.27c2.66-.34,5.25-.75,7.78-1.21a119.88,119.88,0,0,0,15.93-4,110.63,110.63,0,0,0,34.7-18.12,106.74,106.74,0,0,0,26-29.1,111.54,111.54,0,0,0,10.17-21.07c1.32-3.55,2.54-7.28,3.63-11.19l52.22-255.56a105.85,105.85,0,0,0,2.21-17.72Z' } }
7491 ] ,
7592 sticks : [
7693 { buttonIndex : 10 , axes : [ 0 , 1 ] , x : 1724 , y : 1094 , range : 85 } ,
@@ -94,7 +111,12 @@ document.addEventListener('DOMContentLoaded', function() {
94111 { index : 9 , tag : 'circle' , attributes : { cx : 2260 , cy : 711 , r : 50 } } ,
95112 { index : 10 , tag : 'circle' , attributes : { cx : 1578 , cy : 841 , r : 105 } } ,
96113 { index : 11 , tag : 'circle' , attributes : { cx : 2275 , cy : 1072 , r : 105 } } ,
97- ...createDPadButtonVisuals ( 1785 , 1072 ) ,
114+ ...createDPadButtonVisuals ( [
115+ { tag : 'rect' , attributes : { x : 1741 , y : 950 , width : 87 , height : 83 , rx : 17 } } ,
116+ { tag : 'rect' , attributes : { x : 1741 , y : 1120 , width : 87 , height : 83 , rx : 17 } } ,
117+ { tag : 'rect' , attributes : { x : 1658 , y : 1033 , width : 83 , height : 87 , rx : 17 } } ,
118+ { tag : 'rect' , attributes : { x : 1828 , y : 1033 , width : 83 , height : 87 , rx : 17 } }
119+ ] ) ,
98120 { index : 16 , tag : 'circle' , attributes : { cx : 2172 , cy : 841 , r : 55 } } ,
99121 { index : 17 , tag : 'rect' , attributes : { x : 1876 , y : 791 , width : 105 , height : 105 , rx : 18 } }
100122 ] ,
@@ -192,7 +214,15 @@ document.addEventListener('DOMContentLoaded', function() {
192214
193215 const gamepadIndices = Object . keys ( gamepads ) ;
194216 const hasGamepads = gamepadIndices . length > 0 ;
217+ const hasNintendoSwitchController = Object . values ( gamepads ) . some ( gamepad =>
218+ gamepadHelper . detectControllerType ( gamepad . id ) === gamepadHelper . CONTROLLER_TYPES . SWITCH
219+ ) ;
195220 gamepadTester . classList . toggle ( 'has-gamepad' , hasGamepads ) ;
221+ firefoxSwitchWarning . hidden = ! (
222+ firefoxMajorVersion !== null
223+ && firefoxMajorVersion < FIREFOX_SWITCH_GAMEPAD_FIXED_VERSION
224+ && hasNintendoSwitchController
225+ ) ;
196226
197227 if ( hasGamepads ) {
198228 gamepadSelectorContainer . style . removeProperty ( 'display' ) ;
@@ -498,19 +528,28 @@ document.addEventListener('DOMContentLoaded', function() {
498528 gamepadStatus . classList . add ( `alert-${ resolvedStatus } ) ;
499529 }
500530
531+ function updateTextContent ( elementId , value ) {
532+ const element = document . getElementById ( elementId ) ;
533+ const text = String ( value ) ;
534+
535+ if ( element . textContent !== text ) {
536+ element . textContent = text ;
537+ }
538+ }
539+
501540 // Update the gamepad info function to include vibration status
502541 function updateGamepadInfo ( gamepad ) {
503542 const gamepadInfo = gamepadHelper . getGamepadInfo ( gamepad . id ) ;
504543 const vibrationCapabilities = gamepadHelper . getVibrationCapabilities ( gamepad ) ;
505544
506- document . getElementById ( 'gamepad-id' ) . textContent = gamepad . id ;
507- document . getElementById ( 'gamepad-index' ) . textContent = gamepad . index ;
508- document . getElementById ( 'gamepad-connected' ) . textContent = gamepad . connected ;
509- document . getElementById ( 'gamepad-mapping' ) . textContent = gamepad . mapping || 'No mapping' ;
510- document . getElementById ( 'gamepad-buttons-count' ) . textContent = gamepad . buttons . length ;
511- document . getElementById ( 'gamepad-axes-count' ) . textContent = gamepad . axes . length ;
512- document . getElementById ( 'gamepad-type' ) . textContent = gamepadInfo . type ;
513- document . getElementById ( 'gamepad-name' ) . textContent = gamepadInfo . name ;
545+ updateTextContent ( 'gamepad-id' , gamepad . id ) ;
546+ updateTextContent ( 'gamepad-index' , gamepad . index ) ;
547+ updateTextContent ( 'gamepad-connected' , gamepad . connected ) ;
548+ updateTextContent ( 'gamepad-mapping' , gamepad . mapping || 'No mapping' ) ;
549+ updateTextContent ( 'gamepad-buttons-count' , gamepad . buttons . length ) ;
550+ updateTextContent ( 'gamepad-axes-count' , gamepad . axes . length ) ;
551+ updateTextContent ( 'gamepad-type' , gamepadInfo . type ) ;
552+ updateTextContent ( 'gamepad-name' , gamepadInfo . name ) ;
514553
515554 // Update vibration controls based on capabilities
516555 updateVibrationControls ( vibrationCapabilities ) ;
0 commit comments