Deck.of.cards(deck.of.cards)
deck.of.cards
Deck.of.cards
https://deck.of.cards/old/
117 comments
Bit of a nitpicking but the "sort" order is wrong.
New decks come ordered Ace of Spades - King of Spades, Ace of Diamonds - King of Diamonds, King of Clubs - Ace of Clubs, King of Hearts - Ace of Hearts. The deck should start and end with Aces, and have two kings next to each other in the middle.
That is true, i could actually finally fix that..
Any idea why this is the order?
No idea, but it seems like it's intentionally made so that no matter the orientation of the deck (face up or face down), the first card you see (not counting jokers and ad cards) will always de an ace. The two suits of those aces are just the two most liked suits (ace and hearths).
The curious part is that this order doesn't mean anything for card players, in fact it would probably be better for most games if the decks where printed in random order, but for magicians this order is really important for many effects. For example, if you perfectly shuffle the deck 8 times it will go back to it's original order.
The curious part is that this order doesn't mean anything for card players, in fact it would probably be better for most games if the decks where printed in random order, but for magicians this order is really important for many effects. For example, if you perfectly shuffle the deck 8 times it will go back to it's original order.
Old one has better mobile support too
I love the table color and look of the cards here. Also the animations are really cool! I sort of get the feeling this would be a great side-quest in an isometric RPG / world explorer!
Without looking at the code...can I ask you a question? Is the "randomness" "real like a real deck" -- as in, "after shuffle the cards have a certain definite order, which then is unchanged as you select from the deck?" or is the randomness more like a "computerized version", as in, "shuffle is just for show, selecting from the deck just randomly picks 1 out of the set of remaining cards and subtracts that card, in other words-- these is no persistent order?"
Without looking at the code...can I ask you a question? Is the "randomness" "real like a real deck" -- as in, "after shuffle the cards have a certain definite order, which then is unchanged as you select from the deck?" or is the randomness more like a "computerized version", as in, "shuffle is just for show, selecting from the deck just randomly picks 1 out of the set of remaining cards and subtracts that card, in other words-- these is no persistent order?"
It looks like the randomness is generated at shuffle time and then maintained. You can check by hitting « fan » and then « flip » multiple times. It always returns the same card order between shuffles which seems to imply that it’s maintained.
It's fisher-yates with multiple iterations, so should be pretty random
Oh, I don't care how random it is. My interest is when is it random. Do you only shuffle the deck when "shuffle" is performed, and then the shuffled order is preserved until: cards are (re-)moved; deck is shuffled again; etc? (I.e "real world" model).
Or do you shuffle the remaining hidden deck multiple times (so, not when shuffle is explicitly performed, but on other occasions, for example; at intervals; or, after someone pics the top card; etc)?
Or do you shuffle the remaining hidden deck multiple times (so, not when shuffle is explicitly performed, but on other occasions, for example; at intervals; or, after someone pics the top card; etc)?
Oh, only when pressing shuffle. In the new version in multiplayer mode the order is kept on server-side so that players can't cheat..
I found out that if you add about 60 decks and then hit shuffle it breaks physics, space, and time. I am using it to play solitaire now and it works well.
Very cool! How did you implement multiplayer?
It's using socket.io, pretty simple stuff..
Here's the car.js.org server-side as simple example: https://github.com/pakastin/car-ws/blob/master/server/index....
Here's the car.js.org server-side as simple example: https://github.com/pakastin/car-ws/blob/master/server/index....
I played a game of solitaire but as I was moving my kings onto their suit's stack at the end I triggered the joker easter egg and the entire deck got put back into one pile :(
Mentioning this got me to play a game of solitaire with it as well. The primitiveness of it felt oddly fun. An yes, I did the exact same thing when went to put my last king back.
Same! I think it is a solitaire Easter egg.
At some point after a few clicks text comes up which tells you this "secret", so yes, not much hidden easter egg ;)
noooooo :(
Really cool stuff. I like how "heavy" the cards feel during the animation.
I've been working on something similar, but for arbitrary index card notes and played around with some very basic animations. You can see a quick video of it here [1]. After I got a basic prototype working, there was just something satisfying about collecting all the cards, shuffling them, and then re-distributing them into a grid.
I noticed that deck.of.cards doesn't have a flip animation, but maybe that's a good thing. The typical animation you see when a card is just flipped by rotating about one of the axes just "feels" wrong to me. It breaks the illusion somehow, but maybe there's a better way to do it.
[1] https://mastodon.social/@allenu/109952125506805902
Edit: You may need to hover over the GIF in the link to get the animation to start. Kind of unexpected behavior.
I've been working on something similar, but for arbitrary index card notes and played around with some very basic animations. You can see a quick video of it here [1]. After I got a basic prototype working, there was just something satisfying about collecting all the cards, shuffling them, and then re-distributing them into a grid.
I noticed that deck.of.cards doesn't have a flip animation, but maybe that's a good thing. The typical animation you see when a card is just flipped by rotating about one of the axes just "feels" wrong to me. It breaks the illusion somehow, but maybe there's a better way to do it.
[1] https://mastodon.social/@allenu/109952125506805902
Edit: You may need to hover over the GIF in the link to get the animation to start. Kind of unexpected behavior.
What do you think makes them feel heavy? I agree but I can’t put my finger on what it might be.
It's probably the easing function and the fact that cards sort of snap to their final positions and hang out there briefly before moving again, such as in the shuffle animation. It gives them a feeling of friction you wouldn't get if they just moved right away.
Nicely polished, I like it.
EDIT: Turns out the following behavior is intentional, but I'll leave the statement here so the child comments make sense.
I wanted to point out what may be a bug .. if I quickly drag a face-down card off the deck and release the LMB right away, it flips face-up, however if I leave the mouse button depressed for ~0.5s, it stays face-down. Maybe this is intentional, but I feel like it's a bit of a weird behavior either way.
Chrome 111/Windows.
Anyway, thanks for sharing :)
EDIT: Turns out the following behavior is intentional, but I'll leave the statement here so the child comments make sense.
I wanted to point out what may be a bug .. if I quickly drag a face-down card off the deck and release the LMB right away, it flips face-up, however if I leave the mouse button depressed for ~0.5s, it stays face-down. Maybe this is intentional, but I feel like it's a bit of a weird behavior either way.
Chrome 111/Windows.
Anyway, thanks for sharing :)
I think it's a feature, works really nicely on a phone - if you tap, flick the card and quickly release, it lands face up as if you're throwing the card on the table as you deal. Whereas if you drag it more slowly into place, it will remain face down as if you are sliding it on the table. Feels pretty natural on touchscreen.
[deleted]
200 ms to be precise, definitely feature (a reasonable one) and not a bug (:
card.js confirms:
if (isFlippable && Date.now() - starttime < 200) { // flip sides
card.js confirms:
if (isFlippable && Date.now() - starttime < 200) { // flip sides
I don't think that confirms this is not a bug. It's a function that runs on the `mouseup` event, so it's presumably intended to activate on clicks that last less than 200 ms (anything longer is considered a click and drag). This issue triggers as a result of unexpected behavior - a click and drag that lasts less than 200 ms.
whenever i implement 'click' i always check that the final pos of the mouse is within a few pixels of the starting position.
That is better way to do it, i should fix it
[deleted]
[deleted]
Reminds me of Mr. Doob's javascript recreation of winning solitaire
https://mrdoob.com/lab/javascript/effects/solitaire/
https://mrdoob.com/lab/javascript/effects/solitaire/
I tried setting up a game of solitaire (on desktop with a mouse) and it got tedious really fast. What I wished for right away was:
- Ability to drag a selection region and move multiple cards together (like, say, the deck) - Ability to align cards to each other (I found myself testing modifier keys while dragging to see if this was a hidden feature, but alas.)
- Ability to drag a selection region and move multiple cards together (like, say, the deck) - Ability to align cards to each other (I found myself testing modifier keys while dragging to see if this was a hidden feature, but alas.)
I think rather than dragging a region, which might get fiddly, I’d like to be able to hold down on a card and have it make a deck with all of the other cards it’s overlapping.
Also, the cards in the should-be-face-down deck seem to sometimes be face-up when I remove the top card. I played with it a bit before dealing cards, though, like "fan," "sort," "poker," etc, so I'm thinking maybe it doesn't properly reset the face-down-ness when you click "shuffle."
FWIW I don't think the Kings easter egg is a good idea as-is. Maybe require a modifier key like "Click the kings while holding down the `K` key." Otherwise someone might have to click all kings while playing Free Cell and have their game ruined, that's no fun.
FWIW I don't think the Kings easter egg is a good idea as-is. Maybe require a modifier key like "Click the kings while holding down the `K` key." Otherwise someone might have to click all kings while playing Free Cell and have their game ruined, that's no fun.
Shuffling doesn't reset flipped-ness, it looks like "flip" is the only action that puts all the cards facing the same way
Also necessary:
- The ability to shuffle the cards without the jokers.
- The ability to shuffle the cards without the jokers.
I actually often skip this step with real cards. If a joker comes up, toss it and replace it from the deck.
Does anyone know how one might go about implementing a feature like multiple select?
I had a project doing something similar a while back and got pretty stuck on figuring out how to go about it
I had a project doing something similar a while back and got pretty stuck on figuring out how to go about it
Click and drag to select, then click and drag again to move, like how Kinopio does it: https://kinopio.club/, https://blog.kinopio.club/posts/magic-paint-select/
Oh man this would be awesome to have as a shared web space where I could play arbitrary card games with friends like a hyper restricted Tabletop Simulator.
Nice and slick as is, though
Nice and slick as is, though
https://playingcards.io/ worked well for me and my family during the pandemic.
Exactly the same here!
That, but through a federated local bluetooth mesh instead of a server is something that I'd appreciate a lot. Restricted to in-person opportunities, but liberating from not only the need for a deck but also from the need for a reasonably suitable table surface. And obviously a play on the "everybody just starting at their phones instead of interacting" trope.
I’ve been looking around the iOS App Store for exactly that app, for playing multiplayer card games with one dealer while on a train etc. Haven’t found the right thing yet, but the App Store is sooo spammy especially when it comes to card game apps. Does anyone know of such a thing?
(As far as I know, the p2p requirements mean that on iOS at least, this cannot be implemented as a web app. Again, would love to learn that I’m wrong.)
(As far as I know, the p2p requirements mean that on iOS at least, this cannot be implemented as a web app. Again, would love to learn that I’m wrong.)
One might be able to do this with peer to peer networking through WebRTC. You still need a way to send each phone an SDP offer/answer but maybe this could be done with QR codes.
But that still depends on a pre-established route between the devices (shared wifi etc), right? Native apps can do WiFi Direct and BT and whatnot as well.
This could be one of the rare opportunities for more backend-oriented people (well, "non-front-end" people) to make something end-user-interesting by taking some appropriately licenced UI and running with it: put an existing "card table" web client in a tauri app and add some "Desk Area Network" distributed backend.
Might be a fun demonstration project for persons or orgs wanting to show off distributed consistency protocols. You might even add some blockchain to the mix if you have a thing for stale buzzwords. For a company with a product in the distributed consistency field, it could make a nice trade show booth giveaway: "this is actually our product, and you can even challenge each other on the plane back home, that's how special it is"
Might be a fun demonstration project for persons or orgs wanting to show off distributed consistency protocols. You might even add some blockchain to the mix if you have a thing for stale buzzwords. For a company with a product in the distributed consistency field, it could make a nice trade show booth giveaway: "this is actually our product, and you can even challenge each other on the plane back home, that's how special it is"
Cockatrice can do that, configured for magic by default if i remember correctly. Youll have to cough up image files for different card sets.
There is a client and a server, so not super easy, but not hard if you have any sysadmin experience. I had a server up for almost a year once
https://github.com/Cockatrice/Cockatrice
There is a client and a server, so not super easy, but not hard if you have any sysadmin experience. I had a server up for almost a year once
https://github.com/Cockatrice/Cockatrice
The new version is in the root https://deck.of.cards and includes multiplayer ;)
I've been hacking on something like that to learn Phoenix, will post it to HN when it's usable
Something like that could be a fantastic foundation for prototyping deck-based (e.g. Hanabi, Exploding Kittens) board games. With a little automation, you could go from the latest design file to a virtually playable deck in seconds.
that's exactly what https://cardtables.online does
I think the card games here have multi-player options:
https://cardgames.io/
go one level up: https://deck.of.cards/
Aw i was hoping it was gonna go to Gregg Turkington's Deck of Cards project
https://www.heinetwork.tv/episode/deck-of-cards-teaser/
https://www.heinetwork.tv/episode/deck-of-cards-teaser/
I think the website linked might be a tip of the hat to the Turkington cut of Deck of Cards. It wouldn't be the first time; I've seen many other websites posted here that mention "codes", which insiders know are references to another of Gregg's characters, the great agent Kinkton from Decker Classified (15 minutes run time).
Disappointed to see the website doesn't even feature a jitterbug mode as a tip of the hat to The Wizard of Oz (1h 52m)
So.. that's just a card moving simulator ? I am missing something crazy or why does this have that many points on Hacker news ?
Simulating playing cards is surprisingly hard.
Doing so flawlessly at consistent 60fps in a mobile browser is quite the feat, don't you think?
Doing so flawlessly at consistent 60fps in a mobile browser is quite the feat, don't you think?
Can someone explain what the technical challenges are? On first glance this seems like something one could implement on a weekend, I am sure that's not the case.
You can review the source code right here:
https://github.com/deck-of-cards/standard-deck
I'm not sure that there are many technical challenges. It's 10k lines of Javascript, and a ton of that are curly braces or blank whitespace lines.
I certainly don't want to knock the author here. This IS a neat and satisfying little project. But I have to agree with a comment elsewhere in this sub-thread, pointing out that teenagers were making advanced 60fps video games with Flash back in the 1990's.
Between Flash dying, and VB 6 dying, it feels like the ability for community members to simply MAKE SHIT has eroded tremendously. To be fair, a lot of this has to do with Windows declining as a monopoly desktop platform, and the rise of mobile as an alternate platform. Cross-platform is hard, especially across wildly different form factors and user interface types.
But even so, I miss the days of people showing off cool shit all the time. Stuff you could touch, play with, use. Today the showcase is mostly libraries "written in Rust!", that you can use to build other libraries written in Rust. Along with half-baked tools like Flutter and React Native, that are eternally "one year away" from being suitable for desktop apps, and kinda suck compared to the tools we had decades ago.
https://github.com/deck-of-cards/standard-deck
I'm not sure that there are many technical challenges. It's 10k lines of Javascript, and a ton of that are curly braces or blank whitespace lines.
I certainly don't want to knock the author here. This IS a neat and satisfying little project. But I have to agree with a comment elsewhere in this sub-thread, pointing out that teenagers were making advanced 60fps video games with Flash back in the 1990's.
Between Flash dying, and VB 6 dying, it feels like the ability for community members to simply MAKE SHIT has eroded tremendously. To be fair, a lot of this has to do with Windows declining as a monopoly desktop platform, and the rise of mobile as an alternate platform. Cross-platform is hard, especially across wildly different form factors and user interface types.
But even so, I miss the days of people showing off cool shit all the time. Stuff you could touch, play with, use. Today the showcase is mostly libraries "written in Rust!", that you can use to build other libraries written in Rust. Along with half-baked tools like Flutter and React Native, that are eternally "one year away" from being suitable for desktop apps, and kinda suck compared to the tools we had decades ago.
I'm the author of Deck.of.Cards, actually did the first version with Flash back in 2008. I started with Flash back in 1999, working in major ad agencies, and nowadays work as fullstack JS developer / entrepreneur.
This project is just a small experiment of mine, wanted to fiddle around with nicer shuffle animation than what's usually seen, and inspire others as well by sharing the source code.
I've also done https://car.js.org for example, and https://flanets.io – those as well just small side experiments..
But ya, i have to agree we used to see more creative stuff when Flash was still around, and that is sad.
This project is just a small experiment of mine, wanted to fiddle around with nicer shuffle animation than what's usually seen, and inspire others as well by sharing the source code.
I've also done https://car.js.org for example, and https://flanets.io – those as well just small side experiments..
But ya, i have to agree we used to see more creative stuff when Flash was still around, and that is sad.
I assume the Deck of Cards tool was no easier to implement in Flash than in JS?
Well graphics were easier to do as MovieClips, but otherwise not that much of a difference. Maybe overall easier with DOM actually..
It wasn't surprisingly hard back when Flash wasn't ripped from all browsers.
Only if you ignore the flawlessly at 60 fps part.
And the mobile browser part.
Or even the desktop browser part. If you were on Windows or a Mac, maybe you had access to Flash player.
Don't you think it's just neat? I think it's neat.
Flashing back to cards.dll in Windows: https://catonmat.net/cards-dll
Anyone else rather hunt through source code to find the king easter egg than to actually click only kings and nothing in between?
Even easier, just hit the By Suit button at the top and all the kings will be sorted along the right side.
Source code reveals clicking all Kings adds Jokers to the deck, but also clicking all Aces will do the "Winning" sequence from Solitaire, aptly named "startWinning()"
Related:
Multiplayer Deck of Cards - https://news.ycombinator.com/item?id=20067301 - June 2019 (73 comments)
Multiplayer Deck of Cards - https://news.ycombinator.com/item?id=20067301 - June 2019 (73 comments)
Wow, I’ll definitely steal the shuffling animation for https://FreeSolitaire.win/
Thanks for sharing!
Thanks for sharing!
Feel free ;)
Very satisfying animations.
It needs some form of multi-card selection, so that I can grab a stack of cards and move, shuffle, or flip them as a group. I tried to play a game of solitaire, then got to the part where you can reuse the cards in your discard pile, and realized that there was no way to have it shuffle those cards, or even to just flip them all over.
It needs some form of multi-card selection, so that I can grab a stack of cards and move, shuffle, or flip them as a group. I tried to play a game of solitaire, then got to the part where you can reuse the cards in your discard pile, and realized that there was no way to have it shuffle those cards, or even to just flip them all over.
I like that this essentially can simulate any card game.
(Feedback: can't click "sort" on mobile due to placement of git banner.)
(Feedback: can't click "sort" on mobile due to placement of git banner.)
Except card games where you hide your cards from other players (ie. almost all of them)
Try https://deck.of.cards it has multiplayer with "hands" area for four players ;)
.cards is a TLD? What is the pretend use case for that?
Things went bonkers the last round of that. I mean, .google is a TLD.
The upside is that this must be their end game. Can't make it much more liberal than this.
The upside is that this must be their end game. Can't make it much more liberal than this.
The most annoying one was .dev . Overnight, we all had to update our `/etc/hosts`, virtual hosts to use a different extension since .dev became a real thing.
And the most ignored from a while ago: .mobi .
And the most ignored from a while ago: .mobi .
I have no idea, but it was a fun surprise that of.cards was available (not very cheap though). deck.of.cards is actually a subdomain :D
Money?
gambling
Wow, beautiful and polished looking on Firefox.
It would be cool if when I clicked and dragged a card and let go of the mouse button, the cards slid a bit, to simulate them sliding them across the table.
I could see some people not liking that though, best to make it configurable.
It would be cool if when I clicked and dragged a card and let go of the mouse button, the cards slid a bit, to simulate them sliding them across the table.
I could see some people not liking that though, best to make it configurable.
My family would often play cards when we get together. During the height of the pandemic, we would often play on https://playingcards.io.
Super cool, works well on mobile
One (very small) nitpick on mobile: it’s very hard to press the ‘Sort’ button, as the ‘Fork me on GitHub’ logo covers most of the button. Other than that, this is great!
Even smaller nit-pick: what you’re describing would seem to be more “small screen size” rather than “mobile”
Even smaller nit-pick: it would have to be some combination of 'small screen size' and 'vertically-orientated' rather than just 'small screen size' :).
even more teensy weensy nit-pick: if the screen-size is small enough, even horizontal (landscape) orientation wouldn't help :-) :-)
https://www.f2f.games/
multiplayer card games on android. Keep you own hand private. See the cards on the table. Took more than a weekend, but I knew nothing of android or kotlin at the time.
multiplayer card games on android. Keep you own hand private. See the cards on the table. Took more than a weekend, but I knew nothing of android or kotlin at the time.
I tried to launch the links, but when Google Play Store comes it says it is for older versions of Android only (I'm on the latest, 13 )
I like the even more secret Easter egg I found in the source :)
Reminds me of how we used to play board games to pass the time while sailing ships in Ultima Online. Just simple dragging of pieces along a board without restrictions.
The stuff you should know podcast just released an episode on the history of playing cards that was interesting
Using it on a low end mobile device, the smoothness of animations and responsiveness is amazing.
This is neat, how hard would it be to make a 3D version of this, for VR/AR?
Great fun and awesome domain.
Nicely done.
Nicely done.
really cool, you can also check out https://cardtables.online it allows for multiplayer + cams
[deleted]
Upvote for just how smooth animation is. Loved it :)
I like the jokers.
can I put the card back to the deck?
Old one has nicer animation treats, but the new one has multiplayer as well :)