0.1.0 • Published 1 year ago
scratch-card-web-component v0.1.0
Scratch card
A scratch card wrapped in a web component, inspired by the CodePen made by Totati and written with Lit and TypeScript.
Table of Contents
Demo
You can see the scratch card in action here with explicit config details.
Installation
# npm
npm install scratch-card
# yarn
yarn add scratch-card
# pnpm
pnpm add scratch-card
Usage
The scratch card can be imported and used in an HTML page in this way:
<script type="module">
import "scratch-card"
</script>
<div id="app">
<scratch-card fillColor="salmon">
<span>Ciao!</span>
</scratch-card>
</div>
The scratch card sets its dimensions to 100% width and height of its parent.
You should not create a scratch card via JavaScript/TypeScript, but there you can access and modify its attributes:
const scratchCard = document.querySelector("scratch-card") as ScratchCard;
scratchCard.fillColor = "rebeccapurple";
Properties
Note that the boolean properties are false when they are missing from the html (Lit docs).
brushScale
: number (default1
), scales up (> 1) or down (< 1) the size of the uncovered area with a single scratch.centerCover
: boolean (defaultfalse
), if true, the cover image is centered in the scratching area.coverSrc
: string or undefined (defaultundefined
), URL path (relative or absolute) of the image to be used as cover to scratch. If undefined, then the scratch area will be filled with a rectangle with style specified by thefillColor
property.fillColor
: string (defaultwhite
), specifies the color to use to fill the scratch area if acoverSrc
is not provided. If this is an invalid value while thecoverSrc
is missing, the scratch card will show as already scratched.preserveAspectRatio
: boolean (defaultfalse
), whether to scale or not the cover to avoid leaving empty spaces in the scratch area. This can happen when the scratch area and the cover image have not the same aspect ratio.showAllAt
: number (default100
), percentage threshold to consider the card as fully scratched. For instance, ifshowAllAt="80"
the content will be entirely revealed when the 80% of the card's surface is scratched.silenceWarnings
: boolean (defaultfalse
), whether to stop emitting or not warnings to the browser console, such as"The image is being scaled up"
.
CSS properties
You can customize some styling of the scratch card via these CSS properties:
--scratch-card-bg-fallback
(defaulttransparent
): background to show while the canvas image is still loading (use to avoid FUOC effect).--scratch-card-border-radius
(default0
): applies a border-radius to the scratch card.--scratch-card-cursor
(defaultdefault
): applies a custom cursor when scratching the card.
You can set a CSS property directly on one of the scratch-card's parent elements.
License
MIT
0.1.0
1 year ago