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

only refresh needed values

Browse Source
This commit is contained in:
e7d 2020-08-31 11:54:05 +02:00
parent 61e275ca45
commit d7cc861f2b
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
3 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
css/main.css
View File

@ -1,26 +1,26 @@
body { body {
background: transparent; background: transparent;
overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
height: 100vh; height: 100vh;
overflow: hidden;
} }
#debug { #debug {
position: absolute;
top: 0;
display: none;
width: 100vw;
font-size: 60px;
color: red; color: red;
display: none;
font-size: 60px;
line-height: 80px; line-height: 80px;
position: absolute;
text-align: center; text-align: center;
top: 0;
width: 100vw;
} }
.no-gamepad { .instructions {
width: 100vw;
height: 100vh; height: 100vh;
text-align: center;
line-height: 2em; line-height: 2em;
text-align: center;
width: 100vw;
} }
@keyframes press-button { @keyframes press-button {
@ -28,7 +28,7 @@ body {
fill: #898989; fill: #898989;
} }
5% { 7% {
fill: #898989; fill: #898989;
} }
@ -36,7 +36,7 @@ body {
fill: #00e530; fill: #00e530;
} }
15% { 17% {
fill: #00e530; fill: #00e530;
} }
@ -44,7 +44,7 @@ body {
fill: #898989; fill: #898989;
} }
25% { 27% {
fill: #898989; fill: #898989;
} }
@ -52,7 +52,7 @@ body {
fill: #00e530; fill: #00e530;
} }
35% { 37% {
fill: #00e530; fill: #00e530;
} }
@ -65,36 +65,36 @@ body {
} }
} }
.no-gamepad svg { .instructions svg {
height: 90%;
left: 50%;
max-width: 600px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 90%; width: 90%;
max-width: 600px;
height: 90%;
} }
.no-gamepad #a-button path { .instructions #a-button path {
animation: press-button 5s linear infinite; animation: press-button 5s linear infinite;
} }
#gamepad { #gamepad {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
} }
#help { #help-popout {
background: whitesmoke; background: whitesmoke;
color: black;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-sizing: border-box; box-sizing: border-box;
color: black;
display: none; display: none;
font-size: 0.9em; font-size: 0.9em;
left: 50%; left: 50%;
@ -106,43 +106,43 @@ body {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
#help.active { #help-popout.active {
display: block; display: block;
} }
#help h2 { #help-popout h2 {
margin-top: 0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
margin-top: 0;
} }
#help h3 { #help-popout h3 {
margin-top: 1.5em; margin-top: 1.5em;
} }
#help p:last-child { #help-popout p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
#help table { #help-popout table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
#help th { #help-popout th {
text-align: left; text-align: left;
} }
#help th, #help-popout th,
#help td { #help-popout td {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
line-height: 1.42857143; line-height: 1.42857143;
padding: 8px; padding: 8px;
vertical-align: top; vertical-align: top;
} }
#help table>thead>tr>th { #help-popout table>thead>tr>th {
border-bottom: 2px solid #ddd; border-bottom: 2px solid #ddd;
border-top: 0; border-top: 0;
vertical-align: bottom; vertical-align: bottom;
@ -176,23 +176,23 @@ kbd[title],
kbd, kbd,
kbd.dark { 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); -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); -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: -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)));
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); 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);
color: rgb(250, 250, 250);
text-shadow: -1px -1px 0 rgb(70, 70, 70);
} }
kbd.light { 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); -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);
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: rgb(250, 250, 250);
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);
color: rgb(50, 50, 50);
text-shadow: 0 0 2px rgb(255, 255, 255);
} }

4
index.html
View File

@ -14,7 +14,7 @@
</head> </head>
<body> <body>
<div class="no-gamepad"> <div class="instructions">
<p>Press <kbd>H</kbd> to read instructions.</p> <p>Press <kbd>H</kbd> to read instructions.</p>
<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve" <svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -80,7 +80,7 @@
</svg> </svg>
</div> </div>
<div id="gamepad"></div> <div id="gamepad"></div>
<div id="help"> <div id="help-popout">
<h2>Help</h2> <h2>Help</h2>
<h3>Instructions</h3> <h3>Instructions</h3>

29
js/gamepad.js
View File

@ -11,8 +11,8 @@ class Gamepad {
// cached DOM references // cached DOM references
this.$body = $("body"); this.$body = $("body");
this.$gamepad = $("#gamepad"); this.$gamepad = $("#gamepad");
this.$nogamepad = $(".no-gamepad"); this.$instructions = $(".instructions");
this.$help = $("#help"); this.$helpPopout = $("#help-popout");
this.$gamepadList = $("#gamepad-list"); this.$gamepadList = $("#gamepad-list");
this.backgroundColors = [ this.backgroundColors = [
@ -167,7 +167,7 @@ class Gamepad {
// cancel the queued display of the instructions animation, if any // cancel the queued display of the instructions animation, if any
window.clearTimeout(this.helpTimeout); window.clearTimeout(this.helpTimeout);
// hide the instructions animation // hide the instructions animation
this.$nogamepad.show(); this.$instructions.show();
// enqueue a delayed display of the instructions animation // enqueue a delayed display of the instructions animation
this.hideInstructions(); this.hideInstructions();
@ -181,12 +181,12 @@ class Gamepad {
hideInstructions(hideNow = false) { hideInstructions(hideNow = false) {
// hide the message right away if needed // hide the message right away if needed
if (hideNow) { if (hideNow) {
this.$nogamepad.hide(); this.$instructions.hide();
} }
// hide instructions animation if no gamepad is active after X ms // hide instructions animation if no gamepad is active after X ms
this.helpTimeout = window.setTimeout(() => { this.helpTimeout = window.setTimeout(() => {
this.$nogamepad.fadeOut(); this.$instructions.fadeOut();
}, this.helpDelay); }, this.helpDelay);
} }
@ -400,7 +400,7 @@ class Gamepad {
// hide the help messages // hide the help messages
this.hideInstructions(true); this.hideInstructions(true);
this.$help.removeClass("active"); this.$helpPopout.removeClass("active");
// update local references // update local references
this.index = index; this.index = index;
@ -476,9 +476,6 @@ class Gamepad {
this.$gamepad.empty(); this.$gamepad.empty();
} }
// update navigation hash
this.updateSettings({ player: null });
// enqueue a display of the instructions animation // enqueue a display of the instructions animation
this.displayInstructions(); this.displayInstructions();
this.debug = false; this.debug = false;
@ -547,6 +544,8 @@ class Gamepad {
this.updateButtons(activeGamepad); this.updateButtons(activeGamepad);
this.updateAxes(activeGamepad); this.updateAxes(activeGamepad);
this.activeGamepad = activeGamepad;
} }
/** /**
@ -557,6 +556,10 @@ class Gamepad {
updateButtons(gamepad) { updateButtons(gamepad) {
// update the buttons // update the buttons
for (let index = 0; index < gamepad.buttons.length; index++) { for (let index = 0; index < gamepad.buttons.length; index++) {
if (this.activeGamepad && this.activeGamepad.buttons[index].value == gamepad.buttons[index].value) {
return;
}
// find the DOM element // find the DOM element
const $button = this.mapping.buttons[index]; const $button = this.mapping.buttons[index];
if (!$button) { if (!$button) {
@ -586,6 +589,10 @@ class Gamepad {
updateAxes(gamepad) { updateAxes(gamepad) {
// update the axes // update the axes
for (let index = 0; index < gamepad.axes.length; index++) { for (let index = 0; index < gamepad.axes.length; index++) {
if (this.activeGamepad && this.activeGamepad.axes[index].value == gamepad.axes[index].value) {
return;
}
// find the DOM element // find the DOM element
const $axis = this.mapping.axes[index]; const $axis = this.mapping.axes[index];
if (!$axis) { if (!$axis) {
@ -803,7 +810,7 @@ class Gamepad {
* Toggles the on-screen help message * Toggles the on-screen help message
*/ */
toggleHelp() { toggleHelp() {
this.$help.toggleClass("active"); this.$helpPopout.toggleClass("active");
// save statistics // save statistics
if (!!window.ga) { if (!!window.ga) {
@ -811,7 +818,7 @@ class Gamepad {
eventCategory: "Gamepad", eventCategory: "Gamepad",
eventAction: "toggle-help", eventAction: "toggle-help",
eventLabel: "Toggle Help", eventLabel: "Toggle Help",
eventValue: this.$help.is("active"), eventValue: this.$helpPopout.is("active"),
}); });
} }
} }