diff --git a/index.html b/index.html
index 5fea09c..f6f7be5 100644
--- a/index.html
+++ b/index.html
@@ -14,14 +14,29 @@
- No active gamepad detected. Press H to read instructions.
-
-
+
No active gamepad detected. Press H to read instructions.
+
+
Help
Instructions
Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.
+
Detected Controllers
+
+
+
+ Index |
+ Controller ID |
+
+
+
+
+ No gamepad detected. |
+
+
+
+
Keyboard shortcuts
diff --git a/js/gamepad.js b/js/gamepad.js
index f8f23a4..5cf9832 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -12,10 +12,10 @@ class Gamepad {
// cached DOM references
this.$body = $('body');
- this.$gamepad = $('.gamepad');
- this.$nogamepad = $('.no-gamepad');
- this.$debug = $('.debug');
- this.$help = $('.help');
+ this.$gamepad = $('#gamepad');
+ this.$nogamepad = $('#no-gamepad');
+ this.$help = $('#help');
+ this.$gamepadList = $('#gamepad-list');
this.backgroundColors = ['transparent', 'dimgrey', 'black', 'lime', 'magenta'];
this.backgroundColorIndex = 0;
@@ -190,6 +190,28 @@ class Gamepad {
for (let key in navigatorGamepads) {
this.gamepads[key] = navigatorGamepads[key];
}
+
+ this.buildHelpGamepadList();
+ }
+
+ /**
+ * Builds the help gamepad list
+ */
+ buildHelpGamepadList() {
+ const $tbody = [];
+ for (let key in this.gamepads) {
+ const gamepad = this.gamepads[key];
+ if (!gamepad) {
+ continue;
+ }
+
+ $tbody.push('' + gamepad.index + ' | ' + gamepad.id + ' |
');
+ }
+ if ($tbody.length === 0) {
+ $tbody.push('No gamepad detected. |
');
+ }
+
+ this.$gamepadList.html($tbody.join(''));
}
/**