Nearly Perpendicular Macaroons

    js-gamepad-overlay

    0.8.0 • Public • Published

    js-gamepad-overlay

    HTML5 gamepad overlay which aims to adapt the main functionality of the HTML5 gamepad api. 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

    <div id="gamepadContainer"></div>
    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.

    Gamepad

    Objectstructure

    {
        axes: {...}
        sticks: {...}
        buttons: {...}
    }

    Gamepad.sticks

    {
        codeStick0:{
            code: "codeStick0"
            axes: {...},
            ui: DOMElement,
            buttonUi: DOMElement
        },
        ...
    }

    Gamepad.axes

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

    Gamepad.buttons

    {
        buttonCode0: {
            code: "buttonCode0",
            ui: DOMElement,
            pressed: Boolean
        },
        ...
    }

    Example

    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());
     

    Install

    npm i js-gamepad-overlay

    DownloadsWeekly Downloads

    3

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    20.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • chrioyles