From 38244961d3d72919ae3acde0781af032289a7284 Mon Sep 17 00:00:00 2001 From: e7d Date: Wed, 19 Aug 2020 12:01:06 +0200 Subject: [PATCH] add a triggers meter toggle --- css/main.css | 23 ++++++++++------- index.html | 4 +++ js/gamepad.js | 46 +++++++++++++++++++++------------ templates/ds4/template.js | 21 ++++++++++----- templates/xbox-one/template.css | 1 - templates/xbox-one/template.js | 21 ++++++++++----- 6 files changed, 74 insertions(+), 42 deletions(-) diff --git a/css/main.css b/css/main.css index 953e03f..917b8b5 100644 --- a/css/main.css +++ b/css/main.css @@ -99,6 +99,7 @@ body { font-size: 0.9em; left: 50%; min-width: 400px; + width: 600px; padding: 20px; position: absolute; top: 50%; @@ -148,21 +149,23 @@ body { } kbd { - display: inline; - display: inline-block; - min-width: 1em; - padding: .2em .3em; - margin: 0 .2em; - font: normal 1em monospace; - text-align: center; - text-decoration: none; -moz-border-radius: .3em; + -moz-user-select: none; -webkit-border-radius: .3em; + -webkit-user-select: none; border-radius: .3em; border: none; cursor: default; - -moz-user-select: none; - -webkit-user-select: none; + display: inline-block; + display: inline; + font: normal 1em monospace; + margin: 0 .2em; + min-width: 1em; + padding: .2em .6em; + text-align: center; + text-decoration: none; + font-weight: bold; + font-size: 14px; user-select: none; } diff --git a/index.html b/index.html index 18dd600..cb48a36 100644 --- a/index.html +++ b/index.html @@ -139,6 +139,10 @@ H Toggle this help menu + + T + Toggle triggers meter mode + Delete, Escape Clear active gamepad diff --git a/js/gamepad.js b/js/gamepad.js index c2414b8..aee4fb0 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -64,6 +64,7 @@ class Gamepad { this.backgroundColorIndex = 0; this.colorIndex = null; this.colorName = null; + this.triggersMeter = false; this.zoomMode = "manual"; this.zoomLevel = 1; this.mapping = { @@ -232,6 +233,9 @@ class Gamepad { case "KeyH": this.toggleHelp(); break; + case "KeyT": + this.toggleTriggersMeter(); + break; case "NumpadAdd": case "Equal": this.changeZoom("+"); @@ -741,23 +745,6 @@ class Gamepad { } } - /** - * Toggles the on-screen help message - */ - toggleHelp() { - this.$help.toggleClass("active"); - - // save statistics - if (!!window.ga) { - ga("send", "event", { - eventCategory: "Gamepad", - eventAction: "toggle-help", - eventLabel: "Toggle Help", - eventValue: this.$help.is("active"), - }); - } - } - /** * Toggles the debug template for the active gamepad, if any */ @@ -781,6 +768,31 @@ class Gamepad { // remap current gamepad this.map(this.index); } + + /** + * Toggles the on-screen help message + */ + toggleHelp() { + this.$help.toggleClass("active"); + + // save statistics + if (!!window.ga) { + ga("send", "event", { + eventCategory: "Gamepad", + eventAction: "toggle-help", + eventLabel: "Toggle Help", + eventValue: this.$help.is("active"), + }); + } + } + + /** + * Toggles the triggers meter display + */ + toggleTriggersMeter() { + this.triggersMeter = !this.triggersMeter; + this.$gamepad[this.triggersMeter ? 'addClass' : 'removeClass']('triggers-meter'); + } } window.gamepad = new Gamepad(); diff --git a/templates/ds4/template.js b/templates/ds4/template.js index 26fbf3b..505d715 100644 --- a/templates/ds4/template.js +++ b/templates/ds4/template.js @@ -1,15 +1,22 @@ -gamepad.updateButton = function($button) { +gamepad.updateButton = function ($button) { const value = parseFloat($button.attr("data-value"), 10); if ($button.is(".trigger")) { - $button.css({ - // "opacity": `${(value) * 100}%`, - "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)` - }); + $button.css( + gamepad.triggersMeter + ? { + opacity: 1, + "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`, + } + : { + opacity: `${value * 100}%`, + "clip-path": "none", + } + ); } }; -gamepad.updateAxis = function($axis) { +gamepad.updateAxis = function ($axis) { const axisX = $axis.attr("data-value-x"); const axisY = $axis.attr("data-value-y"); @@ -20,7 +27,7 @@ gamepad.updateAxis = function($axis) { transform: `rotateX(${-parseFloat( axisY * 30, 8 - )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)` + )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`, }); } }; diff --git a/templates/xbox-one/template.css b/templates/xbox-one/template.css index 363d515..b7906a1 100644 --- a/templates/xbox-one/template.css +++ b/templates/xbox-one/template.css @@ -136,7 +136,6 @@ background: url(buttons.svg); width: 53px; height: 53px; - /* display: none; */ } #gamepad .button[data-pressed="true"] { diff --git a/templates/xbox-one/template.js b/templates/xbox-one/template.js index 26fbf3b..505d715 100644 --- a/templates/xbox-one/template.js +++ b/templates/xbox-one/template.js @@ -1,15 +1,22 @@ -gamepad.updateButton = function($button) { +gamepad.updateButton = function ($button) { const value = parseFloat($button.attr("data-value"), 10); if ($button.is(".trigger")) { - $button.css({ - // "opacity": `${(value) * 100}%`, - "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)` - }); + $button.css( + gamepad.triggersMeter + ? { + opacity: 1, + "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`, + } + : { + opacity: `${value * 100}%`, + "clip-path": "none", + } + ); } }; -gamepad.updateAxis = function($axis) { +gamepad.updateAxis = function ($axis) { const axisX = $axis.attr("data-value-x"); const axisY = $axis.attr("data-value-y"); @@ -20,7 +27,7 @@ gamepad.updateAxis = function($axis) { transform: `rotateX(${-parseFloat( axisY * 30, 8 - )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)` + )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`, }); } };