assert Gamepad API support

This commit is contained in:
e7d 2020-11-25 11:52:32 +01:00
parent 80f6d3bbbe
commit 6ad4fd6636
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
3 changed files with 40 additions and 26 deletions

View File

@ -5,7 +5,23 @@ body {
overflow: hidden; 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; height: 100vh;
line-height: 2em; line-height: 2em;
text-align: center; text-align: center;
@ -54,7 +70,7 @@ body {
} }
} }
.instructions svg { #instructions svg {
height: 90%; height: 90%;
left: 50%; left: 50%;
max-width: 600px; max-width: 600px;
@ -64,7 +80,7 @@ body {
width: 90%; width: 90%;
} }
.instructions #a-button path { #instructions #a-button path {
animation: press-button 5s linear infinite; animation: press-button 5s linear infinite;
} }

View File

@ -14,7 +14,8 @@
</head> </head>
<body> <body>
<div class="instructions"> <div id="unsupported">Sorry, but your browser does not support the <a target="_blank" href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">Gamepad API</a>.</div>
<div id="instructions">
<p>Press <kbd>H</kbd> to read instructions.</p> <p>Press <kbd>H</kbd> to read instructions.</p>
<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve" <svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -154,7 +155,7 @@
</table> </table>
<h3>Credits</h3> <h3>Credits</h3>
<p>All information and source code can be found on GitHub at <a href="https://github.com/e7d/gamepad-viewer">e7d/gamepad-viewer</a>.</p> <p>All information and source code can be found on GitHub at <a target="_blank" href="https://github.com/e7d/gamepad-viewer">e7d/gamepad-viewer</a>.</p>
</div> </div>
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>

View File

@ -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}<br>${error.stack}`;
$console.appendChild(p);
};
/** /**
* The main Gamepad class * The main Gamepad class
* *
@ -18,7 +11,7 @@ class Gamepad {
// cached DOM references // cached DOM references
this.$body = $("body"); this.$body = $("body");
this.$gamepad = $("#gamepad"); this.$gamepad = $("#gamepad");
this.$instructions = $(".instructions"); this.$instructions = $("#instructions");
this.$helpPopout = $("#help-popout"); this.$helpPopout = $("#help-popout");
this.$gamepadList = $("#gamepad-list"); this.$gamepadList = $("#gamepad-list");
@ -39,6 +32,9 @@ class Gamepad {
"black", "black",
]; ];
// ensure the GamePad API is available on this browser
this.assertGamepadAPI();
// gamepad collection default values // gamepad collection default values
this.gamepads = {}; this.gamepads = {};
this.identifiers = { this.identifiers = {
@ -148,6 +144,19 @@ class Gamepad {
this.displayInstructions(); 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 * Reads an URL search parameter
* *
@ -288,17 +297,6 @@ class Gamepad {
if (this.zoomMode === "auto") this.changeZoom("auto"); if (this.zoomMode === "auto") this.changeZoom("auto");
} }
/**
* Get navigator gamepads collection
*/
getNavigatorGamepads() {
return navigator.getGamepads
? navigator.getGamepads()
: navigator.webkitGetGamepads
? navigator.webkitGetGamepads()
: [];
}
/** /**
* Reloads gamepads data * Reloads gamepads data
*/ */
@ -374,8 +372,7 @@ class Gamepad {
*/ */
scan() { scan() {
// don't scan if we have an active gamepad // don't scan if we have an active gamepad
if (null !== this.index && null === this.disconnectedIndex) if (null !== this.index && null === this.disconnectedIndex) return;
return;
// refresh gamepad information // refresh gamepad information
this.pollGamepads(); this.pollGamepads();