diff --git a/css/main.css b/css/main.css
index 7dd74f4..e6a705e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,11 +1,8 @@
-.no-break {
- display: inline-block;
-}
-
body {
background: transparent;
overflow: hidden;
font-family: sans-serif;
+ height: 100vh;
}
#debug {
@@ -19,13 +16,50 @@ body {
text-align: center;
}
-#no-gamepad {
- position: absolute;
- top: 20px;
- display: none;
+.no-gamepad {
width: 100vw;
- line-height: 2em;
+ height: 100vh;
text-align: center;
+ line-height: 2em;
+}
+
+@keyframes press-button {
+ 0% {
+ fill: #898989;
+ }
+
+ 5% {
+ fill: #898989;
+ }
+
+ 10% {
+ fill: #00e530;
+ }
+
+ 30% {
+ fill: #00e530;
+ }
+
+ 35% {
+ fill: #898989;
+ }
+
+ 100% {
+ fill: #898989;
+ }
+}
+
+.no-gamepad svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 50%;
+ height: 50%;
+}
+
+.no-gamepad #a-button path {
+ animation: press-button 5s linear infinite;
}
#gamepad {
diff --git a/index.html b/index.html
index b6a99d3..09c647b 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,72 @@
- No active gamepad detected. Press H to read instructions.
+
+
+
Press H to read instructions.
+
+
Help
diff --git a/js/demo.js b/js/demo.js
index 14c074e..f1230f3 100644
--- a/js/demo.js
+++ b/js/demo.js
@@ -38,13 +38,10 @@ class Demo {
* @param {string} [id='xinput']
*/
start(mode = 'random', id = 'xinput') {
- // remove any active gamepad
- this.gamepad.removeGamepad(true);
-
// add the demo gamepad to the gamepads list
this.gamepad.gamepads['demo'] = this.demoGamepad;
// map the demo gamepad as active gamepad
- this.gamepad.mapGamepad('demo');
+ this.gamepad.map('demo');
// determine the callback to use following the demo mode
let callback;
diff --git a/js/gamepad.js b/js/gamepad.js
index 0080afb..ad2f2c0 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -13,8 +13,7 @@ class Gamepad {
// cached DOM references
this.$body = $("body");
this.$gamepad = $("#gamepad");
- this.$nogamepad = $("#no-gamepad");
- this.$nogamepadLink = $("#no-gamepad a");
+ this.$nogamepad = $(".no-gamepad");
this.$help = $("#help");
this.$gamepadList = $("#gamepad-list");
@@ -36,17 +35,17 @@ class Gamepad {
colors: [],
},
ds4: {
- id: /054c/,
+ id: /054c|0810|2563/, // 054c = Sony vendor code, 0810,2563 = PS-like controllers vendor codes
name: "DualShock 4",
colors: ["black", "white", "red", "blue"],
},
// "switch-pro": {
- // id: /057e/,
+ // id: /057e/, // 057e = Nintendo vendor code
// name: "Switch Pro Controller",
// colors: ["black"],
// },
"xbox-one": {
- id: /045e|xinput|XInput/,
+ id: /045e|xinput|XInput/, // 045e = Microsoft vendor code, xinput = standard Windows controller
name: "Xbox One",
colors: ["black", "white"],
},
@@ -54,7 +53,7 @@ class Gamepad {
// gamepad help default values
this.helpTimeout = null;
- this.helpDelay = 5000;
+ this.helpDelay = 12000;
// active gamepad default values
this.scanDelay = 500;