multiple fixes and code simplification
This commit is contained in:
e7d
parent
86e71288db
commit
236a4fdfed
@ -87,7 +87,7 @@
|
||||
</div>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/gamepad-demo.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
<script src="js/gamepad.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
/**
|
||||
* The Gamepad demo class
|
||||
*
|
||||
* @class GamepadDemo
|
||||
* @class Demo
|
||||
*/
|
||||
class GamepadDemo {
|
||||
class Demo {
|
||||
/**
|
||||
* Creates an instance of GamepadDemo.
|
||||
* Creates an instance of Demo.
|
||||
*
|
||||
* @param Gamepad gamepad
|
||||
*/
|
||||
417
js/gamepad.js
417
js/gamepad.js
@ -8,7 +8,7 @@ class Gamepad {
|
||||
* Creates an instance of Gamepad.
|
||||
*/
|
||||
constructor() {
|
||||
this.gamepadDemo = new GamepadDemo(this);
|
||||
this.demo = new Demo(this);
|
||||
|
||||
// cached DOM references
|
||||
this.$body = $("body");
|
||||
@ -25,17 +25,16 @@ class Gamepad {
|
||||
"lime",
|
||||
"magenta",
|
||||
];
|
||||
this.backgroundColorIndex = 0;
|
||||
|
||||
// gamepad collection default values
|
||||
this.gamepads = {};
|
||||
this.gamepadIdentifiers = {
|
||||
"debug": {
|
||||
this.identifiers = {
|
||||
debug: {
|
||||
id: /debug/,
|
||||
name: "Debug",
|
||||
colors: [],
|
||||
},
|
||||
"ds4": {
|
||||
ds4: {
|
||||
id: /054c.*?05c4/,
|
||||
name: "DualShock 4",
|
||||
colors: ["black", "white", "red", "blue"],
|
||||
@ -53,19 +52,21 @@ class Gamepad {
|
||||
};
|
||||
|
||||
// gamepad help default values
|
||||
this.gamepadHelpTimeout = null;
|
||||
this.gamepadHelpDelay = 5000;
|
||||
this.helpTimeout = null;
|
||||
this.helpDelay = 5000;
|
||||
|
||||
// active gamepad default values
|
||||
this.scanGamepadsDelay = 500;
|
||||
this.scanDelay = 500;
|
||||
this.debug = false;
|
||||
this.activeGamepadIndex = null;
|
||||
this.activeGamepadType = null;
|
||||
this.activeGamepadIdentifier = null;
|
||||
this.activeGamepadColorIndex = null;
|
||||
this.activeGamepadColorName = null;
|
||||
this.activeGamepadZoomMode = "manual";
|
||||
this.activeGamepadZoomLevel = 1;
|
||||
this.index = null;
|
||||
this.type = null;
|
||||
this.identifier = null;
|
||||
this.timestamp = null;
|
||||
this.backgroundColorIndex = 0;
|
||||
this.colorIndex = null;
|
||||
this.colorName = null;
|
||||
this.zoomMode = "manual";
|
||||
this.zoomLevel = 1;
|
||||
this.mapping = {
|
||||
buttons: [],
|
||||
axes: [],
|
||||
@ -92,10 +93,7 @@ class Gamepad {
|
||||
window.addEventListener("resize", this.onResize.bind(this));
|
||||
|
||||
// bind a gamepads scan
|
||||
window.setInterval(
|
||||
this.scanGamepads.bind(this),
|
||||
this.scanGamepadsDelay
|
||||
);
|
||||
window.setInterval(this.scan.bind(this), this.scanDelay);
|
||||
|
||||
// read URI for display parameters to initalize
|
||||
this.params = {
|
||||
@ -110,30 +108,26 @@ class Gamepad {
|
||||
if (this.params.background) {
|
||||
for (let i = 0; i < this.backgroundColors.length; i++) {
|
||||
if (this.params.background === this.backgroundColors[i]) {
|
||||
this.backgroundColorIndex = i;
|
||||
this.index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.backgroundColorIndex) {
|
||||
if (!this.index) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$body.css(
|
||||
"background",
|
||||
this.backgroundColors[this.backgroundColorIndex]
|
||||
);
|
||||
this.$body.css("background", this.backgroundColors[this.index]);
|
||||
}
|
||||
|
||||
// start the demo if requested by params
|
||||
if (this.params.demo) {
|
||||
this.gamepadDemo.start(this.params.demo);
|
||||
|
||||
this.demo.start(this.params.demo);
|
||||
return;
|
||||
}
|
||||
|
||||
// by default, enqueue a delayed display of the help modal
|
||||
this.displayGamepadHelp();
|
||||
this.displayHelp();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -155,19 +149,17 @@ class Gamepad {
|
||||
/**
|
||||
* Displays the help modal on screen
|
||||
*/
|
||||
displayGamepadHelp() {
|
||||
displayHelp() {
|
||||
// do not display help if we have an active gamepad
|
||||
if (null !== this.activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if (null !== this.index) return;
|
||||
|
||||
// cancel the queued display of the help modal, if any
|
||||
window.clearTimeout(this.gamepadHelpTimeout);
|
||||
window.clearTimeout(this.helpTimeout);
|
||||
// hide the help modal
|
||||
this.$nogamepad.show();
|
||||
|
||||
// enqueue a delayed display of the help modal
|
||||
this.hideGamepadHelp();
|
||||
this.hideHelp();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -175,16 +167,16 @@ class Gamepad {
|
||||
*
|
||||
* @param {boolean} [hideNow=false]
|
||||
*/
|
||||
hideGamepadHelp(hideNow = false) {
|
||||
hideHelp(hideNow = false) {
|
||||
// hide the message right away if needed
|
||||
if (hideNow) {
|
||||
this.$nogamepad.hide();
|
||||
}
|
||||
|
||||
// hide help modal if no gamepad is active after X ms
|
||||
this.gamepadHelpTimeout = window.setTimeout(() => {
|
||||
this.helpTimeout = window.setTimeout(() => {
|
||||
this.$nogamepad.fadeOut();
|
||||
}, this.gamepadHelpDelay);
|
||||
}, this.helpDelay);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -193,8 +185,8 @@ class Gamepad {
|
||||
* @param {GamepadEvent} e
|
||||
*/
|
||||
onGamepadConnect(e) {
|
||||
// on gamepad connection, add it to the list
|
||||
this.addGamepad(e.gamepad);
|
||||
// on gamepad connection, refresh available gamepads list
|
||||
this.refresh(e.gamepad);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -204,7 +196,7 @@ class Gamepad {
|
||||
*/
|
||||
onGamepadDisconnect(e) {
|
||||
// on gamepad disconnection, remove it from the list
|
||||
this.removeGamepad(e.gamepad.index);
|
||||
this.disconnect(e.gamepad.index);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -213,7 +205,7 @@ class Gamepad {
|
||||
* @param {MouseEvent} e
|
||||
*/
|
||||
onMouseMove() {
|
||||
this.displayGamepadHelp();
|
||||
this.displayHelp();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -225,7 +217,7 @@ class Gamepad {
|
||||
switch (e.code) {
|
||||
case "Delete":
|
||||
case "Escape":
|
||||
this.removeGamepad(true);
|
||||
this.disconnect(true);
|
||||
break;
|
||||
case "KeyB":
|
||||
this.changeBackgroundColor();
|
||||
@ -240,7 +232,7 @@ class Gamepad {
|
||||
this.toggleHelp();
|
||||
break;
|
||||
case "KeyO":
|
||||
this.gamepadDemo.start();
|
||||
this.demo.start();
|
||||
break;
|
||||
case "NumpadAdd":
|
||||
case "Equal":
|
||||
@ -251,7 +243,7 @@ class Gamepad {
|
||||
this.changeZoom("-");
|
||||
break;
|
||||
case "NumpadDecimal":
|
||||
this.autoAdjustZoom(1);
|
||||
this.adjustZoom(1);
|
||||
break;
|
||||
case "Numpad0":
|
||||
case "Digit0":
|
||||
@ -266,7 +258,7 @@ class Gamepad {
|
||||
* @param {WindowEvent} e
|
||||
*/
|
||||
onResize(e) {
|
||||
if (this.activeGamepadZoomMode === "auto") this.autoAdjustZoom(1);
|
||||
if (this.zoomMode === "auto") this.adjustZoom(1);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -283,7 +275,7 @@ class Gamepad {
|
||||
/**
|
||||
* Reloads gamepads data
|
||||
*/
|
||||
refreshGamepads() {
|
||||
refresh() {
|
||||
// get fresh information from DOM about gamepads
|
||||
this.gamepads = this.getNavigatorGamepads();
|
||||
|
||||
@ -315,16 +307,16 @@ class Gamepad {
|
||||
/**
|
||||
* Return the connected gamepad
|
||||
*/
|
||||
getActiveGamepad() {
|
||||
return this.gamepads[this.activeGamepadIndex];
|
||||
getActive() {
|
||||
return this.gamepads[this.index];
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the gamepad type for the connected gamepad
|
||||
*
|
||||
* @param {object} activeGamepad
|
||||
* @param {object} gamepad
|
||||
*/
|
||||
getActiveGamepadType(activeGamepad) {
|
||||
getType(gamepad) {
|
||||
if (this.debug) {
|
||||
// if the debug option is active, use the associated template
|
||||
return "debug";
|
||||
@ -336,76 +328,26 @@ class Gamepad {
|
||||
}
|
||||
|
||||
// else, determine the template to use from the gamepad identifier
|
||||
for (let gamepadType in this.gamepadIdentifiers) {
|
||||
if (
|
||||
this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)
|
||||
) {
|
||||
for (let gamepadType in this.identifiers) {
|
||||
if (this.identifiers[gamepadType].id.test(gamepad.id)) {
|
||||
return gamepadType;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a gamepad to the gamepads collection
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*/
|
||||
addGamepad(gamepad) {
|
||||
this.gamepads[gamepad.index] = gamepad;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a gamepad to the gamepads collection
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*/
|
||||
removeGamepad(gamepadIndex) {
|
||||
// ensure we have an index to remove
|
||||
if ("undefined" === typeof gamepadIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ensure to kill demo mode
|
||||
if ("demo" === this.activeGamepadIndex) {
|
||||
this.gamepadDemo.stop();
|
||||
}
|
||||
|
||||
// if this is the active gamepad
|
||||
if (true === gamepadIndex || this.activeGamepadIndex === gamepadIndex) {
|
||||
// clear associated date
|
||||
this.activeGamepadIndex = null;
|
||||
this.activeGamepadType = null;
|
||||
this.activeGamepadIdentifier = null;
|
||||
this.activeGamepadColorIndex = null;
|
||||
this.activeGamepadColorName = null;
|
||||
this.activeGamepadZoomLevel = 1;
|
||||
this.$gamepad.empty();
|
||||
}
|
||||
delete this.gamepads[gamepadIndex];
|
||||
|
||||
// enqueue a display of the help modal
|
||||
this.displayGamepadHelp();
|
||||
this.debug = false;
|
||||
return "debug";
|
||||
}
|
||||
|
||||
/**
|
||||
* Scans gamepads for activity
|
||||
*/
|
||||
scanGamepads() {
|
||||
scan() {
|
||||
// don't scan if we have an active gamepad
|
||||
if (null !== this.activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if (null !== this.index) return;
|
||||
|
||||
// refresh gamepad information
|
||||
this.refreshGamepads();
|
||||
this.refresh();
|
||||
|
||||
for (
|
||||
let gamepadIndex = 0;
|
||||
gamepadIndex < this.gamepads.length;
|
||||
gamepadIndex++
|
||||
) {
|
||||
const gamepad = this.gamepads[gamepadIndex];
|
||||
for (let index = 0; index < this.gamepads.length; index++) {
|
||||
const gamepad = this.gamepads[index];
|
||||
if (!gamepad) continue;
|
||||
|
||||
// read the gamepad buttons
|
||||
@ -419,7 +361,7 @@ class Gamepad {
|
||||
|
||||
// if one of its button is pressed, activate this gamepad
|
||||
if (button.pressed) {
|
||||
this.mapGamepad(gamepad.index);
|
||||
this.map(gamepad.index);
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -429,62 +371,87 @@ class Gamepad {
|
||||
/**
|
||||
* Sets a gamepad as active from its index
|
||||
*
|
||||
* @param {int} gamepadIndex
|
||||
* @param {int} index
|
||||
*/
|
||||
mapGamepad(gamepadIndex) {
|
||||
map(index) {
|
||||
// ensure a gamepad need to be mapped
|
||||
if ("undefined" === typeof gamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if ("undefined" === typeof index) return;
|
||||
|
||||
// hide the help message
|
||||
this.hideGamepadHelp(true);
|
||||
// hide the help messages
|
||||
this.hideHelp(true);
|
||||
this.$help.removeClass("active");
|
||||
|
||||
// update local references
|
||||
this.activeGamepadIndex = gamepadIndex;
|
||||
const activeGamepad = this.getActiveGamepad();
|
||||
this.index = index;
|
||||
const gamepad = this.getActive();
|
||||
|
||||
// ensure that a gamepad was actually found for this index
|
||||
if (!activeGamepad) {
|
||||
if (!gamepad) {
|
||||
// this mapping request was probably a mistake :
|
||||
// - remove the active gamepad index and reference
|
||||
this.activeGamepadIndex = null;
|
||||
this.index = null;
|
||||
// - enqueue a display of the help modal right away
|
||||
this.displayGamepadHelp(true);
|
||||
this.displayHelp(true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// determine gamepad type
|
||||
this.activeGamepadType = this.getActiveGamepadType(activeGamepad);
|
||||
this.activeGamepadIdentifier = this.gamepadIdentifiers[
|
||||
this.activeGamepadType
|
||||
];
|
||||
this.activeGamepadColorIndex = 0;
|
||||
this.type = this.getType(gamepad);
|
||||
this.identifier = this.identifiers[this.type];
|
||||
this.colorIndex = 0;
|
||||
// ensure a valid gamepad type was discovered
|
||||
if (!this.activeGamepadType) {
|
||||
return;
|
||||
}
|
||||
if (!this.type) return;
|
||||
|
||||
// load the HTML template file
|
||||
this.loadTemplate(activeGamepad);
|
||||
this.loadTemplate(gamepad);
|
||||
|
||||
// hide the help before displaying the template
|
||||
this.hideGamepadHelp();
|
||||
this.hideHelp();
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnect the active gamepad
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*/
|
||||
disconnect(index) {
|
||||
// ensure we have an index to remove
|
||||
if ("undefined" === typeof index) return;
|
||||
|
||||
// ensure to kill demo mode
|
||||
if ("demo" === this.index) {
|
||||
this.demo.stop();
|
||||
}
|
||||
|
||||
// if this is the active gamepad
|
||||
if (true === index || this.index === index) {
|
||||
// clear associated date
|
||||
this.index = null;
|
||||
this.type = null;
|
||||
this.identifier = null;
|
||||
this.colorIndex = null;
|
||||
this.colorName = null;
|
||||
this.zoomLevel = 1;
|
||||
this.$gamepad.empty();
|
||||
}
|
||||
|
||||
// enqueue a display of the help modal
|
||||
this.displayHelp();
|
||||
this.debug = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the HTML template file for the active gamepad
|
||||
*
|
||||
* @param {*} activeGamepad
|
||||
* @param {*} gamepad
|
||||
*/
|
||||
loadTemplate(activeGamepad) {
|
||||
$.ajax("templates/" + this.activeGamepadType + "/template.html").done(
|
||||
(template) => {
|
||||
loadTemplate(gamepad) {
|
||||
$.ajax(`templates/${this.type}/template.html`).done((template) => {
|
||||
// inject the template HTML
|
||||
this.$gamepad.html(template);
|
||||
window.setTimeout(() => {
|
||||
this.autoAdjustZoom(1);
|
||||
this.adjustZoom(1);
|
||||
});
|
||||
|
||||
// read for parameters to apply:
|
||||
@ -499,32 +466,22 @@ class Gamepad {
|
||||
|
||||
// save the buttons mapping of this template
|
||||
this.mapping.buttons = [];
|
||||
for (
|
||||
let buttonIndex = 0;
|
||||
buttonIndex < activeGamepad.buttons.length;
|
||||
buttonIndex++
|
||||
) {
|
||||
this.mapping.buttons[buttonIndex] = $(
|
||||
`[data-button="${buttonIndex}"]`
|
||||
);
|
||||
for (let index = 0; index < gamepad.buttons.length; index++) {
|
||||
this.mapping.buttons[index] = $(`[data-button="${index}"]`);
|
||||
}
|
||||
|
||||
// save the axes mapping of this template
|
||||
this.mapping.axes = [];
|
||||
for (
|
||||
let axisIndex = 0;
|
||||
axisIndex < activeGamepad.axes.length;
|
||||
axisIndex++
|
||||
) {
|
||||
this.mapping.axes[axisIndex] = $(
|
||||
`[data-axis=${axisIndex}], [data-axis-x=${axisIndex}], [data-axis-y=${axisIndex}], [data-axis-z=${axisIndex}]`
|
||||
for (let index = 0; index < gamepad.axes.length; index++) {
|
||||
this.mapping.axes[index] = $(
|
||||
`[data-axis=${index}], [data-axis-x=${index}], [data-axis-y=${index}], [data-axis-z=${index}]`
|
||||
);
|
||||
}
|
||||
|
||||
// enqueue the initial display refresh
|
||||
this.timestamp = null;
|
||||
this.updateStatus();
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -532,22 +489,18 @@ class Gamepad {
|
||||
*/
|
||||
updateStatus() {
|
||||
// ensure that a gamepad is currently active
|
||||
if (null === this.activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if (null === this.index) return;
|
||||
|
||||
// enqueue the next refresh right away
|
||||
// window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
|
||||
window.requestAnimationFrame(this.updateStatus.bind(this));
|
||||
// window.setTimeout(this.updateStatus.bind(this), 1000 / 60);
|
||||
|
||||
// load latest gamepad data
|
||||
this.refreshGamepads();
|
||||
const activeGamepad = this.getActiveGamepad();
|
||||
this.refresh();
|
||||
const activeGamepad = this.getActive();
|
||||
|
||||
if (activeGamepad.timestamp === this.activeGamepadTimestamp) {
|
||||
return;
|
||||
}
|
||||
this.activeGamepadTimestamp = activeGamepad.timestamp;
|
||||
if (activeGamepad.timestamp === this.timestamp) return;
|
||||
this.timestamp = activeGamepad.timestamp;
|
||||
|
||||
this.updateButtons(activeGamepad);
|
||||
this.updateAxes(activeGamepad);
|
||||
@ -556,24 +509,20 @@ class Gamepad {
|
||||
/**
|
||||
* Updates the buttons status of the active gamepad
|
||||
*
|
||||
* @param {*} activeGamepad
|
||||
* @param {*} gamepad
|
||||
*/
|
||||
updateButtons(activeGamepad) {
|
||||
updateButtons(gamepad) {
|
||||
// update the buttons
|
||||
for (
|
||||
let buttonIndex = 0;
|
||||
buttonIndex < activeGamepad.buttons.length;
|
||||
buttonIndex++
|
||||
) {
|
||||
for (let index = 0; index < gamepad.buttons.length; index++) {
|
||||
// find the DOM element
|
||||
const $button = this.mapping.buttons[buttonIndex];
|
||||
const $button = this.mapping.buttons[index];
|
||||
if (!$button) {
|
||||
// nothing to do for this button if no DOM element exists
|
||||
break;
|
||||
}
|
||||
|
||||
// read the button data
|
||||
const button = activeGamepad.buttons[buttonIndex];
|
||||
const button = gamepad.buttons[index];
|
||||
|
||||
// update the display values
|
||||
$button.attr("data-pressed", button.pressed);
|
||||
@ -589,36 +538,32 @@ class Gamepad {
|
||||
/**
|
||||
* Updates the axes status of the active gamepad
|
||||
*
|
||||
* @param {*} activeGamepad
|
||||
* @param {*} gamepad
|
||||
*/
|
||||
updateAxes(activeGamepad) {
|
||||
updateAxes(gamepad) {
|
||||
// update the axes
|
||||
for (
|
||||
let axisIndex = 0;
|
||||
axisIndex < activeGamepad.axes.length;
|
||||
axisIndex++
|
||||
) {
|
||||
for (let index = 0; index < gamepad.axes.length; index++) {
|
||||
// find the DOM element
|
||||
const $axis = this.mapping.axes[axisIndex];
|
||||
const $axis = this.mapping.axes[index];
|
||||
if (!$axis) {
|
||||
// nothing to do for this button if no DOM element exists
|
||||
break;
|
||||
}
|
||||
|
||||
// read the axis data
|
||||
const axis = activeGamepad.axes[axisIndex];
|
||||
const axis = gamepad.axes[index];
|
||||
|
||||
// update the display values
|
||||
if ($axis.is("[data-axis=" + axisIndex + "]")) {
|
||||
if ($axis.is("[data-axis=" + index + "]")) {
|
||||
$axis.attr("data-value", axis);
|
||||
}
|
||||
if ($axis.is("[data-axis-x=" + axisIndex + "]")) {
|
||||
if ($axis.is("[data-axis-x=" + index + "]")) {
|
||||
$axis.attr("data-value-x", axis);
|
||||
}
|
||||
if ($axis.is("[data-axis-y=" + axisIndex + "]")) {
|
||||
if ($axis.is("[data-axis-y=" + index + "]")) {
|
||||
$axis.attr("data-value-y", axis);
|
||||
}
|
||||
if ($axis.is("[data-axis-z=" + axisIndex + "]")) {
|
||||
if ($axis.is("[data-axis-z=" + index + "]")) {
|
||||
$axis.attr("data-value-z", axis);
|
||||
}
|
||||
|
||||
@ -632,16 +577,16 @@ class Gamepad {
|
||||
/**
|
||||
* Changes the background color
|
||||
*
|
||||
* @param {any} backgroundColor
|
||||
* @param {any} color
|
||||
*/
|
||||
changeBackgroundColor(backgroundColor) {
|
||||
if ("undefined" === typeof gamepadColor) {
|
||||
changeBackgroundColor(color) {
|
||||
if ("undefined" === typeof color) {
|
||||
this.backgroundColorIndex++;
|
||||
if (this.backgroundColorIndex > this.backgroundColors.length - 1) {
|
||||
this.backgroundColorIndex = 0;
|
||||
}
|
||||
} else {
|
||||
this.backgroundColorIndex = backgroundColor;
|
||||
this.backgroundColorIndex = color;
|
||||
}
|
||||
|
||||
this.$body.css(
|
||||
@ -653,65 +598,53 @@ class Gamepad {
|
||||
/**
|
||||
* Changes the active gamepad color
|
||||
*
|
||||
* @param {any} gamepadColor
|
||||
* @param {any} color
|
||||
*/
|
||||
changeGamepadColor(gamepadColor) {
|
||||
changeGamepadColor(color) {
|
||||
// ensure that a gamepad is currently active
|
||||
if (null === this.activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if (null === this.index) return;
|
||||
|
||||
if ("undefined" === typeof gamepadColor) {
|
||||
if ("undefined" === typeof color) {
|
||||
// no color was specified, load the next one in list
|
||||
this.activeGamepadColorIndex++;
|
||||
if (
|
||||
this.activeGamepadColorIndex >
|
||||
this.activeGamepadIdentifier.colors.length - 1
|
||||
) {
|
||||
this.activeGamepadColorIndex = 0;
|
||||
this.colorIndex++;
|
||||
if (this.colorIndex > this.identifier.colors.length - 1) {
|
||||
this.colorIndex = 0;
|
||||
}
|
||||
|
||||
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
|
||||
this.activeGamepadColorIndex
|
||||
];
|
||||
this.colorName = this.identifier.colors[this.colorIndex];
|
||||
} else {
|
||||
if (!isNaN(parseInt(gamepadColor))) {
|
||||
if (!isNaN(parseInt(color))) {
|
||||
// the color is a number, load it by its index
|
||||
this.activeGamepadColorIndex = gamepadColor;
|
||||
this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
|
||||
this.activeGamepadColorIndex
|
||||
];
|
||||
this.colorIndex = color;
|
||||
this.colorName = this.identifier.colors[this.colorIndex];
|
||||
} else {
|
||||
// the color is a string, load it by its name
|
||||
this.activeGamepadColorName = gamepadColor;
|
||||
this.activeGamepadColorIndex = 0;
|
||||
for (let gamepadColorIndex in this.activeGamepadIdentifier
|
||||
.colors) {
|
||||
this.colorName = color;
|
||||
this.colorIndex = 0;
|
||||
for (let gamepadColorIndex in this.identifier.colors) {
|
||||
if (
|
||||
this.activeGamepadColorName ===
|
||||
this.activeGamepadIdentifier.colors[gamepadColorIndex]
|
||||
this.colorName ===
|
||||
this.identifier.colors[gamepadColorIndex]
|
||||
) {
|
||||
break;
|
||||
}
|
||||
this.activeGamepadColorIndex++;
|
||||
this.colorIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update the DOM with the color value
|
||||
this.$gamepad.attr("data-color", this.activeGamepadColorName);
|
||||
this.$gamepad.attr("data-color", this.colorName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjusts the zoom level to the available space
|
||||
*/
|
||||
autoAdjustZoom(maxZoom = null) {
|
||||
adjustZoom(maxZoom = null) {
|
||||
// let the browser the time to paint
|
||||
const smallerRatio = Math.min(
|
||||
window.innerWidth /
|
||||
(this.$gamepad.width() / this.activeGamepadZoomLevel),
|
||||
window.innerHeight /
|
||||
(this.$gamepad.height() / this.activeGamepadZoomLevel)
|
||||
window.innerWidth / (this.$gamepad.width() / this.zoomLevel),
|
||||
window.innerHeight / (this.$gamepad.height() / this.zoomLevel)
|
||||
);
|
||||
this.changeZoom(
|
||||
maxZoom !== null && smallerRatio >= maxZoom
|
||||
@ -724,42 +657,38 @@ class Gamepad {
|
||||
/**
|
||||
* Changes the active gamepad zoom level
|
||||
*
|
||||
* @param {any} zoomLevel
|
||||
* @param {any} level
|
||||
*/
|
||||
changeZoom(zoomLevel, zoomMode = "manual") {
|
||||
changeZoom(level, mode = "manual") {
|
||||
// ensure that a gamepad is currently active
|
||||
if (null === this.activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if (null === this.index) return;
|
||||
|
||||
// ensure we have some data to process
|
||||
if ("undefined" === typeof zoomLevel) {
|
||||
return;
|
||||
}
|
||||
if ("undefined" === typeof level) return;
|
||||
|
||||
this.activeGamepadZoomMode = zoomMode;
|
||||
this.zoomMode = mode;
|
||||
|
||||
if ("0" === zoomLevel) {
|
||||
if ("0" === level) {
|
||||
// "0" means a zoom reset
|
||||
this.activeGamepadZoomLevel = 1;
|
||||
} else if ("+" === zoomLevel && this.activeGamepadZoomLevel < 2) {
|
||||
this.zoomLevel = 1;
|
||||
} else if ("+" === level && this.zoomLevel < 2) {
|
||||
// "+" means a zoom in if we still can
|
||||
this.activeGamepadZoomLevel += 0.1;
|
||||
} else if ("-" === zoomLevel && this.activeGamepadZoomLevel > 0.2) {
|
||||
this.zoomLevel += 0.1;
|
||||
} else if ("-" === level && this.zoomLevel > 0.2) {
|
||||
// "-" means a zoom out if we still can
|
||||
this.activeGamepadZoomLevel -= 0.1;
|
||||
} else if (!isNaN((zoomLevel = parseFloat(zoomLevel)))) {
|
||||
this.zoomLevel -= 0.1;
|
||||
} else if (!isNaN((level = parseFloat(level)))) {
|
||||
// an integer value means a value-based zoom
|
||||
this.activeGamepadZoomLevel = zoomLevel;
|
||||
this.zoomLevel = level;
|
||||
}
|
||||
|
||||
// hack: fix js float issues
|
||||
this.activeGamepadZoomLevel = +this.activeGamepadZoomLevel.toFixed(2);
|
||||
this.zoomLevel = +this.zoomLevel.toFixed(2);
|
||||
|
||||
// update the DOM with the zoom value
|
||||
this.$gamepad.css(
|
||||
"transform",
|
||||
`translate(-50%, -50%) scale(${this.activeGamepadZoomLevel}, ${this.activeGamepadZoomLevel})`
|
||||
`translate(-50%, -50%) scale(${this.zoomLevel}, ${this.zoomLevel})`
|
||||
);
|
||||
}
|
||||
|
||||
@ -775,15 +704,13 @@ class Gamepad {
|
||||
*/
|
||||
toggleDebug() {
|
||||
// ensure that a gamepad is currently active
|
||||
if (null === this.activeGamepadIndex) {
|
||||
return;
|
||||
}
|
||||
if (null === this.index) return;
|
||||
|
||||
// update debug value
|
||||
this.debug = !this.debug;
|
||||
|
||||
// remap current gamepad
|
||||
this.mapGamepad(this.activeGamepadIndex);
|
||||
this.map(this.index);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
$buttons = $(".buttons .container");
|
||||
|
||||
gamepad = window.gamepad;
|
||||
activeGamepad = gamepad.getActiveGamepad();
|
||||
activeGamepad = gamepad.getActive();
|
||||
|
||||
if (!activeGamepad) {
|
||||
return;
|
||||
@ -27,7 +27,7 @@
|
||||
<div class="box medium">
|
||||
<div class="content">
|
||||
<div class="label">AXIS ${axisIndex}</div>
|
||||
<div class="value" data-axis="${axisIndex}">0</div>
|
||||
<div class="value" data-axis="${axisIndex}"></div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="box small">
|
||||
<div class="content">
|
||||
<div class="label">B${buttonIndex}</div>
|
||||
<div class="value" data-button="${buttonIndex}">0</div>
|
||||
<div class="value" data-button="${buttonIndex}"></div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
function updateTimestamp() {
|
||||
activeGamepad = gamepad.getActiveGamepad();
|
||||
activeGamepad = gamepad.getActive();
|
||||
if (!activeGamepad) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
width: 99px;
|
||||
height: 100%;
|
||||
background: url(triggers.svg);
|
||||
clip-path: inset(100% 0px 0px 0pc);
|
||||
}
|
||||
|
||||
#gamepad .trigger[data-value="0"] {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<link rel="stylesheet" href="templates/ds4/template.css">
|
||||
<script async src="templates/ds4/template.js"></script>
|
||||
<div class="triggers">
|
||||
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
<span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
<span class="trigger left" data-button="6"></span>
|
||||
<span class="trigger right" data-button="7"></span>
|
||||
<span class="clear"></span>
|
||||
</div>
|
||||
<div class="bumpers">
|
||||
|
||||
@ -3,7 +3,8 @@ gamepad.updateButton = function($button) {
|
||||
|
||||
if ($button.is(".trigger")) {
|
||||
$button.css({
|
||||
"-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
|
||||
// "opacity": `${(value) * 100}%`,
|
||||
"clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
width: 89px;
|
||||
height: 122px;
|
||||
background: url(trigger.svg);
|
||||
opacity: 1;
|
||||
clip-path: inset(100% 0px 0px 0pc);
|
||||
}
|
||||
|
||||
#gamepad .trigger[data-value="0"] {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<link rel="stylesheet" href="templates/xbox-one/template.css">
|
||||
<script async src="templates/xbox-one/template.js"></script>
|
||||
<div class="triggers">
|
||||
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
<span class="trigger right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
|
||||
<span class="trigger left" data-button="6"></span>
|
||||
<span class="trigger right" data-button="7"></span>
|
||||
<span class="clear"></span>
|
||||
</div>
|
||||
<div class="bumpers">
|
||||
|
||||
@ -3,7 +3,8 @@ gamepad.updateButton = function($button) {
|
||||
|
||||
if ($button.is(".trigger")) {
|
||||
$button.css({
|
||||
"-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
|
||||
// "opacity": `${(value) * 100}%`,
|
||||
"clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user