Svelte Playing Cards

A highly customizable package for making card games in svelte. Provides two components Card and Deck. By default renders svg cards by nicubunu.

To import types for typescript project:

<script>
    import type {Suit,Value,ValueWithoutJoker,CardType} from 'svelte-playing-cards/Card.svelte';
</script>

Usage

1. Deck
   Component to generate deck of cards

   Import component by

   import Deck from "svelte-playing-cards/Deck.svelte"

   and use it in your code

   <Deck />

   by default it renders all 52 cards (without jokers) To specify cards pass it in as a list to deck prop

   <Deck deck={["10-of-CLUBS","QUEEN-of-HEARTS","BLACK-JOKER"]} />

   Other props are:

   |Props|Default values|Description| |:---:|:------------:|:---------:| |deck| all 52 cards(without jokers)|list of cards to render| |shouldShuffle| true|should shuffle the supplied deck| |cardWidth| "200px"|width of single card| |cardHeight|"250px"|height of single card| |cardCustomFronts|[ ]|list of cards which should have custom front along with custom component and its props| |cardCustomBackComp|null|custom component for back of cards| |cardCustomBackCompProps|{}|props for custom back component| |topPosition|"0px"|distance from top| |leftPosition|"0px"|distance from left| |topPositionOffset|0.1|offset from topPosition (helps in giving 3d look to deck)| |leftPositionOffset|0.5|offset from leftPosition (helps in giving 3d look to deck)| |frontShowingCards|[ ]|list of cards showing front| |onClick|remove the top card from deck| on:click handler| |onDblClick|shuffle the deck| on:dblclick handler|

   To use methods:

   <script>
       import Deck from "svelte-playing-cards/Deck.svelte"
       let deckComp: Deck;
   
       $: if(deckComp){
           // now you can use the methods available on Deck like deckComp.drawTopCard()
       }
   </script>
   
   <Deck bind:this={deckComp} />

   Available methods are: |Methods|Description| |:-----:|:---------:| |gettingReady|makes Deck ready to call other method upon. Only needed if you need to call other methods immediatly after initialization| |getDeck|get the deck| |drawTopCard|remove the top card| |drawCards|remove n cards| |shuffleWithTransition|shuffle the deck with optional transition| |showCardFront|show frontside of a card| |hideCardFront|show backside of a card| |flipCard| flip a card| |showTopCardFront|show frontside of top card| |hideTopCardFront|show backside of top card| |flipTopCard| flip top card| |drop| drag and drop a card|

   Available Functions are: |Functions|Description| |:-------:|:---------:| |generateFullDeckFun|generates a full deck (with/without jokers) |shuffleFun|shuffle the provided deck|

2. Card

   Component to render a card Import component by

   import Card from "svelte-playing-cards/Card.svelte"

   and use it in your code

   <Card card="10-of-CLUBS" />

   Other props are:

   |Props|Default values|Description| |:---:|:------------:|:---------:| |width|"200px"|width| |height|"250px"|height| |topPosition|"0px"|css top (in case of position = absolute)| |leftPosition|"0px"|css left (in case of position = absolute)| |position|"absolute"|position| |showBackSide|true|should show back side| |card*|-|card face value (value-of-suit)| |customBack|null|custom component to display on backside of card| |customBackProps|{}|props for custom back component| |customFront|null|custom component to display on frontside of card| |customFrontProps|{}|props for custom front component| |enableDrag|true|allow card to be drag and drop| |shouldRotate|false|rotate 90deg to swap width and height| |onClick|flip the card| on:click handler| |onDblClick|remove the card (from DOM)| on:dblclick handler|

   To use methods:

   <script>
       import Card from "svelte-playing-cards/Card.svelte"
       let cardComp: Deck;
   
       $: if(cardComp){
           // now you can use the methods available on Card like cardComp.flip()
       }
   </script>
   
   <Card bind:this={cardComp} />

   Available methods are: |Methods|Description| |:-----:|:---------:| |getCard|get the card value hold by this card| |flip|flip the card| |remove|remove the card (from DOM)| |transitionToTarget|transitions the card towards target| |showFront|show frontside of card| |showBack|show backside of card| |drop|function to call when drop the card on HTMLElement|
   |getPosition|get css top and left of the card| |setPosition|set css top and left of the card| |getSuppliedProps|get supplied props to the card| |shufflingTransition|make shuffling transition. (does not make sense to use it alone. Better to use in a deck)|