npm:playing-card

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

Install

npm install playing-card --save

Usage

<style>
    playing-card {
        --card-size: 5rem;
        background: linear-gradient(#e66465, #9198e5);
    }
</style>

<playing-card rank="10" suit="D" flippable></playing-card>

<script type="module">
    import 'playing-card';
</script>

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

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

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, but the following fields could use contributions:

A11y
Mobile-support
Optimizing the SVG's

Usage no npm install needed!