ts-stick 🎮

A lightweight TypeScript library for adding on-screen game controls to web applications. Includes customizable joystick, d-pad, buttons and slider controls.

Features

• 🕹️ Virtual Joystick - Analog joystick control with customizable appearance
• 🎮 D-pad - 8-direction d-pad with customizable colors and size
• 🔘 Buttons - Configurable buttons with optional SVG icons
• 📊 Retractable Slider - Vertical/horizontal slider that returns to zero when released
• 🎨 Customizable styling - Control colors, sizes, positions and more
• 📱 Touch support - Works on both desktop and mobile devices
• 🪶 Lightweight - No dependencies, just vanilla TypeScript and DOM APIs

Installation

# npm
npm install ts-stick

# pnpm 
pnpm add ts-stick

# yarn
yarn add ts-stick

Usage

JoyStick:

import { JoysickController } from 'ts-stick';

const joystick = new JoysickController({
  container: document.getElementById('joystick-container'),
  radius: 100,
  color: '#CCC',
  thumbColor: '#333',
  onInputCallback: (x: number, y: number) => {
    console.log(`Joystick position: ${x}, ${y}`);
  }
});

D-pad:

import { DpadController } from 'ts-stick';

const dpad = new DpadController({
  container: document.getElementById('dpad-container'),
  radius: 150,
  colorBase: 'gray',
  colorsPressed: '#333',
  onPressCallback: (direction) => {
    console.log(`D-pad pressed: ${direction}`);
  }
});

Buttons:

import { ButtonController } from 'ts-stick';

const button = new ButtonController({
  container: document.getElementById('button-container'),
  width: '80px',
  height: '80px', 
  color: 'blue',
  onPressCallback: () => {
    console.log('Button pressed!');
  }
});

Retractable Slider:

import { RetrackableSlider } from 'ts-stick';

const slider = new RetrackableSlider({
  container: document.getElementById('slider-container'),
  direction: 'vertical',
  height: '200px',
  color: 'red',
  onSlideCallback: (value) => {
    console.log(`Slider value: ${value}`);
  }
});

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is open source and available under the MIT License.