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

fixed code files to match editorconfig rules

Browse Source
This commit is contained in:
e7d 2017-05-14 15:42:13 +02:00
parent fb928898d9
commit af6c61bec5
12 changed files with 228 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
css/main.css
View File

@ -3,6 +3,7 @@ body {
overflow: hidden; overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
} }
.debug { .debug {
position: absolute; position: absolute;
top: 0; top: 0;
@ -13,6 +14,7 @@ body {
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
} }
.no-gamepad { .no-gamepad {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -21,6 +23,7 @@ body {
line-height: 2em; line-height: 2em;
text-align: center; text-align: center;
} }
.gamepad { .gamepad {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -30,6 +33,7 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
.help { .help {
background: whitesmoke; background: whitesmoke;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
@ -44,16 +48,20 @@ body {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.help.active { .help.active {
display: block; display: block;
} }
.help h2 { .help h2 {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.help h3 { .help h3 {
margin-top: 1.5em; margin-top: 1.5em;
} }
.help p:last-child { .help p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -69,7 +77,8 @@ body {
text-align: left; text-align: left;
} }
.help th, .help td { .help th,
.help td {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
line-height: 1.42857143; line-height: 1.42857143;
padding: 8px; padding: 8px;
@ -83,45 +92,48 @@ body {
} }
kbd { kbd {
display: inline; display: inline;
display: inline-block; display: inline-block;
min-width: 1em; min-width: 1em;
padding: .2em .3em; padding: .2em .3em;
margin: 0 .2em; margin: 0 .2em;
font: normal 1em monospace; font: normal 1em monospace;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
-moz-border-radius: .3em; -moz-border-radius: .3em;
-webkit-border-radius: .3em; -webkit-border-radius: .3em;
border-radius: .3em; border-radius: .3em;
border: none; border: none;
cursor: default; cursor: default;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
}
kbd[title], .key[title] {
cursor: help;
} }
kbd, kbd.dark { kbd[title],
background: rgb(80, 80, 80); .key[title] {
background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80)); cursor: help;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80))); }
color: rgb(250, 250, 250);
text-shadow: -1px -1px 0 rgb(70, 70, 70); kbd,
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); kbd.dark {
-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); background: rgb(80, 80, 80);
box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
color: rgb(250, 250, 250);
text-shadow: -1px -1px 0 rgb(70, 70, 70);
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
} }
kbd.light { kbd.light {
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-shadow: 0 0 2px rgb(255, 255, 255); text-shadow: 0 0 2px rgb(255, 255, 255);
-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
} }

127
index.html
View File

@ -1,69 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Gamepad Viewer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="css/normalize.css"> <head>
<link rel="stylesheet" href="css/main.css"> <meta charset="utf-8">
</head> <meta http-equiv="x-ua-compatible" content="ie=edge">
<body> <title>Gamepad Viewer</title>
<div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div> <meta name="description" content="">
<div class="gamepad"></div> <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="help"> <link rel="icon" type="image/png" href="favicon.png">
<h2>Help</h2>
<h3>Instructions</h3> <link rel="stylesheet" href="css/normalize.css">
<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p> <link rel="stylesheet" href="css/main.css">
</head>
<h3>Keyboard shortcuts</h3> <body>
<table> <div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
<thead> <div class="gamepad"></div>
<tr> <div class="help">
<th>Key</th> <h2>Help</h2>
<th>Action</th>
</tr> <h3>Instructions</h3>
</thead> <p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p>
<tbody>
<tr> <h3>Keyboard shortcuts</h3>
<th><kbd>+</kbd></th> <table>
<td>Zoom gamepad in</td> <thead>
</tr> <tr>
<tr> <th>Key</th>
<th><kbd>-</kbd></th> <th>Action</th>
<td>Zoom gamepad out</td> </tr>
</tr> </thead>
<tr> <tbody>
<th><kbd>0</kbd></th> <tr>
<td>Reset gamepad zoom</td> <th><kbd>+</kbd></th>
</tr> <td>Zoom gamepad in</td>
<tr> </tr>
<th><kbd>C</kbd></th> <tr>
<td>Change active gamepad color</td> <th><kbd>-</kbd></th>
</tr> <td>Zoom gamepad out</td>
<tr> </tr>
<th><kbd>D</kbd></th> <tr>
<td>Toggle debug mode for active gamepad</td> <th><kbd>0</kbd></th>
</tr> <td>Reset gamepad zoom</td>
<tr> </tr>
<th><kbd>H</kbd></th> <tr>
<td>Display this help</td> <th><kbd>C</kbd></th>
</tr> <td>Change active gamepad color</td>
<tr> </tr>
<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th> <tr>
<td>Clear active gamepad</td> <th><kbd>D</kbd></th>
</tr> <td>Toggle debug mode for active gamepad</td>
</tbody> </tr>
</table> <tr>
</div> <th><kbd>H</kbd></th>
<td>Display this help</td>
</tr>
<tr>
<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
<td>Clear active gamepad</td>
</tr>
</tbody>
</table>
</div>
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/urlParam.jquery.js"></script>
<script src="js/gamepad.js"></script>
<script src="js/app.js"></script>
</body>
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/urlParam.jquery.js"></script>
<script src="js/gamepad.js"></script>
<script src="js/app.js"></script>
</body>
</html> </html>

51
js/gamepad.js
View File

@ -1,6 +1,6 @@
/** /**
* The main Gamepad class * The main Gamepad class
* *
* @class Gamepad * @class Gamepad
*/ */
class Gamepad { class Gamepad {
@ -9,7 +9,7 @@ class Gamepad {
*/ */
constructor() { constructor() {
this.haveEvents = 'GamepadEvent' in window; this.haveEvents = 'GamepadEvent' in window;
// cached DOM references // cached DOM references
this.$gamepad = $('.gamepad'); this.$gamepad = $('.gamepad');
this.$nogamepad = $('.no-gamepad'); this.$nogamepad = $('.no-gamepad');
@ -39,7 +39,7 @@ class Gamepad {
// gamepad help default values // gamepad help default values
this.gamepadHelpTimeout = null; this.gamepadHelpTimeout = null;
this.gamepadHelpDelay = 5000; this.gamepadHelpDelay = 5000;
// active gamepad default values // active gamepad default values
this.scanGamepadsDelay = 500; this.scanGamepadsDelay = 500;
this.debug = false; this.debug = false;
@ -58,7 +58,7 @@ class Gamepad {
// listen for gamepad related events // listen for gamepad related events
window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this)); window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this));
window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this)); window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this));
// listen for keyboard events // listen for keyboard events
window.addEventListener("keydown", this.onKeyDown.bind(this)); window.addEventListener("keydown", this.onKeyDown.bind(this));
@ -84,11 +84,11 @@ class Gamepad {
// by default, enqueue a delayed display of the help modal // by default, enqueue a delayed display of the help modal
this.displayGamepadHelp(); this.displayGamepadHelp();
} }
/** /**
* Displays the help modal on screen * Displays the help modal on screen
* *
* @param {boolean} [displayNow=false] * @param {boolean} [displayNow=false]
*/ */
displayGamepadHelp(displayNow = false) { displayGamepadHelp(displayNow = false) {
// display help modal if no gamepad is active after X ms // display help modal if no gamepad is active after X ms
@ -112,8 +112,8 @@ class Gamepad {
/** /**
* Handles the gamepad connection event * Handles the gamepad connection event
* *
* @param {GamepadEvent} e * @param {GamepadEvent} e
*/ */
onGamepadConnect(e) { onGamepadConnect(e) {
// on gamepad connection, add it to the list // on gamepad connection, add it to the list
@ -122,8 +122,8 @@ class Gamepad {
/** /**
* Handles the gamepad disconnection event * Handles the gamepad disconnection event
* *
* @param {GamepadEvent} e * @param {GamepadEvent} e
*/ */
onGamepadDisconnect(e) { onGamepadDisconnect(e) {
// on gamepad disconnection, remove it from the list // on gamepad disconnection, remove it from the list
@ -132,8 +132,8 @@ class Gamepad {
/** /**
* Handles the keyboard "keydown" event * Handles the keyboard "keydown" event
* *
* @param {KeyboardEvent} e * @param {KeyboardEvent} e
*/ */
onKeyDown(e) { onKeyDown(e) {
switch (e.code) { switch (e.code) {
@ -182,8 +182,8 @@ class Gamepad {
/** /**
* Adds a gamepad to the gamepads collection * Adds a gamepad to the gamepads collection
* *
* @param {object} gamepad * @param {object} gamepad
*/ */
addGamepad(gamepad) { addGamepad(gamepad) {
this.gamepads[gamepad.index] = gamepad; this.gamepads[gamepad.index] = gamepad;
@ -191,8 +191,8 @@ class Gamepad {
/** /**
* Removes a gamepad to the gamepads collection * Removes a gamepad to the gamepads collection
* *
* @param {object} gamepad * @param {object} gamepad
*/ */
removeGamepad(gamepadIndex) { removeGamepad(gamepadIndex) {
// ensure we have an index to remove // ensure we have an index to remove
@ -251,8 +251,8 @@ class Gamepad {
/** /**
* Sets a gamepad as active from its index * Sets a gamepad as active from its index
* *
* @param {int} gamepadIndex * @param {int} gamepadIndex
*/ */
mapGamepad(gamepadIndex) { mapGamepad(gamepadIndex) {
// ensure a gamepad need to be mapped // ensure a gamepad need to be mapped
@ -421,7 +421,7 @@ class Gamepad {
/** /**
* Changes the active gamepad color * Changes the active gamepad color
* *
* @param {any} gamepadColor * @param {any} gamepadColor
*/ */
changeGamepadColor(gamepadColor) { changeGamepadColor(gamepadColor) {
@ -462,7 +462,7 @@ class Gamepad {
/** /**
* Changes the active gamepad zoom level * Changes the active gamepad zoom level
* *
* @param {any} zoomLevel * @param {any} zoomLevel
*/ */
changeZoom(zoomLevel) { changeZoom(zoomLevel) {
@ -479,16 +479,13 @@ class Gamepad {
if ('0' === zoomLevel) { if ('0' === zoomLevel) {
// "0" means a zoom reset // "0" means a zoom reset
this.activeGamepadZoomLevel = 1; this.activeGamepadZoomLevel = 1;
} } else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) {
else if ('+' === zoomLevel && this.activeGamepadZoomLevel < 2) {
// "+" means a zoom in if we still can // "+" means a zoom in if we still can
this.activeGamepadZoomLevel += 0.1; 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 // "-" means a zoom out if we still can
this.activeGamepadZoomLevel -= 0.1; this.activeGamepadZoomLevel -= 0.1;
} } else if (!isNaN(zoomLevel = parseFloat(zoomLevel))) {
else if (!isNaN(zoomLevel = parseFloat(zoomLevel))) {
// an integer value means a value-based zoom // an integer value means a value-based zoom
this.activeGamepadZoomLevel = zoomLevel; this.activeGamepadZoomLevel = zoomLevel;
} }

6
templates/debug/template.css
View File

@ -3,7 +3,7 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
max-width: 600px; max-width: 600px;
} }
@ -12,18 +12,22 @@
line-height: 1; line-height: 1;
box-sizing: border-box; box-sizing: border-box;
} }
.box.small { .box.small {
width: 12.5%; width: 12.5%;
min-width: 50px; min-width: 50px;
} }
.box.medium { .box.medium {
width: 25%; width: 25%;
min-width: 100px; min-width: 100px;
} }
.box.large { .box.large {
width: 50%; width: 50%;
min-width: 200px; min-width: 200px;
} }
.box.extra-large { .box.extra-large {
width: 100%; width: 100%;
min-width: 400px; min-width: 400px;

60
templates/debug/template.html
View File

@ -1,40 +1,40 @@
<link rel="stylesheet" href="templates/debug/template.css"> <link rel="stylesheet" href="templates/debug/template.css">
<script async src="templates/debug/template.js"></script> <script async src="templates/debug/template.js"></script>
<div class="info"> <div class="info">
<div class="container"> <div class="container">
<div id="info-id" class="box extra-large"> <div id="info-id" class="box extra-large">
<div class="content"> <div class="content">
<div class="label">ID</div> <div class="label">ID</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="info"> <div class="info">
<div class="container"> <div class="container">
<div id="info-timestamp" class="box large"> <div id="info-timestamp" class="box large">
<div class="content"> <div class="content">
<div class="label">TIMESTAMP</div> <div class="label">TIMESTAMP</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="info-index" class="box medium"> <div id="info-index" class="box medium">
<div class="content"> <div class="content">
<div class="label">INDEX</div> <div class="label">INDEX</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="info-mapping" class="box medium"> <div id="info-mapping" class="box medium">
<div class="content"> <div class="content">
<div class="label">MAPPING</div> <div class="label">MAPPING</div>
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="axes"> <div class="axes">
<div class="container"></div> <div class="container"></div>
</div> </div>
<div class="buttons"> <div class="buttons">
<div class="container"></div> <div class="container"></div>
</div> </div>

4
templates/debug/template.js
View File

@ -40,11 +40,11 @@
); );
} }
gamepad.updateButton = function($button) { gamepad.updateButton = function ($button) {
updateElem($button); updateElem($button);
} }
gamepad.updateAxis = function($axis) { gamepad.updateAxis = function ($axis) {
updateElem($axis, 6); updateElem($axis, 6);
} }

12
templates/ds4/template.css
View File

@ -112,14 +112,16 @@
left: 227px; left: 227px;
} }
.gamepad .select, .gamepad .start { .gamepad .select,
.gamepad .start {
background: url(start.svg); background: url(start.svg);
width: 28px; width: 28px;
height: 46px; height: 46px;
opacity: 0; opacity: 0;
} }
.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { .gamepad .select[data-pressed="true"],
.gamepad .start[data-pressed="true"] {
opacity: 1; opacity: 1;
} }
@ -219,12 +221,14 @@
position: absolute; position: absolute;
} }
.gamepad .face.up, .gamepad .face.down { .gamepad .face.up,
.gamepad .face.down {
width: 36px; width: 36px;
height: 52px; height: 52px;
} }
.gamepad .face.left, .gamepad .face.right { .gamepad .face.left,
.gamepad .face.right {
width: 52px; width: 52px;
height: 36px; height: 36px;
} }

38
templates/ds4/template.html
View File

@ -1,35 +1,35 @@
<link rel="stylesheet" href="templates/ds4/template.css"> <link rel="stylesheet" href="templates/ds4/template.css">
<script async src="templates/ds4/template.js"></script> <script async src="templates/ds4/template.js"></script>
<div class="triggers"> <div class="triggers">
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <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 right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="bumpers"> <div class="bumpers">
<span class="bumper left" data-button="4"></span> <span class="bumper left" data-button="4"></span>
<span class="bumper right" data-button="5"></span> <span class="bumper right" data-button="5"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="touchpad" data-button="17"></div> <div class="touchpad" data-button="17"></div>
<div class="meta" data-button="16"></div> <div class="meta" data-button="16"></div>
<div class="arrows"> <div class="arrows">
<span class="select" data-button="8"></span> <span class="select" data-button="8"></span>
<span class="start" data-button="9"></span> <span class="start" data-button="9"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="buttons"> <div class="buttons">
<span class="button a" data-button="0"></span> <span class="button a" data-button="0"></span>
<span class="button b" data-button="1"></span> <span class="button b" data-button="1"></span>
<span class="button x" data-button="2"></span> <span class="button x" data-button="2"></span>
<span class="button y" data-button="3"></span> <span class="button y" data-button="3"></span>
</div> </div>
<div class="sticks"> <div class="sticks">
<span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span> <span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span>
<span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span> <span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span>
</div> </div>
<div class="dpad"> <div class="dpad">
<span class="face up" data-button="12"></span> <span class="face up" data-button="12"></span>
<span class="face down" data-button="13"></span> <span class="face down" data-button="13"></span>
<span class="face left" data-button="14"></span> <span class="face left" data-button="14"></span>
<span class="face right" data-button="15"></span> <span class="face right" data-button="15"></span>
</div> </div>

4
templates/ds4/template.js
View File

@ -1,4 +1,4 @@
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')) {
@ -8,7 +8,7 @@ gamepad.updateButton = function($button) {
} }
} }
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'); const axisZ = $axis.attr('data-value-z');

6
templates/xbox-one/template.css
View File

@ -101,14 +101,16 @@
left: 306px; left: 306px;
} }
.gamepad .select, .gamepad .start { .gamepad .select,
.gamepad .start {
background: url(start-select.svg); background: url(start-select.svg);
width: 33px; width: 33px;
height: 33px; height: 33px;
opacity: 0; opacity: 0;
} }
.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { .gamepad .select[data-pressed="true"],
.gamepad .start[data-pressed="true"] {
opacity: 1; opacity: 1;
} }

38
templates/xbox-one/template.html
View File

@ -1,34 +1,34 @@
<link rel="stylesheet" href="templates/xbox-one/template.css"> <link rel="stylesheet" href="templates/xbox-one/template.css">
<script async src="templates/xbox-one/template.js"></script> <script async src="templates/xbox-one/template.js"></script>
<div class="triggers"> <div class="triggers">
<span class="trigger left" data-button="6" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span> <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 right" data-button="7" style="-webkit-clip-path: inset(100% 0px 0px 0pc);"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="bumpers"> <div class="bumpers">
<span class="bumper left" data-button="4"></span> <span class="bumper left" data-button="4"></span>
<span class="bumper right" data-button="5"></span> <span class="bumper right" data-button="5"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="meta" data-button="16"></div> <div class="meta" data-button="16"></div>
<div class="arrows"> <div class="arrows">
<span class="select" data-button="8"></span> <span class="select" data-button="8"></span>
<span class="start" data-button="9"></span> <span class="start" data-button="9"></span>
<span class="clear"></span> <span class="clear"></span>
</div> </div>
<div class="buttons"> <div class="buttons">
<span class="button a" data-button="0"></span> <span class="button a" data-button="0"></span>
<span class="button b" data-button="1"></span> <span class="button b" data-button="1"></span>
<span class="button x" data-button="2"></span> <span class="button x" data-button="2"></span>
<span class="button y" data-button="3"></span> <span class="button y" data-button="3"></span>
</div> </div>
<div class="sticks"> <div class="sticks">
<span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span> <span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span>
<span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span> <span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span>
</div> </div>
<div class="dpad"> <div class="dpad">
<span class="face up" data-button="12"></span> <span class="face up" data-button="12"></span>
<span class="face down" data-button="13"></span> <span class="face down" data-button="13"></span>
<span class="face left" data-button="14"></span> <span class="face left" data-button="14"></span>
<span class="face right" data-button="15"></span> <span class="face right" data-button="15"></span>
</div> </div>

6
templates/xbox-one/template.js
View File

@ -1,4 +1,4 @@
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')) {
@ -8,7 +8,7 @@ gamepad.updateButton = function($button) {
} }
} }
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'); const axisZ = $axis.attr('data-value-z');
@ -20,4 +20,4 @@ gamepad.updateAxis = function($axis) {
'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)'
}); });
} }
} }