Skip to content

alyoshark/vue-scratchcard

Repository files navigation

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 😂

About

A Vue.js component that displays a scratchcard

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •