8 ms·
HTML5 Deck of Cards
- kachnuv_ocasek 11y agoWhat's so HTML5 about this?
- pakastin 11y ago<!DOCTYPE html> – that's about it :D
- Mahn 11y agoAs 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 11y agoYeah, translates and transitions.. Both are CSS3
- hacker_9 11y agoThis 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 11y ago:)
- deleted 11y ago[deleted]
- adam12 11y agoMore like JS + CSS3 Deck of Cards.
- pakastin 11y agoI 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 :)
- thomasfoster96 11y agoEach 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 11y agoI suck at pseudo-elements – that's why.. :)
- pauly 11y agoGreat 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 11y agoThat’s nice CSS but the HTML is so borked… why not <div class=card data-value="A" data-suit="︎">︎</div> Or something?
- femto113 11y agoOn 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 11y agoI think I'll stick with good old elements :) Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me wrong.. ;)
- riebschlager 11y agoMaybe 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.
- pakastin 11y agoI think "value | 0" is basically same as "Math.floor(value)"
- ZitchDog 11y agoYes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2 https://jsperf.com/or-vs-floor/2
- ldesegur 11y agoi/13|undefined works too
- logicallee 11y agoplus i/13|undefined has that "this was originally written in javascript, not ported halfheartedly from some other language" feel. (Well, maybe PHP.)
- ygra 11y agoThat's just adding another conversion from undefined to Number to Int32 for the right operand. You could probably use false as well. Or the empty string.
- Stormcaller 11y agoIts 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-bitwise-operators-runtime-semantics-evaluation http://www.ecma-international.org/ecma-262/6.0/#sec-binary-b...
- jasonkester 11y agoAny 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.
- pakastin 11y agoFont should be Open Sans.. I have Chrome/Mac and it's working :/
- jasonkester 11y agoWhy 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.
- TazeTSchnitzel 11y ago> 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
- mentos 11y agoWould be cool if you could drag select multiple cards to move hands around in the demo.
- pakastin 11y agoYou mean dragging would support multiple touch points..? sounds fun!
- mkorfmann 11y agoReally 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 11y agoYes, have to add that!
- copsarebastards 11y agoMeh, 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.
- marknutter 11y agoMaybe instead of trashing other people's work you could just link to yours instead.
- copsarebastards 11y agoThis is the real world: just because you do work doesn't mean you were working on the right thing, the right way, at the right time, for the right people, etc. Maybe pretending everything is awesome feels good now, but it won't feel good when you're in your 40s with nothing lasting to show for 20 years of professional development work. I won't be linking to my work for 2 reasons: 1. I say unpopular things with this account and value my anonymity. 2. It's completely irrelevant. Posting my work would neither prove that I'm justified in what I said nor disprove what you say. But hey: https://www.youtube.com/watch?v=gSjLiQxEZlM https://www.youtube.com/watch?v=gSjLiQxEZlM
- marknutter 11y agoIt's easy to say unpopular things with an anonymous account, but it kind of takes the weight out of them IMO. Own your opinions, I say.
- copsarebastards 11y agoIt's easy to speak with your real name when don't think for yourself and instead only follow popular opinions, but that makes your opinions kind of worthless IMO. The truth is not always what's popular, I say.
- hotgoldminer 11y agoI want to deal a card game and play with someone. The cards need to be face down though.
- pakastin 11y agoYeah, would be fun!
- almightysmudge 11y agoIt'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?
- TomGullen 11y agoLooks 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 11y agoThat's such a great idea!! :)
- ipsin 11y agoThis 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 11y agoI will add more power to the API..
- kelukelugames 11y agoHow 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.
- prezjordan 11y agoPut some HTML code on the gh-pages branch :) https://github.com/pakastin/deck-of-cards/tree/gh-pages https://github.com/pakastin/deck-of-cards/tree/gh-pages
- pluma 11y agoYou 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 11y agoThanks. I've been manually copying the directories into my gh-pages repo. lol.
- felipeerias 11y agoGreat 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.
- borkabrak 11y agoI 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 11y agoThanks! It's fun to make them as realistic as possible. Usually shuffle animations are a bit plain..
- retrogradeorbit 11y agoThere's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.
- adam12 11y agoIt's done in CSS3 + JS, so it should be pretty easy. https://desandro.github.io/3dtransforms/examples/card-01.html 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 ); }
- chrisseaton 11y agoHe means drawing the complex decorative design on the back of most cards.
- kenbellows 11y agoSure 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.
- halotrope 11y agoWhat is it with cards that everything about them is so satisfying?
- pkstn 11y agoMaybe you begin to think about gambling, women, fast cars, Vegas.. :)
- danvesma 11y agothe 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 11y agoFlash 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.
- pakastin 11y agoThat's now fixed!
- snake117 11y agoThis 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 11y agoThanks! Cool cards!
- linuxlizard 11y agoWhat? No 52 pick up? ;-)
- stevebmark 11y agomy thoughts exactly!
- pakastin 11y agoActually 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) ;)
- deleted 11y ago[deleted]
- AndyKelley 11y agoThis 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.
- rw2 11y agoThis seems to be all static html, why doesn't he just turn the branch into a github page?
- falsedan 11y agoIt is a github page, it's hosted on github.io. The branch is https://github.com/pakastin/deck-of-cards/tree/gh-pages https://github.com/pakastin/deck-of-cards/tree/gh-pages
- AndyKelley 11y agoThere's a node server required too, to coordinate the multiple connected clients.
- gcb0 11y agoyou can still run a demo off github pages without the multiplayer.
- hellbanner 11y agoHm, 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 https://github.com/QuantumProductions/tic-tac-toe
- voltagex_ 11y agoI'd love to build a cribbage game with this as the basis for the UI.
- pakastin 11y agoI have to work hard on API, it's really just barebones at the moment :/
- hissworks 11y agoWay cool! Echoing the sentiments of others who've commented on the fluidity of the motions on display here.
- pakastin 11y agoThanks!
- adamkochanowicz 11y agoMesmerizing.
- pakastin 11y agoThanks!
- kyle_u 11y agoVery 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.
- deleted 11y ago[deleted]
- TimJRobinson 11y agoThis would be awesome for playing Magic The Gathering, grabbing the card art off of the gatherer site.
- pakastin 11y agoI don't know anything about Magic the Gathering, but I will make the API better and the faces more customizable.
- habith 11y agoVery neat! Mind if I borrow some of the CSS for my cards trick[0]? [0] http://cluecode.com/cards/ http://cluecode.com/cards/
- pakastin 11y agoGo for it! ;)
- mschuster91 11y agonitpick: 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 11y agoThat's already on the "todo" list - check out readme ;)
- tripzilch 11y agoKudos for making this run smoothly on my three year old laptop!
- pakastin 11y agoMy MacBook Pro is even older - 3 years is not that much.. But thanks! :)
- donpark 11y agoNice 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/
- doug1001 11y agogorgeous! 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 11y agoThanks! Next I need to make a game out of this :)
- saheb37 11y agoLoved 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 11y agoGlad to hear! Would love if you'd share your work with me. I'm on Twitter @pakastin ;)
- err4nt 11y agoWow! 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!
- deleted 11y ago[deleted]