# vue-scratchcard

> A Vue 3 component that displays a scratchcard

Latest version **2.0.0** (published 2024-11-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-scratchcard
pnpm add vue-scratchcard
yarn add vue-scratchcard
bun add vue-scratchcard
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2024-11-04 |
| First published | 2018-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Xie Chenhong |
| Maintainers | xch91 |

## Links

- npm: https://www.npmjs.com/package/vue-scratchcard
- Repository: https://github.com/xch91/vue-scratchcard
- Homepage: https://github.com/xch91/vue-scratchcard#readme
- Issues: https://github.com/xch91/vue-scratchcard/issues
- npm.io page: https://npm.io/package/vue-scratchcard

## Recent versions

- 2.0.0 (latest) — 2024-11-04
- 1.2.0-a — 2019-05-10
- 1.2.0 — 2019-05-04
- 1.1.4-a — 2019-03-08
- 1.1.4 — 2019-03-07
- 1.1.3 — 2018-12-22
- 1.1.2 — 2018-12-21
- 1.1.1 — 2018-07-16
- 1.1.0 — 2018-01-20
- 1.0.0 — 2018-01-08

## README

# Vue Scratch Card

*With majority of the code shamelessly stolen from [a codepen by Andre Ruffert](https://codepen.io/andreruffert/pen/pvqly) and [React ScratchCard](https://github.com/aleksik/react-scratchcard)*


> `master` branch is currently under construction to migrate to Vue 3; for Vue 2 (and untested but presumably Vue 3 also) compatible code, visit [v1.x branch](https://github.com/xch91/vue-scratchcard/tree/v1.x)


## Installation

```
$ npm install vue-scratchcard
```

## Example Usage

```html
<template>
  <div id="app">
    <scratch-card :key="renderCount"
                  :cardWidth="cardWidth"
                  :cardHeight="cardHeight"
                  :finishPercent="finishPercent"
                  imageUrl="https://avatars2.githubusercontent.com/u/1077546?s=460&v=4"
                  :forceReveal="forceReveal">
      <h2 class="card-content">This is a highly secretive message!!!</h2>
    </scratch-card>
    <button @click="forceReveal = true">Force Reveal!</button>
    <button @click="renderCount++">Force Reset</button>
  </div>
</template>

<script>
import ScratchCard from 'vue-scratchcard';

export default {
  name: 'app',
  components: {
    ScratchCard,
  },

  data() {
    return {
      renderCount: 0,
      cardWidth: 300,
      cardHeight: 300,
      finishPercent: 70,
      forceReveal: false,
    };
  },
};
</script>

<style scoped>
.card-content {
  color: red;
}
</style>
```

## TO use this with custom brush option

clone this github repo and try this one 

```html
<template>
  <div id="app">
    <scratch-card :key="renderCount"
                  :cardWidth="cardWidth"
                  :cardHeight="cardHeight"
                  :finishPercent="finishPercent"
                  imageUrl="https://avatars2.githubusercontent.com/u/1077546?s=460&v=4"
                  :brushUrl="brushUrl"
                  :forceReveal="forceReveal">
      <h2 class="card-content">This is a highly secretive message!!!</h2>
    </scratch-card>
    <button @click="forceReveal = true">Force Reveal!</button>
    <button @click="renderCount++">Force Reset</button>
  </div>
</template>

<script>
import ScratchCard from '../src/ScratchCard.vue';
import BRUSH from './brush.png';

export default {
  name: 'app',
  components: {
    ScratchCard,
  },

  data() {
    return {
      renderCount: 0,
      cardWidth: 300,
      cardHeight: 300,
      finishPercent: 70,
      brushUrl: BRUSH,
      forceReveal: false,
    };
  },
};
</script>

<style scoped>
.card-content {
  color: red;
}
</style>
```

## Parameters:

| Parameter                 | Type     | Description
|---------------------------|----------|------------
| imageUrl                  | String   | cover image url
| brushUrl                  | String   | brush image url
| cardWidth                 | Number   | card width
| cardHeight                | Number   | card height
| finishPercent             | Number   | revelation percentage until removing cover
| forceReveal               | Boolean  | remove cover when changed from false -> true
| @complete (new in 1.2.0)  | Event    | event emitted on cover revelation

As a Vue practice, to force reset a scratchcard, provide a `key` attribute and change its value.
Just as explained in [this post](http://michaelnthiessen.com/force-re-render/).


## Change Log:

### 2.0.0 - 2024-11-04

- Actually it's long rewritten but just forgot to publish...
- Should be a compatible rewrite in Vue 3

### [1.2.0] - 2019-05-04

- `@complete` event for cover revelation (by [NahroTo](https://github.com/NahroTo))
- Deprecate `onComplete` handler

### [before 1.2.0]

- Untracked 😂

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