alyoshark / vue-scratchcard Goto Github PK

    function getTotalPixels(ctx, width, height, stride) {
        if (!stride || stride < 1) stride = 1;
        const pixels = ctx.getImageData(0, 0, width, height);
        let total = 0;
        for (let i = 0; i < pixels.data.length; i += stride) {
            if (parseInt(pixels.data[i], 10) !== 0) total++;
        }
        return total;
    }

function getFilledPercent(ctx, width, height, total, stride) {
        if (!stride || stride < 1) stride = 1;
        const pixels = ctx.getImageData(0, 0, width, height);

        let count = 0;
        for (let i = 0; i < pixels.data.length; i += stride) {
            if (parseInt(pixels.data[i], 10) !== 0) count++;
        }
        return 100 - Math.round(count / total * 100);
    }

totalPixels: 0

            drawImage() {
                const image = new Image();
                image.crossOrigin = 'Anonymous';
                image.src = this.imageUrl;
                image.onload = () => {
                    this.ctx.drawImage(image, 0, 0, this.cardWidth, this.cardHeight);
                    this.overlayLoaded = true;
                    this.totalPixels = getTotalPixels(this.ctx, this.cardWidth, this.cardHeight, 32);
                };
            },

            handleMouseMove(e) {
                ...

                this.handlePercentage(
                    getFilledPercent(this.ctx, this.cardWidth, this.cardHeight, this.totalPixels, 32),
                );
            },

            handlePercentage(filledInPixels = 0) {
                if (filledInPixels >= this.finishPercent) this.reveal();
            },

<template>
  <div>
    <div>click</div>
    <scratch-card
      :key="renderCount"
      :cardWidth="cardWidth"
      :cardHeight="cardHeight"
      :finishPercent="finishPercent"
      imageUrl="https://i.imgur.com/zdFRqJI.png"
      :forceReveal="forceReveal"
      @complete="onComplete"
    >
      <div class="tile-block w-48 h-48"></div>
    </scratch-card>
  </div>
</template>

<script>
import ScratchCard from "vue-scratchcard";
// const onComplete = () => window.alert('Content revealed!');

export default {
  name: "HelloWorld",
  components: {
    ScratchCard
  },
  data() {
    return {
      cards: [
        { score: "1" },
        { score: "2" },
        { score: "3" },
        { score: "4" },
        { score: "5" },
        { score: "6" },
        { score: "7" },
        { score: "8" },
        { score: "9" }
      ],
      renderCount: 0,
      cardWidth: 140,
      cardHeight: 140,
      finishPercent: 100,
      forceReveal: false
    };
  },
  props: {
    msg: String
  },
    methods: {
    onComplete() {
      // `this` will refer to the component instance
      window.alert("Content revealed!");
    }
  }
};
</script>