Vue Scratch Card

With majority of the code shamelessly stolen from a codepen by Andre Ruffert and 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

Installation

$ npm install vue-scratchcard

Example Usage

<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

<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.

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)
• Deprecate onComplete handler

[before 1.2.0]

• Untracked 😂