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;
}
.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;
}

View File

@ -14,7 +14,8 @@
</head>
<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>
<svg version="1.1" viewBox="0 0 549.3125 367.98749" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
@ -154,7 +155,7 @@
</table>
<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>
<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
*
@ -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();