joy-con-element

Stencil Component Starter

Usage no npm install needed!

<script type="module">
  import joyConElement from 'https://cdn.skypack.dev/joy-con-element';
</script>

README

Built With Stencil

<joy-con>

A Custom Element that maps a Nintendo Switch Joy-Con controller to keyboard events. Add it to web-based slide decks for an easy remote.

Based on @vaneenige's fantastic unswitch library

Demo

Check out the demo on jsbin!

You'll want to have a Joy-Con paired to your PC already.

Install

As a script tag: <script src="https://unpkg.com/joy-con-element/dist/joy-con.js"></script>

More installation options (Webpack, etc) described here: https://stenciljs.com/docs/framework-integration/

Usage

<joy-con side="r" left="y" right="a"></joy-con>

The component will not activate until side has been defined.

Not Ready:

screen shot 2018-08-06 at 19 19 03

Ready:

screen shot 2018-08-06 at 19 19 26

Props

All props are also accessible as attributes.

side: 'l' | 'r'

Which type of Joy-Con

left: JoyConButton

Which Joy-Con button triggers a Left keyboard event

right: JoyConButton

Which Joy-Con button triggers a Right keyboard event

The full set of JoyConButton options is described in unswitch

Events

button

Emitted when a button is pressed (or released). Contains metadata in the detail section of the CustomEvent:

interface ButtonEventDetail {
  button: string; // which Joy-Con button was pressed
  pressed: boolean; // true if the button was pressed, false if the button was released
}