From 83e9205e383091d4921c82cf6cb8f45e6f636509 Mon Sep 17 00:00:00 2001
From: Louis Poirier <contact@louispoirier.io>
Date: Sat, 24 Jul 2021 01:26:10 +0200
Subject: [PATCH 1/4] Refactored code : introduce functions to switch UI
 between keyboard events and gamepad events. Gamepad logic : listen to gamepad
 events and show buttons / axes mapping. Gamepad UI : show a custom gamepad
 svg based on
 https://github.com/w3c/gamepad/commit/bcbdd921a81318203f7bd09f21b56abdbe190bff.
 Gamepad UX : cards and svg are responsive and reuse current theme styles.

---
 index.html           |  56 ++++++++++--
 scripts.js           | 212 +++++++++++++++++++++++++++++++++++++++++--
 standard_gamepad.svg |   1 +
 style.css            |   8 +-
 4 files changed, 256 insertions(+), 21 deletions(-)
 create mode 100644 standard_gamepad.svg

diff --git a/index.html b/index.html
index 20d9928..8278137 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,11 @@
     </table>
     <div class="wrap" aria-live="polite" aria-atomic="true">
       <p class="keycode-display"></p>
+      <object type="image/svg+xml" data="standard_gamepad.svg"
+              onload="prepareGamepadDisplayOverlay()" class="gamepad-display hide"></object>
       <p class="text-display">Press any key to get the JavaScript event keycode</p>
-      <div class="cards hide">
+      <p class="text-display">Plug a gamepad to get the JavaScript events</p>
+      <div id="keyboard" class="cards hide">
         <div class="card item-key">
           <div class="card-header">event.key</div>
           <div class="card-main">
@@ -66,6 +69,32 @@
           </div>
         </div>
       </div>
+      <div id="gamepad" class="cards hide">
+        <div class="card item-id">
+          <div class="card-header">gamepad.id</div>
+          <div class="card-main">
+            <div class="main-description">xinput</div>
+          </div>
+        </div>
+        <div class="card item-mapping">
+          <div class="card-header">gamepad.mapping</div>
+          <div class="card-main">
+            <div class="main-description">standard</div>
+          </div>
+        </div>
+        <div class="card item-buttons">
+          <div class="card-header">gamepad.buttons</div>
+          <div class="card-main">
+            <div class="main-description"></div>
+          </div>
+        </div>
+        <div class="card item-axes">
+          <div class="card-header">gamepad.axes</div>
+          <div class="card-main">
+            <div class="main-description"></div>
+          </div>
+        </div>
+      </div>
       <div class="mobile-input">
       </div>
     </div>
@@ -75,18 +104,27 @@
     </div>
   </div>
 
-  <span class="love">Made with love by
-    <a href="https://wesbos.com" target="_blank" rel="noopener">Wes Bos</a> — fork or suggest edits on
-    <a href="https://github.com/wesbos/keycodes" target="_blank" rel="noopener">GitHub</a> —
+  <footer>
+    <span class="love">Made with love by
+      <a href="https://wesbos.com" target="_blank" rel="noopener">Wes Bos</a> — fork or suggest edits on
+      <a href="https://github.com/wesbos/keycodes" target="_blank" rel="noopener">GitHub</a> —
 
-    <a href="https://twitter.com/wesbos" class="twitter-follow-button" data-show-count="false" target="_blank" rel="noopener">Follow
-      @wesbos</a>
+      <a href="https://twitter.com/wesbos" class="twitter-follow-button" data-show-count="false" target="_blank" rel="noopener">Follow
+        @wesbos</a>
 
-    <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://keycode.info" data-text="Nice tool for finding JavaScript event keycodes"
-      data-via="wesbos" data-related="wesbos" target="_blank" rel="noopener">Tweet</a>
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://keycode.info" data-text="Nice tool for finding JavaScript event keycodes"
+         data-via="wesbos" data-related="wesbos" target="_blank" rel="noopener">Tweet</a>
+    </span>
 
+    <br>
 
-  </span>
+    <span class="copyright">
+      This software or document includes material copied from or derived from<br>
+      <a href="https://w3c.github.io/gamepad/" target="_blank">Gamepad W3C Editor's Draft</a> —
+      <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" target="_blank">
+        Copyright © 2021 W3C® (MIT, ERCIM, Keio, Beihang)</a>
+    </span>
+  </footer>
 
   <script type='text/javascript'>
     if ('serviceWorker' in navigator) {
diff --git a/scripts.js b/scripts.js
index 93267f4..3e8635d 100644
--- a/scripts.js
+++ b/scripts.js
@@ -202,6 +202,7 @@ ctx.textAlign = 'center';
 ctx.font = '110px sans-serif';
 
 let theme = 'dark';
+let gamepad = null;
 
 // #endregion
 
@@ -307,9 +308,64 @@ function copyTextToClipboard(text) {
   }
 }
 
+/**
+ * Utility function to set the HTML content of a card using stylesheet class.
+ *
+ * @param key of the card to update.
+ * @param value to display.
+ */
+function updateCardItem(key, value) {
+  document.querySelector(`.item-${key} .main-description`).innerHTML = value;
+}
+
+/**
+ * Show cards / elements for a given type of events.
+ * Hide other cards / elements.
+ *
+ * @param type MUST be 'keyboard' or 'gamepad'.
+ */
+function toggleEventCards(type) {
+  const keyboard = document.querySelector('#keyboard');
+  const gamepad = document.querySelector('#gamepad');
+
+  const showCards = (type === 'keyboard') ? keyboard : gamepad;
+  const hideCards = (type === 'keyboard') ? gamepad : keyboard;
+
+  showCards.classList.add('active');
+  showCards.classList.remove('hide');
+
+  hideCards.classList.add('hide');
+  hideCards.classList.remove('active');
+
+  if (type === 'gamepad') {
+    document.querySelector('.keycode-display').innerHTML = '';
+    document.querySelector('.gamepad-display').classList.remove('hide');
+  }
+
+  document.querySelectorAll('.text-display').forEach(item => item.classList.add('hide'));
+}
+
+/**
+ * Restore page by hiding event cards and showing texts information.
+ */
+function resetEventCards() {
+  const keyboard = document.querySelector('#keyboard');
+  const gamepad = document.querySelector('#gamepad');
+
+  keyboard.classList.add('hide');
+  keyboard.classList.remove('active');
+
+  gamepad.classList.add('hide');
+  gamepad.classList.remove('active');
+
+  document.querySelector('.keycode-display').innerHTML = '';
+  document.querySelector('.gamepad-display').classList.add('hide');
+  document.querySelectorAll('.text-display').forEach(item => item.classList.remove('hide'));
+}
+
 // #endregion
 
-// #region Event Listeners
+// #region Keyboard / Touch Event Listeners
 
 document.addEventListener('touchstart', e => {
   if (document.querySelector('.mobile-input input') !== null) return;
@@ -329,16 +385,16 @@ body.onkeydown = function(e) {
   if (!e.metaKey) {
     e.preventDefault();
   }
+  if (gamepad) {
+    return;
+  }
+
   drawNumberToCanvas(e.keyCode);
 
   // Main e.keyCode display
   document.querySelector('.keycode-display').innerHTML = e.keyCode;
 
-  // Show the cards with all
-  const cards = document.querySelector('.cards');
-  cards.classList.add('active');
-  cards.classList.remove('hide');
-  document.querySelector('.text-display').classList.add('hide');
+  toggleEventCards('keyboard');
 
   // Check if Key_Values is Unidentified then redirect to docs
   let newKeyText = '';
@@ -381,10 +437,10 @@ body.onkeydown = function(e) {
     mobileInput.value = '';
   }
 
-  document.querySelector('.item-key .main-description').innerHTML = newKeyText;
-  document.querySelector('.item-location .main-description').innerHTML = newLocationText;
-  document.querySelector('.item-which .main-description').innerHTML = e.which || '';
-  document.querySelector('.item-code .main-description').innerHTML = newCodeText;
+  updateCardItem('key', newKeyText);
+  updateCardItem('location', newLocationText);
+  updateCardItem('which', e.which || '');
+  updateCardItem('code', newCodeText);
 };
 
 body.onkeyup = function(e) {
@@ -410,6 +466,141 @@ function onCardClick() {
 
 // #endregion
 
+// #region Gamepad Polyfill Methods
+
+
+
+// #endregion
+
+// #region Gamepad Event Listeners
+
+window.addEventListener('gamepadconnected', e => {
+  createNotification('Gamepad connected!');
+  toggleEventCards('gamepad');
+
+  updateCardItem('id', e.gamepad.id);
+  updateCardItem('mapping', e.gamepad.mapping);
+  updateCardItem('buttons', '');
+  updateCardItem('axes', '');
+
+  gamepadLoop();
+});
+
+/**
+ * Start and loop at 60 FPS to listen to gamepad changes.
+ * Update buttons states and axes positions accordingly.
+ */
+function gamepadLoop() {
+  const gamepads = navigator.getGamepads();
+
+  // Stop loop if no gamepads were found.
+  if (!gamepads) {
+    return;
+  }
+
+  // Deal only with the first connected gamepad.
+  gamepad = gamepads[0];
+
+  // Stop when gamepad is disconnected.
+  if (!gamepad) {
+    return;
+  }
+
+  // Update UI for each buttons and axes.
+  gamepad.buttons.forEach((button, index) => {
+    updateGamepadButtonOverlay(index, button.value);
+    if (button.pressed) {
+      updateCardItem('buttons', `[${index}] (${button.value.toFixed(2)})`);
+    }
+  });
+  updateGamepadJoystickOverlay(gamepad.axes);
+
+  // Recursive loop
+  requestAnimationFrame(gamepadLoop);
+}
+
+window.addEventListener('gamepaddisconnected', e => {
+  createNotification('Gamepad disconnected.');
+  resetEventCards();
+});
+
+// #endregion
+
+// #region Gamepad Drawing Methods
+
+/**
+ * Initialize inlined gamepad SVG.
+ */
+function prepareGamepadDisplayOverlay() {
+  const gamepad = document.querySelector('.gamepad-display').contentDocument;
+  const color = (theme === 'dark') ? '#5b60ff' : '#b9e9ff';
+
+  if (!gamepad) {
+    return;
+  }
+  // Set theme's color and hide each buttons overlay.
+  gamepad.querySelector('#buttons').querySelectorAll('*').forEach(child => {
+    child.style.fill = color;
+    child.style.opacity = '0.0';
+  });
+
+  // (re)set each joystick to default position.
+  const left = gamepad.querySelector('#axes #left');
+  const leftButton = gamepad.querySelector('#buttons #_10');
+  const right = gamepad.querySelector('#axes #right');
+  const rightButton = gamepad.querySelector('#buttons #_11');
+
+  moveGamepadJoystickOverlay(left, 0, 0);
+  moveGamepadJoystickOverlay(leftButton, 0, 0);
+  moveGamepadJoystickOverlay(right, 0, 0);
+  moveGamepadJoystickOverlay(rightButton, 0, 0);
+}
+
+/**
+ * Updates opacity of a button with given value.
+ *
+ * @param index of the button with standard mapping (see [Gamepad W3C Editor's draft]{@link https://w3c.github.io/gamepad/#remapping}).
+ * @param value between 0.0 and 1.0.
+ */
+function updateGamepadButtonOverlay(index, value) {
+  const gamepad = document.querySelector('.gamepad-display').contentDocument;
+
+  gamepad.querySelector(`#buttons`).querySelectorAll(`#_${index}`).forEach(child => {
+    child.style.opacity = value;
+  });
+}
+
+/**
+ * Show joystick values with new one.
+ * Updates joystick position with capped range.
+ *
+ * @param axes array with normalized values between 0.0 and 1.0.
+ */
+function updateGamepadJoystickOverlay(axes) {
+  const gamepad = document.querySelector('.gamepad-display').contentDocument;
+  let label;
+
+  label = `[${axes[0].toFixed(2)}, ${axes[1].toFixed(2)}]<br>`;
+  label += `[${axes[2].toFixed(2)}, ${axes[3].toFixed(2)}]`;
+  updateCardItem('axes', label);
+
+  const left = gamepad.querySelector('#axes #left');
+  const leftButton = gamepad.querySelector('#buttons #_10');
+  const right = gamepad.querySelector('#axes #right');
+  const rightButton = gamepad.querySelector('#buttons #_11');
+
+  moveGamepadJoystickOverlay(left, axes[0], axes[1]);
+  moveGamepadJoystickOverlay(leftButton, axes[0], axes[1]);
+  moveGamepadJoystickOverlay(right, axes[2], axes[3]);
+  moveGamepadJoystickOverlay(rightButton, axes[2], axes[3]);
+}
+
+function moveGamepadJoystickOverlay(node, x, y) {
+  node.style.transform = `translate(${x * 108.396}px, ${y * 108.396}px)`;
+}
+
+// #endregion
+
 // #region Theme Methods
 
 function queryMediaTheme() {
@@ -442,6 +633,7 @@ function updateTheme() {
     html.classList.remove('light-theme');
     button.innerHTML = 'Light theme';
   }
+  prepareGamepadDisplayOverlay();
 }
 
 // #endregion
diff --git a/standard_gamepad.svg b/standard_gamepad.svg
new file mode 100644
index 0000000..3c258e6
--- /dev/null
+++ b/standard_gamepad.svg
@@ -0,0 +1 @@
+<svg id="standard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 592.98"><defs><style>.cls-1,.cls-2,.cls-4,.cls-5,.cls-9{fill:#c8c8c8;}.cls-1,.cls-10,.cls-3,.cls-4,.cls-5,.cls-7,.cls-8{stroke:#000;}.cls-1,.cls-10,.cls-4,.cls-5,.cls-7,.cls-8,.cls-9{stroke-linecap:round;stroke-linejoin:round;}.cls-1,.cls-7{stroke-width:4.51px;}.cls-1,.cls-11,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-8,.cls-9{fill-rule:evenodd;}.cls-3{fill:gray;}.cls-4{stroke-width:0.99px;}.cls-5{stroke-width:1.57px;}.cls-10,.cls-6{fill:#404040;}.cls-7,.cls-8{fill:#595959;}.cls-9{stroke:#454545;}.cls-10{stroke-width:2.32px;}.cls-11,.cls-12{fill:#5b60ff;opacity:0.5;}</style></defs><title>standard_gamepad</title><g id="gamepad"><path id="rect3225" class="cls-1" d="M225.64,88a12.41,12.41,0,0,0-12.39,12.54V430.22a12.29,12.29,0,0,0,12.39,12.39H774.47A12.42,12.42,0,0,0,787,430.22V100.53A12.54,12.54,0,0,0,774.47,88Z"/><path id="rect3318" class="cls-2" d="M254.14,116.34H746a12.29,12.29,0,0,1,12.49,12.08V412.9A12.29,12.29,0,0,1,746,425H254.14a12.29,12.29,0,0,1-12.49-12.08V128.42A12.29,12.29,0,0,1,254.14,116.34Z"/><g id="g2962"><path id="path3234" class="cls-3" d="M99.85,48.13h149.4L237.54,28.88c-7.68-12.62-27.63-22-63-22s-55.31,9.37-63,22Z"/><path id="path3234-9" class="cls-3" d="M99.85,80.51h149.4L237.54,61.26c-7.68-12.62-27.63-22-63-22s-55.31,9.37-63,22Z"/></g><path id="path2416" class="cls-4" d="M347.72,251.75A170.84,170.84,0,1,1,176.88,80.91,170.84,170.84,0,0,1,347.72,251.75Z"/><path id="path3208" class="cls-5" d="M449.05,397.88a108.4,108.4,0,1,1-108.4-108.4A108.4,108.4,0,0,1,449.05,397.88Z"/><g id="g2962-4"><path id="path3234-1" class="cls-3" d="M752.23,48.13H901.62l-11.7-19.25c-7.68-12.62-27.64-22-63-22s-55.32,9.37-63,22Z"/><path id="path3234-9-9" class="cls-3" d="M752.23,80.51H901.62l-11.7-19.25c-7.68-12.62-27.64-22-63-22s-55.32,9.37-63,22Z"/></g><path id="path3221" class="cls-4" d="M652.34,251.75A170.85,170.85,0,1,0,823.19,80.91,170.85,170.85,0,0,0,652.34,251.75Z"/><path id="path3219" class="cls-6" d="M788.12,125.49A12.55,12.55,0,0,0,775.58,138v66.05H709.39A12.41,12.41,0,0,0,697,216.61v70.28a12.41,12.41,0,0,0,12.39,12.53h66.19v66.06A12.54,12.54,0,0,0,788.12,378h70.27a12.41,12.41,0,0,0,12.4-12.53V299.42H937a12.41,12.41,0,0,0,12.39-12.53V216.61A12.41,12.41,0,0,0,937,204.08H870.79V138a12.42,12.42,0,0,0-12.4-12.54Z"/><rect id="rect3236" class="cls-7" x="398.09" y="256.64" width="52.43" height="30.04" rx="7.07"/><path id="path3242" class="cls-8" d="M532.22,185.55a35.76,35.76,0,1,1-35.76-35.76A35.76,35.76,0,0,1,532.22,185.55Z"/><path id="path3244" class="cls-9" d="M860.3,172.22a37.12,37.12,0,1,1-37.11-37.11A37.12,37.12,0,0,1,860.3,172.22Z"/><path id="path3246" class="cls-9" d="M860.3,331.87a37.12,37.12,0,1,1-37.11-37.11A37.11,37.11,0,0,1,860.3,331.87Z"/><path id="path3248" class="cls-9" d="M865.9,252.05A37.11,37.11,0,1,1,903,289.16,37.11,37.11,0,0,1,865.9,252.05Z"/><path id="path3250" class="cls-9" d="M706.25,252.05a37.11,37.11,0,1,1,37.11,37.11A37.11,37.11,0,0,1,706.25,252.05Z"/><path id="rect3214" class="cls-6" d="M141,123.32a12.53,12.53,0,0,0-12.54,12.54v66H62.28a12.41,12.41,0,0,0-12.39,12.53v70.28a12.41,12.41,0,0,0,12.39,12.53h66.19V363.3A12.54,12.54,0,0,0,141,375.84h70.27a12.43,12.43,0,0,0,12.4-12.54V297.25h66.19a12.41,12.41,0,0,0,12.39-12.53V214.44a12.41,12.41,0,0,0-12.39-12.53H223.68v-66a12.42,12.42,0,0,0-12.4-12.54Z"/><path id="path3289" class="cls-5" d="M764.81,397.88a108.4,108.4,0,1,1-108.39-108.4A108.39,108.39,0,0,1,764.81,397.88Z"/><g id="g3289"><path id="path3273" class="cls-2" d="M176.07,136.62l-17,16.19h34.1Z"/><path id="path3295" class="cls-2" d="M176.07,362.54l-17-16.2h34.1Z"/><path id="path3303" class="cls-2" d="M289,249.58l-16.19-17.05v34.1Z"/><path id="path3305" class="cls-2" d="M63.11,249.58l16.2-17.05v34.1Z"/></g><rect id="rect3236-7" class="cls-7" x="541.7" y="256.64" width="52.43" height="30.04" rx="7.07"/></g><g id="axes"><circle id="right" class="cls-10" cx="656.42" cy="397.88" r="73.05"/><circle id="left" class="cls-10" cx="340.65" cy="397.88" r="73.05"/></g><g id="buttons"><path id="_16" data-name="16" class="cls-11" d="M532.22,185.55a35.76,35.76,0,1,1-35.76-35.76A35.76,35.76,0,0,1,532.22,185.55Z"/><path id="_15" data-name="15" class="cls-11" d="M223.68,297.25h66.19a12.41,12.41,0,0,0,12.39-12.53V214.44a12.41,12.41,0,0,0-12.39-12.53H223.68Z"/><path id="_14" data-name="14" class="cls-11" d="M128.47,201.91H62.28a12.41,12.41,0,0,0-12.39,12.53v70.28a12.41,12.41,0,0,0,12.39,12.53h66.19Z"/><path id="_13" data-name="13" class="cls-11" d="M128.47,297.25V363.3A12.54,12.54,0,0,0,141,375.84h70.27a12.43,12.43,0,0,0,12.4-12.54V297.25Z"/><path id="_12" data-name="12" class="cls-11" d="M223.68,201.91v-66a12.42,12.42,0,0,0-12.4-12.54H141a12.53,12.53,0,0,0-12.54,12.54v66Z"/><path id="_11" data-name="11" class="cls-11" d="M729.46,397.88a73,73,0,1,1-73-73.05A73,73,0,0,1,729.46,397.88Z"/><path id="_10" data-name="10" class="cls-11" d="M413.7,397.88a73.05,73.05,0,1,1-73.05-73.05A73,73,0,0,1,413.7,397.88Z"/><rect id="_9" data-name="9" class="cls-12" x="541.7" y="256.64" width="52.43" height="30.04" rx="7.07"/><rect id="_8" data-name="8" class="cls-12" x="398.09" y="256.64" width="52.43" height="30.04" rx="7.07"/><path id="_7" data-name="7" class="cls-11" d="M826.93,39.27c21.29,0,37,3.4,47.79,8.86h26.9l-11.7-19.25c-7.68-12.62-27.64-22-63-22s-55.32,9.37-63,22L752.23,48.13h26.9C789.94,42.67,805.64,39.27,826.93,39.27Z"/><path id="_6" data-name="6" class="cls-11" d="M174.55,39.27c21.29,0,37,3.4,47.79,8.86h26.91L237.54,28.88c-7.68-12.62-27.63-22-63-22s-55.32,9.37-63,22L99.85,48.13h26.91C137.56,42.67,153.26,39.27,174.55,39.27Z"/><path id="_5" data-name="5" class="cls-11" d="M752.23,80.51H901.62l-11.7-19.25c-7.68-12.62-27.64-22-63-22s-55.32,9.37-63,22Z"/><path id="_4" data-name="4" class="cls-11" d="M99.85,80.51h149.4L237.54,61.26c-7.68-12.62-27.63-22-63-22s-55.31,9.37-63,22Z"/><path id="_3" data-name="3" class="cls-11" d="M860.3,172.22a37.12,37.12,0,1,1-37.11-37.11A37.12,37.12,0,0,1,860.3,172.22Z"/><path id="_2" data-name="2" class="cls-11" d="M706.25,252.05a37.11,37.11,0,1,1,37.11,37.11A37.11,37.11,0,0,1,706.25,252.05Z"/><path id="_1" data-name="1" class="cls-11" d="M865.9,252.05A37.11,37.11,0,1,1,903,289.16,37.11,37.11,0,0,1,865.9,252.05Z"/><path id="_0" data-name="0" class="cls-11" d="M860.3,331.87a37.12,37.12,0,1,1-37.11-37.11A37.11,37.11,0,0,1,860.3,331.87Z"/></g></svg>
\ No newline at end of file
diff --git a/style.css b/style.css
index 83bd16d..8771e26 100644
--- a/style.css
+++ b/style.css
@@ -80,7 +80,7 @@ p.text-display {
   box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
 }
 
-span.love {
+footer {
   display: block;
   position: absolute;
   bottom: 10px;
@@ -88,7 +88,7 @@ span.love {
   text-align: center;
 }
 
-span.love a {
+footer a {
   text-decoration: none;
   color: var(--love-text);
 }
@@ -101,6 +101,10 @@ span.love a {
   vertical-align: text-bottom;
 }
 
+.gamepad-display {
+  width: 66%;
+}
+
 /*
   Added New Card layout Css
 */

From 8489f5107e49914994da39673c4742be9beb3298 Mon Sep 17 00:00:00 2001
From: Louis Poirier <contact@louispoirier.io>
Date: Sat, 24 Jul 2021 19:09:16 +0200
Subject: [PATCH 2/4] Gamepad polyfill : implements a function to returns an
 array of gamepad compatible across browsers. UX : triggers notifications to
 warn user when a gamepad is already connected or when at least one gamepad is
 still connected. Fix SVG : implements a function to retrieve the gamepad SVG
 document. Documentation : adds types information for comments.

---
 scripts.js | 86 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 68 insertions(+), 18 deletions(-)

diff --git a/scripts.js b/scripts.js
index bec651f..5298789 100644
--- a/scripts.js
+++ b/scripts.js
@@ -310,9 +310,8 @@ function copyTextToClipboard(text) {
 
 /**
  * Utility function to set the HTML content of a card using stylesheet class.
- *
- * @param key of the card to update.
- * @param value to display.
+ * @param {string} key of the card to update.
+ * @param {string} value to display.
  */
 function updateCardItem(key, value) {
   document.querySelector(`.item-${key} .main-description`).innerHTML = value;
@@ -321,8 +320,7 @@ function updateCardItem(key, value) {
 /**
  * Show cards / elements for a given type of events.
  * Hide other cards / elements.
- *
- * @param type MUST be 'keyboard' or 'gamepad'.
+ * @param {'keyboard' | 'gamepad'} type of event cards to show.
  */
 function toggleEventCards(type) {
   const keyboard = document.querySelector('#keyboard');
@@ -468,14 +466,53 @@ function onCardClick() {
 
 // #region Gamepad Polyfill Methods
 
+/**
+ * Returns an array of [Gamepad]{@link Gamepad}.
+ *
+ * Note: some browsers implementations returns an object with a set of gamepad indexed by a key.
+ * This function ensure a consistent way to retrieve gamepads across browsers.
+ *
+ * @returns {(Gamepad | null)[]}
+ */
+function getGamepads() {
+  const data = navigator.getGamepads();
 
+  if (data instanceof Array) {
+    return data;
+  }
+  const gamepads = [];
+
+  for (let id of Object.keys(data)) {
+    if (data[id]) {
+      gamepads.push(data[id]);
+    }
+  }
+  return gamepads;
+}
+
+/**
+ * Returns true when at least one gamepad is still connected, false otherwise.
+ * @returns {boolean} true when at least one gamepad is still connected, false otherwise.
+ */
+function hasRemainingGamepad() {
+  const gamepads = getGamepads();
+
+  if (!gamepads) {
+    return false;
+  }
+  return gamepads.find(gamepad => !!gamepad && gamepad.connected) !== undefined;
+}
 
 // #endregion
 
 // #region Gamepad Event Listeners
 
 window.addEventListener('gamepadconnected', e => {
-  createNotification('Gamepad connected!');
+  if (!gamepad) {
+    createNotification('Gamepad connected!');
+  } else {
+    createNotification('Gamepad connected! Note that only events of the first gamepad will be displayed.');
+  }
   toggleEventCards('gamepad');
 
   updateCardItem('id', e.gamepad.id);
@@ -491,10 +528,11 @@ window.addEventListener('gamepadconnected', e => {
  * Update buttons states and axes positions accordingly.
  */
 function gamepadLoop() {
-  const gamepads = navigator.getGamepads();
+  const gamepads = getGamepads();
+  const node = getGamepadSvgDocument();
 
-  // Stop loop if no gamepads were found.
-  if (!gamepads) {
+  // Stop loop if no gamepads were found or gamepad svg document isn't loaded yet.
+  if (!gamepads || !node) {
     return;
   }
 
@@ -519,7 +557,11 @@ function gamepadLoop() {
   requestAnimationFrame(gamepadLoop);
 }
 
-window.addEventListener('gamepaddisconnected', e => {
+window.addEventListener('gamepaddisconnected', () => {
+  if (hasRemainingGamepad()) {
+    createNotification('Gamepad disconnected. Disconnect them all to use keyboard / touch events.');
+    return;
+  }
   createNotification('Gamepad disconnected.');
   resetEventCards();
 });
@@ -528,11 +570,17 @@ window.addEventListener('gamepaddisconnected', e => {
 
 // #region Gamepad Drawing Methods
 
+function getGamepadSvgDocument() {
+  const node = document.querySelector('.gamepad-display').contentDocument;
+
+  return node ? node.querySelector("svg") : null;
+}
+
 /**
  * Initialize inlined gamepad SVG.
  */
 function prepareGamepadDisplayOverlay() {
-  const gamepad = document.querySelector('.gamepad-display').contentDocument;
+  const gamepad = getGamepadSvgDocument();
   const color = (theme === 'dark') ? '#5b60ff' : '#b9e9ff';
 
   if (!gamepad) {
@@ -558,15 +606,14 @@ function prepareGamepadDisplayOverlay() {
 
 /**
  * Updates opacity of a button with given value.
- *
- * @param index of the button with standard mapping (see [Gamepad W3C Editor's draft]{@link https://w3c.github.io/gamepad/#remapping}).
- * @param value between 0.0 and 1.0.
+ * @param {number} index of the button with standard mapping (see [Gamepad W3C Editor's draft]{@link https://w3c.github.io/gamepad/#remapping}).
+ * @param {number} value between 0.0 and 1.0.
  */
 function updateGamepadButtonOverlay(index, value) {
-  const gamepad = document.querySelector('.gamepad-display').contentDocument;
+  const gamepad = getGamepadSvgDocument();
 
   gamepad.querySelector(`#buttons`).querySelectorAll(`#_${index}`).forEach(child => {
-    child.style.opacity = value;
+    child.style.opacity = `${value}`;
   });
 }
 
@@ -574,10 +621,13 @@ function updateGamepadButtonOverlay(index, value) {
  * Show joystick values with new one.
  * Updates joystick position with capped range.
  *
- * @param axes array with normalized values between 0.0 and 1.0.
+ * Note: a minimum threshold could be used to force the joystick position to be centered. It is not implemented on
+ * purpose to show user what real value to expect.
+ *
+ * @param {number[]} axes array with normalized values between 0.0 and 1.0.
  */
 function updateGamepadJoystickOverlay(axes) {
-  const gamepad = document.querySelector('.gamepad-display').contentDocument;
+  const gamepad = getGamepadSvgDocument();
   let label;
 
   label = `[${axes[0].toFixed(2)}, ${axes[1].toFixed(2)}]<br>`;

From 6af9989dea4462791a86815542567fbf498d6eb2 Mon Sep 17 00:00:00 2001
From: Louis Poirier <contact@louispoirier.io>
Date: Sat, 24 Jul 2021 21:52:00 +0200
Subject: [PATCH 3/4] Fix gamepad loop: waits for SVG document to be loaded
 before running through the gamepad listening loop. Improved UX: notifications
 are now readable using longer timeouts.

---
 scripts.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/scripts.js b/scripts.js
index 5298789..0463509 100644
--- a/scripts.js
+++ b/scripts.js
@@ -242,12 +242,13 @@ function drawNumberToCanvas(number) {
   link.href = data;
 }
 
-function createNotification(text) {
+function createNotification(text, timeout) {
+  timeout = (!timeout) ? '1500' : String(timeout);
   // eslint-disable-next-line no-undef
   new Noty({
     type: 'info',
     layout: 'topLeft',
-    timeout: '1500',
+    timeout: timeout,
     theme: 'metroui',
     progressBar: false,
     text,
@@ -511,7 +512,11 @@ window.addEventListener('gamepadconnected', e => {
   if (!gamepad) {
     createNotification('Gamepad connected!');
   } else {
-    createNotification('Gamepad connected! Note that only events of the first gamepad will be displayed.');
+    createNotification('Gamepad connected! Note that only events of the first gamepad will be displayed.', 3000);
+    return;
+  }
+  if (e.gamepad.mapping !== 'standard') {
+    createNotification('This gamepad mapping is not supported!', 3500);
   }
   toggleEventCards('gamepad');
 
@@ -531,8 +536,16 @@ function gamepadLoop() {
   const gamepads = getGamepads();
   const node = getGamepadSvgDocument();
 
-  // Stop loop if no gamepads were found or gamepad svg document isn't loaded yet.
-  if (!gamepads || !node) {
+  // Stop loop if no gamepads were found.
+  if (!gamepads) {
+    return;
+  }
+
+  // Retry if gamepad svg document isn't loaded yet.
+  if (!node) {
+    setTimeout(() => {
+      requestAnimationFrame(gamepadLoop);
+    }, 100);
     return;
   }
 
@@ -559,7 +572,7 @@ function gamepadLoop() {
 
 window.addEventListener('gamepaddisconnected', () => {
   if (hasRemainingGamepad()) {
-    createNotification('Gamepad disconnected. Disconnect them all to use keyboard / touch events.');
+    createNotification('Gamepad disconnected. Disconnect them all to use keyboard / touch events.', 3000);
     return;
   }
   createNotification('Gamepad disconnected.');

From f4d87f133d37ba6f2ff44c9f556f43d303506afe Mon Sep 17 00:00:00 2001
From: Louis Poirier <contact@louispoirier.io>
Date: Sat, 24 Jul 2021 22:00:11 +0200
Subject: [PATCH 4/4] Describes gamepad feature.

---
 README.md  | 4 +++-
 index.html | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 66a3d61..39c4f33 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
 
 ![](http://wes.io/sQyC/content.gif)
 
-A simple webpage that responds to the key pressed and returns the JavaScript 'on-key pressed' keycode.
+A simple webpage that :
+- responds to the key pressed and returns the JavaScript 'on-key pressed' keycode.
+- responds to gamepad events and returns the JavaScript button index and joystick positions.
 
 ## Help Out :ok_hand::ok_hand::ok_hand:
 
diff --git a/index.html b/index.html
index 9fe81c2..16d93ef 100644
--- a/index.html
+++ b/index.html
@@ -106,7 +106,7 @@
 
   <footer>
     <span class="love">Made with love by
-      <a href="https://wesbos.com" target="_blank" rel="noopener">Wes Bos</a> — fork or suggest edits on
+      <a href="https://wesbos.com" target="_blank" rel="noopener">Wes Bos</a> & <a href="https://louispoirier.io" target="_blank">Louis Poirier</a> — fork or suggest edits on
       <a href="https://github.com/wesbos/keycodes" target="_blank" rel="noopener">GitHub</a> —
 
       <a href="https://twitter.com/wesbos" class="twitter-follow-button" data-show-count="false" target="_blank" rel="noopener">Follow