Web Components Community 🔷

Cover image for A playing-card Component
Timothy Foster
Timothy Foster

Posted on

A playing-card Component

A few months ago I created a card game called Nimcard using web components. While making it, I had realized it may be possible to create a reusable playing card, a playing-card element if you will!

<playing-card value="7" suit="s"></playing-card>
Enter fullscreen mode Exit fullscreen mode

The code is a decent example of creating and testing a web component while keeping accessibility in mind, as well as how to integrate Typescript if that's important to you!

Lessons Learned

This was my first time trying to integrate Typescript with a web component. In hindsight, I'd personally stay with vanilla Javascript for simple concepts like a playing-card. The lack of an intermediary build step makes both development and the shipped code simpler.

Second, while it's not so bad to make an element reusable, it's a ton harder to make it generic. I remember thinking about questions like:

  • What if I want a different back-of-card pattern?
  • What if I want to use my own shapes for the suits?
  • What if I want a customized flip animation?

In the end I ignored these questions because it was impractical to solve for the world when all I wanted was some cards for one game.

What sorts of things have you made?

I'd love to see how people here have used web components! I've tagged this post with #showcase, which we can use for sharing what we've built 😊

Top comments (1)

dannyengelman profile image
Danny Engelman • Edited on

FYI, cardmeister.github.io/
52 SVG playing cards in one 16 KB Web Component

Re use that component: dev.to/dannyengelman/how-to-cheat-...