From 1e92ac527fe98bcf3fd8615997dc1f41e1f1dd35 Mon Sep 17 00:00:00 2001 From: e7d Date: Mon, 17 Aug 2020 17:02:07 +0200 Subject: [PATCH] various improvments --- css/main.css | 52 ++++++++++++++++++++++++++++++++------- index.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++- js/demo.js | 5 +--- js/gamepad.js | 11 ++++----- 4 files changed, 115 insertions(+), 20 deletions(-) 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;