https://github.com/matsuuu/playing-card
A Web Component for a Playing card
https://github.com/matsuuu/playing-card
html5 javascript vanilla webcomponent webcomponents
Last synced: 2 months ago
JSON representation
A Web Component for a Playing card
- Host: GitHub
- URL: https://github.com/matsuuu/playing-card
- Owner: Matsuuu
- Created: 2020-10-12T16:25:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-16T12:08:09.000Z (over 4 years ago)
- Last Synced: 2025-02-02T00:46:53.821Z (4 months ago)
- Topics: html5, javascript, vanilla, webcomponent, webcomponents
- Language: JavaScript
- Homepage: https://matsuuu.github.io/playing-card/
- Size: 186 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
_Vanilla Playing Card_ is a easy way to impleent playing cards on web pages.
## Features
- _Simple_ interface to modify the component to your liking
- _Lightweight_, since the component doesn't depend on any libraries
- _Framework agnostic_
## Demo
[Link to demo](https://matsuuu.github.io/playing-card/)
## Install
```bash
npm install playing-card --save
```
## Usage
```html
playing-card {
--card-size: 5rem;
background: linear-gradient(#e66465, #9198e5);
}
import 'playing-card';
```
## Properties
| Name | Type | Values | Description |
| ----- | ------ | ---------------------------- | ----------------------------------------------------------------------------------------------------- |
| Style | String | `Flippable` & `Peekable` | Determines the type of card and it's interactions |
| Rank | String | `A`, `2-10`, `J`, `Q` or `K` | Determines the rank of the playing card |
| Suit | String | `D`, `H`, `C` or `S` | Determines the suit of the playing card. Characters are short from Diamonds, Hearts, Clubs and Spades |
## API
| Name | Description |
| ------ | ------------------------------------------------------------------------------------------------------------------------ |
| flip() | Flip the card |
| peek() | Function called when a peekable card receives a mousedown -event. Use this is if you need to trigger the event virtually |
## Styling
#### Size
The size of the card can be easily modified with a css variable
```css
playing-card {
--card-size: 4rem;
}
```
#### Background
The background, or so called "Card back" can be whatever you want. It follows the regular `background` properties of a HTML element
```css
playing-card {
background: green center/50% no-repeat url('https://image.flaticon.com/icons/png/512/8/8817.png');
}
```
## Contributing
Currently most of the development is being done by [Matsuuu](https://github.com/Matsuuu), but the following fields could use contributions:
- A11y
- Mobile-support
- Optimizing the SVG's