HTML5 Deck of Cards • Hacker News Board

Re: HTML5 Deck of Cards

#31

Post by jklein11 » Thu, Sep 03, 2015, 2:22 PM UTC

jasonkester wrote: post #24

pakastin wrote: post #10

Earlier quoted context omitted.

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

Why spend the time and effort pulling a custom font across the wire if you're only going to use symbols that exist in the web safe fonts included with the browser? Seems kinda wasteful.

I think the reason for this is to prevent cross browser bug you seemed to be experiencing in the parent comment.

Re: HTML5 Deck of Cards

#32

Post by borkabrak » Thu, Sep 03, 2015, 2:33 PM UTC

I wrote a simpler version of very nearly the same thing not long ago. But this one is much nicer. The animations, in particular, add a lot of flash.

Re: HTML5 Deck of Cards

#33

Post by ldesegur » Thu, Sep 03, 2015, 2:34 PM UTC

ZitchDog wrote: post #20

pakastin wrote: post #9

Earlier quoted context omitted.

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

Yes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2

i/13|undefined works too

Re: HTML5 Deck of Cards

#34

Post by retrogradeorbit » Thu, Sep 03, 2015, 2:36 PM UTC

There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.

Re: HTML5 Deck of Cards

#35

Post by Stormcaller » Thu, Sep 03, 2015, 2:42 PM UTC

ZitchDog wrote: post #20

pakastin wrote: post #9

Earlier quoted context omitted.

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

Yes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2

Its because they don't do the same thing

Math.floor() favors the number equal to/less than the parameter, Math.floor(-15.5) is -16 while (-15.5 | 0) is -15

Also because the returned value is int32[0],

Math.floor(2147483648.5) is 2147483648 while (2147483648.5 | 0) is -2147483648

You are fine if you know the input is less than (2^31) + 1 and you want to truncate, rather than floor.

[0]: http://www.ecma-international.org/ecma-262/6.0/#sec-binary-b...

Re: HTML5 Deck of Cards

#36

Post by halotrope » Thu, Sep 03, 2015, 2:46 PM UTC

What is it with cards that everything about them is so satisfying?

Re: HTML5 Deck of Cards

#37

Post by danvesma » Thu, Sep 03, 2015, 2:49 PM UTC

the animation is lovely and fluid. bit of a shame that the card faces don't have the pictures for the royal cards and the usual layout of multiple suit signs on the number cards, but this is still super.

Re: HTML5 Deck of Cards

#38

Post by adam12 » Thu, Sep 03, 2015, 2:58 PM UTC

retrogradeorbit wrote: post #34

There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.

It's done in CSS3 + JS, so it should be pretty easy.

https://desandro.github.io/3dtransforms/examples/card-01.htm...

#card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }

Re: HTML5 Deck of Cards

#39

Post by Stormcaller » Thu, Sep 03, 2015, 3:04 PM UTC

hacker_9 wrote: post #23

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.

In asmjs you see this sort of syntax 'num | 0' a lot [0] to enforce that the number is an int, so that may be where he got the idea. [0] http://www.sitepoint.com/understanding-asm-js/

It exists in other languages, too, like PHP.

Re: HTML5 Deck of Cards

#40

Post by pauly » Thu, Sep 03, 2015, 3:07 PM UTC

pakastin wrote: post #13

thomasfoster96 wrote: post #6

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?

I suck at pseudo-elements – that's why.. :)

Great work, I love this. Here is a quick playing card example with pseudo elemenets view-source:http://www.clarkeology.com/card.html