assert Gamepad API support
This commit is contained in:
parent
80f6d3bbbe
commit
6ad4fd6636
22
css/main.css
22
css/main.css
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user