From 0ebb16f1ea88f8f2326ff302c61f57429ddebc5d Mon Sep 17 00:00:00 2001 From: e7d Date: Fri, 11 Nov 2016 09:20:23 +0100 Subject: [PATCH] improved the no gamepad message --- css/main.css | 7 ++++--- index.html | 2 +- js/gamepad.js | 20 +++++++++++++++++++- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 393608a..b6af9b3 100644 --- a/css/main.css +++ b/css/main.css @@ -3,11 +3,12 @@ body { overflow: hidden; } .no-gamepad { + position: absolute; + bottom: 0; + display: none; width: 100vw; - line-height: 100vh; + line-height: 2em; text-align: center; - text-transform: uppercase; - font-weight: 700; } .gamepad { position: absolute; diff --git a/index.html b/index.html index 4da4bd2..c0c211f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -
No gamepad detected
+
No active gamepad. Press H to see how it works.

Help

diff --git a/js/gamepad.js b/js/gamepad.js index 33dfcf0..c2a4e5c 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 $nogamepad = $('.no-gamepad'); var $help = $('.help'); var gamepadIdentifiers = { 'ds4': { @@ -21,6 +22,8 @@ var gamepadIdentifiers = { 'colors': ['black', 'white'] } }; +var gamepadHelpTimeout = null; +var gamepadHelpDelay = 10000; var activeGamepadIndex = null; var activeGamepadType = null; var activeGamepadIdentifier = null; @@ -36,6 +39,17 @@ window.addEventListener("gamepadconnected", onGamepadConnect); window.addEventListener("gamepaddisconnected", onGamepadDisconnect); window.addEventListener("keydown", onKeyDown); +displayGamepadHelp(); +function displayGamepadHelp() { + gamepadHelpTimeout = window.setTimeout(function() { + $nogamepad.fadeIn(); + }, gamepadHelpDelay); +} +function hideGamepadHelp() { + window.clearTimeout(gamepadHelpTimeout); + $nogamepad.hide(); +} + function onGamepadConnect(e) { addGamepad(e.gamepad); } @@ -85,6 +99,8 @@ function removeGamepad(gamepadIndex) { $gamepad.empty(); } delete gamepads[gamepadIndex]; + + displayGamepadHelp(); } setInterval(scanGamepads, 500); @@ -117,6 +133,8 @@ function mapGamepad(gamepad) { activeGamepadIndex = gamepad.index; + hideGamepadHelp(); + for (var gamepadType in gamepadIdentifiers) { if (gamepadIdentifiers[gamepadType].id.test(gamepad.id)) { activeGamepadType = gamepadType; @@ -167,7 +185,7 @@ function updateVisualStatus() { return; } - var gamepads = getGamepads(); + gamepads = getGamepads(); var activeGamepad = gamepads[activeGamepadIndex]; if (!activeGamepad) {