# @autots/redpacket

> A redpacket rain component based on typescript and vanilla js

Latest version **2.1.2** (published 2020-07-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @autots/redpacket
pnpm add @autots/redpacket
yarn add @autots/redpacket
bun add @autots/redpacket
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2020-07-24 |
| First published | 2020-05-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 121.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Sharklegs |
| Maintainers | atser, liihom, magnnus, sharklegs |

## Links

- npm: https://www.npmjs.com/package/@autots/redpacket
- Repository: https://github.com/Sharklegs/redpacket-rain
- Homepage: https://github.com/Sharklegs/redpacket-rain#readme
- Issues: https://github.com/Sharklegs/redpacket-rain/issues
- npm.io page: https://npm.io/package/@autots/redpacket

## Dependencies (1)

- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 2.1.2 (latest) — 2020-07-24
- 2.1.1 — 2020-07-23
- 2.1.0 — 2020-07-23
- 2.0.0 — 2020-07-22
- 1.0.0 — 2020-05-25

## README

# redpacket-rain

A redpacket rain component based on typescript and vanilla js.

## Installing

Using npm:

``` bash
$ npm install @autots/redpacket -S
```

**Note:** cdn is not supported at now, maybe you can deliver the file `dist/redpacket.min.js` to your own cdn server.

## Example
### 1. Used in modular manner

``` js
import RedPacket from '@autots/redpacket';

const redPacket = new RedPacket({
  imgUrl: '//s.autoimg.cn/www/site/livechannel/images/',
  container: 'test',
  countdownTime: 3,
  remainTime: 30,
  rainType: [
    { score: 1, speed: 1, ratio: 7 },
    { score: 2, speed: 1, ratio: 2 },
    { score: 10, speed: 1, useless: 70, ratio: 1 }
  ],
  angle: 0.01,
  onDuration(time, count) {
    console.log(time, count);
  },
  onStart() {
    console.log('game start');
  },
  onEnded(count) {
    console.log(`game over! your score: ${count}`);
  }
})
```

### Used in browser plugin

``` html
<script src="dist/redpacket.min.js"></script>

<script>
  const redPacket = new AutoTs.RedPacket(...); // same above
</script>
```

> There is a global variable `AutoTs`, and `RedPacket` property is the constructor.


## API

``` js
const redPacket = new RedPacket(config);
```
| Name | Type | Default | Optional | Description |
|:----------:|:-----------------------------:|:-----------:|:----:|:--------------------------|
| imgUrl                 | string | --               | NO  | base URL of images  |
| container        | string | --             | NO | id of the canvas element |
| angle  | number | 0.3 | YES | drop angle |
| boundary  | number | 0 | YES | distance from left&right |
| countdownTime  | number | 0 | YES | count down from ( <= 5 ) |
| remainTime  | number | 30  | YES | game duration time |
| rainType  | ({ score: number, speed: number, useless?: number, ratio: number })[] | -- | NO | type of rain <br> 1. if pic has useless content which like glowing shadow, make sure four sides distance equal <br> 2. ratio sum of all type must equal 10 |
| onDuration      | Function                       | --               | YES | callback during game remaining countdown <br> ( time, count ) |
| onStart     | Function                       | --               | YES | callback when game start |
| onEnded   | Function                       | --               | YES | callback when game over <br>( score ) |


you can stop during the game by using:
``` js
redPacket.close();
```

## Rules
config.imgUrl is the base url of images. the names of images can not be changed, there are images you should prepare:
* raindrop${index + 1}.png  ( for (let index in config.rainType) ) 
* bingo.png  ( click effect like firework )
* meteor.png  ( decoration like meteor )
* countdown-bg.png
* countdown.png  ( vertical sprite of 5 4 3 2 1 go )
* count-bg.png

---
_Source: https://npm.io/package/@autots/redpacket · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._