lottery-wheel

A library helps you performing a wheel for lottery game. Using anime.js underlying.

Usage

npm install kelpo-lottery-wheel

Or download the latest release.

Then link lottery-wheel.min.js or lottery-wheel.js in your HTML.

<script src="/path/to/lottery-wheel.min.js"></script>

ESM is supported as well.

import Wheel from 'kelpo-lottery-wheel';

Suppose you have an element whose id is 'wheel' in your html file.

<svg id="wheel"></svg>

Then you can do the following to create a wheel:

new Wheel({
  el: document.getElementById('wheel'),

  data: [
    {
      text: 'OVO 50.000',
      color: '#f7c600',
      chance: 30,
    },
    {
      text: 'Lamborgini Ourus',
      color: '#a4cd00',
      chance: 1,
    },
    {
      text: 'OVO 100.000',
      color: '#42a500',
      chance: 19,
    },
    {
      text: 'ToteBag Kelpo',
      color: '#2b9b85',
      chance: 10,
    },
    {
      text: 'OVO 150.000',
      color: '#01a5ce',
      chance: 10,
    },
    {
      text: 'Kaos Kelpo 21',
      color: '#3536c1',
      chance: 7,
    },
    {
      text: 'OVO 200.000',
      color: '#582b9a',
      chance: 7,
    },
    {
      text: 'Mug Kelpo 21',
      color: '#f70063',
      chance: 5,
    },
    {
      text: 'Ovo 500.000',
      color: '#cd0000',
      chance: 5,
    },
    {
      text: 'Sticker Kelpo 21',
      color: '#f76300',
      chance: 6,
    },
  ],
  radius: 300,
  duration: 15000,
  onButtonHover(anime, button) {
    anime({
      targets: button.node,
      scale: 1.2,
      duration: 500,
    });
  },
  onSuccess(data) {
    alert(data.text);
  },
  color: {
    border: '#212121',
    line: '#212121',
    button: '#212121',
  },
  buttonText: 'Mulai',
  buttonWidth: 80,
});

API

Methods

constructor(option)

More for option, see below.

draw()

To manually render the wheel when the draw property is set to false.

const wheel = new Wheel({
  el: document.getElementById('wheel'),
  data: ['Beijing', 'London', 'New York', 'Tokyo'],
  draw: false,
});
setTimeout(() => {
  wheel.draw();
}, 2000);

Options

| Property | Description | Type | Default | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------- | | el | The element where the wheel mounted. Details. | Object | - | | data | An array of prizes. Details. | Array | - | | pos | The top-left corner of the wheel related to its parent element (the el element). | Array | [0, 0] | | radius | The radius of the wheel in px. | Number | 100 | | buttonText | The text on the button. | String | 'Draw' | | fontSize | The size of text for prizes. | Number | (auto generate) | | buttonWidth | The width of the button in px. | Number | 50 | | buttonFontSize | The size of text on the button. | Number | (auto generate) | | limit | The maxium times the wheel can be run. | Number | 0 (unlimited) | | duration | How long will the animation last in millseconds. | Number | 5000 | | turn | The minimum amount of circles the wheel will turn during the animation. | Number | 4 | | draw | If true, the wheel will be rendered immediately the instance created. Otherwise, you should call draw to manually render it. | Boolean | true | | clockwise | If true, the rotation movement will be clockwise. Otherwise, it will be counter-clockwise. | Boolean | true | | theme | The color preset to be used. Details. | String | 'default' | | image | Allow you to render the wheel using image resources. See image. | Object | - | | color | An object used to override the color in the current theme. See themes | Object | - | | onSuccess | The callback function called when a prize is drawn successfully. Details. | Function | - | | onFail | The callback function called when trying to draw prize while has already drawn limit times. Details. | Function | - | | onButtonHover | The function called when the mouse moves over the button. Details | Function | - |

example

The simplest way is to implementation:

<svg id="wheel"></svg>