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 :)
HTML5 Deck of Cards
21–30 of 165 posts
Re: HTML5 Deck of Cards
#22This 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.
Re: HTML5 Deck of Cards
#23Maybe 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.
Re: HTML5 Deck of Cards
#24Any 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 :/
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.
Re: HTML5 Deck of Cards
#25More like JS + CSS3 Deck of Cards.
I used HTML5 just because the original version was made with Flash back in 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 :)
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.
Re: HTML5 Deck of Cards
#26Meh, it's all shiny and no functionality: I can't play any games or hook this up to anything. And it's not even that shiny: it would be quite difficult in casual play to differentiate cards at a glance: there are no faces on face cards, etc. I implemented the same functionality (minus drag/drop, which isn't actually useful) a few times myself when I was working on poker bots.
something to hook it up with : http://deckofcardsapi.com/
Re: HTML5 Deck of Cards
#27How 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.
Re: HTML5 Deck of Cards
#28How 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.
Put some HTML code on the gh-pages branch :)
Re: HTML5 Deck of Cards
#29How 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.
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).
Re: HTML5 Deck of Cards
#30Great 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.