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

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