How to cheat with Web Components

Someone*, years ago, did a Web Component with the impossible name
<card-t> (because Web Components need a hyphen in the tag name)

It bundles 52 SVG cards in one single file!

Let's steal that one Web Component:

<script src="https://cardmeister.github.io/elements.cardmeister.min.js"></script>

We then use the Web Component <card-t> class definition
for our own <poker-card>:

<script>
customElements.define( "poker-card", 
  class extends customElements.get("card-t") {})
</script>

And that's it, you now have 52 SVG cards available

<poker-hand>
  <poker-card suit=Hearts rank=Ace></poker-card>
  <poker-card suit=Hearts rank=King></poker-card>
  <poker-card suit=Hearts rank=Queen></poker-card>
  <poker-card suit=Hearts rank=Jack></poker-card>
  <poker-card suit=Hearts rank=10></poker-card>
</poker-hand>

And all you have to do is program a Poker Game... or Solitaire, or Hearts...

That old Repo with documentation & UNlicensed source: https://github.com/cardmeister/cardmeister.github.io

*) Me

---

---

Comments

[FRADAR]

Wow. oof