switched to es6

This commit is contained in:
e7d 2017-05-14 10:08:03 +02:00
parent 5ee5a1f0a3
commit c12eb0c144
3 changed files with 330 additions and 303 deletions

View File

@ -47,7 +47,7 @@
</tr> </tr>
<tr> <tr>
<th><kbd>D</kbd></th> <th><kbd>D</kbd></th>
<td>Toggle debug mode</td> <td>Toggle debug mode for active gamepad</td>
</tr> </tr>
<tr> <tr>
<th><kbd>H</kbd></th> <th><kbd>H</kbd></th>
@ -63,5 +63,6 @@
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/gamepad.js"></script> <script src="js/gamepad.js"></script>
<script src="js/app.js"></script>
</body> </body>
</html> </html>

1
js/app.js Normal file
View File

@ -0,0 +1 @@
window.gamepad = new Gamepad();

View File

@ -1,5 +1,5 @@
$.urlParam = function(name) { $.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); let results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results === null) { if (results === null) {
return null; return null;
} else { } else {
@ -7,323 +7,348 @@ $.urlParam = function(name) {
} }
}; };
var haveEvents = 'ongamepadconnected' in window; class Gamepad {
var debug = false; constructor() {
var scanGamepadsDelay = 1000; this.haveEvents = 'ongamepadconnected' in window;
var gamepads = {}; this.debug = false;
var $gamepad = $('.gamepad'); this.scanGamepadsDelay = 1000;
var $nogamepad = $('.no-gamepad'); this.gamepads = {};
var $debug = $('.debug'); this.$gamepad = $('.gamepad');
var $help = $('.help'); this.$nogamepad = $('.no-gamepad');
var gamepadIdentifiers = { this.$debug = $('.debug');
'debug': { this.$help = $('.help');
'id': /debug/, this.gamepadIdentifiers = {
'colors': [] 'debug': {
}, 'id': /debug/,
'ds4': { 'colors': []
'id': /054c.*?05c4/, },
'colors': ['black', 'white', 'red', 'blue'] 'ds4': {
}, 'id': /054c.*?05c4/,
'xbox-one': { 'colors': ['black', 'white', 'red', 'blue']
'id': /xinput|XInput/, },
'colors': ['black', 'white'] 'xbox-one': {
} 'id': /xinput|XInput/,
}; 'colors': ['black', 'white']
var gamepadHelpTimeout = null;
var gamepadHelpDelay = 5000;
var activeGamepadIndex = null;
var activeGamepadType = null;
var activeGamepadIdentifier = null;
var activeGamepadColorIndex = null;
var activeGamepadColorName = null;
var activeGamepadZoomLevel = 1;
var mapping = {
buttons: [],
axes: []
};
window.addEventListener("gamepadconnected", onGamepadConnect);
window.addEventListener("gamepaddisconnected", onGamepadDisconnect);
window.addEventListener("keydown", onKeyDown);
displayGamepadHelp();
function displayGamepadHelp() {
gamepadHelpTimeout = window.setTimeout(function() {
$nogamepad.fadeIn();
}, gamepadHelpDelay);
}
function hideGamepadHelp() {
window.clearTimeout(gamepadHelpTimeout);
$nogamepad.hide();
}
function onGamepadConnect(e) {
addGamepad(e.gamepad);
}
function onGamepadDisconnect(e) {
removeGamepad(e.gamepad.index);
}
function onKeyDown(e) {
switch (e.code) {
case "Delete":
case "Escape":
removeGamepad(activeGamepadIndex);
break;
case "KeyC":
changeGamepadColor();
break;
case "KeyD":
toggleDebug();
break;
case "KeyH":
toggleHelp();
break;
case "NumpadAdd":
case "Equal":
changeZoom("+");
break;
case "NumpadSubtract":
case "Minus":
changeZoom("-");
break;
case "Numpad0":
case "Digit0":
changeZoom("0");
break;
}
}
function getGamepads() {
return navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
}
function addGamepad(gamepad) {
gamepads[gamepad.index] = gamepad;
}
function removeGamepad(gamepadIndex) {
if (gamepadIndex === activeGamepadIndex) {
activeGamepadIndex = null;
$gamepad.empty();
}
delete gamepads[gamepadIndex];
displayGamepadHelp();
}
setInterval(scanGamepads, scanGamepadsDelay);
function scanGamepads() {
if (null !== activeGamepadIndex) {
return;
}
gamepads = getGamepads();
for (var gamepadIndex = 0; gamepadIndex < gamepads.length; gamepadIndex++) {
var gamepad = gamepads[gamepadIndex];
if (gamepad) {
if (gamepad.index in gamepads) {
gamepads[gamepad.index] = gamepad;
} }
};
this.gamepadHelpTimeout = null;
this.gamepadHelpDelay = 5000;
this.activeGamepadIndex = null;
this.activeGamepadType = null;
this.activeGamepadIdentifier = null;
this.activeGamepadColorIndex = null;
this.activeGamepadColorName = null;
this.activeGamepadZoomLevel = 1;
this.mapping = {
buttons: [],
axes: []
};
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) { window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this));
button = gamepad.buttons[buttonIndex]; window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this));
if (null === activeGamepadIndex && button.pressed) { window.addEventListener("keydown", this.onKeyDown.bind(this));
mapGamepad(gamepad.index);
window.setInterval(this.scanGamepads.bind(this), this.scanGamepadsDelay);
this.displayGamepadHelp();
}
displayGamepadHelp() {
this.gamepadHelpTimeout = window.setTimeout(() => {
this.$nogamepad.fadeIn();
}, this.gamepadHelpDelay);
}
hideGamepadHelp() {
window.clearTimeout(this.gamepadHelpTimeout);
this.$nogamepad.hide();
}
onGamepadConnect(e) {
this.addGamepad(e.gamepad);
}
onGamepadDisconnect(e) {
this.removeGamepad(e.gamepad.index);
}
onKeyDown(e) {
switch (e.code) {
case "Delete":
case "Escape":
this.removeGamepad();
break;
case "KeyC":
this.changeGamepadColor();
break;
case "KeyD":
this.toggleDebug();
break;
case "KeyH":
this.toggleHelp();
break;
case "NumpadAdd":
case "Equal":
this.changeZoom("+");
break;
case "NumpadSubtract":
case "Minus":
this.changeZoom("-");
break;
case "Numpad0":
case "Digit0":
this.changeZoom("0");
break;
}
}
getGamepads() {
return navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
}
getActiveGamepad() {
if (null === this.activeGamepadIndex) {
return null;
}
return this.gamepads[this.activeGamepadIndex];
}
addGamepad(gamepad) {
this.gamepads[gamepad.index] = gamepad;
}
removeGamepad(gamepadIndex) {
if (!gamepadIndex || gamepadIndex === this.activeGamepadIndex) {
this.activeGamepadIndex = null;
this.$gamepad.empty();
}
delete this.gamepads[gamepadIndex];
this.displayGamepadHelp();
this.debug = false;
}
scanGamepads() {
if (null !== this.activeGamepadIndex) {
return;
}
this.gamepads = this.getGamepads();
for (let gamepadIndex = 0; gamepadIndex < this.gamepads.length; gamepadIndex++) {
const gamepad = this.gamepads[gamepadIndex];
if (gamepad) {
if (gamepad.index in this.gamepads) {
this.gamepads[gamepad.index] = gamepad;
}
let button;
for (let buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
button = gamepad.buttons[buttonIndex];
if (null === this.activeGamepadIndex && button.pressed) {
this.mapGamepad(gamepad.index);
}
} }
} }
} }
} }
}
function mapGamepad(gamepadIndex) { mapGamepad(gamepadIndex) {
activeGamepadIndex = gamepadIndex; this.removeGamepad();
var gamepad = gamepads[gamepadIndex];
var button; this.activeGamepadIndex = gamepadIndex;
var axis; const gamepad = this.gamepads[this.activeGamepadIndex];
hideGamepadHelp(); let button;
let axis;
if (debug) { this.hideGamepadHelp();
activeGamepadType = 'debug';
activeGamepadIdentifier = gamepadIdentifiers[activeGamepadType];
activeGamepadColorIndex = 0;
} else {
for (var gamepadType in gamepadIdentifiers) {
if (gamepadIdentifiers[gamepadType].id.test(gamepad.id)) {
activeGamepadType = gamepadType;
activeGamepadIdentifier = gamepadIdentifiers[gamepadType];
activeGamepadColorIndex = 0;
}
}
}
$.ajax( if (this.debug) {
'templates/' + activeGamepadType + '/template.html', { this.activeGamepadType = 'debug';
async: true this.activeGamepadIdentifier = this.gamepadIdentifiers[this.activeGamepadType];
} this.activeGamepadColorIndex = 0;
).done(function(template) {
$gamepad.html(template);
if ($.urlParam('color')) {
changeGamepadColor($.urlParam('color'));
}
if ($.urlParam('c')) {
changeGamepadColor($.urlParam('c'));
}
if ($.urlParam('zoom')) {
changeZoom($.urlParam('zoom'));
}
if ($.urlParam('z')) {
changeZoom($.urlParam('z'));
}
mapping.buttons = [];
for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
button = gamepad.buttons[buttonIndex];
mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']');
}
mapping.axes = [];
for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
axis = gamepad.axes[axisIndex];
mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
}
updateVisualStatus();
});
}
function updateVisualStatus() {
if (null === activeGamepadIndex) {
return;
}
gamepads = getGamepads();
var activeGamepad = gamepads[activeGamepadIndex];
if (!activeGamepad) {
return;
}
requestAnimationFrame(updateVisualStatus);
var button;
var $button;
for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
$button = mapping.buttons[buttonIndex];
if (!$button) {
break;
}
button = activeGamepad.buttons[buttonIndex];
$button.attr('data-pressed', button.pressed);
$button.attr('data-value', button.value);
if ("function" === typeof updateButton) {
updateButton($button);
}
}
var axis;
var $axis;
for (var axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
$axis = mapping.axes[axisIndex];
if (!$axis) {
break;
}
axis = activeGamepad.axes[axisIndex];
if ($axis.is('[data-axis=' + axisIndex + ']')) {
$axis.attr('data-value', axis);
}
if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
$axis.attr('data-value-x', axis);
}
if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
$axis.attr('data-value-y', axis);
}
if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
$axis.attr('data-value-z', axis);
}
if ("function" === typeof updateAxis) {
updateAxis($axis);
}
}
}
function changeGamepadColor(gamepadColor) {
if (! activeGamepadIdentifier) {
return;
}
if (!! gamepadColor) {
if (! isNaN(parseInt(gamepadColor))) {
activeGamepadColorIndex = gamepadColor;
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex];
} else { } else {
activeGamepadColorName = gamepadColor; for (let gamepadType in this.gamepadIdentifiers) {
activeGamepadColorIndex = 0; if (this.gamepadIdentifiers[gamepadType].id.test(gamepad.id)) {
for (var gamepadColorName in activeGamepadIdentifier.colors) { this.activeGamepadType = gamepadType;
if (activeGamepadColorName === gamepadColorName) { this.activeGamepadIdentifier = this.gamepadIdentifiers[gamepadType];
break; this.activeGamepadColorIndex = 0;
} }
activeGamepadColorIndex++;
} }
} }
} else {
activeGamepadColorIndex++; $.ajax(
if (activeGamepadColorIndex > activeGamepadIdentifier.colors.length - 1) { 'templates/' + this.activeGamepadType + '/template.html', {
activeGamepadColorIndex = 0; async: true
}
).done((template) => {
this.$gamepad.html(template);
if ($.urlParam('color')) {
this.changeGamepadColor($.urlParam('color'));
}
if ($.urlParam('c')) {
this.changeGamepadColor($.urlParam('c'));
}
if ($.urlParam('zoom')) {
this.changeZoom($.urlParam('zoom'));
}
if ($.urlParam('z')) {
this.changeZoom($.urlParam('z'));
}
this.mapping.buttons = [];
for (let buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
button = gamepad.buttons[buttonIndex];
this.mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']');
}
this.mapping.axes = [];
for (let axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
axis = gamepad.axes[axisIndex];
this.mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
}
this.updateVisualStatus();
});
}
updateVisualStatus() {
if (null === this.activeGamepadIndex) {
return;
} }
activeGamepadColorName = activeGamepadIdentifier.colors[activeGamepadColorIndex]; this.gamepads = this.getGamepads();
const activeGamepad = this.gamepads[this.activeGamepadIndex];
if (!activeGamepad) {
return;
}
requestAnimationFrame(this.updateVisualStatus.bind(this));
let button;
let $button;
for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
$button = this.mapping.buttons[buttonIndex];
if (!$button) {
break;
}
button = activeGamepad.buttons[buttonIndex];
$button.attr('data-pressed', button.pressed);
$button.attr('data-value', button.value);
if ("function" === typeof this.updateButton) {
this.updateButton($button);
}
}
let axis;
let $axis;
for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
$axis = this.mapping.axes[axisIndex];
if (!$axis) {
break;
}
axis = activeGamepad.axes[axisIndex];
if ($axis.is('[data-axis=' + axisIndex + ']')) {
$axis.attr('data-value', axis);
}
if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
$axis.attr('data-value-x', axis);
}
if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
$axis.attr('data-value-y', axis);
}
if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
$axis.attr('data-value-z', axis);
}
if ("function" === typeof this.updateAxis) {
this.updateAxis($axis);
}
}
} }
$gamepad.attr('data-color', activeGamepadColorName); changeGamepadColor(gamepadColor) {
} if (!this.activeGamepadIdentifier) {
return;
function changeZoom(zoomLevel) { }
if (! activeGamepadIdentifier) {
return; if (!gamepadColor) {
} this.activeGamepadColorIndex++;
if (this.activeGamepadColorIndex > this.activeGamepadIdentifier.colors.length - 1) {
if (! zoomLevel) { this.activeGamepadColorIndex = 0;
return; }
}
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[this.activeGamepadColorIndex];
if ('0' === zoomLevel) { } else {
activeGamepadZoomLevel = 1; if (! isNaN(parseInt(gamepadColor))) {
} this.activeGamepadColorIndex = gamepadColor;
else if ('+' === zoomLevel && activeGamepadZoomLevel < 2) { this.activeGamepadColorName = this.activeGamepadIdentifier.colors[this.activeGamepadColorIndex];
activeGamepadZoomLevel += 0.1; } else {
} this.activeGamepadColorName = gamepadColor;
else if ('-' === zoomLevel && activeGamepadZoomLevel > 0.2) { this.activeGamepadColorIndex = 0;
activeGamepadZoomLevel -= 0.1; for (let gamepadColorName in this.activeGamepadIdentifier.colors) {
} if (this.activeGamepadColorName === gamepadColorName) {
else if (! isNaN(zoomLevel = parseFloat(zoomLevel))) { break;
activeGamepadZoomLevel = zoomLevel; }
} this.activeGamepadColorIndex++;
}
// hack: fix js float issues }
activeGamepadZoomLevel = +activeGamepadZoomLevel.toFixed(1); }
$gamepad.css('transform', 'translate(-50%, -50%) scale(' + activeGamepadZoomLevel + ', ' + activeGamepadZoomLevel + ')'); this.$gamepad.attr('data-color', this.activeGamepadColorName);
} }
function toggleHelp(zoomLevel) { changeZoom(zoomLevel) {
$help.toggleClass('active'); if (!this.activeGamepadIdentifier) {
} return;
}
function toggleDebug() {
debug = !debug; if (!zoomLevel) {
return;
// remap current gamepad }
mapGamepad(activeGamepadIndex);
if ('0' === zoomLevel) {
this.activeGamepadZoomLevel = 1;
}
else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) {
this.activeGamepadZoomLevel += 0.1;
}
else if ('-' === zoomLevel && this.activeGamepadZoomLevel > 0.2) {
this.activeGamepadZoomLevel -= 0.1;
}
else if (! isNaN(zoomLevel = parseFloat(zoomLevel))) {
this.activeGamepadZoomLevel = zoomLevel;
}
// hack: fix js float issues
this.activeGamepadZoomLevel = +this.activeGamepadZoomLevel.toFixed(1);
this.$gamepad.css(
'transform',
'translate(-50%, -50%) scale(' + this.activeGamepadZoomLevel + ', ' + this.activeGamepadZoomLevel + ')'
);
}
toggleHelp(zoomLevel) {
this.$help.toggleClass('active');
}
toggleDebug() {
if (null === this.activeGamepadIndex) {
return;
}
this.debug = !this.debug;
// remap current gamepad
this.removeGamepad();
this.mapGamepad(this.activeGamepadIndex);
}
} }