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>

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 😊