HTML5 Deck of Cards • Hacker News Board

Re: HTML5 Deck of Cards

#61

Post by copsarebastards » Thu, Sep 03, 2015, 4:26 PM UTC

marknutter wrote: post #19

copsarebastards wrote: post #16

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

Maybe instead of trashing other people's work you could just link to yours instead.

This 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

Re: HTML5 Deck of Cards

#62

Post by novaleaf » Thu, Sep 03, 2015, 4:29 PM UTC

DatBear wrote: post #59

riebschlager wrote: post #7

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.

Why not just i % 4?

that would alternate the suit for each card, and all the aces would be the same suit, etc.

Re: HTML5 Deck of Cards

#63

Post by AndyKelley » Thu, Sep 03, 2015, 4:31 PM UTC

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.

Re: HTML5 Deck of Cards

#64

Post by copsarebastards » Thu, Sep 03, 2015, 4:33 PM UTC

Omie6541 wrote: post #26

copsarebastards wrote: post #16

Meh, 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/

Okay, but that doesn't address that it still doesn't have faces on face cards, different numbers of suit icons on each card, etc. There are off-the-shelf stock photo sets that make it easier to tell the difference between the cards.

Re: HTML5 Deck of Cards

#65

Post by voltagex_ » Thu, Sep 03, 2015, 4:34 PM UTC

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

Re: HTML5 Deck of Cards

#66

Post by hissworks » Thu, Sep 03, 2015, 4:35 PM UTC

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

Re: HTML5 Deck of Cards

#67

Post by esprehn » Thu, Sep 03, 2015, 4:44 PM UTC

thomasfoster96 wrote: post #6

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?

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

Re: HTML5 Deck of Cards

#68

Post by ricket » Thu, Sep 03, 2015, 4:49 PM UTC

retrogradeorbit wrote: post #34

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

I had the same thought. You could practice magic tricks if you could flip over the deck and then shuffle and fan it! "Pick a card, any card!"

Re: HTML5 Deck of Cards

#69

Post by adamkochanowicz » Thu, Sep 03, 2015, 4:51 PM UTC

Mesmerizing.

Re: HTML5 Deck of Cards

#70

Post by adamkochanowicz » Thu, Sep 03, 2015, 4:53 PM UTC

takeda wrote: post #46

riebschlager wrote: post #7

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.

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.

suit = Integer(i / 13) suit = Math.floor(i / 13)