fixed code files to match editorconfig rules
This commit is contained in:
e7d
parent
fb928898d9
commit
af6c61bec5
82
css/main.css
82
css/main.css
@ -3,6 +3,7 @@ body {
|
||||
overflow: hidden;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.debug {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -13,6 +14,7 @@ body {
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-gamepad {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
@ -21,6 +23,7 @@ body {
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gamepad {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -30,6 +33,7 @@ body {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.help {
|
||||
background: whitesmoke;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
@ -44,16 +48,20 @@ body {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.help.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.help h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.help h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.help p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -69,7 +77,8 @@ body {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.help th, .help td {
|
||||
.help th,
|
||||
.help td {
|
||||
border-top: 1px solid #ddd;
|
||||
line-height: 1.42857143;
|
||||
padding: 8px;
|
||||
@ -83,45 +92,48 @@ body {
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
min-width: 1em;
|
||||
padding: .2em .3em;
|
||||
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;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
border: none;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
kbd[title], .key[title] {
|
||||
cursor: help;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
border: none;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
kbd, kbd.dark {
|
||||
background: rgb(80, 80, 80);
|
||||
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[title],
|
||||
.key[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
kbd,
|
||||
kbd.dark {
|
||||
background: rgb(80, 80, 80);
|
||||
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 {
|
||||
background: rgb(250, 250, 250);
|
||||
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)));
|
||||
color: rgb(50, 50, 50);
|
||||
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);
|
||||
-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);
|
||||
background: rgb(250, 250, 250);
|
||||
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)));
|
||||
color: rgb(50, 50, 50);
|
||||
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);
|
||||
-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);
|
||||
}
|
||||
|
||||
127
index.html
127
index.html
@ -1,69 +1,72 @@
|
||||
<!DOCTYPE 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">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
|
||||
<div class="gamepad"></div>
|
||||
<div class="help">
|
||||
<h2>Help</h2>
|
||||
<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">
|
||||
|
||||
<h3>Instructions</h3>
|
||||
<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/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<h3>Keyboard shortcuts</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><kbd>+</kbd></th>
|
||||
<td>Zoom gamepad in</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>-</kbd></th>
|
||||
<td>Zoom gamepad out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>0</kbd></th>
|
||||
<td>Reset gamepad zoom</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>C</kbd></th>
|
||||
<td>Change active gamepad color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>D</kbd></th>
|
||||
<td>Toggle debug mode for active gamepad</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
<body>
|
||||
<div class="no-gamepad">No active gamepad detected. Press <kbd>H</kbd> to read instructions.</div>
|
||||
<div class="gamepad"></div>
|
||||
<div class="help">
|
||||
<h2>Help</h2>
|
||||
|
||||
<h3>Instructions</h3>
|
||||
<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p>
|
||||
|
||||
<h3>Keyboard shortcuts</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><kbd>+</kbd></th>
|
||||
<td>Zoom gamepad in</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>-</kbd></th>
|
||||
<td>Zoom gamepad out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>0</kbd></th>
|
||||
<td>Reset gamepad zoom</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>C</kbd></th>
|
||||
<td>Change active gamepad color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>D</kbd></th>
|
||||
<td>Toggle debug mode for active gamepad</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* The main Gamepad class
|
||||
*
|
||||
*
|
||||
* @class Gamepad
|
||||
*/
|
||||
class Gamepad {
|
||||
@ -9,7 +9,7 @@ class Gamepad {
|
||||
*/
|
||||
constructor() {
|
||||
this.haveEvents = 'GamepadEvent' in window;
|
||||
|
||||
|
||||
// cached DOM references
|
||||
this.$gamepad = $('.gamepad');
|
||||
this.$nogamepad = $('.no-gamepad');
|
||||
@ -39,7 +39,7 @@ class Gamepad {
|
||||
// gamepad help default values
|
||||
this.gamepadHelpTimeout = null;
|
||||
this.gamepadHelpDelay = 5000;
|
||||
|
||||
|
||||
// active gamepad default values
|
||||
this.scanGamepadsDelay = 500;
|
||||
this.debug = false;
|
||||
@ -58,7 +58,7 @@ class Gamepad {
|
||||
// listen for gamepad related events
|
||||
window.addEventListener("gamepadconnected", this.onGamepadConnect.bind(this));
|
||||
window.addEventListener("gamepaddisconnected", this.onGamepadDisconnect.bind(this));
|
||||
|
||||
|
||||
// listen for keyboard events
|
||||
window.addEventListener("keydown", this.onKeyDown.bind(this));
|
||||
|
||||
@ -84,11 +84,11 @@ class Gamepad {
|
||||
// by default, enqueue a delayed display of the help modal
|
||||
this.displayGamepadHelp();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Displays the help modal on screen
|
||||
*
|
||||
* @param {boolean} [displayNow=false]
|
||||
*
|
||||
* @param {boolean} [displayNow=false]
|
||||
*/
|
||||
displayGamepadHelp(displayNow = false) {
|
||||
// display help modal if no gamepad is active after X ms
|
||||
@ -112,8 +112,8 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Handles the gamepad connection event
|
||||
*
|
||||
* @param {GamepadEvent} e
|
||||
*
|
||||
* @param {GamepadEvent} e
|
||||
*/
|
||||
onGamepadConnect(e) {
|
||||
// on gamepad connection, add it to the list
|
||||
@ -122,8 +122,8 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Handles the gamepad disconnection event
|
||||
*
|
||||
* @param {GamepadEvent} e
|
||||
*
|
||||
* @param {GamepadEvent} e
|
||||
*/
|
||||
onGamepadDisconnect(e) {
|
||||
// on gamepad disconnection, remove it from the list
|
||||
@ -132,8 +132,8 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Handles the keyboard "keydown" event
|
||||
*
|
||||
* @param {KeyboardEvent} e
|
||||
*
|
||||
* @param {KeyboardEvent} e
|
||||
*/
|
||||
onKeyDown(e) {
|
||||
switch (e.code) {
|
||||
@ -182,8 +182,8 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Adds a gamepad to the gamepads collection
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*/
|
||||
addGamepad(gamepad) {
|
||||
this.gamepads[gamepad.index] = gamepad;
|
||||
@ -191,8 +191,8 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Removes a gamepad to the gamepads collection
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*
|
||||
* @param {object} gamepad
|
||||
*/
|
||||
removeGamepad(gamepadIndex) {
|
||||
// ensure we have an index to remove
|
||||
@ -251,8 +251,8 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Sets a gamepad as active from its index
|
||||
*
|
||||
* @param {int} gamepadIndex
|
||||
*
|
||||
* @param {int} gamepadIndex
|
||||
*/
|
||||
mapGamepad(gamepadIndex) {
|
||||
// ensure a gamepad need to be mapped
|
||||
@ -421,7 +421,7 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Changes the active gamepad color
|
||||
*
|
||||
*
|
||||
* @param {any} gamepadColor
|
||||
*/
|
||||
changeGamepadColor(gamepadColor) {
|
||||
@ -462,7 +462,7 @@ class Gamepad {
|
||||
|
||||
/**
|
||||
* Changes the active gamepad zoom level
|
||||
*
|
||||
*
|
||||
* @param {any} zoomLevel
|
||||
*/
|
||||
changeZoom(zoomLevel) {
|
||||
@ -479,16 +479,13 @@ class Gamepad {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
@ -12,18 +12,22 @@
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box.small {
|
||||
width: 12.5%;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.box.medium {
|
||||
width: 25%;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.box.large {
|
||||
width: 50%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.box.extra-large {
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
<link rel="stylesheet" href="templates/debug/template.css">
|
||||
<script async src="templates/debug/template.js"></script>
|
||||
<div class="info">
|
||||
<div class="container">
|
||||
<div id="info-id" class="box extra-large">
|
||||
<div class="content">
|
||||
<div class="label">ID</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="info-id" class="box extra-large">
|
||||
<div class="content">
|
||||
<div class="label">ID</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="container">
|
||||
<div id="info-timestamp" class="box large">
|
||||
<div class="content">
|
||||
<div class="label">TIMESTAMP</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-index" class="box medium">
|
||||
<div class="content">
|
||||
<div class="label">INDEX</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-mapping" class="box medium">
|
||||
<div class="content">
|
||||
<div class="label">MAPPING</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="info-timestamp" class="box large">
|
||||
<div class="content">
|
||||
<div class="label">TIMESTAMP</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-index" class="box medium">
|
||||
<div class="content">
|
||||
<div class="label">INDEX</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-mapping" class="box medium">
|
||||
<div class="content">
|
||||
<div class="label">MAPPING</div>
|
||||
<div class="value"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="axes">
|
||||
<div class="container"></div>
|
||||
<div class="container"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="container"></div>
|
||||
<div class="container"></div>
|
||||
</div>
|
||||
|
||||
@ -40,11 +40,11 @@
|
||||
);
|
||||
}
|
||||
|
||||
gamepad.updateButton = function($button) {
|
||||
gamepad.updateButton = function ($button) {
|
||||
updateElem($button);
|
||||
}
|
||||
|
||||
gamepad.updateAxis = function($axis) {
|
||||
gamepad.updateAxis = function ($axis) {
|
||||
updateElem($axis, 6);
|
||||
}
|
||||
|
||||
|
||||
@ -112,14 +112,16 @@
|
||||
left: 227px;
|
||||
}
|
||||
|
||||
.gamepad .select, .gamepad .start {
|
||||
.gamepad .select,
|
||||
.gamepad .start {
|
||||
background: url(start.svg);
|
||||
width: 28px;
|
||||
height: 46px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] {
|
||||
.gamepad .select[data-pressed="true"],
|
||||
.gamepad .start[data-pressed="true"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -219,12 +221,14 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.gamepad .face.up, .gamepad .face.down {
|
||||
.gamepad .face.up,
|
||||
.gamepad .face.down {
|
||||
width: 36px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.gamepad .face.left, .gamepad .face.right {
|
||||
.gamepad .face.left,
|
||||
.gamepad .face.right {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
<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="clear"></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="clear"></span>
|
||||
</div>
|
||||
<div class="bumpers">
|
||||
<span class="bumper left" data-button="4"></span>
|
||||
<span class="bumper right" data-button="5"></span>
|
||||
<span class="clear"></span>
|
||||
<span class="bumper left" data-button="4"></span>
|
||||
<span class="bumper right" data-button="5"></span>
|
||||
<span class="clear"></span>
|
||||
</div>
|
||||
<div class="touchpad" data-button="17"></div>
|
||||
<div class="meta" data-button="16"></div>
|
||||
<div class="arrows">
|
||||
<span class="select" data-button="8"></span>
|
||||
<span class="start" data-button="9"></span>
|
||||
<span class="clear"></span>
|
||||
<span class="select" data-button="8"></span>
|
||||
<span class="start" data-button="9"></span>
|
||||
<span class="clear"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<span class="button a" data-button="0"></span>
|
||||
<span class="button b" data-button="1"></span>
|
||||
<span class="button x" data-button="2"></span>
|
||||
<span class="button y" data-button="3"></span>
|
||||
<span class="button a" data-button="0"></span>
|
||||
<span class="button b" data-button="1"></span>
|
||||
<span class="button x" data-button="2"></span>
|
||||
<span class="button y" data-button="3"></span>
|
||||
</div>
|
||||
<div class="sticks">
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="dpad">
|
||||
<span class="face up" data-button="12"></span>
|
||||
<span class="face down" data-button="13"></span>
|
||||
<span class="face left" data-button="14"></span>
|
||||
<span class="face right" data-button="15"></span>
|
||||
<span class="face up" data-button="12"></span>
|
||||
<span class="face down" data-button="13"></span>
|
||||
<span class="face left" data-button="14"></span>
|
||||
<span class="face right" data-button="15"></span>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
gamepad.updateButton = function($button) {
|
||||
gamepad.updateButton = function ($button) {
|
||||
const value = parseFloat($button.attr('data-value'), 10);
|
||||
|
||||
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 axisY = $axis.attr('data-value-y');
|
||||
const axisZ = $axis.attr('data-value-z');
|
||||
|
||||
@ -101,14 +101,16 @@
|
||||
left: 306px;
|
||||
}
|
||||
|
||||
.gamepad .select, .gamepad .start {
|
||||
.gamepad .select,
|
||||
.gamepad .start {
|
||||
background: url(start-select.svg);
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] {
|
||||
.gamepad .select[data-pressed="true"],
|
||||
.gamepad .start[data-pressed="true"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
<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="clear"></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="clear"></span>
|
||||
</div>
|
||||
<div class="bumpers">
|
||||
<span class="bumper left" data-button="4"></span>
|
||||
<span class="bumper right" data-button="5"></span>
|
||||
<span class="clear"></span>
|
||||
<span class="bumper left" data-button="4"></span>
|
||||
<span class="bumper right" data-button="5"></span>
|
||||
<span class="clear"></span>
|
||||
</div>
|
||||
<div class="meta" data-button="16"></div>
|
||||
<div class="arrows">
|
||||
<span class="select" data-button="8"></span>
|
||||
<span class="start" data-button="9"></span>
|
||||
<span class="clear"></span>
|
||||
<span class="select" data-button="8"></span>
|
||||
<span class="start" data-button="9"></span>
|
||||
<span class="clear"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<span class="button a" data-button="0"></span>
|
||||
<span class="button b" data-button="1"></span>
|
||||
<span class="button x" data-button="2"></span>
|
||||
<span class="button y" data-button="3"></span>
|
||||
<span class="button a" data-button="0"></span>
|
||||
<span class="button b" data-button="1"></span>
|
||||
<span class="button x" data-button="2"></span>
|
||||
<span class="button y" data-button="3"></span>
|
||||
</div>
|
||||
<div class="sticks">
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="dpad">
|
||||
<span class="face up" data-button="12"></span>
|
||||
<span class="face down" data-button="13"></span>
|
||||
<span class="face left" data-button="14"></span>
|
||||
<span class="face right" data-button="15"></span>
|
||||
<span class="face up" data-button="12"></span>
|
||||
<span class="face down" data-button="13"></span>
|
||||
<span class="face left" data-button="14"></span>
|
||||
<span class="face right" data-button="15"></span>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
gamepad.updateButton = function($button) {
|
||||
gamepad.updateButton = function ($button) {
|
||||
const value = parseFloat($button.attr('data-value'), 10);
|
||||
|
||||
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 axisY = $axis.attr('data-value-y');
|
||||
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)'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user