Skip to content

L
lottery
Commit c782140f authored by 冷佳娟's avatar 冷佳娟 💪
Browse files
Options

HRB-3334 fork no commits from https://github.com/fralonra/lottery-wheel

parent a5a0efcd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1136 additions and 2 deletions
.gitignore 0 → 100644
View file @ c782140f
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
dist/
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# lock file
package-lock.json
yarn.lock
LICENSE 0 → 100644
View file @ c782140f
MIT License
Copyright (c) 2018 Zoron
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
README.md
View file @ c782140f
# lottery [![Build Status](https://travis-ci.com/fralonra/lottery-wheel.svg?branch=master)](https://travis-ci.com/fralonra/lottery-wheel)
[![npm version](https://img.shields.io/npm/v/lottery-wheel.svg)](https://www.npmjs.com/package/lottery-wheel)
[![Greenkeeper badge](https://badges.greenkeeper.io/fralonra/lottery-wheel.svg)](https://greenkeeper.io/)
H2U-lottery # lottery-wheel
\ No newline at end of file
A library helps you performing a wheel for lottery game. Using [Snap.svg](https://github.com/adobe-webplatform/Snap.svg) and [anime.js](https://github.com/juliangarnier/anime/).
[demo](https://fralonra.github.io/lottery-wheel/demo/)
# Usage
```bash
npm install lottery-wheel
```
Or download the latest [release](https://github.com/fralonra/lottery-wheel/releases).
Then link `lottery-wheel.min.js` or `lottery-wheel.js` in your HTML.
```html
<script src="/path/to/lottery-wheel.min.js"></script>
```
Supposed you have an element whose id is 'wheel' in your html file.
```html
<svg id="wheel"></svg>
```
Then you can do the following to create a wheel:
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: [{
text: 'apple',
chance: 20
}, {
text: 'banana'
}, {
text: 'orange'
}, {
text: 'peach'
}],
onSuccess(data) {
console.log(data.text);
}
});
```
# API
## Methods
### constructor(option)
More for `option`, see [below](#options).
### draw()
To manually render the wheel when the `draw` property is set to false.
```javascript
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](#el). | Object | - |
| data | An array of prizes. [Details](#data). | 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](#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](#themes). | String | 'default' |
| image | Allow you to render the wheel using image resources. See [image](#image). | Object | - |
| color | An object used to override the color in the current theme. See [themes](#themes) | Object | - |
| onSuccess | The callback function called when a prize is drawn successfully. [Details](#onsuccess). | Function | - |
| onFail | The callback function called when trying to draw prize while has already drawn `limit` times. [Details](#onfail). | Function | - |
| onButtonHover | The function called when the mouse moves over the button. [Details](#onbuttonhover) | Function | - |
### el
The `el` property defines the element where to render the wheel. You should pass a
DOM Element to it:
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: []
});
```
### data
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:
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: ['Beijing', 'London', 'New York', 'Tokyo']
});
```
It 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.
![](/doc/images/data.png)
You can also custom each prize by making it an object. The properties for the 'prize' object are listed [here](#prize-object).
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: [{
text: 'Beijing',
chance: 5
}, {
text: 'London',
chance: 4
}, 'New York', 'Tokyo']
});
```
### onSuccess
The callback function called when a prize is drawn successfully.
| Parameter | Description | Type |
| --- | --- | --- |
| data | The drawn '[prize](#prize-object)' object. | Object |
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
onSuccess(data) {
alert(`Congratulations! You picked up ${data.text}`);
}
});
```
### onFail
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.
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
limit: 1,
onFail() {
alert('You have no more chance to draw');
}
});
```
In this case, if one has already drawn a prize, the next time he clicks the button the alert dialog will be shown.
### onButtonHover
Called when the mouse is moving over the button.
| Parameter | Description | Type |
| --- | --- | --- |
| anime | Refer to animejs. See the [doc](https://github.com/juliangarnier/anime) for usage.| |
| button | Refer to the Snap [Element](http://snapsvg.io/docs/#Element) where the button lies. | Object |
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
onButtonHover(anime, button) {
anime({
targets: button.node,
scale: 1.2,
duration: 500
});
}
});
```
## Prize Object
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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 | - |
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: [{
text: 'Beijing',
color: 'silver',
fontSize: 24
}, {
text: 'London',
fontColor: '#008000'
}, 'New York', 'Tokyo']
});
```
The above code will result the following wheel:
![](/doc/images/prize.png)
## Themes
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:
* default
```javascript
default: {
border: 'red',
prize: 'gold',
button: 'darkorange',
line: 'red',
prizeFont: 'red',
buttonFont: 'white'
}
```
* light
```javascript
light: {
border: 'orange',
prize: 'lightyellow',
button: 'tomato',
line: 'orange',
prizeFont: 'orange',
buttonFont: 'white'
}
```
![theme light](/doc/images/theme-light.png)
* dark
```javascript
dark: {
border: 'silver',
prize: 'dimgray',
button: 'darkslategray',
line: 'silver',
prizeFont: 'silver',
buttonFont: 'lightyellow'
}
```
![theme dark](/doc/images/theme-dark.png)
You can also change the color by setting `color` property.
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: ['Beijing', 'London', 'New York', 'Tokyo'],
theme: 'dark',
color: {
button: '#fef5e7',
buttonFont: '#34495e'
}
});
```
![setting color](/doc/images/color.png)
## Image
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.
| Property | Description | Type |
| --- | --- | --- |
| 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](https://github.com/fralonra/lottery-wheel/tree/master/doc/images) folder in this repo.
```javascript
const wheel = new Wheel({
el: document.getElementById('wheel'),
data: ['Prize A', 'Prize B', 'Prize C', 'Prize D', 'Prize E', 'Prize F'],
image: {
turntable: 'turntable.png',
button: 'button.png',
offset: -10
},
});
```
![image example](/doc/images/image.png)
demo/index.css 0 → 100644
View file @ c782140f
* {
box-sizing: border-box;
outline: 0;
text-decoration: none;
word-wrap: break-word;
}
html {
font-size: 100%;
line-height: 1.5;
}
@media (max-width: 960px) {
html {
font-size: 80%;
}
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
a {
color: #1e90ff;
}
header {
width: 100%;
padding-bottom: 2rem;
background: #24292e;
color: #f5f5f5;
text-align: center;
}
section {
width: 100%;
margin-bottom: 0.5rem;
}
.wrapper {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
height: 100%;
}
.main {
display: flex;
flex-flow: column;
align-items: center;
width: 66%;
padding: 1rem;
background: #f5f5f5;
}
.section-content {
}
.section-demo {
display: flex;
flex-flow: row;
align-items: flex-start;
width: 100%;
}
.code {
flex: 0 0 60%;
width: 60%;
overflow-x: auto;
}
.code code {
width: 100%;
}
.showcase {
flex: 0 0 40%;
width: 40%;
padding: 0.75rem;
}
@media (max-width: 960px) {
.main {
width: 100%;
}
.section-demo {
flex-flow: column;
align-items: center;
}
.code, .showcase {
flex: 0 0 100%;
width: 100%;
}
}
demo/index.html 0 → 100644
View file @ c782140f
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lottery Wheel</title>
<link href="index.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/arta.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="../dist/lottery-wheel.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>Lottery Wheel</h1>
<h3>A library helps you performing a wheel for lottery game.</h3>
<a href="https://github.com/fralonra/lottery-wheel">REPO & DOC</a>
</header>
<a href="https://github.com/fralonra/lottery-wheel"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="main">
<section>
<h2 class="section-title">Usage</h2>
<div class="section-content">
Install the package via npm:
<pre><code>npm install lottery-wheel</code></pre>
Or download the latest <a href="https://github.com/fralonra/lottery-wheel/releases">Release</a>.
</div>
</section>
<section>
<h2 class="section-title">API</h2>
<div class="section-content">
Please visit <a href="https://github.com/fralonra/lottery-wheel">repo</a>
to see guides.
</div>
</section>
<section>
<h2 class="section-title">Basic Examples</h2>
<div class="section-content">
Show the drawn prize:
</div>
<div class="section-demo">
<div class="code">
<pre><code class="javascript">
new Wheel({
el: document.getElementById('wheel1'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
onSuccess(data) {
alert(data.text);
}
});
</code></pre>
</div>
<div class="showcase">
<svg id="wheel1"></svg>
</div>
<script type="text/javascript">
new Wheel({
el: document.getElementById('wheel1'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
onSuccess(data) {
alert(data.text);
}
});
</script>
</div>
</section>
<section>
<div class="section-content">
Prizes with different probability to be drawn:
</div>
<div class="section-demo">
<div class="code">
<pre><code class="javascript">
new Wheel({
el: document.getElementById('wheel2'),
data: [{
text: '50%',
chance: 5
}, {
text: '20%',
chance: 2
}, '10%', '10%', '10%']
});
</code></pre>
</div>
<div class="showcase">
<svg id="wheel2"></svg>
</div>
<script type="text/javascript">
new Wheel({
el: document.getElementById('wheel2'),
data: [{
text: '50%',
chance: 5
}, {
text: '20%',
chance: 2
}, '10%', '10%', '10%']
});
</script>
</div>
</section>
<section>
<div class="section-content">
Can only draw one time:
</div>
<div class="section-demo">
<div class="code">
<pre><code class="javascript">
new Wheel({
el: document.getElementById('wheel3'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
limit: 1,
onFail() {
alert('You have no more chance to draw');
}
});
</code></pre>
</div>
<div class="showcase">
<svg id="wheel3"></svg>
</div>
<script type="text/javascript">
new Wheel({
el: document.getElementById('wheel3'),
data: ['prize A', 'prize B', 'prize C', 'prize D'],
limit: 1,
onFail() {
alert('You have no more chance to draw');
}
});
</script>
</div>
</section>
<section>
<div class="section-content">
Custom styles:
</div>
<div class="section-demo">
<div class="code">
<pre><code class="javascript">
new Wheel({
el: document.getElementById('wheel4'),
data: [{
text: 'Beijing',
color: 'silver',
fontSize: 24
}, {
text: 'London',
fontColor: '#008000'
}, 'New York', 'Tokyo'],
theme: 'light',
radius: 150,
buttonWidth: 75,
color: {
button: '#fef5e7',
buttonFont: '#34495e'
}
});
</code></pre>
</div>
<div class="showcase">
<svg id="wheel4"></svg>
</div>
<script type="text/javascript">
new Wheel({
el: document.getElementById('wheel4'),
data: [{
text: 'Beijing',
color: 'silver',
fontSize: 24
}, {
text: 'London',
fontColor: '#008000'
}, 'New York', 'Tokyo'],
theme: 'light',
radius: 150,
buttonWidth: 75,
color: {
button: '#fef5e7',
buttonFont: '#34495e'
}
});
</script>
</div>
</section>
</div>
</div>
</body>
</html>
package.json 0 → 100644
View file @ c782140f
{
"name": "lottery-wheel",
"version": "2.0.1",
"description": "A library helps you performing a wheel for lottery game.",
"main": "index.js",
"scripts": {
"build": "rollup -c rollup.config.js",
"lint": "standard --fix src/*.js",
"prepare": "npm run build",
"test": "npm run lint",
"start": "node src/index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fralonra/lottery-wheel.git"
},
"keywords": [
"browser",
"javascript",
"turntable",
"lottery"
],
"author": "zoron (https://github.com/fralonra/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/fralonra/lottery-wheel/issues"
},
"homepage": "https://github.com/fralonra/lottery-wheel#readme",
"dependencies": {},
"devDependencies": {
"animejs": "^3.0.0",
"rollup": "^1.1.0",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-filesize": "^6.0.0",
"rollup-plugin-node-resolve": "^5.0.0",
"rollup-plugin-terser": "^5.0.0",
"snapsvg": "^0.5.1",
"snazzy": "^8.0.0",
"standard": "^14.0.0"
}
}
rollup.config.js 0 → 100644
View file @ c782140f
import { terser } from 'rollup-plugin-terser'
import filesize from 'rollup-plugin-filesize'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default [{
input: 'src/index.js',
plugins: [
commonjs(),
resolve(),
filesize()
],
output: {
file: 'dist/lottery-wheel.js',
format: 'umd',
name: 'Wheel'
}
}, {
input: 'src/index.js',
plugins: [
commonjs(),
resolve(),
terser(),
filesize()
],
output: {
file: 'dist/lottery-wheel.min.js',
format: 'umd',
name: 'Wheel'
}
}]
\ No newline at end of file
src/index.js 0 → 100644
View file @ c782140f
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment