DEV Community

loading...
Cover image for How to cheat with Web Components

How to cheat with Web Components

Danny Engelman
Online since 1990, Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)
Updated on ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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





Discussion (1)

Collapse
fradar profile image
FRADAR

Wow. oof