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

+ + + + + + + + + + + + +
IndexController 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(''); + } + if ($tbody.length === 0) { + $tbody.push(''); + } + + this.$gamepadList.html($tbody.join('')); } /**
' + gamepad.index + '' + gamepad.id + '
No gamepad detected.