Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sebastianwachter/wc-scratch
A fun scratch card native web component without any dependencies.
https://github.com/sebastianwachter/wc-scratch
canvas custom-elements dependency-free web-component
Last synced: about 1 month ago
JSON representation
A fun scratch card native web component without any dependencies.
- Host: GitHub
- URL: https://github.com/sebastianwachter/wc-scratch
- Owner: sebastianwachter
- License: mit
- Created: 2023-12-08T14:41:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-30T07:48:57.000Z (about 2 months ago)
- Last Synced: 2024-10-01T02:42:34.103Z (about 2 months ago)
- Topics: canvas, custom-elements, dependency-free, web-component
- Language: TypeScript
- Homepage:
- Size: 736 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# wc-scratch 🧽
A fun scratch card native web component without any dependencies.
## 🎉 Installation
Install it ith npm:
```
npm i wc-scratch
```
Or link it using a script tag:
```html
```
## ✨ Usage
Import the component - this will also register it as a custom element with the tag name ``:
```ts
import 'wc-scratch'
```
Now you can use the component in your markup:
```html
Scratch me free!
```
## ⚙️ Configuration
### 🎰 Slot
| Slot name | Description |
|-----------|-------------|
| default | The content to be scratched free. |
| scratch-source | Used to pass an image that acts as a scratch-color replacement. |
Example on how to use the `scratch-source` slot:
```html
Scratch me!
```
- To get the best experience make sure that your content is the same size as the image used to hide it.
- You need to set `display: none` on this image so the original is getting hidden. We only read its image data and paint it on the canvas.
- For images fetched over the internet you also need to set `crossorigin` if you want to use the `percentage-update` feature or else the `CanvasRenderingContext2D: getImageData()` will throw an error.
### 💡 Props
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| brush-size | number | `10` | Defines the [`lineWidth` attribute.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth) |
| brush-shape | string | `'round'` | Defines the [`lineJoin` attribute.](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) |
| scratch-color | string | `'#000000'` | The color you want to scratch away with your scratch card. Can be any valid CSS color.
| percentage-update | boolean | `false` | Flag to toggle the `percentage-update` event emitter on or off. |
### 🎈 Events
| Name | Type | Description |
|------|------|-------------|
| percentage-update | `{ detail: number }` | Emits a custom event with the cleared amount as a percentage. |
Example:
```html
const scratch = document.querySelector('wc-scratch[percentage-update]')
scratch.addEventListener('percentage-update', ({ detail }) => console.log(detail))
```
## ✔️ Caveats
1. Please avoid using `margin` on a content element since it can lead to improper sizing of the `canvas` element and therefore the content might be visible.
2. Calculation of the cleared area is rounded with a 150 pixel error margin.