A library helps you performing a wheel for lottery game. Using anime.js underlying.
Or download the latest release.
Then link lottery-wheel.min.js or lottery-wheel.js in your HTML.
ESM is supported as well.
Suppose you have an element whose id is ‘wheel’ in your html file.
Then you can do the following to create a wheel:
More for option , see below.
To manually render the wheel when the draw property is set to false.
|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||–|
The el property defines the element where to render the wheel. You should pass a DOM Element to it:
The data property use an array to define the things relating to the lottery game itself. The length of the array must between 3 and 12.
The simplest way is to put the name of each prize in an array:
It will generate the following wheel with default options. Every prizes take the same chance to be drawn, as the program will create four ‘prize’ objects with their text property set to the string in data array and chance property to 1 automatically.
You can also custom each prize by making it an object. The properties for the ‘prize’ object are listed here.
The callback function called when a prize is drawn successfully.
|data||The drawn ‘prize’ object.||Object|
The callback function called when trying to draw prize while has already drawn the maximum times (defined in limit ). Notice that by the default options, one can draw unlimited times.
In this case, if one has already drawn a prize, the next time he clicks the button the alert dialog will be shown.
Called when the mouse is moving over the button.
|anime||Refer to animejs. See the doc for usage.|
|button||Refer to the Snap Element where the button lies.||Object|
|text||The name for the prize||String||”|
|chance||The probability the prize to be drawn. The higher the value, the more chances the prize to be picked up. The probability is actually calculated by the formula probability = 1 * chance / (sum of every prize’s chance)||Number||1|
|color||The background color for the prize (will override color.prize of Wheel).||String||–|
|fontColor||The color of the text (will override color.fontColor of Wheel).||String||–|
|fontSize||The size of the text (will override fontSize of Wheel).||Number||–|
The above code will result the following wheel:
A theme is an object where stores the colors used in the wheel. It has following properties:
- border: background color for the wheel’s border.
- prize: background color for the prize part.
- button: background color for the button.
- line: color for the line between prize parts.
- prizeFont: color for prize text.
- buttonFont: color for button text.
There are three themes preseted:
You can also change the color by setting color property.
The image property lets you render the wheel using the existing resources by setting an object. It will make an image SVG element and it supports jpeg, png and svg formats.
|turntable||The image for the turntable.||String|
|button||The image for the button. It’s width is controled by buttonWidth property and the aspect ratio will be preserved. Centered in the turntable by default.||String|
|offset||The y-axis offsets for the button. If negative, the button moves up.||Number|
Here’s an example of how it looks like when using the images in /doc/images folder in this repo.
Draw a lottery wheel and animate it! Contribute to fralonra/lottery-wheel development by creating an account on GitHub.