js-gamepad-overlay/Readme.md

js/html overlay for gamepad inputs

## js-gamepad-overlay

HTML5 gamepad overlay which aims to adapt the main functionality of the [HTML5 gamepad api](https://www.w3.org/TR/gamepad/).
Supports mouse and touch input. 

This library does implement styling on a very low level. Every element is completely customizable.

### features

* Gamepad buttons that are visible on the screen.
* Gamepad sticks that are visible on the screen.
* HTML5Gamepad Interface through toHTML5GamepadAPI()

### getting started
```html
<div id="gamepadContainer"></div>
```

```javascript
import GamepadOverlay from "js-gamepad-overlay";

const gamepadOverlay = new GamepadOverlay({
    domHook: document.getElementById("gamepadContainer")
})
```

## api

#### createNewButton()
Creates a new button.

#####parameters
* code – required – id of the button
* width – optional – defaults to 0 – width of the button
* height – optional – defaults to 0 – height of the button
* styles – optional – defaults to {} – css style object
* text – optional – defaults to "" – visible text on the button
* onPress – optional defaults to ```() => null``` – callback when the button is pressed
* onRelease – optional defaults to ```() => null``` – callback when the button is released

#### createNewStick()
Creates a new stick with 2 axes.

#####parameters
* code – required – id of the stick
* radius – optional – defaults to 0 – radius of the stick
* styles – optional – defaults to {} – css style object of the stick
* snapBackDelay – optional – defaults to 0 – the delay of the stickButton to snap back after releasing it
* stickButtonScale – optional – defaults to 0.5 – size of the stickButton relative to the stick container
* stickButtonStyles – optional – defaults to {} – css style of the stick button
* onMove – optional defaults to ```() => null``` – callback when the stick is moved
* onMoveEnd – optional defaults to ```() => null``` – callback when the stick is released

#### toHTML5GamepadAPI()
Returns an object similar to the [HTML5GamepadAPI](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad).

## Gamepad

####Objectstructure

```javascript
{
    axes: {...}
    sticks: {...}
    buttons: {...}
}
```

## Gamepad.sticks

```javascript
{
    codeStick0:{
        code: "codeStick0"
        axes: {...},
        ui: DOMElement,
        buttonUi: DOMElement
    },
    ...
}
```
## Gamepad.axes

```javascript
{
    codeStick0-0: AxesValue,
    codeStick0-1: AxesValue,
    ...
}
```

## Gamepad.buttons
```javascript
{
    buttonCode0: {
        code: "buttonCode0",
        ui: DOMElement,
        pressed: Boolean
    },
    ...
}
```

### Example

```javascript
import GamepadOverlay from "js-gamepad-overlay";
// const GamepadOverlay = require("js-gamepad-overlay").default;

const gamepadOverlay = new GamepadOverlay({domHook: document.querySelector("body")});

gamepadOverlay.createNewButton({
    code: 0,
    width: 50,
    height: 50,
    styles:{
        position: "absolute",
        left: "300px",
        bottom: "100px",
        borderRadius: "50%",
        backgroundColor: "transparent",
        border: "2px solid grey",
        fontSize: "20px",
        fontWeight: "bold"
    },
    text: "A",
    onPress: (button) => {button.ui.style.backgroundColor = "gray";},
    onRelease: (button) => {button.ui.style.backgroundColor = "transparent";}
});

gamepadOverlay.createNewStick({
    code: 0,
    radius: 50,
    styles: {
        position: "absolute",
        bottom: "100px",
        left: "100px",
        border: "2px solid grey",
    },
    stickButtonStyles: {
        border: "2px solid grey"
    },
    onMove: (stick) => {stick.buttonUi.style.transition = "0s ease";},
    onMoveEnd: (stick) => {stick.buttonUi.style.transition = "0.15s ease";}
});

console.log(gamepadOverlay.axes);
console.log(gamepadOverlay.sticks);
console.log(gamepadOverlay.buttons);
console.log(gamepadOverlay.toHTML5GamepadAPI());

```