lottery-wheel
A library helps you performing a wheel for lottery game. Using anime.js underlying.
Usage
npm install kelpo-lottery-wheelOr 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>