{"id":13671038,"url":"https://github.com/fralonra/lottery-wheel","last_synced_at":"2025-03-16T10:31:51.232Z","repository":{"id":65916485,"uuid":"117336685","full_name":"fralonra/lottery-wheel","owner":"fralonra","description":"Draw a lottery wheel and animate it!","archived":false,"fork":false,"pushed_at":"2023-02-18T06:16:38.000Z","size":917,"stargazers_count":49,"open_issues_count":5,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-15T01:20:22.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fralonra.github.io/lottery-wheel","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fralonra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-13T11:04:24.000Z","updated_at":"2024-01-18T05:19:44.000Z","dependencies_parsed_at":"2023-07-04T00:58:16.309Z","dependency_job_id":null,"html_url":"https://github.com/fralonra/lottery-wheel","commit_stats":{"total_commits":86,"total_committers":4,"mean_commits":21.5,"dds":0.5232558139534884,"last_synced_commit":"96a52944153a60e16ef70e172f63515166087204"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Flottery-wheel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Flottery-wheel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Flottery-wheel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Flottery-wheel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fralonra","download_url":"https://codeload.github.com/fralonra/lottery-wheel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814898,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:00:56.598Z","updated_at":"2025-03-16T10:31:50.935Z","avatar_url":"https://github.com/fralonra.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/lottery-wheel.svg)](https://www.npmjs.com/package/lottery-wheel)\n\n# lottery-wheel\n\nA library helps you performing a wheel for lottery game. Using [anime.js](https://github.com/juliangarnier/anime/) underlying.\n\n[demo](https://fralonra.github.io/lottery-wheel/)\n\n# Usage\n\n```bash\nnpm install lottery-wheel\n```\nOr download the latest [release](https://github.com/fralonra/lottery-wheel/releases).\n\nThen link `lottery-wheel.min.js` or `lottery-wheel.js` in your HTML.\n```html\n\u003cscript src=\"/path/to/lottery-wheel.min.js\"\u003e\u003c/script\u003e\n```\n\nESM is supported as well.\n```js\nimport Wheel from 'lottery-wheel'\n```\n\nSuppose you have an element whose id is 'wheel' in your html file.\n```html\n\u003csvg id=\"wheel\"\u003e\u003c/svg\u003e\n```\n\nThen you can do the following to create a wheel:\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: [{\n    text: 'apple',\n    chance: 20\n  }, {\n    text: 'banana'\n  }, {\n    text: 'orange'\n  }, {\n    text: 'peach'\n  }],\n  onSuccess(data) {\n    console.log(data.text);\n  }\n});\n```\n\n# API\n\n## Methods\n\n### constructor(option)\n\nMore for `option`, see [below](#options).\n\n### draw()\nTo manually render the wheel when the `draw` property is set to false.\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['Beijing', 'London', 'New York', 'Tokyo'],\n  draw: false\n});\nsetTimeout(() =\u003e {\n  wheel.draw();\n}, 2000);\n```\n\n## Options\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| el | The element where the wheel mounted. [Details](#el). | HTMLElement | - |\n| data | An array of prizes. [Details](#data). | Array | - |\n| pos | The top-left corner of the wheel related to its parent element (the `el` element). | Array | [0, 0]\n| radius | The radius of the wheel in `px`. | Number | 100 |\n| buttonText | The text on the button. | String | 'Draw' |\n| fontSize | The size of text for prizes. | Number | (auto generate) |\n| buttonWidth | The width of the button in `px`. | Number | 50 |\n| buttonFontSize | The size of text on the button. | Number | (auto generate) |\n| textRotate | If the text on each prize rotate 90 degrees. | Boolean | false |\n| limit | The maxium times the wheel can be run. | Number | 0 (unlimited) |\n| duration | How long will the animation last in millseconds. | Number | 5000 |\n| turn | The minimum amount of circles the wheel will turn during the animation. | Number | 4 |\n| draw | If true, the wheel will be rendered immediately the instance created. Otherwise, you should call [draw](#draw) to manually render it. | Boolean | true |\n| clockwise | If true, the rotation movement will be clockwise. Otherwise, it will be counter-clockwise. | Boolean | true |\n| theme | The color preset to be used. [Details](#themes). | String | 'default' |\n| image | Allow you to render the wheel using image resources. See [image](#image). | Object | - |\n| color | An object used to override the color in the current theme. See [themes](#themes) | Object | - |\n| onSuccess | The callback function called when a prize is drawn successfully. [Details](#onsuccess). | Function | - |\n| onFail | The callback function called when trying to draw prize while has already drawn `limit` times. [Details](#onfail). | Function | - |\n| onButtonHover | The function called when the mouse moves over the button. [Details](#onbuttonhover) | Function | - |\n\n### el\nThe `el` property defines the element where to render the wheel. You should pass a\nDOM Element to it:\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: []\n});\n```\n\n### data\nThe `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.\n\nThe simplest way is to put the name of each prize in an array:\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['Beijing', 'London', 'New York', 'Tokyo']\n});\n```\nIt will generate the following wheel with default [options](#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.\n\n![](/doc/images/data.png)\n\nYou can also custom each prize by making it an object. The properties for the 'prize' object are listed [here](#prize-object).\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: [{\n    text: 'Beijing',\n    chance: 5\n  }, {\n    text: 'London',\n    chance: 4\n  }, 'New York', 'Tokyo']\n});\n```\n\n### onSuccess\nThe callback function called when a prize is drawn successfully.\n\n| Parameter | Description | Type |\n| --- | --- | --- |\n| data | The drawn '[prize](#prize-object)' object. | Object |\n\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['prize A', 'prize B', 'prize C', 'prize D'],\n  onSuccess(data) {\n    alert(`Congratulations! You picked up ${data.text}`);\n  }\n});\n```\n\n### onFail\nThe 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.\n\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['prize A', 'prize B', 'prize C', 'prize D'],\n  limit: 1,\n  onFail() {\n    alert('You have no more chance to draw');\n  }\n});\n```\nIn this case, if one has already drawn a prize, the next time he clicks the button the alert dialog will be shown.\n\n### onButtonHover\nCalled when the mouse is moving over the button.\n\n| Parameter | Description | Type |\n| --- | --- | --- |\n| anime | Refer to animejs. See the [doc](https://github.com/juliangarnier/anime) for usage.|  |\n| button | Refer to the [SVGImageElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement) where the button lies. | SVGImageElement |\n\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['prize A', 'prize B', 'prize C', 'prize D'],\n  onButtonHover(anime, button) {\n    anime({\n      targets: button.node,\n      scale: 1.2,\n      duration: 500\n    });\n  }\n});\n```\n\n## Prize Object\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| text | The name for the prize | String | '' |\n| 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 |\n| color | The background color for the prize (will override `color.prize` of Wheel). | String | - |\n| fontColor | The color of the text (will override `color.fontColor` of Wheel). | String | - |\n| fontSize | The size of the text (will override `fontSize` of Wheel). | Number | - |\n\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: [{\n    text: 'Beijing',\n    color: 'silver',\n    fontSize: 24\n  }, {\n    text: 'London',\n    fontColor: '#008000'\n  }, 'New York', 'Tokyo']\n});\n```\nThe above code will result the following wheel:\n\n![](/doc/images/prize.png)\n\n## Themes\n\nA theme is an object where stores the colors used in the wheel. It has following properties:\n* border: background color for the wheel's border.\n* prize: background color for the prize part.\n* button: background color for the button.\n* line: color for the line between prize parts.\n* prizeFont: color for prize text.\n* buttonFont: color for button text.\n\nThere are three themes preseted:\n\n* default\n```javascript\ndefault: {\n    border: 'red',\n    prize: 'gold',\n    button: 'darkorange',\n    line: 'red',\n    prizeFont: 'red',\n    buttonFont: 'white'\n}\n```\n\n* light\n```javascript\nlight: {\n    border: 'orange',\n    prize: 'lightyellow',\n    button: 'tomato',\n    line: 'orange',\n    prizeFont: 'orange',\n    buttonFont: 'white'\n}\n```\n![theme light](/doc/images/theme-light.png)\n\n* dark\n```javascript\ndark: {\n    border: 'silver',\n    prize: 'dimgray',\n    button: 'darkslategray',\n    line: 'silver',\n    prizeFont: 'silver',\n    buttonFont: 'lightyellow'\n}\n ```\n![theme dark](/doc/images/theme-dark.png)\n\nYou can also change the color by setting `color` property.\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['Beijing', 'London', 'New York', 'Tokyo'],\n  theme: 'dark',\n  color: {\n    button: '#fef5e7',\n    buttonFont: '#34495e'\n  }\n});\n```\n![setting color](/doc/images/color.png)\n\n## Image\nThe `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.\n\n| Property | Description | Type |\n| --- | --- | --- |\n| turntable | The image for the turntable. | String |\n| 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 |\n| offset | The y-axis offsets for the button. If negative, the button moves up. | Number |\n\nHere's an example of how it looks like when using the images in [/doc/images](https://github.com/fralonra/lottery-wheel/tree/master/doc/images) folder in this repo.\n```javascript\nconst wheel = new Wheel({\n  el: document.getElementById('wheel'),\n  data: ['Prize A', 'Prize B', 'Prize C', 'Prize D', 'Prize E', 'Prize F'],\n  image: {\n    turntable: 'turntable.png',\n    button: 'button.png',\n    offset: -10\n  },\n});\n```\n![image example](/doc/images/image.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffralonra%2Flottery-wheel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffralonra%2Flottery-wheel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffralonra%2Flottery-wheel/lists"}