added help
This commit is contained in:
e7d
parent
c0c005221a
commit
ba0f190a1a
95
css/main.css
95
css/main.css
@ -11,3 +11,98 @@ body {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
.help {
|
||||||
|
background: whitesmoke;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: none;
|
||||||
|
font-size: 10pt;
|
||||||
|
left: 50%;
|
||||||
|
min-width: 400px;
|
||||||
|
padding: 20px;
|
||||||
|
position: absolute;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help th, .help td {
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
line-height: 1.42857143;
|
||||||
|
padding: 8px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help table>thead>tr>th {
|
||||||
|
border-bottom: 2px solid #ddd;
|
||||||
|
border-top: 0;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|||||||
38
index.html
38
index.html
@ -12,6 +12,44 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="gamepad"></div>
|
<div class="gamepad"></div>
|
||||||
|
<div class="help">
|
||||||
|
<h2>Help</h2>
|
||||||
|
|
||||||
|
<h3>Instructions</h3>
|
||||||
|
<p>Press 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>C</kbd></th>
|
||||||
|
<td>Change active gamepad color</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="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||||
<script src="js/gamepad.js"></script>
|
<script src="js/gamepad.js"></script>
|
||||||
|
|||||||
@ -10,6 +10,7 @@ $.urlParam = function(name) {
|
|||||||
var haveEvents = 'ongamepadconnected' in window;
|
var haveEvents = 'ongamepadconnected' in window;
|
||||||
var gamepads = {};
|
var gamepads = {};
|
||||||
var $gamepad = $('.gamepad');
|
var $gamepad = $('.gamepad');
|
||||||
|
var $help = $('.help');
|
||||||
var gamepadIdentifiers = {
|
var gamepadIdentifiers = {
|
||||||
'ds4': {
|
'ds4': {
|
||||||
'id': /054c.*?05c4/,
|
'id': /054c.*?05c4/,
|
||||||
@ -52,6 +53,9 @@ function onKeyDown(e) {
|
|||||||
case "KeyC":
|
case "KeyC":
|
||||||
changeGamepadColor();
|
changeGamepadColor();
|
||||||
break;
|
break;
|
||||||
|
case "KeyH":
|
||||||
|
toggleHelp();
|
||||||
|
break;
|
||||||
case "NumpadAdd":
|
case "NumpadAdd":
|
||||||
case "Equal":
|
case "Equal":
|
||||||
changeZoom("+");
|
changeZoom("+");
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user