Slot-reel NPM | npm.io

Demo

➤ Install

yarn add slot-reel

➤ Import

import SlotReel from 'slot-reel';

For CommonJS environments, you may need to access the default export explicitly:

const SlotReel = require('slot-reel').default;

➤ 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.