HTML5 Deck of Cards

Post by adam12 » Thu, Sep 03, 2015, 7:52 PM UTC

kenbellows wrote: post #55

adam12 wrote: post #38

Earlier quoted context omitted.

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 ); }

Sure but implementing the card back image is more difficult, which is what I think the parent post was getting at, rather than the flipping itself. The rest of the page is implemented without any images, which is neat; you'd have to work some SVG magic or something to create e.g. a Bicycle-esque card back without loading an image.

Post by femto113 » Thu, Sep 03, 2015, 8:46 PM UTC

indubitably wrote: post #75

pauly wrote: post #40

Earlier quoted context omitted.

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

That’s nice CSS but the HTML is so borked… why not ︎ Or something?

Post by AUmrysh » Thu, Sep 03, 2015, 9:10 PM UTC

AndyKelley wrote: post #63

This is similar to something my room mate is working on: https://github.com/thejoshwolfe/board-gamer-2d The user can create a JSON string that represents a game (checkers, solitare, dominion, smash up, etc). Then the engine creates cards, tokens, dice, etc. It does not enforce rules but it supports multi player and some rules about visibility to other players. Its intended use case is for testing out new games or exp…

Post by pkstn » Thu, Sep 03, 2015, 9:40 PM UTC

aaronm67 wrote: post #96

ZitchDog wrote: post #20

Earlier quoted context omitted.

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

And every time a developer sees that, they're going to google "bar javascript" "single bar javascript" "bitwise or javascript" "bitwise or javascript effect" until they figure out WTF is going on. This all to save a fraction of a microsecond on an operation that's called 60 times on the page.

Post by pkstn » Thu, Sep 03, 2015, 9:57 PM UTC

mschuster91 wrote: post #106

nitpick: when fanning out the cards and then clicking on one it should stay in the orientation it was in the fan, it jumps weirdly around. same when clicking on the top card of a stack, it jumps ~40px.