Scalable CSS-based Playing Cards(donpark.github.com)
donpark.github.com
Scalable CSS-based Playing Cards
http://donpark.github.com/scalable-css-playing-cards/
6 comments
Great Work. I love these posts on HN where people show case what they hacked on during the weekend. These are the real "builders" or creators out there. And about the negative guys, believe me they have probably never created anything in their life, so don't bother!
Screw these negative guys, this is amazing. Great work! :-)
Thank you for the great work. I've been thinking about doing a simple web-based card game for my friends and me, and not having a good way to show cards in the browser has been my biggest impediment!
How can I use this CardView class? The demo seems to be using the DeckView, but what if I just want to deal five specific cards?
I get weird clipping on the right fourth of the various card symbols.
Chrome 18 on nexus 7.
Issue already filed: https://github.com/donpark/scalable-css-playing-cards/issues...
This is what HN is becoming, CSS playing cards on the front page. (sigh)
OP and author here. I'm a long time HN reader but this is only my second submission. I know my weekend hack is no where near amazing but I think it's useful which is why I intentionally spent extra time making it easy to reuse.
Could you explain what kind of posts you want on HN front page and why my submission is unfit to be on it so I can avoid making the same mistake?
Could you explain what kind of posts you want on HN front page and why my submission is unfit to be on it so I can avoid making the same mistake?
The face cards appear to be rendering as PNG instead of SVG. Additionally, it would be cool to render the flip as a CSS 3d transform transition and fall back to jQuery flippy where not supported.
Also, I'm not sure about the mustache.js + hogan.js + jquery + backbone combo. That's a whole lotta libraries for something that would take around 20 lines in d3.js.
I don't mean this to put you down, but there are different ways of thinking of problems and you are approaching an interface/visualization problem from a templating background (which is possible, but not ideal).
Also, I'm not sure about the mustache.js + hogan.js + jquery + backbone combo. That's a whole lotta libraries for something that would take around 20 lines in d3.js.
I don't mean this to put you down, but there are different ways of thinking of problems and you are approaching an interface/visualization problem from a templating background (which is possible, but not ideal).
I went with PNG over SVG because I wanted to keep things unfancy until later given that SVG versions are much bigger than PNG versions and I've heard rumors of SVG issues on Mobile Safari. Optional SVG support will likely be added later.
Re unnecessary rigging (hogan.js, jquery, backbone), they're there because this hack was original built as part of a larger project. I'll be tearing them out as time allows because they're definitely not needed.
Re d3 and approaching problem differently, I wholeheartedly agree. I'll be happy to use a 20 line d3.js version if someone comes up with one. :-)
Re unnecessary rigging (hogan.js, jquery, backbone), they're there because this hack was original built as part of a larger project. I'll be tearing them out as time allows because they're definitely not needed.
Re d3 and approaching problem differently, I wholeheartedly agree. I'll be happy to use a 20 line d3.js version if someone comes up with one. :-)
Unlike some, I see no problem with this being on the front page. That said, I do have a question, why is the '10' smaller than the other numbers? This seems to be the same with the cards you forked.
Ah, yes. I'm not certain why the original version did that but when I changed it to same size as others, 10 card 'stuck out' like a sore thumb. I'm thinking about either switching to a narrower version of Helvetica like real poker cards do.
Please do try your own variations and make suggestions. Thx.
Please do try your own variations and make suggestions. Thx.
If there is anything wrong with HN, you're it. The OP posted something that is well done, that (s)he spent the weekend working on, and is getting constructive feedback from everyone in the thread except you. But, since you seem to have crowned yourself the Arbiter of Quality, let's take a look at what you've contributed, shall we?
1. A python script to download free PSDs in bulk. 2. Two links to some DNS website (with a total of 3 votes and 0 comments) 3. A blog post talking about President Obama and renewable energy. 4. Hilariously, you also posted a meme about user negativity v. HN quality: http://memegraphs.com/memes/729c21bf62f51120855f5b5a8794b2fc...
So before you make snarky comments about how bad HN has become, maybe you should actually try contributing something of value.
Or leave. Either one would be a net gain for the rest of us.
1. A python script to download free PSDs in bulk. 2. Two links to some DNS website (with a total of 3 votes and 0 comments) 3. A blog post talking about President Obama and renewable energy. 4. Hilariously, you also posted a meme about user negativity v. HN quality: http://memegraphs.com/memes/729c21bf62f51120855f5b5a8794b2fc...
So before you make snarky comments about how bad HN has become, maybe you should actually try contributing something of value.
Or leave. Either one would be a net gain for the rest of us.
I think this is pretty awesome. Suggestion: the face cards need to be redone in SVG or something scalable.