HTML5 Deck of Cards

[AndyKelley]

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

[RodericDay]

This is what I've been wanting to make since I first learned about programming 3 years ago. So much effort goes onto enforcing rules, when really, all you need is the virtual pieces.

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

[hellbanner]

Hm, cool! My company just started on a Javascript board game engine where the server & client can share the same .js file for rules, and all logic for the game is encoded into the pieces (fat models) instead of controllers, allowing for easy customization and mods.

https://github.com/QuantumProductions/tic-tac-toe

[cableshaft]

Had the same idea but I also have a hundred others to distract me, so thanks for the heads up. I'll keep an eye on it.

[rw2]

This seems to be all static html, why doesn't he just turn the branch into a github page?

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

[daok]

1.89% faster than Math.Floor, 100% more hard to read.

[pakastin]

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

[DatBear]

Why not just i % 4?

[gcb0]

on my deck hacks i use proper data structures but on the initializer for the deck i have `suit = i % 4`.

which has the advantage of working with any size of deck. important since in brazillian truco you leave most of the numbers out ;)

[hacker_9]

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/

[redler]

Putting aside whether this sort of thing is clever and clean or occult and confusing, another pattern of the same ilk is:

  ~~(i/13)

[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

[pakastin]

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

[pakastin]

Fixed!

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

[pakastin]

Fixed!

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

[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.. :)

[esprehn]

Browsers implement pseudo elements using actual elements internally, there's no difference in power from using ::before or just putting a <span> as a child. Pseudo elements will probably be a little bit slower though.

[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/

[pakastin]

I actually started using same vector faces now!

[pakastin]

Wow, those look really nice!

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

[halotrope]

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

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

[snake117]

This kind of reminds me of something I almost ordered: http://varianto25.com/code-deck.html

Nice work by the way!

[linuxlizard]

What? No 52 pick up? ;-)

[err4nt]

Wow! Really nice. I love the animations.

I made an endless random card (and die roll) generator: 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/?

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

[kyle_u]

Very nice! I tried the CSS3 routes for card animations when I first built my card game ( 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!

[pakastin]

I know the feeling..

[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

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.

[pakastin]

That's now fixed!

[habith]

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

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

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