{"id":15413768,"url":"https://github.com/torch2424/responsive-gamepad","last_synced_at":"2025-04-19T12:03:33.272Z","repository":{"id":57354801,"uuid":"124501527","full_name":"torch2424/responsive-gamepad","owner":"torch2424","description":"Handle Keyboard, Gamepad, and Touch Controls under a single API 🕹️","archived":false,"fork":false,"pushed_at":"2019-04-05T07:42:19.000Z","size":3672,"stargazers_count":45,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T07:41:34.668Z","etag":null,"topics":["es6","front-end","game","game-dev","game-development","javascript","library","mobile","npm-package"],"latest_commit_sha":null,"homepage":"https://torch2424.github.io/responsive-gamepad/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torch2424.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-09T07:02:52.000Z","updated_at":"2024-12-19T16:36:51.000Z","dependencies_parsed_at":"2022-09-26T16:31:32.545Z","dependency_job_id":null,"html_url":"https://github.com/torch2424/responsive-gamepad","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torch2424%2Fresponsive-gamepad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torch2424%2Fresponsive-gamepad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torch2424%2Fresponsive-gamepad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torch2424%2Fresponsive-gamepad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torch2424","download_url":"https://codeload.github.com/torch2424/responsive-gamepad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249690364,"owners_count":21311308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","front-end","game","game-dev","game-development","javascript","library","mobile","npm-package"],"created_at":"2024-10-01T16:58:43.102Z","updated_at":"2025-04-19T12:03:33.234Z","avatar_url":"https://github.com/torch2424.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# responsive-gamepad\n\n\u003c!-- Badges --\u003e\n[![Build Status](https://travis-ci.org/torch2424/responsive-gamepad.svg?branch=master)](https://travis-ci.org/torch2424/responsive-gamepad)\n![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/responsive-gamepad.svg)\n![npm](https://img.shields.io/npm/dt/responsive-gamepad.svg)\n![npm version](https://img.shields.io/npm/v/responsive-gamepad.svg)\n![GitHub](https://img.shields.io/github/license/torch2424/responsive-gamepad.svg)\n\nHandle Keyboard, Gamepad, and Touch Controls in the browser under a single API, (\u003c 5KB).\n\n[Demo](https://torch2424.github.io/responsive-gamepad/)\n\n\u003cimg src=\"./assets/responsiveGamepadDemo.gif\" width=\"500px\" /\u003e\n\n# Table Of Contents\n\n* [Quick Start](#quick-start)\n* [Projects Using responsive-gamepad](#projects-using-responsive-gamepad)\n* [Instalation](#instalation)\n* [API](#api)\n  * [ResponsiveGamepad](#responsivegamepad)\n    * [Keyboard](#keyboard)\n    * [Gamepad](#gamepad)\n    * [TouchInput](#touchinput)\n* [Input Map](#input-map)\n* [Plugins](#plugins)\n  * [How to build plugins](#how-to-build-plugins)\n  * [Featured Plugins](#featured-plugins)\n* [Contributing](#contributing)\n  * [Installation](#installation)\n  * [CLI Commands / Npm Scripts](#cli-commands--npm-scripts)\n* [LICENSE](#license)\n* [Other Notes](#other-notes)\n\n# Quick Start\n\nThis is a quick **Tl;DR** on installing and using responsive-gamepad:\n\n1. `npm install --save responsive-gamepad`\n\n2. `import { ResponsiveGamepad } from 'responsive-gamepad';`\n\n3. `ResponsiveGamepad.enable();`\n\n4. `ResponsiveGamepad.getState();`\n\nPlease see the [Input Map](#input-map) section for what Responsive Gamepad Keys represent on a \"Standard\" Controller.\n\n# Projects Using `responsive-gamepad`\n\n* [WasmBoy](https://github.com/torch2424/wasmBoy) - Gameboy / Gameboy Color Emulator written for Web Assembly using AssemblyScript.\n\n# Instalation\n\n*See the [demo/index.js](./demo/index.js), for a proper usage, and touch input example*\n\n`npm install --save responsive-gamepad`\n\n# API\n\n*Additional information/exports concerning  can be found in the [Input Map](#input-map) section.*\n\n*For user journeys, and common How-To use cases, see the [design](./design) directory*\n\nFirst, import the `ResponsiveGamepad` singleton service with:\n\n`import ResponsiveGamepad from 'responsive-gamepad'`\n\n## ResponsiveGamepad\n\n*Properties accessed from: `ResponsiveGamepad`.*\n\n* `getVersion()`: string - Returns the current version of the lib.\n\n* `enable()`: void - Enables `ResponsiveGamepad`, and listens for events.\n\n* `disable()`: void - Removes all listeners from ResponsiveGamepad, and stops listening.\n\n* `isEnabled()`: boolean - Returns if `ResponsiveGamepad` is currently enabled.\n\n* `addPlugin(myPlugin)`: function - Adds a plugin to be used with the lib. Returns a function to remove the added plugin.\n\n* `getState()`: ResponsiveGamepadState - Returns an object with the current state of ResponsiveGamepad. See the [Demo](https://torch2424.github.io/responsive-gamepad/) and the [Input Map](#input-map). \n\n* `onInputsChange(ArrayOfResponsiveGamepadInputs, callback)`: function - Function to listen for changes on the array of specified `ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS`, and calls a callback whenever they change. Returns a function to stop listening.\n\n* `clearInputMap()`: Remove all input mappings. Useful if you don't want (some of) the default input map.\n\n### Keyboard\n\n*Properties accessed from: `ResponsiveGamepad.Keyboard`.*\n\n* `enableIgnoreWhenInputElementFocused()`: void - Enables ignoring ResponsiveGamepad Keyboard input when focused on form input type elements. Enabled by default.\n\n* `disableIgnoreWhenInputElementFocused()`: void - Disables the above.\n\n* `enableIgnoreWhenModifierState()`: void - Enables ignoring ResponsiveGamepad Keyboard input when a [Modifier](./lib/keyboard/keyboard.js) key is pressed. See [KeyboardEvent.getModifierState()](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) for more reference. Enabled by default.\n\n* `disableIgnoreWhenModifierState()`: void - Disables the above.\n\n* `setKeysToResponsiveGamepadInput(ArrayOfKeyboardEventCodes, ResponsiveGamepadInput)`: void - Function used for modifying the input map. Takes and array of [KeyboardEvent.code](https://www.w3.org/TR/uievents-code/#code-value-tables) and a single [`ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS`](./lib/constants).\n\n### Gamepad\n\n*Properties accessed from: `ResponsiveGamepad.Gamepad`.*\n\n* `getState(PlayerIndex: number)`: GamepadState - Function that takes in a player index (0, 1, 2) from the connected gamepads. Returns a `ResponsiveGamepad.getState()` like Object. Can be used for multiplayer.\n\n* `setGamepadButtonsToResponsiveGamepadInput(ArrayOfGamepadButtonIds, NonAxisResponsiveGamepadInput)`: void - Function used for modifying the input map. Takes and array of [Gamepad Button Ids](https://www.w3.org/TR/gamepad/#remapping) and a single [`ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS`](./lib/constants).\n\n* `setGamepadAxisToResponsiveGamepadInput(GamepadAxisIds, AxisResponsiveGamepadInput)`: void - Function used for modifying the input map. Takes a single [Gamepad Axis Id](https://www.w3.org/TR/gamepad/#remapping) and a single [`ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS`](./lib/constants).\n\n### TouchInput\n\n*Properties accessed from: `ResponsiveGamepad.TouchInput`.*\n\nThe functions that add inputs to the `ResponsiveGamepad` have additional functionality outside of what is shown below. When inputs are added, they will have styles applied to help with them being touchable. Also, When the touch input becomes active, it will add the CSS class `active` to the element.\n\n* `addButtonInput(HTMLElement, ResponsiveGamepadInput)`: void - Function that takes in a HTML Element (e.g `document.getElementById`), and a [`ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS`](./lib/constants). Will add the element as an interactive button for the ResponsiveGamepad.\n\n* `addDpadInput(HTMLElement, configurationObject)`: void - Function that takes in a HTML Element (e.g `document.getElementById`), and a `configurationObject`. Will add the element as an interactive dpad for the `DPAD_UP`, `DPAD_RIGHT`, `DPAD_LEFT`, and `DPAD_DOWN` inputs. The configuration object is outilined below:\n\n```\nconst configurationObject = {\n  allowMultipleDirections: false // False by default. This will allow for multiple directions (diagonal) inputs.\n}\n```\n\n* `addLeftAnalogInput(HTMLElement)`: void - Function that takes in a HTML Element (e.g `document.getElementById`). Will add the element as an interactive virtual joystick for the `LEFT_ANALOG_HORIZONTAL_AXIS`, `LEFT_ANALOG_VERTICAL_AXIS`, `LEFT_ANALOG_UP`, `LEFT_ANALOG_RIGHT`, `LEFT_ANALOG_DOWN`, `LEFT_ANALOG_LEFT` inputs.\n\n* `addRightAnalogInput(HTMLElement)`: void - Function that takes in a HTML Element (e.g `document.getElementById`). Will add the element as an interactive virtual joystick for the `RIGHT_ANALOG_HORIZONTAL_AXIS`, `RIGHT_ANALOG_VERTICAL_AXIS`, `RIGHT_ANALOG_UP`, `RIGHT_ANALOG_RIGHT`, `RIGHT_ANALOG_DOWN`, `RIGHT_ANALOG_LEFT` inputs.\n\n# Input Map\n\nThe default input map is based on the **\"Standard\"** controller. Here is a modified image from the [w3c gamepad draft](https://w3c.github.io/gamepad/#remapping) on how it correlates to the default input map:\n\n**Note: The X in something like `INPUT_X` represents one of the many directions or axis it represents**\n\n![Standard Controller Diagram](./assets/readmeStandardControllerLayout.jpg)\n\nTo see how the keyboard relates to the input map, please see the [default input map](./lib/keymap.js). The library uses [KeyBoardEvent.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) to denote all of it's keyboard keys.\n\n# Plugins\n\nPlugins allow for modifying the output from getState(). Which can allow for functionality like:\n\n* Merging multiple inputs into one\n \n* Adding additional keys for something like another input source.\n\n* Etc...\n\n`responsive-gamepad` Plugins should follow the [rollup plugin conventions](https://rollupjs.org/guide/en#conventions):\n\n* Plugins should have a clear name with `responsive-gamepad-plugin-` prefix.\n\n* Include `rollup-plugin` keyword in package.json.\n\n* Document your plugin in English.\n\n## How to build plugins\n\n**For and example, see the demo [ExamplePlugin](./demo/examplePlugin.js).**\n\nPlugins are simply functions that return an object. See the following example, for what functions the return object could have:\n\n```\nexport default function ReadmePlugin() {\n  return {\n    onAddPlugin: () =\u003e {\n      // Called when the plugin is added with: 'ResponsiveGamepad.addPlugin()'\n    },\n    onGetState: (CurrentResponsiveGamepadState) =\u003e {\n      // Called whenever 'ResponsiveGamepad.getState()' is called.\n      return CurrentResponsiveGamepadState\n    }\n  }\n}\n```\n\n## Featured Plugins\n\n*Open a PR to have your plugin featured here!*\n\n# Contributing\n\nFeel free to fork the project, open up a PR, and give any contributions! I'd suggest opening an issue first however, just so everyone is aware and can discuss the proposed changes.\n\n### Installation\n\nJust your standard node app. Install Node with [nvm](https://github.com/creationix/nvm), `git clone` the project, and `npm install`, and you should be good to go!\n\n### CLI Commands / Npm Scripts\n\n```bash\n# Command to serve the demo/lib and watch for changes (No livereload)\nnpm start\n\n# Alias for npm start\nnpm run dev\n\n# Build the library and demo souce\nnpm run build\n```\n\n# LICENSE\n\nLICENSE under [Apache 2.0](https://choosealicense.com/licenses/apache-2.0/)\n\n# Other Notes\n\n* Touch Input SVGS on the responsive gamepad demo, are [Google Material Icons](https://material.io/tools/icons/?style=baseline)\n\n* XInput vs. DirectInput - [Microsoft Article](https://docs.microsoft.com/en-us/windows/desktop/xinput/xinput-and-directinput), [Reddit thread](https://www.reddit.com/r/pcgaming/comments/4zlbrx/what_is_the_difference_between_directinput_and/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorch2424%2Fresponsive-gamepad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorch2424%2Fresponsive-gamepad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorch2424%2Fresponsive-gamepad/lists"}