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

➤ Methods

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

➤ License

SlotReel is released under the MIT license.