only refresh needed values
This commit is contained in:
e7d
parent
61e275ca45
commit
d7cc861f2b
88
css/main.css
88
css/main.css
@ -1,26 +1,26 @@
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
font-family: sans-serif;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#debug {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: none;
|
||||
width: 100vw;
|
||||
font-size: 60px;
|
||||
color: red;
|
||||
display: none;
|
||||
font-size: 60px;
|
||||
line-height: 80px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.no-gamepad {
|
||||
width: 100vw;
|
||||
.instructions {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
@keyframes press-button {
|
||||
@ -28,7 +28,7 @@ body {
|
||||
fill: #898989;
|
||||
}
|
||||
|
||||
5% {
|
||||
7% {
|
||||
fill: #898989;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ body {
|
||||
fill: #00e530;
|
||||
}
|
||||
|
||||
15% {
|
||||
17% {
|
||||
fill: #00e530;
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ body {
|
||||
fill: #898989;
|
||||
}
|
||||
|
||||
25% {
|
||||
27% {
|
||||
fill: #898989;
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ body {
|
||||
fill: #00e530;
|
||||
}
|
||||
|
||||
35% {
|
||||
37% {
|
||||
fill: #00e530;
|
||||
}
|
||||
|
||||
@ -65,36 +65,36 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.no-gamepad svg {
|
||||
.instructions svg {
|
||||
height: 90%;
|
||||
left: 50%;
|
||||
max-width: 600px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.no-gamepad #a-button path {
|
||||
.instructions #a-button path {
|
||||
animation: press-button 5s linear infinite;
|
||||
}
|
||||
|
||||
#gamepad {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#help {
|
||||
#help-popout {
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
display: none;
|
||||
font-size: 0.9em;
|
||||
left: 50%;
|
||||
@ -106,43 +106,43 @@ body {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#help.active {
|
||||
#help-popout.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#help h2 {
|
||||
margin-top: 0;
|
||||
#help-popout h2 {
|
||||
margin-bottom: 1.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#help h3 {
|
||||
#help-popout h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
#help p:last-child {
|
||||
#help-popout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#help table {
|
||||
#help-popout table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#help th {
|
||||
#help-popout th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#help th,
|
||||
#help td {
|
||||
#help-popout th,
|
||||
#help-popout td {
|
||||
border-top: 1px solid #ddd;
|
||||
line-height: 1.42857143;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#help table>thead>tr>th {
|
||||
#help-popout table>thead>tr>th {
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-top: 0;
|
||||
vertical-align: bottom;
|
||||
@ -176,23 +176,23 @@ kbd[title],
|
||||
|
||||
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);
|
||||
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);
|
||||
color: rgb(250, 250, 250);
|
||||
text-shadow: -1px -1px 0 rgb(70, 70, 70);
|
||||
}
|
||||
|
||||
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);
|
||||
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);
|
||||
color: rgb(50, 50, 50);
|
||||
text-shadow: 0 0 2px rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="no-gamepad">
|
||||
<div class="instructions">
|
||||
<p>Press <kbd>H</kbd> to read instructions.</p>
|
||||
<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@ -80,7 +80,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div id="gamepad"></div>
|
||||
<div id="help">
|
||||
<div id="help-popout">
|
||||
<h2>Help</h2>
|
||||
|
||||
<h3>Instructions</h3>
|
||||
|
||||
@ -11,8 +11,8 @@ class Gamepad {
|
||||
// cached DOM references
|
||||
this.$body = $("body");
|
||||
this.$gamepad = $("#gamepad");
|
||||
this.$nogamepad = $(".no-gamepad");
|
||||
this.$help = $("#help");
|
||||
this.$instructions = $(".instructions");
|
||||
this.$helpPopout = $("#help-popout");
|
||||
this.$gamepadList = $("#gamepad-list");
|
||||
|
||||
this.backgroundColors = [
|
||||
@ -167,7 +167,7 @@ class Gamepad {
|
||||
// cancel the queued display of the instructions animation, if any
|
||||
window.clearTimeout(this.helpTimeout);
|
||||
// hide the instructions animation
|
||||
this.$nogamepad.show();
|
||||
this.$instructions.show();
|
||||
|
||||
// enqueue a delayed display of the instructions animation
|
||||
this.hideInstructions();
|
||||
@ -181,12 +181,12 @@ class Gamepad {
|
||||
hideInstructions(hideNow = false) {
|
||||
// hide the message right away if needed
|
||||
if (hideNow) {
|
||||
this.$nogamepad.hide();
|
||||
this.$instructions.hide();
|
||||
}
|
||||
|
||||
// hide instructions animation if no gamepad is active after X ms
|
||||
this.helpTimeout = window.setTimeout(() => {
|
||||
this.$nogamepad.fadeOut();
|
||||
this.$instructions.fadeOut();
|
||||
}, this.helpDelay);
|
||||
}
|
||||
|
||||
@ -400,7 +400,7 @@ class Gamepad {
|
||||
|
||||
// hide the help messages
|
||||
this.hideInstructions(true);
|
||||
this.$help.removeClass("active");
|
||||
this.$helpPopout.removeClass("active");
|
||||
|
||||
// update local references
|
||||
this.index = index;
|
||||
@ -476,9 +476,6 @@ class Gamepad {
|
||||
this.$gamepad.empty();
|
||||
}
|
||||
|
||||
// update navigation hash
|
||||
this.updateSettings({ player: null });
|
||||
|
||||
// enqueue a display of the instructions animation
|
||||
this.displayInstructions();
|
||||
this.debug = false;
|
||||
@ -547,6 +544,8 @@ class Gamepad {
|
||||
|
||||
this.updateButtons(activeGamepad);
|
||||
this.updateAxes(activeGamepad);
|
||||
|
||||
this.activeGamepad = activeGamepad;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -557,6 +556,10 @@ class Gamepad {
|
||||
updateButtons(gamepad) {
|
||||
// update the buttons
|
||||
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
|
||||
const $button = this.mapping.buttons[index];
|
||||
if (!$button) {
|
||||
@ -586,6 +589,10 @@ class Gamepad {
|
||||
updateAxes(gamepad) {
|
||||
// update the axes
|
||||
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
|
||||
const $axis = this.mapping.axes[index];
|
||||
if (!$axis) {
|
||||
@ -803,7 +810,7 @@ class Gamepad {
|
||||
* Toggles the on-screen help message
|
||||
*/
|
||||
toggleHelp() {
|
||||
this.$help.toggleClass("active");
|
||||
this.$helpPopout.toggleClass("active");
|
||||
|
||||
// save statistics
|
||||
if (!!window.ga) {
|
||||
@ -811,7 +818,7 @@ class Gamepad {
|
||||
eventCategory: "Gamepad",
|
||||
eventAction: "toggle-help",
|
||||
eventLabel: "Toggle Help",
|
||||
eventValue: this.$help.is("active"),
|
||||
eventValue: this.$helpPopout.is("active"),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user