add a detected gamepads list in help

This commit is contained in:
e7d 2019-05-07 15:12:07 +02:00
parent cdd2794cb9
commit e2f4509a91
2 changed files with 44 additions and 7 deletions

View File

@ -14,14 +14,29 @@
</head> </head>
<body> <body>
<div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div> <div id="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
<div class="gamepad"></div> <div id="gamepad"></div>
<div class="help"> <div id="help">
<h2>Help</h2> <h2>Help</h2>
<h3>Instructions</h3> <h3>Instructions</h3>
<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p> <p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p>
<h3>Detected Controllers</h3>
<table id="gamepad-list">
<thead>
<tr>
<th>Index</th>
<th>Controller ID</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No gamepad detected.</td>
</tr>
</tbody>
</table>
<h3>Keyboard shortcuts</h3> <h3>Keyboard shortcuts</h3>
<table> <table>
<thead> <thead>

View File

@ -12,10 +12,10 @@ class Gamepad {
// cached DOM references // cached DOM references
this.$body = $('body'); this.$body = $('body');
this.$gamepad = $('.gamepad'); this.$gamepad = $('#gamepad');
this.$nogamepad = $('.no-gamepad'); this.$nogamepad = $('#no-gamepad');
this.$debug = $('.debug'); this.$help = $('#help');
this.$help = $('.help'); this.$gamepadList = $('#gamepad-list');
this.backgroundColors = ['transparent', 'dimgrey', 'black', 'lime', 'magenta']; this.backgroundColors = ['transparent', 'dimgrey', 'black', 'lime', 'magenta'];
this.backgroundColorIndex = 0; this.backgroundColorIndex = 0;
@ -190,6 +190,28 @@ class Gamepad {
for (let key in navigatorGamepads) { for (let key in navigatorGamepads) {
this.gamepads[key] = navigatorGamepads[key]; 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('<tr><td>' + gamepad.index + '</td><td>' + gamepad.id + '</td></tr>');
}
if ($tbody.length === 0) {
$tbody.push('<tr><td colspan="2">No gamepad detected.</td></tr>');
}
this.$gamepadList.html($tbody.join(''));
} }
/** /**