From 6ad4fd6636d378d71f522d0b075b28e0416d015d Mon Sep 17 00:00:00 2001 From: e7d Date: Wed, 25 Nov 2020 11:52:32 +0100 Subject: [PATCH] assert Gamepad API support --- css/main.css | 22 +++++++++++++++++++--- index.html | 5 +++-- js/gamepad.js | 39 ++++++++++++++++++--------------------- 3 files changed, 40 insertions(+), 26 deletions(-) diff --git a/css/main.css b/css/main.css index b2a3284..f12d357 100644 --- a/css/main.css +++ b/css/main.css @@ -5,7 +5,23 @@ body { overflow: hidden; } -.instructions { +#unsupported { + display: none; + text-align: center; + width: 100vw; + margin: 60px 0; +} + +body.unsupported #unsupported { + display: block; +} + +body.unsupported #instructions, +body.unsupported #gamepad { + display: none; +} + +#instructions { height: 100vh; line-height: 2em; text-align: center; @@ -54,7 +70,7 @@ body { } } -.instructions svg { +#instructions svg { height: 90%; left: 50%; max-width: 600px; @@ -64,7 +80,7 @@ body { width: 90%; } -.instructions #a-button path { +#instructions #a-button path { animation: press-button 5s linear infinite; } diff --git a/index.html b/index.html index b48fbca..4e6ce9d 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,8 @@ -
+
Sorry, but your browser does not support the Gamepad API.
+

Press H to read instructions.

@@ -154,7 +155,7 @@

Credits

-

All information and source code can be found on GitHub at e7d/gamepad-viewer.

+

All information and source code can be found on GitHub at e7d/gamepad-viewer.

diff --git a/js/gamepad.js b/js/gamepad.js index b5c8bf5..ecc3ab6 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -1,10 +1,3 @@ -$console = document.querySelector("#console"); -window.onerror = function (event, source, lineno, colno, error) { - var p = document.createElement("p"); - p.innerHTML = `${source}:${lineno}:${colno}: ${error.message}
${error.stack}`; - $console.appendChild(p); -}; - /** * The main Gamepad class * @@ -18,7 +11,7 @@ class Gamepad { // cached DOM references this.$body = $("body"); this.$gamepad = $("#gamepad"); - this.$instructions = $(".instructions"); + this.$instructions = $("#instructions"); this.$helpPopout = $("#help-popout"); this.$gamepadList = $("#gamepad-list"); @@ -39,6 +32,9 @@ class Gamepad { "black", ]; + // ensure the GamePad API is available on this browser + this.assertGamepadAPI(); + // gamepad collection default values this.gamepads = {}; this.identifiers = { @@ -148,6 +144,19 @@ class Gamepad { this.displayInstructions(); } + assertGamepadAPI() { + const getGamepadsFn = navigator.getGamepads + ? () => navigator.getGamepads() + : navigator.webkitGetGamepads + ? () => navigator.webkitGetGamepads() + : null; + if (!getGamepadsFn) { + this.$body.addClass('unsupported'); + throw new Error("Unsupported gamepad API"); + } + this.getNavigatorGamepads = getGamepadsFn; + } + /** * Reads an URL search parameter * @@ -288,17 +297,6 @@ class Gamepad { if (this.zoomMode === "auto") this.changeZoom("auto"); } - /** - * Get navigator gamepads collection - */ - getNavigatorGamepads() { - return navigator.getGamepads - ? navigator.getGamepads() - : navigator.webkitGetGamepads - ? navigator.webkitGetGamepads() - : []; - } - /** * Reloads gamepads data */ @@ -374,8 +372,7 @@ class Gamepad { */ scan() { // don't scan if we have an active gamepad - if (null !== this.index && null === this.disconnectedIndex) - return; + if (null !== this.index && null === this.disconnectedIndex) return; // refresh gamepad information this.pollGamepads();