Demo

➤ Install

$ yarn add slot-reel

➤ Import

import SlotReel from 'slot-reel';

➤ Usage

const slotReel = new SlotReel({
  containerSelector: '#slot-container',
  buttonSelector: '#spin-button',
  textureURLs: [
    'path/to/texture1.png',
    'path/to/texture2.png',
    'path/to/texture3.png',
    'path/to/texture3.png',
  ],
  cylinderCount: 4,
  cylinderSegments: 5,
  initialSegments: [1, 2, 3, 3],
  spinStates: [
    { finalSegments: [3, 2, 1, 5], callback: () => console.log('first spin finished') },
    { finalSegments: [3, 5, 1, 1], callback: () => console.log('second spin finished') },
    { finalSegments: [1, 1, 2, 5], callback: () => console.log('third spin finished') },
  ]
});

slotReel.init();

➤ Options

| Option | Type | Default | Description | |:--------------------|:------:|:---------:|:---------------------------------------------------------------| | containerSelector | String | null | CSS selector for the container element. | | buttonSelector | String | null | CSS selector for the spin button. | | cameraDistance | Number | 10 | Distance of the camera from the scene. | | textureURLs | Array | [] | Array of texture image URLs. | | cylinderGeometry | Array | [1, 1, 1] | Geometry settings for the cylinders. | | rotationSegments | Number | 16 | Number of vertical segments on the cylinders. | | cylinderSegments | Number | 5 | Number of horizontal segments per cylinder. | | spacingRatio | Number | 0.1 | Spacing ratio between cylinders. | | rotationSpeeds | Array | [] | Initial rotation speeds for the cylinders. | | spinSpeedMultiplier | Number | 20 | Multiplier for spin speed during spinning. | | initialSegments | Array | [] | Initial segment indices for each cylinder. | | finalSegments | Array | [] | Final segment indices for each cylinder. | | spinStates | Array | [] | Spin states with final segments and callbacks. | | cylinderCount | Number | 3 | Determines the number of cylinders displayed in the slot reel. |

➤ Methods

| Method | Description | |:--------------------------------|:---------------------------------------------| | init() | Initializes the slot game. | | startNextSpin() | Starts the next spin animation. | | updateDimensions(width, height) | Updates the canvas dimensions. | | stopOnSegments() | Stops the cylinders on specific segments. | | setInitialSegments() | Sets the initial segments for the cylinders. | | storeRestAngles() | Stores the resting angles of the cylinders. |

➤ License

slot-reel is released under MIT license