HTML5 Deck of Cards

Each of these cards could probably be made with one element and some CSS3 pseudo-element selectors, as opposed to the four elements (wrapper element and three child elements) that are currently used per card.

Additionally, with three elements (possible just one if you're crazily good at CSS), it'd be possible to have flippable cards. Still just using CSS3.

Edit: Can someone explain these downvotes for me?

Re: HTML5 Deck of Cards

#7

Post by riebschlager » Thu, Sep 03, 2015, 1:37 PM UTC

Maybe it's a weird takeaway, but this line is really clever:

var suit = i / 13 | 0;

That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

Re: HTML5 Deck of Cards

#8

Post by jasonkester » Thu, Sep 03, 2015, 1:39 PM UTC

Any idea why the suits all render as smiley faces in Chrome/Mac?

Inspecting the cards, you can see that they are using the unicode character for spade/heart/etc. But in the browser itself you get nothing but smileys.

Perhaps the font they're using doesn't have those code points?

Edit: Yes, that's the case. Font is not specified, so it comes in as "inherit" by default, using whatever the browser feels like. On Mac Chrome, that must use smileys to represent unknown characters. Switching the document font to Arial in CSS fixes the issue and makes the cards look like cards.

Re: HTML5 Deck of Cards

#9

Post by pakastin » Thu, Sep 03, 2015, 1:39 PM UTC

riebschlager wrote: post #7

Maybe it's a weird takeaway, but this line is really clever: var suit = i / 13 | 0; That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

I think "value | 0" is basically same as "Math.floor(value)"

Re: HTML5 Deck of Cards

#10

Post by pakastin » Thu, Sep 03, 2015, 1:40 PM UTC

jasonkester wrote: post #8

Any idea why the suits all render as smiley faces in Chrome/Mac? Inspecting the cards, you can see that they are using the unicode character for spade/heart/etc. But in the browser itself you get nothing but smileys. Perhaps the font they're using doesn't have those code points? Edit: Yes, that's the case. Font is not specified, so it comes in as "inherit" by default, using whatever the browser feels like. On Mac Chr…

Font should be Open Sans.. I have Chrome/Mac and it's working :/