From ba0f190a1aec1ac60e3817be73cd96654797d63e Mon Sep 17 00:00:00 2001 From: e7d Date: Sat, 5 Nov 2016 22:53:14 +0100 Subject: [PATCH] added help --- css/main.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 38 +++++++++++++++++++++ js/gamepad.js | 4 +++ 3 files changed, 137 insertions(+) diff --git a/css/main.css b/css/main.css index 53fa7ad..4eba7c0 100644 --- a/css/main.css +++ b/css/main.css @@ -11,3 +11,98 @@ body { background-repeat: no-repeat; 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); +} diff --git a/index.html b/index.html index c098fbd..84b3415 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,44 @@
+
+

Help

+ +

Instructions

+

Press any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.

+ +

Keyboard shortcuts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyAction
+Zoom gamepad in
-Zoom gamepad out
CChange active gamepad color
HDisplay this help
Delete, EscapeClear active gamepad
+
diff --git a/js/gamepad.js b/js/gamepad.js index 635b7e2..4e5d8b8 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -10,6 +10,7 @@ $.urlParam = function(name) { var haveEvents = 'ongamepadconnected' in window; var gamepads = {}; var $gamepad = $('.gamepad'); +var $help = $('.help'); var gamepadIdentifiers = { 'ds4': { 'id': /054c.*?05c4/, @@ -52,6 +53,9 @@ function onKeyDown(e) { case "KeyC": changeGamepadColor(); break; + case "KeyH": + toggleHelp(); + break; case "NumpadAdd": case "Equal": changeZoom("+");