Gamepad API

gamepad-api.markdown

Gamepad API

A Pen by Tony Edwards on CodePen.

License.

index.html

<!-- Setup for the PiHut SNES controller: https://thepihut.com/products/raspberry-pi-compatible-usb-gamepad-controller-snes-style -->
<div class="frame">
  <div class="blobs">
    <div class="blob blob--a">A</div>
    <div class="blob blob--b">B</div>
    <div class="blob blob--x">X</div>
    <div class="blob blob--y">Y</div>
    <div class="blob blob--l">L</div>
    <div class="blob blob--r">R</div>
    <div class="blob blob--select">SELECT</div>
    <div class="blob blob--start">START</div>
    <div class="blob blob--up">UP</div>
    <div class="blob blob--down">DOWN</div>
    <div class="blob blob--left">LEFT</div>
    <div class="blob blob--right">RIGHT</div>
  </div>
</div>

script.babel

class JoyTest {
  constructor() {    
    this.blobsContainer = document.querySelectorAll('.blobs');
    this.blobs = document.querySelectorAll('.blob');
    this.pressed = '';
    
    this.blobs.forEach((blob) => {
      blob.value = blob.innerHTML.toLowerCase();
    });
    
    window.addEventListener('gamepadconnected', (event) => {
      this.stateCheck();
    });
  }
  
  stateCheck() {
    window.requestAnimationFrame(() => {
      this.gamepads = navigator.getGamepads();
      window.gamepad = this.gamepad
      this.gamepad = this.gamepads[0];
      window.gamepad = this.gamepad
      this.padStatus();
      this.stateCheck();
      this.highlightBlob(this.blobs, this.pressed);
    });
  }
  
  padStatus() {
    this.gamepad.buttons.forEach((button, index) => {
      if (this.blobs[index]){
        this.blobs[index].classList.remove('pressed');
        if (button.pressed) {
          this.sendCommand(index);
        }
      }
    });
    
    this.directionCommand(this.gamepad.axes);
  }
  
  directionCommand(axis) {
    // Left & Right
    if (axis && round(axis[0]) === -1) {
      console.log('Left Pressed');
      this.pressed = 'left';
    } else if (axis && round(axis[0]) === 1) {
      console.log('Right Pressed');
      this.pressed = 'right';          
    }
    
    // Up & Down
    if (axis && round(axis[1]) === -1) {
      console.log('Up Pressed');
      this.pressed = 'up';
    } else if (axis && round(axis[1]) === 1) {
      console.log('Down Pressed');
      this.pressed = 'down';          
    }
  }
  
  sendCommand(button) {
    // let pressed = '';
    switch(button) {
      case 0:
        console.log('Button X Pressed');
        this.pressed = 'x';
        break;
      case 1:
        console.log('Button A Pressed');
        this.pressed = 'a';
        break;
      case 2:
        console.log('Button B Pressed');
        this.pressed = 'b';
        break;
      case 3:
        console.log('Button Y Pressed');
        this.pressed = 'y';
        break;
      case 4:
        console.log('Button L Pressed');
        this.pressed = 'l';
        break;
      case 5:
        console.log('Button R Pressed');
        this.pressed = 'r';
        break;
      case 8:
        console.log('Button Select Pressed');
        this.pressed = 'select';
        break;
      case 9:
        console.log('Button Start Pressed');
        this.pressed = 'start';
        break;
      default:
        console.log('Button not mapped to command');
        break;
    }
  }
  
  highlightBlob(blobs, pressed) {
    [...blobs].filter((blob) => {
      blob.classList.remove('pressed');
      if (blob.value === pressed){
        blob.classList.add('pressed')
      }
    });
    this.pressed = '';
  }
}

new JoyTest();

function round(v) {
    return (v >= 0 || -1) * Math.round(Math.abs(v));
}

style.scss

.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  perspective: 100;
}

$blob-size: 4em;

.blobs {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $blob-size * 8;
  margin-top: -$blob-size;
  margin-left: -($blob-size * 4);
}

.blob {
  float: left;
  width: $blob-size;
  height: $blob-size;
  line-height: $blob-size;
  text-align: center;
  border-radius: ($blob-size / 2);
  background-color: #333333;
}

.blob.pressed {
  background-color: white;
}

.blob--0 {
  // transform: translate3d(-4em,0,0);
}

.blob--0.pressed {
  background-color: green;
}

.blob--1.pressed {
  background-color: red;
}

.blob--2.pressed {
  background-color: blue;
}

.blob--3.pressed {
  background-color: yellow;
}