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

.gitignore

+# 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

+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

-# 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
\ No newline at end of file
+# lottery-wheel
+
+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

+* {
+	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

+<!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

+{
+  "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

+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