
HTML5 Deck of Cards - delambo
http://pakastin.github.io/deck-of-cards/
======
AndyKelley
This is similar to something my room mate is working on:
[https://github.com/thejoshwolfe/board-
gamer-2d](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 expansions before printing them.

It's a little bit early in the project though, so you'd have to run it from
source if you want a demo.

~~~
AUmrysh
This is actually something you can do with Tabletop Simulator on steam, as I'm
using it for that exact purpose. It even uses JSON as the underlying data
structure. Granted, it's proprietary and not free.

~~~
AndyKelley
My room mate tried to use that and he said it was garbage. The thing that I
remember was having to type file paths manually, but there was a bunch of
other specific and egregious problems he pointed out. Beyond that though, 3D
brings nothing to the table; it's just a gimmick.

------
riebschlager
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.

~~~
takeda
If you're referring to |0 then I would disagree. It shows how horrible
JavaScript is. This is very confusing if you're not familiar with this trick
or strange behavior of the language.

    
    
        suit = int(i / 13)
        suit = (int)(i / 13)
        suit = math.floor(i / 13)
    

Are much easier to understand for someone not familiar with the code.

~~~
TazeTSchnitzel
The behaviour of JavaScript's bitwise operators isn't that unreasonable, but
the excessive use of this trick for tiny performance gains at the expense of
readability is a shame.

------
hacker_9
This is very pleasing to the eye to shuffle/sort. Good work.

Now you just need to add a dropdown to select what drinking game you want to
play.. ring of fire anyone?..

~~~
pkstn
:)

------
jasonkester
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.

~~~
TazeTSchnitzel
> On Mac Chrome, that must use smileys to represent unknown characters.

You're seeing the Last Resort fallback font, which shows a symbol
representative of the codepoint range, and the range's name, so you can
identify what type of font you need. Since the suits are in the smiley block,
you see a smiley. If you had no Latin alphabet font, you'd see an A.

[https://en.wikipedia.org/wiki/Fallback_font](https://en.wikipedia.org/wiki/Fallback_font)

~~~
pakastin
Fixed now..

------
felipeerias
Great work. There's a couple of small issues. First, regardless of where you
click on a card, when you start dragging the card will jump so that its centre
is at the cursor position. Second, there is a mismatch on the Z-index used for
dragging and that used when a card is dropped into place.

~~~
pakastin
Will fix those.. Actually dragging start is "sort of" fixed already.

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

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

[https://desandro.github.io/3dtransforms/examples/card-01.htm...](https://desandro.github.io/3dtransforms/examples/card-01.html)

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

~~~
kenbellows
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.

~~~
jameshart
[http://lea.verou.me/css3patterns/](http://lea.verou.me/css3patterns/) could
provide a pretty good source for patterned card backs.

~~~
adam12
Nice

[http://lea.verou.me/css3patterns/#marrakesh](http://lea.verou.me/css3patterns/#marrakesh)

------
thomasfoster96
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?

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

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

~~~
indubitably
That’s nice CSS but the HTML is so borked… why not

<div class=card data-value="A" data-suit="︎">︎</div>

Or something?

~~~
femto113
On the "least amount of HTML possible" theme here's a version using only
"class", e.g.

<p class="2 ︎"/>

[http://codepen.io/femto113/pen/avzWJq](http://codepen.io/femto113/pen/avzWJq)

Doesn't include the card centers, but does have top and bottom corners.

EDIT: HN doesn't seem to like unicode characters? The class should include the
suit symbol.

~~~
pakastin
I think I'll stick with good old elements :)

Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me
wrong.. ;)

------
donpark
Nice animation although card faces need some work.

My own CSS playing cards with proper card faces from 3 years ago is here:

[http://donpark.github.io/scalable-css-playing-
cards/](http://donpark.github.io/scalable-css-playing-cards/)

~~~
pakastin
I actually started using same vector faces now!

------
mkorfmann
Really nice! An animation for turning the cards and the displaying of the back
of the card would be a useful additional feature I guess.

~~~
pakastin
Yes, have to add that!

------
almightysmudge
It'd be perfect if the Z-index updated for card last selected. It looks like
they're z-indexed in a specific order at the moment?

~~~
pakastin
I will change it so that z-index is only temporary and when cards are stopped
it will reorder them in the DOM.

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

~~~
pkstn
Maybe you begin to think about gambling, women, fast cars, Vegas.. :)

------
ipsin
This is quite nice! One "intuitive-but-counterintuitive" result -- when the
cards are stacked and I drag from the corner, I end up pulling a card from the
middle of the deck.

I suppose that's more for a second library that can manage stacks of cards,
dealing and interacting with dealt cards, etc.

~~~
pakastin
I will add more power to the API..

------
snake117
This kind of reminds me of something I almost ordered:
[http://varianto25.com/code-deck.html](http://varianto25.com/code-deck.html)

Nice work by the way!

~~~
pakastin
Thanks! Cool cards!

------
linuxlizard
What? No 52 pick up? ;-)

~~~
pakastin
Actually there was in the first version of this:
[http://pakastin.fi/cards_2006](http://pakastin.fi/cards_2006) (made with
Flash)

Press "Räjäytä" (means "explode" in Finnish) ;)

------
err4nt
Wow! Really nice. I love the animations.

I made an endless random card (and die roll) generator:
[http://staticresource.com/shuffle.html](http://staticresource.com/shuffle.html)
just tap anywhere to draw a new card.

Seeing what you've done with your Deck of Cards is a big inspiration!

------
kelukelugames
How did you get it to show up at the URL: [http://pakastin.github.io/deck-of-
cards/](http://pakastin.github.io/deck-of-cards/)?

I thought we needed to make a separate repository for github pages first. My
other repo doesn't show at all.

~~~
pluma
You just need a gh-pages branch on the repo. The separate repo is only for the
"root folder" of that subdomain (i.e. the content of the master branch of the
repo pakastin/pakastin.github.io shows up at pakastin.github.io/ and the
content of the gh-pages branch of the repo pakastin/xyz shows up at
pakastin.github.io/xyz).

~~~
kelukelugames
Thanks. I've been manually copying the directories into my gh-pages repo. lol.

------
kyle_u
Very nice! I tried the CSS3 routes for card animations when I first built my
card game ( [https://solitaire.gg](https://solitaire.gg) ), but ended up going
with WebGL since the cross-browser support for CSS3 animations was so wonky.

~~~
pakastin
Whoa, really smooth animations!

------
danvesma
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.

~~~
pakastin
Flash version had some of those:
[http://pakastin.fi/cards_2006](http://pakastin.fi/cards_2006)

I used 52-framed movieClip as a card, where frames were values.

And then every suit graphic was one movieClip as well with 4 frames: spade,
heart, club and diamond

Worked great! Not so easy to do with HTML though. Lots of figuring out
coordinates manually.

------
habith
Very neat! Mind if I borrow some of the CSS for my cards trick[0]?

[0] [http://cluecode.com/cards/](http://cluecode.com/cards/)

~~~
pakastin
Go for it! ;)

------
borkabrak
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.

~~~
pakastin
Thanks! It's fun to make them as realistic as possible. Usually shuffle
animations are a bit plain..

------
TomGullen
Looks great! Ability to flip cards would be awesome. When the cards are
fanned, I'd love to see the end one being flipped and they all domino over :)

~~~
pakastin
That's such a great idea!! :)

------
saheb37
Loved it :).Animations are beautiful, will be using them soon in card game I
am developing. Thanks for releasing it at the right time for me.

~~~
pakastin
Glad to hear! Would love if you'd share your work with me. I'm on Twitter
@pakastin ;)

------
doug1001
gorgeous! really fine work. (granted i have no design talent, though i did
work for an online poker shop for six years and i have played a lot of poker
with friends and a lot house poker in casinos.

particularly awesome is "sort", which i think really nicely simulates a
(reverse) shuffle; it seemed like i could see the top edge of the cards lift
as they rotated along the bottom edge

~~~
pakastin
Thanks! Next I need to make a game out of this :)

------
hissworks
Way cool! Echoing the sentiments of others who've commented on the fluidity of
the motions on display here.

~~~
pakastin
Thanks!

------
TimJRobinson
This would be awesome for playing Magic The Gathering, grabbing the card art
off of the gatherer site.

~~~
pakastin
I don't know anything about Magic the Gathering, but I will make the API
better and the faces more customizable.

------
hotgoldminer
I want to deal a card game and play with someone. The cards need to be face
down though.

~~~
pakastin
Yeah, would be fun!

------
mentos
Would be cool if you could drag select multiple cards to move hands around in
the demo.

~~~
pakastin
You mean dragging would support multiple touch points..? sounds fun!

------
voltagex_
I'd love to build a cribbage game with this as the basis for the UI.

~~~
pakastin
I have to work hard on API, it's really just barebones at the moment :/

------
mschuster91
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.

~~~
pkstn
That's already on the "todo" list - check out readme ;)

------
tripzilch
Kudos for making this run smoothly on my three year old laptop!

~~~
pakastin
My MacBook Pro is even older - 3 years is not that much.. But thanks! :)

------
adam12
More like JS + CSS3 Deck of Cards.

~~~
pakastin
I used HTML5 just because the original version was made with Flash back in
2006 ([http://pakastin.fi/cards_2006](http://pakastin.fi/cards_2006)). Then I
made a Angular.js version, which is lost, but was featured on Chrome
Experiments. This is actually HTML5 Deck of Cards 2 :)

~~~
adam12
Anyway, great job. This the best deck of cards I've seen on the web. I'm
pretty sure it won't be long before we see a Meteor app that uses this.

~~~
pkstn
Thanks! I look forward to seeing what other people make out of it.. :)

------
adamkochanowicz
Mesmerizing.

~~~
pakastin
Thanks!

------
kachnuv_ocasek
What's so HTML5 about this?

~~~
Mahn
As far as I can tell, it uses 2d transforms, which are usually considered part
of HTML5. The animation would probably be a bit jerkier and slower if done
with absolute positioning instead.

~~~
pkstn
Yeah, translates and transitions.. Both are CSS3

