simplify code

js/gamepad.js

@@ -11,33 +11,39 @@ class Gamepad {
         this.gamepadDemo = new GamepadDemo(this);
 
         // cached DOM references
-        this.$body = $('body');
+        this.$body = $("body");
-        this.$gamepad = $('#gamepad');
+        this.$gamepad = $("#gamepad");
-        this.$nogamepad = $('#no-gamepad');
+        this.$nogamepad = $("#no-gamepad");
-        this.$nogamepadLink = $('#no-gamepad a');
+        this.$nogamepadLink = $("#no-gamepad a");
-        this.$help = $('#help');
+        this.$help = $("#help");
-        this.$gamepadList = $('#gamepad-list');
+        this.$gamepadList = $("#gamepad-list");
 
-        this.backgroundColors = ['transparent', 'dimgrey', 'black', 'lime', 'magenta'];
+        this.backgroundColors = [
+            "transparent",
+            "dimgrey",
+            "black",
+            "lime",
+            "magenta"
+        ];
         this.backgroundColorIndex = 0;
 
         // gamepad collection default values
         this.gamepads = {};
         this.gamepadIdentifiers = {
-            'debug': {
+            debug: {
-                'id': /debug/,
+                id: /debug/,
-                'name': 'Debug',
+                name: "Debug",
-                'colors': []
+                colors: []
             },
-            'ds4': {
+            ds4: {
-                'id': /054c.*?05c4/,
+                id: /054c.*?05c4/,
-                'name': 'DualShock 4',
+                name: "DualShock 4",
-                'colors': ['black', 'white', 'red', 'blue']
+                colors: ["black", "white", "red", "blue"]
             },
-            'xbox-one': {
+            "xbox-one": {
-                'id': /xinput|XInput/,
+                id: /xinput|XInput/,
-                'name': 'Xbox One',
+                name: "Xbox One",
-                'colors': ['black', 'white']
+                colors: ["black", "white"]
             }
         };
 
@@ -60,10 +66,16 @@ class Gamepad {
         };
 
         // listen for gamepad related events
-        this.haveEvents = 'GamepadEvent' in window;
+        this.haveEvents = "GamepadEvent" in window;
         if (this.haveEvents) {
-            window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this));
+            window.addEventListener(
-            window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this));
+                "gamepadconnected",
+                this.onGamepadConnect.bind(this)
+            );
+            window.addEventListener(
+                "gamepaddisconnected",
+                this.onGamepadDisconnect.bind(this)
+            );
         }
 
         // listen for mouse move events
@@ -72,16 +84,18 @@ class Gamepad {
         window.addEventListener("keydown", this.onKeyDown.bind(this));
 
         // bind a gamepads scan
-        window.setInterval(this.scanGamepads.bind(this), this.scanGamepadsDelay);
+        window.setInterval(
+            this.scanGamepads.bind(this),
+            this.scanGamepadsDelay
+        );
 
         // read URI for display parameters to initalize
         this.params = {
-            background: $.urlParam('background') || $.urlParam('b') || null,
+            background: $.urlParam("background") || null,
-            color: $.urlParam('color') || $.urlParam('c') || null,
+            color: $.urlParam("color") || null,
-            demo: $.urlParam('demo') || null,
+            type: $.urlParam("type") || null,
-            index: $.urlParam('index') || $.urlParam('i') || null,
+            demo: $.urlParam("demo") || null,
-            type: $.urlParam('type') || $.urlParam('t') || null,
+            zoom: $.urlParam("zoom") || null
-            zoom: $.urlParam('zoom') || $.urlParam('z') || null
         };
 
         // change the background is specified
@@ -97,7 +111,10 @@ class Gamepad {
                 return;
             }
 
-            this.$body.css('background', this.backgroundColors[this.backgroundColorIndex]);
+            this.$body.css(
+                "background",
+                this.backgroundColors[this.backgroundColorIndex]
+            );
         }
 
         // start the demo if requested by params
@@ -107,14 +124,6 @@ class Gamepad {
             return;
         }
 
-        // if a gamepad index is specified, try to map the corresponding gamepad
-        if (this.params.index) {
-            this.refreshGamepads();
-            this.mapGamepad(+this.params.index);
-
-            return;
-        }
-
         // by default, enqueue a delayed display of the help modal
         this.displayGamepadHelp();
     }
@@ -149,11 +158,9 @@ class Gamepad {
         }
 
         // hide help modal if no gamepad is active after X ms
-        this.gamepadHelpTimeout = window.setTimeout(
+        this.gamepadHelpTimeout = window.setTimeout(() => {
-            () => {
             this.$nogamepad.fadeOut();
-            }, this.gamepadHelpDelay
+        }, this.gamepadHelpDelay);
-        );
     }
 
     /**
@@ -231,7 +238,11 @@ class Gamepad {
      */
     refreshGamepads() {
         // get fresh information from DOM about gamepads
-        const navigatorGamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+        const navigatorGamepads = navigator.getGamepads
+            ? navigator.getGamepads()
+            : navigator.webkitGetGamepads
+            ? navigator.webkitGetGamepads()
+            : [];
         for (let key in navigatorGamepads) {
             this.gamepads[key] = navigatorGamepads[key];
         }
@@ -250,13 +261,15 @@ class Gamepad {
                 continue;
             }
 
-            $tbody.push('<tr><td>' + gamepad.index + '</td><td>' + gamepad.id + '</td></tr>');
+            $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(''));
+        this.$gamepadList.html($tbody.join(""));
     }
 
     /**
@@ -266,6 +279,32 @@ class Gamepad {
         return this.gamepads[this.activeGamepadIndex];
     }
 
+    /**
+     * Return the gamepad type for the connected gamepad
+     *
+     * @param {object} activeGamepad
+     */
+    getActiveGamepadType(activeGamepad) {
+        if (this.debug) {
+            // if the debug option is active, use the associated template
+            return "debug";
+        }
+
+        if (this.params.type) {
+            // if the gamepad type is set through params, apply it
+            return this.params.type;
+        }
+
+        // else, determine the template to use from the gamepad identifier
+        for (let gamepadType in this.gamepadIdentifiers) {
+            if (
+                this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)
+            ) {
+                return gamepadType;
+            }
+        }
+    }
+
     /**
      * Adds a gamepad to the gamepads collection
      *
@@ -282,20 +321,24 @@ class Gamepad {
      */
     removeGamepad(gamepadIndex) {
         // ensure we have an index to remove
-        if ('undefined' === typeof gamepadIndex) {
+        if ("undefined" === typeof gamepadIndex) {
             return;
         }
 
         // ensure to kill demo mode
-        if ('demo' === this.activeGamepadIndex) {
+        if ("demo" === this.activeGamepadIndex) {
             this.gamepadDemo.stop();
         }
 
         // if this is the active gamepad
-        if (true === gamepadIndex ||
+        if (true === gamepadIndex || this.activeGamepadIndex === 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];
@@ -317,24 +360,27 @@ class Gamepad {
         // refresh gamepad information
         this.refreshGamepads();
 
-        // read information for each gamepad
+        for (
-        for (let gamepadIndex = 0; gamepadIndex < this.gamepads.length; gamepadIndex++) {
+            let gamepadIndex = 0;
+            gamepadIndex < this.gamepads.length;
+            gamepadIndex++
+        ) {
             const gamepad = this.gamepads[gamepadIndex];
-            if (gamepad) {
+            if (!gamepad) continue;
-                // store the current gamepad give its index
-                if (gamepad.index in this.gamepads) {
-                    this.gamepads[gamepad.index] = gamepad;
-                }
 
             // read the gamepad buttons
             let button;
-                for (let buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
+            for (
+                let buttonIndex = 0;
+                buttonIndex < gamepad.buttons.length;
+                buttonIndex++
+            ) {
                 button = gamepad.buttons[buttonIndex];
 
                 // if one of its button is pressed, activate this gamepad
                 if (button.pressed) {
                     this.mapGamepad(gamepad.index);
-                    }
+                    return;
                 }
             }
         }
@@ -347,7 +393,7 @@ class Gamepad {
      */
     mapGamepad(gamepadIndex) {
         // ensure a gamepad need to be mapped
-        if ('undefined' === typeof gamepadIndex) {
+        if ("undefined" === typeof gamepadIndex) {
             return;
         }
 
@@ -370,40 +416,35 @@ class Gamepad {
         }
 
         // determine gamepad type
-        this.activeGamepadType = null;
+        this.activeGamepadType = this.getActiveGamepadType(activeGamepad);
-        if (this.debug) {
+        this.activeGamepadIdentifier = this.gamepadIdentifiers[
-            // if the debug option is active, use the associated template
+            this.activeGamepadType
-            this.activeGamepadType = 'debug';
+        ];
-        } else if (this.params.type) {
-            // if the gamepad type is set through params, apply it
-            this.activeGamepadType = this.params.type;
-        } else {
-            // else, determine the template to use from the gamepad identifier
-            for (let gamepadType in this.gamepadIdentifiers) {
-                if (this.gamepadIdentifiers[gamepadType].id.test(activeGamepad.id)) {
-                    this.activeGamepadType = gamepadType;
-                }
-            }
-        }
-        this.activeGamepadIdentifier = this.gamepadIdentifiers[this.activeGamepadType];
         this.activeGamepadColorIndex = 0;
-
         // ensure a valid gamepad type was discovered
         if (!this.activeGamepadType) {
             return;
         }
 
+        // load the HTML template file
+        this.loadTemplate(activeGamepad);
+
+        // hide the help before displaying the template
+        this.hideGamepadHelp();
+    }
+
+    /**
+     * Load the HTML template file for the active gamepad
+     *
+     * @param {*} activeGamepad
+     */
+    loadTemplate(activeGamepad) {
+        $.ajax("templates/" + this.activeGamepadType + "/template.html").done(
+            template => {
                 // hoist some template related variables
                 let button;
                 let axis;
 
-        // hide the help before displaying the template
-        this.hideGamepadHelp();
-
-        // load the template HTML file
-        $.ajax(
-            'templates/' + this.activeGamepadType + '/template.html'
-        ).done((template) => {
                 // inject the template HTML
                 this.$gamepad.html(template);
 
@@ -419,21 +460,34 @@ class Gamepad {
 
                 // save the buttons mapping of this template
                 this.mapping.buttons = [];
-            for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
+                for (
+                    let buttonIndex = 0;
+                    buttonIndex < activeGamepad.buttons.length;
+                    buttonIndex++
+                ) {
                     button = activeGamepad.buttons[buttonIndex];
-                this.mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']');
+                    this.mapping.buttons[buttonIndex] = $(
+                        `[data-button="${buttonIndex}"]`
+                    );
                 }
 
                 // save the axes mapping of this template
                 this.mapping.axes = [];
-            for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
+                for (
+                    let axisIndex = 0;
+                    axisIndex < activeGamepad.axes.length;
+                    axisIndex++
+                ) {
                     axis = activeGamepad.axes[axisIndex];
-                this.mapping.axes[axisIndex] = $('[data-axis=' + axisIndex + '], [data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']');
+                    this.mapping.axes[axisIndex] = $(
+                        `[data-axis=${axisIndex}], [data-axis-x=${axisIndex}], [data-axis-y=${axisIndex}], [data-axis-z=${axisIndex}]`
+                    );
                 }
 
                 // enqueue the initial display refresh
                 this.updateStatus();
-        });
+            }
+        );
     }
 
     /**
@@ -452,14 +506,26 @@ class Gamepad {
         this.refreshGamepads();
         const activeGamepad = this.getActiveGamepad();
 
+        this.updateButtons(activeGamepad);
+        this.updateAxes(activeGamepad);
+    }
+
+    /**
+     * Updates the buttons status of the active gamepad
+     *
+     * @param {*} activeGamepad
+     */
+    updateButtons(activeGamepad) {
         // hoist some variables
         let button;
         let $button;
-        let axis;
-        let $axis;
 
         // update the buttons
-        for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
+        for (
+            let buttonIndex = 0;
+            buttonIndex < activeGamepad.buttons.length;
+            buttonIndex++
+        ) {
             // find the DOM element
             $button = this.mapping.buttons[buttonIndex];
             if (!$button) {
@@ -471,17 +537,32 @@ class Gamepad {
             button = activeGamepad.buttons[buttonIndex];
 
             // update the display values
-            $button.attr('data-pressed', button.pressed);
+            $button.attr("data-pressed", button.pressed);
-            $button.attr('data-value', button.value);
+            $button.attr("data-value", button.value);
 
             // hook the template defined button update method
             if ("function" === typeof this.updateButton) {
                 this.updateButton($button);
             }
         }
+    }
+
+    /**
+     * Updates the axes status of the active gamepad
+     *
+     * @param {*} activeGamepad
+     */
+    updateAxes(activeGamepad) {
+        // hoist some variables
+        let axis;
+        let $axis;
 
         // update the axes
-        for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
+        for (
+            let axisIndex = 0;
+            axisIndex < activeGamepad.axes.length;
+            axisIndex++
+        ) {
             // find the DOM element
             $axis = this.mapping.axes[axisIndex];
             if (!$axis) {
@@ -493,17 +574,17 @@ class Gamepad {
             axis = activeGamepad.axes[axisIndex];
 
             // update the display values
-            if ($axis.is('[data-axis=' + axisIndex + ']')) {
+            if ($axis.is("[data-axis=" + axisIndex + "]")) {
-                $axis.attr('data-value', axis);
+                $axis.attr("data-value", axis);
             }
-            if ($axis.is('[data-axis-x=' + axisIndex + ']')) {
+            if ($axis.is("[data-axis-x=" + axisIndex + "]")) {
-                $axis.attr('data-value-x', axis);
+                $axis.attr("data-value-x", axis);
             }
-            if ($axis.is('[data-axis-y=' + axisIndex + ']')) {
+            if ($axis.is("[data-axis-y=" + axisIndex + "]")) {
-                $axis.attr('data-value-y', axis);
+                $axis.attr("data-value-y", axis);
             }
-            if ($axis.is('[data-axis-z=' + axisIndex + ']')) {
+            if ($axis.is("[data-axis-z=" + axisIndex + "]")) {
-                $axis.attr('data-value-z', axis);
+                $axis.attr("data-value-z", axis);
             }
 
             // hook the template defined axis update method
@@ -519,7 +600,7 @@ class Gamepad {
      * @param {any} backgroundColor
      */
     changeBackgroundColor(backgroundColor) {
-        if ('undefined' === typeof gamepadColor) {
+        if ("undefined" === typeof gamepadColor) {
             this.backgroundColorIndex++;
             if (this.backgroundColorIndex > this.backgroundColors.length - 1) {
                 this.backgroundColorIndex = 0;
@@ -528,8 +609,10 @@ class Gamepad {
             this.backgroundColorIndex = backgroundColor;
         }
 
-
+        this.$body.css(
-        this.$body.css('background', this.backgroundColors[this.backgroundColorIndex]);
+            "background",
+            this.backgroundColors[this.backgroundColorIndex]
+        );
     }
 
     /**
@@ -543,25 +626,36 @@ class Gamepad {
             return;
         }
 
-        if ('undefined' === typeof gamepadColor) {
+        if ("undefined" === typeof gamepadColor) {
             // no color was specified, load the next one in list
             this.activeGamepadColorIndex++;
-            if (this.activeGamepadColorIndex > this.activeGamepadIdentifier.colors.length - 1) {
+            if (
+                this.activeGamepadColorIndex >
+                this.activeGamepadIdentifier.colors.length - 1
+            ) {
                 this.activeGamepadColorIndex = 0;
             }
 
-            this.activeGamepadColorName = this.activeGamepadIdentifier.colors[this.activeGamepadColorIndex];
+            this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
+                this.activeGamepadColorIndex
+            ];
         } else {
             if (!isNaN(parseInt(gamepadColor))) {
                 // the color is a number, load it by its index
                 this.activeGamepadColorIndex = gamepadColor;
-                this.activeGamepadColorName = this.activeGamepadIdentifier.colors[this.activeGamepadColorIndex];
+                this.activeGamepadColorName = this.activeGamepadIdentifier.colors[
+                    this.activeGamepadColorIndex
+                ];
             } else {
                 // the color is a string, load it by its name
                 this.activeGamepadColorName = gamepadColor;
                 this.activeGamepadColorIndex = 0;
-                for (let gamepadColorIndex in this.activeGamepadIdentifier.colors) {
+                for (let gamepadColorIndex in this.activeGamepadIdentifier
-                    if (this.activeGamepadColorName === this.activeGamepadIdentifier.colors[gamepadColorIndex]) {
+                    .colors) {
+                    if (
+                        this.activeGamepadColorName ===
+                        this.activeGamepadIdentifier.colors[gamepadColorIndex]
+                    ) {
                         break;
                     }
                     this.activeGamepadColorIndex++;
@@ -570,7 +664,7 @@ class Gamepad {
         }
 
         // update the DOM with the color value
-        this.$gamepad.attr('data-color', this.activeGamepadColorName);
+        this.$gamepad.attr("data-color", this.activeGamepadColorName);
     }
 
     /**
@@ -585,20 +679,20 @@ class Gamepad {
         }
 
         // ensure we have some data to process
-        if ('undefined' === typeof zoomLevel) {
+        if ("undefined" === typeof zoomLevel) {
             return;
         }
 
-        if ('0' === zoomLevel) {
+        if ("0" === zoomLevel) {
             // "0" means a zoom reset
             this.activeGamepadZoomLevel = 1;
-        } else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) {
+        } else if ("+" === zoomLevel && this.activeGamepadZoomLevel < 2) {
             // "+" means a zoom in if we still can
             this.activeGamepadZoomLevel += 0.1;
-        } else if ('-' === zoomLevel && this.activeGamepadZoomLevel > 0.2) {
+        } else if ("-" === zoomLevel && this.activeGamepadZoomLevel > 0.2) {
             // "-" means a zoom out if we still can
             this.activeGamepadZoomLevel -= 0.1;
-        } else if (!isNaN(zoomLevel = parseFloat(zoomLevel))) {
+        } else if (!isNaN((zoomLevel = parseFloat(zoomLevel)))) {
             // an integer value means a value-based zoom
             this.activeGamepadZoomLevel = zoomLevel;
         }
@@ -608,8 +702,10 @@ class Gamepad {
 
         // update the DOM with the zoom value
         this.$gamepad.css(
-            'transform',
+            "transform",
-            'translate(-50%, -50%) scale(' + this.activeGamepadZoomLevel + ', ' + this.activeGamepadZoomLevel + ')'
+            `translate(-50%, -50%) scale(${this.activeGamepadZoomLevel}, ${
+                this.activeGamepadZoomLevel
+            })`
         );
     }
 
@@ -617,7 +713,7 @@ class Gamepad {
      * Toggles the on-screen help message
      */
     toggleHelp() {
-        this.$help.toggleClass('active');
+        this.$help.toggleClass("active");
     }
 
     /**

js/urlParam.jquery.js

@@ -1,5 +1,5 @@
 $.urlParam = function(name) {
-    let results = new RegExp('[\?&]' + name + '(=([^&#]*))?').exec(window.location.href);
+    let results = new RegExp('[\?&]' + name + '(=([^&#]*))?').exec(window.location.search);
     if (results === null) {
         return null;
     }

templates/debug/template.js

@@ -1,10 +1,10 @@
 (() => {
-    $id = $('#info-id .value');
+    $id = $("#info-id .value");
-    $timestamp = $('#info-timestamp .value');
+    $timestamp = $("#info-timestamp .value");
-    $index = $('#info-index .value');
+    $index = $("#info-index .value");
-    $mapping = $('#info-mapping .value');
+    $mapping = $("#info-mapping .value");
-    $axes = $('.axes .container');
+    $axes = $(".axes .container");
-    $buttons = $('.buttons .container');
+    $buttons = $(".buttons .container");
 
     gamepad = window.gamepad;
     activeGamepad = gamepad.getActiveGamepad();
@@ -18,48 +18,58 @@
     $index.html(activeGamepad.index);
     $mapping.html(activeGamepad.mapping);
 
-    for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
+    for (
-        $axes.append(
+        let axisIndex = 0;
-            '<div class="box medium">' +
+        axisIndex < activeGamepad.axes.length;
-            '   <div class="content">' +
+        axisIndex++
-            '       <div class="label">AXIS ' + axisIndex + '</div>' +
+    ) {
-            '       <div class="value" data-axis="' + axisIndex + '">0</div>' +
+        $axes.append(`
-            '   </div>' +
+            <div class="box medium">
-            '</div>'
+               <div class="content">
-        );
+                   <div class="label">AXIS ${axisIndex}</div>
+                   <div class="value" data-axis="${axisIndex}">0</div>
+               </div>
+            </div>
+        `);
     }
 
-    for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
+    for (
-        $buttons.append(
+        let buttonIndex = 0;
-            '<div class="box small">' +
+        buttonIndex < activeGamepad.buttons.length;
-            '   <div class="content">' +
+        buttonIndex++
-            '       <div class="label">B' + buttonIndex + '</div>' +
+    ) {
-            '       <div class="value" data-button="' + buttonIndex + '">0</div>' +
+        $buttons.append(`
-            '   </div>' +
+            <div class="box small">
-            '</div>'
+               <div class="content">
-        );
+                   <div class="label">B${buttonIndex}</div>
+                   <div class="value" data-button="${buttonIndex}">0</div>
+               </div>
+            </div>'
+        `);
     }
 
-    gamepad.updateButton = function ($button) {
+    gamepad.updateButton = function($button) {
         updateElem($button);
-    }
+    };
 
-    gamepad.updateAxis = function ($axis) {
+    gamepad.updateAxis = function($axis) {
         updateElem($axis, 6);
-    }
+    };
 
     function updateElem($elem, precision = 2) {
         updateTimestamp();
 
-        var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
+        var value = parseFloat($elem.attr("data-value"), 10).toFixed(precision);
         $elem.html(value);
         var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
-        $elem.css({
+        $elem.css({ color: `rgb(${color}, ${color}, ${color})` });
-            'color': 'rgb(' + color + ', ' + color + ', ' + color + ')'
-        });
     }
 
     function updateTimestamp() {
+        activeGamepad = gamepad.getActiveGamepad();
+        if (!activeGamepad) {
+            return;
+        }
         $timestamp.html(activeGamepad.timestamp);
     }
 })();

templates/ds4/template.js

@@ -1,23 +1,25 @@
-gamepad.updateButton = function ($button) {
+gamepad.updateButton = function($button) {
-    const value = parseFloat($button.attr('data-value'), 10);
+    const value = parseFloat($button.attr("data-value"), 10);
 
-    if ($button.is('.trigger')) {
+    if ($button.is(".trigger")) {
         $button.css({
-            '-webkit-clip-path': 'inset(' + (1 - value) * 100 + '% 0px 0px 0pc)'
+            "-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
         });
     }
-}
+};
 
-gamepad.updateAxis = function ($axis) {
+gamepad.updateAxis = function($axis) {
-    const axisX = $axis.attr('data-value-x');
+    const axisX = $axis.attr("data-value-x");
-    const axisY = $axis.attr('data-value-y');
+    const axisY = $axis.attr("data-value-y");
-    const axisZ = $axis.attr('data-value-z');
 
-    if ($axis.is('.stick')) {
+    if ($axis.is(".stick")) {
         $axis.css({
-            'margin-top': axisY * 25,
+            "margin-top": axisY * 25,
-            'margin-left': axisX * 25,
+            "margin-left": axisX * 25,
-            'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)'
+            transform: `rotateX(${-parseFloat(
+                axisY * 30,
+                8
+            )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`
         });
     }
-}
+};

templates/xbox-one/template.js

@@ -1,23 +1,25 @@
-gamepad.updateButton = function ($button) {
+gamepad.updateButton = function($button) {
-    const value = parseFloat($button.attr('data-value'), 10);
+    const value = parseFloat($button.attr("data-value"), 10);
 
-    if ($button.is('.trigger')) {
+    if ($button.is(".trigger")) {
         $button.css({
-            '-webkit-clip-path': 'inset(' + (1 - value) * 100 + '% 0px 0px 0pc)'
+            "-webkit-clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`
         });
     }
-}
+};
 
-gamepad.updateAxis = function ($axis) {
+gamepad.updateAxis = function($axis) {
-    const axisX = $axis.attr('data-value-x');
+    const axisX = $axis.attr("data-value-x");
-    const axisY = $axis.attr('data-value-y');
+    const axisY = $axis.attr("data-value-y");
-    const axisZ = $axis.attr('data-value-z');
 
-    if ($axis.is('.stick')) {
+    if ($axis.is(".stick")) {
         $axis.css({
-            'margin-top': axisY * 25,
+            "margin-top": axisY * 25,
-            'margin-left': axisX * 25,
+            "margin-left": axisX * 25,
-            'transform': 'rotateX(' + -parseFloat(axisY * 30, 8) + 'deg) rotateY(' + parseFloat(axisX * 30, 8) + 'deg)'
+            transform: `rotateX(${-parseFloat(
+                axisY * 30,
+                8
+            )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`
         });
     }
-}
+};