add a detected gamepads list in help
This commit is contained in:
parent
cdd2794cb9
commit
e2f4509a91
21
index.html
21
index.html
@ -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>
|
||||||
|
@ -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(''));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
x
Reference in New Issue
Block a user