@furystack/shades-nipple

@furystack/shades-nipple

NippleJS joystick wrapper for FuryStack Shades.

This package provides a Shades component wrapper for NippleJS, a virtual joystick library for touch devices.

Installation

npm install @furystack/shades-nipple nipplejs
# or
yarn add @furystack/shades-nipple nipplejs

Usage

import { Shade, createComponent } from '@furystack/shades'
import { NippleComponent } from '@furystack/shades-nipple'

const GameControls = Shade({
  customElementName: 'game-controls',
  render: () => (
    <NippleComponent
      managerOptions={{
        mode: 'static',
        position: { left: '50%', top: '50%' },
        color: 'blue',
      }}
      style={{ width: '200px', height: '200px', position: 'relative' }}
      onStart={(event) => {
        console.log('Joystick started', event.data)
      }}
      onMove={(event) => {
        console.log('Direction:', event.data.direction?.angle)
        console.log('Distance:', event.data.distance)
        console.log('Force:', event.data.force)
      }}
      onEnd={() => {
        console.log('Joystick released')
      }}
      onDir={(event) => {
        // Fired when direction changes (up, down, left, right)
        console.log('Direction changed:', event.data.direction?.angle)
      }}
    />
  ),
})

Props

Manager Options

Common managerOptions properties:

Event callback props receive a single object that contains at least a data field with the joystick payload.

See the NippleJS documentation for all available options and event payload details.