Skip to content

Instantly share code, notes, and snippets.

@kdzwinel
Created October 8, 2017 21:31
Show Gist options
  • Save kdzwinel/91da2981c2e6aac82367562ccb50daa4 to your computer and use it in GitHub Desktop.
Save kdzwinel/91da2981c2e6aac82367562ccb50daa4 to your computer and use it in GitHub Desktop.
Gamepad - Chrome DevTools integration
(function(){
let gamepad = null;
let loopInterval = null;
window.addEventListener("gamepadconnected", connectHandler);
window.addEventListener("gamepaddisconnected", disconnectHandler);
function connectHandler(e) {
if (!gamepad) {
addGamepad(e.gamepad);
}
}
function disconnectHandler(e) {
if(gamepad) {
removeGamepad(e.gamepad);
}
}
function addGamepad(newGamepad) {
console.log('connected', newGamepad);
gamepad = newGamepad;
loopInterval = setInterval(() => {
updateStatus();
gameLoop();
}, 50);
}
function removeGamepad(removeGamepad) {
console.log('disconnected', removeGamepad);
gamepad = null;
clearInterval(loopInterval);
}
function updateStatus() {
if(!gamepad) {
return;
}
scanGamepads();
}
function scanGamepads() {
var gamepads = navigator.getGamepads();
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i] && gamepad.index === gamepads[i].index){
gamepad = gamepads[i];
}
}
}
const tree = UI.panels.elements._treeOutlines[0];
let currentPropertyIdx = 0;
function gameLoop() {
if (leftJoystickLeft()) {
tree.selectedTreeElement.collapseOrAscend(false);
currentPropertyIdx = 0;
}
if (leftJoystickRight()) {
if (!tree.selectedTreeElement.revealed()) {
tree.selectedTreeElement.reveal();
} else {
tree.selectedTreeElement.descendOrExpand(false);
}
currentPropertyIdx = 0;
}
if (leftJoystickTop()) {
tree.selectPrevious();
currentPropertyIdx = 0;
}
if (leftJoystickBottom()) {
tree.selectNext();
currentPropertyIdx = 0;
}
if (buttonX()) {
tree.selectedTreeElement._node.removeNode();
}
}
const leftJoystickLeft = () => gamepad && gamepad.axes[0] === -1;
const leftJoystickRight = () => gamepad && gamepad.axes[0] === 1;
const leftJoystickTop = () => gamepad && gamepad.axes[1] === -1;
const leftJoystickBottom = () => gamepad && gamepad.axes[1] === 1;
const buttonX = () => gamepad && gamepad.buttons[0].pressed;
})();
@kdzwinel
Copy link
Author

kdzwinel commented Oct 8, 2017

Supports traversing the DOM and removing nodes via Elements panel.

Preview: https://twitter.com/kdzwinel/status/916817293711216640

How to run it? Make sure you have Elements tab open. Do "DevTools inception" and inject above script to DevTools.

Tested on PS3 controller and MacOS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment