Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds a checkered background

Browse Source
This commit is contained in:
e7d 2020-09-04 09:48:11 +02:00
parent 55085c6a5f
commit 1b595fe939
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
2 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/transparent-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 B

84
js/gamepad.js
View File

@ -15,14 +15,22 @@ class Gamepad {
this.$helpPopout = $("#help-popout"); this.$helpPopout = $("#help-popout");
this.$gamepadList = $("#gamepad-list"); this.$gamepadList = $("#gamepad-list");
this.backgroundColors = [ this.backgroundStyle = [
"transparent", "transparent",
"checkered",
"dimgrey", "dimgrey",
"black", "black",
"lime", "lime",
"magenta", "magenta",
]; ];
this.textColors = ["black", "black", "white", "black", "black"]; this.textColors = [
"black",
"black",
"black",
"white",
"black",
"black",
];
// gamepad collection default values // gamepad collection default values
this.gamepads = {}; this.gamepads = {};
@ -76,7 +84,7 @@ class Gamepad {
this.type = null; this.type = null;
this.identifier = null; this.identifier = null;
this.timestamp = null; this.timestamp = null;
this.backgroundColorIndex = 0; this.backgroundStyleIndex = 0;
this.colorIndex = null; this.colorIndex = null;
this.colorName = null; this.colorName = null;
this.triggersMeter = false; this.triggersMeter = false;
@ -124,19 +132,15 @@ class Gamepad {
// change the background is specified // change the background is specified
if (this.params.background) { if (this.params.background) {
for (let i = 0; i < this.backgroundColors.length; i++) { let backgroundStyleIndex;
if (this.params.background === this.backgroundColors[i]) { for (let i = 0; i < this.backgroundStyle.length; i++) {
this.backgroundColorIndex = i; if (this.params.background === this.backgroundStyle[i]) {
backgroundStyleIndex = i;
break; break;
} }
} }
if (this.backgroundColorIndex) { if (backgroundStyleIndex) this.changeBackgroundStyle(backgroundStyleIndex);
this.$body.css(
"background",
this.backgroundColors[this.backgroundColorIndex]
);
}
} }
// by default, enqueue a delayed display of the instructions animation // by default, enqueue a delayed display of the instructions animation
@ -239,7 +243,7 @@ class Gamepad {
this.disconnect(true); this.disconnect(true);
break; break;
case "KeyB": case "KeyB":
this.changeBackgroundColor(); this.changeBackgroundStyle();
break; break;
case "KeyC": case "KeyC":
this.changeGamepadColor(); this.changeGamepadColor();
@ -615,31 +619,34 @@ class Gamepad {
} }
/** /**
* Changes the background color * Changes the background style
* *
* @param {any} color * @param {any} style
*/ */
changeBackgroundColor(color) { changeBackgroundStyle(style) {
if ("undefined" === typeof color) { if ("undefined" === typeof style) {
this.backgroundColorIndex++; this.backgroundStyleIndex++;
if (this.backgroundColorIndex > this.backgroundColors.length - 1) { if (this.backgroundStyleIndex > this.backgroundStyle.length - 1) {
this.backgroundColorIndex = 0; this.backgroundStyleIndex = 0;
} }
} else { } else {
this.backgroundColorIndex = color; this.backgroundStyleIndex = style;
this.backgroundColorName; this.backgroundStyleName;
} }
this.backgroundColorName = this.backgroundColors[ this.backgroundStyleName = this.backgroundStyle[
this.backgroundColorIndex this.backgroundStyleIndex
]; ];
this.$body.css({ this.$body.css({
background: this.backgroundColorName, background:
color: this.textColors[this.backgroundColorIndex], this.backgroundStyleName === "checkered"
? "url(css/transparent-bg.png)"
: this.backgroundStyleName,
color: this.textColors[this.backgroundStyleIndex],
}); });
// update current settings // update current settings
this.updateSettings({ background: this.backgroundColorName }); this.updateSettings({ background: this.backgroundStyleName });
// save statistics // save statistics
if (!!window.ga) { if (!!window.ga) {
@ -647,7 +654,7 @@ class Gamepad {
eventCategory: "Gamepad", eventCategory: "Gamepad",
eventAction: "change-background-color", eventAction: "change-background-color",
eventLabel: "Change Background Color", eventLabel: "Change Background Color",
eventValue: this.backgroundColorName, eventValue: this.backgroundStyleName,
}); });
} }
} }
@ -828,14 +835,19 @@ class Gamepad {
* @param {*} newSettings * @param {*} newSettings
*/ */
updateSettings(newSettings) { updateSettings(newSettings) {
const settings = Object.assign(Object.fromEntries( const settings = Object.assign(
window.location.search Object.fromEntries(
.replace("?", "") window.location.search
.split("&") .replace("?", "")
.map((param) => param.split("=")) .split("&")
.filter(([k, v]) => v !== null && v !== undefined) .map((param) => param.split("="))
), newSettings); .filter(([k, v]) => v !== null && v !== undefined)
const query = Object.entries(settings).map(([key, value]) => `${key}=${value}`).join('&'); ),
newSettings
);
const query = Object.entries(settings)
.map(([key, value]) => `${key}=${value}`)
.join("&");
window.history.replaceState({}, document.title, `/?${query}`); window.history.replaceState({}, document.title, `/?${query}`);
} }
} }