52 SVG playingcards in one 16 KB² Custom Element: `<playing-card>`

No Frameworks No Dependencies No External SVG files! All SVG is created by the Custom Element

From the maker of: FlagMeister.github.io , ChessMeister.github.io

This project uses modern browser technologies. Open in a 'evergreen' browser
If you want to make it work in outdated browsers see the WebComponents polyfill

License: Unlicense: This is free software released into the public domain - https://choosealicense.com/licenses/unlicense/

<hr>

The single file elements.cardmeister.min.js is:

SVG data for 52 playing cards - 500 KB painstakingly slimmed
one W3C Autonomous Custom Element : <playing-card cid=Queen-of-Hearts> </playing-card>
52 customized Built-In IMG elements : <img is=queen-of-hearts> (not supported in Safari; no longer created since 2024)
Total GZip file size: (under) 16 KB² creating 52 playingcards:

<hr>

Why another SVG playing card

A 'Hello World!' with Framework X took hours installing tools and used 95 KiloBytes ... to display 12 characters.

Something did not feel right!
What happened to the days when all you needed were some HTML tags and a text-editor?

I learned to PEEK and POKE at the age of 10 on a TRS-80 and learned HTML (a bit late) at 25
The ability to 'peek at' and learn from someone else's effort was fantastic.

Alas in the past years 'Web Development' has become something For-Rocket-Scientists only

W3C standard Custom Elements¹ make writing semantic HTML as cool as it was in my early days .. without any Framework!

Playingcard(t)s are a good subject to demonstrate the power of a Custom Element

one single file creates a <playing-card> Custom Element
(loads of) attributes for configuration
52 SVG playingcards
no external SVG images
All in 16 KB² because my first computer had 16 KiloBytes memory

Feel free to PEEK around, and if you want to POKE, submit an issue.

A special thanks to users Supersharp and Intervalia for their always helpful answers on StackOverflow!

-- Danny Engelman
-- Amsterdam 🌷🌷🌷 the Netherlands
-- Summer 2019 👴🏽 25 years after my first HTML page

The terms Custom Elements & Web Components are used interchangeably.
Web Components is the umbrella term for the three main techonologies:
- Custom Elements - the Custom Elements API
- Shadow Dom (not used in this project)
- HTML Templates (not used in this project)
- some references include a fourth: ES Modules (not used in this project)
Minified 16 KB GZip
It is a card game .. I cheated ... but can you spot where? (explained in documentation below)

<hr>

How the `<playing-card>` Custom-Element works

For an introduction to W3C standard Custom Elements/WebComponents read the excellent Blog by Danny Moerkerke

Like the HTML5 <video> tag, the Custom Element <playing-card> abstracts complex functionality into one HTML tag

💡 Custom Elements must be declared in a Namespace, so require a - hyphen in the tag name

Minimal HTML file to display a Queen of Hearts:

<html>
  <head>
    <script src="elements.cardmeister.full.js"></script>
  </head>
  <body>
    <playing-card rank="Queen" suit="Hearts"></playing-card>
  </body>
</html>

(Autonomous) Custom Element <playing-card> creates an image with the SVG as data:image src

Saves you from headaches with SVG in a document (duplicate symbol ids, bleeding CSS etc.)
and makes it easy to add HTML Drag-Drop functionality.

💡 Autonomous Custom Elements require a closing tag: </playing-card>

How it looks in F12 Developer Tools:

2018 version:

2024 version:

Customized Built-In Element (from IMG)

(not supported in Safari), This Web Component notation is no longer created since 2024

52 Custom Elements are also created customizing the IMG element so you can use:

<img is="ten-of-hearts" />
<img is="jack-of-hearts" />
<img is="queen-of-hearts" />
<img is="king-of-hearts" />
<img is="ace-of-hearts" />

The Autonomous Custom Element <playing-card> and the Customized Built-In Element <img is=...>
are two different flavours of Custom Elements which (in this case) do the same.
You can pick the one that suits your application. Or use them both in one page: https://cardmeister.github.io

💡 requires a <a href="https://www.webcomponents.org/polyfills">polyfill</a> in Safari, because Apple did not implement this part of the spec. See Liskov substitution principle

💡 declaration must be all lowercase!

💡 the IMG element is self-closing by default, no closing tag required!

💡 the is= declaration only takes effect when the DOM element is created

💡 on the (customized IMG) element you can use all attributes/properties documented below

👨‍💻 tech: Autonomous Elements can have ShadowDom, Customized Elements can not have ShadowDom

👨‍💻 tech: Because IMG elements don't contain text or have descendants, neither CSS selector img:before or img:after can be used

Styling `<playing-card>` with CSS:

Note: ::part styling not used, it did not exist in 2018

Since <playing-card> only creates a single IMG no shadow-DOM is required/used, thus IMG can be styled with global CSS:

[rank="queen"] img {
  border: 3px solid greenyellow;
  transform: rotate(15deg);
}

or for the customized IMG element: (not supported in Safari, no longer created since 2024)

img[is*="queen"] {
  border: 3px solid greenyellow;
  transform: rotate(15deg);
}

<hr>

My next challenge: a Solitaire game in Custom Elements

I have the selection and drag/drop part nearly done: https://playing-cards.github.io/Solitaire/

<cardts-game>
  <cardts-deck type="frenchdeck"></cardts-deck>
  <cardts-pile>
    <% 7 times %>
    <cardts-pile type="sequence"></cardts-pile>
    <%%>
  </cardts-pile>
  <cardts-pile id="foundation" type="stack">
    <% 4 times %>
    <cardts-pile></cardts-pile>
    <%%>
  </cardts-pile>
  <cardts-game></cardts-game
></cardts-game>

or even weirder `<playing-card>` games ...

What if cardts could:

change suit during a game
fade out during a game
change from Queens to Kings
...
...

`<playing-card>` attribute/properties syntax

playingcards Terminology:

'court' is UK English for 'face' US English. So Jack, Queen and King are court-cards (courts)
SHDC is short for Spades-Hearts-Diamonds-Clubs
0123 are Array indexes (SHDC)
cid = card id
As = Ace of Spades , TD = Ten of Diamonds

💡 attributes can be written as attributes in HTML:<playing-card id=MyCard cid=Qh ></playing-card>

💡 attributes can be set as attribute:MyCard.setAttribute('cid','Kh')

💡 or as property: MyCard.cid='Kh' (sets the attribute value)

`<playing-card>` takes a sh*tload of attributes you can play with:

See: https://cardmeister.github.io

cid - Standard Card ID notation: cid=Qh = Queen of Hearts
letters - Custom localized court letters
courts - mix rank/courts images
suits - Mix suit/court images
suitcolor - Change SHDC suit color
rankcolor - Change rank color
cardcolor - card color
opacity - set card content opacity
courtcolors - Change court image colors
bordercolor - set card border color
borderradius - set card border radius
borderline - set card border line thickness
backtext - card backside text
backtextcolor - card backside color
svg - (undocumented) add attributes to main SVG definition (eg: svg="transform='rotate(5,5,5)'")
pips - (undocumented) custom suitsymbols (pips) on number cards

🔧 `cid` - standard card id notation

    <playing-card cid=As></playing-card>
    <playing-card cid=5d></playing-card>
    <playing-card cid=Tc></playing-card>
    <playing-card cid=Jh></playing-card>
    <playing-card cid=Qc></playing-card>

💡 overrules rank= and suit= notation

💡 case insensitive: qC is the same as: Qc

💡 10C is processed as TC

💡 Queen-of-Clubs is processed as Qc

💡 `<img i

Cardmeister.github.io

Install / Use

README

52 SVG playingcards in one 16 KB² Custom Element: `<playing-card>`

No Frameworks No Dependencies No External SVG files! All SVG is created by the Custom Element

From the maker of: FlagMeister.github.io , ChessMeister.github.io

The single file elements.cardmeister.min.js is:

Why another SVG playing card

How the `<playing-card>` Custom-Element works

Minimal HTML file to display a Queen of Hearts:

How it looks in F12 Developer Tools:

Customized Built-In Element (from IMG)

Styling `<playing-card>` with CSS:

My next challenge: a Solitaire game in Custom Elements

or even weirder `<playing-card>` games ...

`<playing-card>` attribute/properties syntax

`<playing-card>` takes a sh*tload of attributes you can play with:

🔧 `cid` - standard card id notation

Cardmeister.github.io

Install / Use

README

52 SVG playingcards in one 16 KB² Custom Element: <playing-card>

No Frameworks No Dependencies No External SVG files! All SVG is created by the Custom Element

From the maker of: FlagMeister.github.io , ChessMeister.github.io

The single file elements.cardmeister.min.js is:

Why another SVG playing card

How the <playing-card> Custom-Element works

Minimal HTML file to display a Queen of Hearts:

How it looks in F12 Developer Tools:

Customized Built-In Element (from IMG)

Styling <playing-card> with CSS:

My next challenge: a Solitaire game in Custom Elements

or even weirder <playing-card> games ...

<playing-card> attribute/properties syntax

<playing-card> takes a sh*tload of attributes you can play with:

🔧 cid - standard card id notation

52 SVG playingcards in one 16 KB² Custom Element: `<playing-card>`

How the `<playing-card>` Custom-Element works

Styling `<playing-card>` with CSS:

or even weirder `<playing-card>` games ...

`<playing-card>` attribute/properties syntax

`<playing-card>` takes a sh*tload of attributes you can play with:

🔧 `cid` - standard card id notation