slot-reel
TypeScript icon, indicating that this package has built-in type declarations

1.7.0 • Public • Published

slot-reel

The `SlotReel` class is a feature-rich, customizable, and extensible implementation of a 3D slot machine using Three.js. This library allows developers to integrate interactive slot machine experiences into web applications with ease.

npm GitHub package version NPM Downloads

Demo


Install

yarn add slot-reel

Import

import SlotReel from 'slot-reel';

Usage

const slotReel = new SlotReel({
  containerElSelector: '#slot-container',
  spinButtonSelector: '#spin-button',
  textureUrls: ['path/to/texture1.png', 'path/to/texture2.png', 'path/to/texture3.png'],
  cylindersCount: 3,
  geometryDimensions: [0.75, 0.75, 1],
  radialSegments: 64,
  symbolsPerReel: 5,
  initialSegments: [1, 3, 5],
  stopAtSegments: [2, 4, 5],
  queuedSpinStates: [
    { stopAtSegments: [3, 1, 4], callback: () => console.log('First spin done!') },
    { stopAtSegments: [5, 4, 3], callback: () => console.log('Second spin done!') }
  ],
  onAllSpinsComplete: () => console.log('All spins are complete!')
});

slotReel.init();

Options

Option Type Default Description
containerElSelector string '' CSS selector for the container element.
spinButtonSelector string '' CSS selector for the spin button.
cameraDistance number 10 Distance of the camera from the scene.
textureUrls (string | URL)[] [] Array of texture image URLs for the cylinders.
geometryDimensions [number, number, number] [1, 1, 1] Dimensions of the cylinder geometry (radius, height, depth).
radialSegments number 16 Number of radial segments on the cylinders.
symbolsPerReel number 5 The number of symbols evenly distributed across the surface of each reel.
cylinderSpacingRatio number 0 Ratio for spacing between cylinders.
baseSpinSpeed number 1 Base speed for spinning cylinders.
spinAccelFactor number 30 Acceleration multiplier for spinning speed.
initialSegments number[] [] Initial segment indices for each cylinder.
stopAtSegments number[] [] Array defining the segments where cylinders should stop.
queuedSpinStates SpinState[] [] Queue of spin states, including stopping segments and callbacks.
onAllSpinsComplete () => void undefined Callback triggered when all spins in the queue are completed.
cylindersCount number 3 Number of cylinders in the slot machine.
decelerationEase number 1.5 Factor controlling deceleration smoothness.
cylinderStopDelayMs number 250 Delay (ms) between stopping successive cylinders.

Methods

Method Description
init() Initializes the slot reel, setting up the scene, cylinders, and event listeners.

License

SlotReel is released under the MIT license.

Package Sidebar

Install

npm i slot-reel

Weekly Downloads

13

Version

1.7.0

License

MIT

Unpacked Size

109 kB

Total Files

15

Last publish

Collaborators

  • ux-ui